/**
 * Site-wide mobile refinements — loaded via styles.css
 * Safe areas, touch targets, layout fixes for ≤768px and ≤480px
 */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --nav-height-mobile: calc(64px + var(--safe-top));
    --page-gutter: max(1rem, var(--safe-left));
    --page-gutter-right: max(1rem, var(--safe-right));
}

/* ── Tablets & phones ── */
@media (max-width: 768px) {

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body.nav-open {
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    .container,
    .nav-container,
    .landing-container {
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter-right);
    }

    /* Navbar */
    .navbar {
        padding-top: calc(0.5rem + var(--safe-top));
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .logo-container {
        left: var(--page-gutter);
    }

    .hamburger {
        right: var(--page-gutter-right);
    }

    .nav-menu {
        top: var(--nav-height-mobile);
        max-height: calc(100dvh - var(--nav-height-mobile));
        padding-bottom: calc(1.25rem + var(--safe-bottom));
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter-right);
        text-align: left;
        align-items: stretch;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu li {
        text-align: left;
    }

    .nav-link {
        text-align: left;
        padding: 0.875rem 0.25rem;
    }

    .dropdown-toggle {
        justify-content: space-between;
        padding: 0.875rem 0.25rem;
        text-align: left;
    }

    .nav-menu li:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    .dropdown-menu {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .dropdown-link {
        min-height: 44px;
    }

    /* Footer */
    .footer {
        padding-bottom: calc(clamp(1.25rem, 3vw, 1.75rem) + var(--safe-bottom));
    }

    .footer-top {
        gap: 2rem;
    }

    .footer-brand-desc {
        max-width: none;
    }

    .footer-cta-text {
        max-width: none;
    }

    .footer-social {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .social-link,
    .footer-legal-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .footer-legal-links {
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
    }

    /* Modal — bottom sheet on small screens */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-height: min(92dvh, 720px);
        border-radius: 0;
        padding: 1.35rem 1.25rem calc(1.25rem + var(--safe-bottom));
        margin: 0;
    }

    .modal-title {
        font-size: 1.35rem;
        padding-right: 2.5rem;
    }

    .modal-form input,
    .modal-form textarea {
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    /* Blog */
    .blog-section {
        padding: calc(96px + var(--safe-top)) 0 60px;
        min-height: 0;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .blog-card-content {
        padding: 1.25rem;
    }

    .blog-main-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .blog-post-header,
    .blog-post-content,
    .blog-post-footer {
        padding: 1.5rem var(--page-gutter);
    }

    .blog-post-content {
        font-size: 1rem;
    }

    .blog-post-content pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Portfolio */
    .portfolio-proof,
    .portfolio-hero {
        padding: calc(104px + var(--safe-top)) 0 48px;
    }

    .portfolio-title {
        font-size: clamp(1.85rem, 7.5vw, 2.75rem);
    }

    .portfolio-statement {
        font-size: 1rem;
        line-height: 1.65;
    }

    .portfolio-proof,
    .portfolio-highlights,
    .portfolio-audits-section,
    .portfolio-competitions-section,
    .portfolio-bugbounties-section,
    .portfolio-contact-section {
        padding: 3.5rem 0;
    }

    .portfolio-table-container {
        padding: 0.75rem 0.75rem 1.75rem;
        margin-left: calc(-1 * var(--page-gutter));
        margin-right: calc(-1 * var(--page-gutter-right));
        border-radius: 0;
        border-left: none;
        border-right: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .portfolio-table {
        min-width: 680px;
    }

    .portfolio-table-wide {
        min-width: 900px;
    }

    .portfolio-table th,
    .portfolio-table td {
        padding: 0.7rem 0.55rem;
        font-size: 0.8125rem;
    }

    .portfolio-section-header {
        margin-bottom: 1.5rem;
    }

    .portfolio-contact-content {
        padding: 2rem 1.25rem;
    }

    /* Service & pricing pages */
    .pricing-hero {
        padding: calc(96px + var(--safe-top)) 0 48px;
    }

    .pricing-hero .portfolio-buttons,
    .portfolio-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .pricing-hero .portfolio-buttons .btn,
    .portfolio-buttons .btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-card {
        padding: 1.35rem;
    }

    .engagements-header {
        text-align: left;
    }

    .engagements-header h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .engagements-header p {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid,
    .comparison-grid {
        gap: 1rem;
    }

    .pricing-card {
        padding: 1.35rem;
    }

    .cta-buttons {
        width: 100%;
    }

    .cta-buttons .btn {
        max-width: none;
    }

    /* Audit process */
    .page-audit-process .process-intro,
    .audit-process-hero {
        padding: calc(88px + var(--safe-top)) 0 28px;
    }

    .page-audit-process .process-title,
    .audit-process-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .audit-process-subtitle {
        font-size: 1rem;
        line-height: 1.65;
        padding: 0 0.25rem;
    }

    .audit-timeline-section {
        padding: 12px 0 64px;
    }

    .audit-tl-card {
        padding: 1rem;
    }

    /* Legal */
    .legal-section {
        padding: calc(96px + var(--safe-top)) 0 48px;
    }

    .legal-header {
        margin-bottom: 2rem;
    }

    .legal-title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .legal-body {
        padding: 1.35rem 1.15rem;
        border-radius: 0;
    }

    .legal-section h2 {
        font-size: 1.2rem;
        margin-top: 1.75rem;
    }

    /* Careers */
    .careers-hero,
    .contact-hero {
        padding-top: calc(96px + var(--safe-top));
    }

    /* Homepage hero — mobile */
    .page-home .landing-section .landing-container {
        padding-left: max(0.35rem, var(--safe-left));
        padding-right: max(0.35rem, var(--safe-right));
    }

    .page-home .landing-split {
        gap: 0.85rem;
    }

    .page-home .landing-copy,
    .page-home .content-wrapper {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .page-home .landing-buttons {
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .page-home .landing-logo-panel {
        height: clamp(210px, 36vh, 300px);
        min-height: 0;
        max-height: none;
        width: calc(100% + 0.75rem);
        margin-top: -1.5rem;
        margin-left: -0.375rem;
        margin-right: -0.375rem;
        margin-bottom: -0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .page-home .landing-logo-panel canvas {
        width: 100%;
        height: 100%;
    }

    /* Generic buttons & touch */
    .btn {
        min-height: 44px;
    }

    a,
    button {
        -webkit-tap-highlight-color: transparent;
    }

    /* Disable hover lift on touch devices */
    .pricing-card:hover,
    .blog-card:hover,
    .service-card:hover {
        transform: none;
    }
}

/* ── Small phones ── */
@media (max-width: 480px) {

    :root {
        --page-gutter: max(0.875rem, var(--safe-left));
        --page-gutter-right: max(0.875rem, var(--safe-right));
    }

    .logo {
        height: 36px;
    }

    .page-home .landing-logo-panel {
        height: clamp(190px, 34vh, 260px);
        width: calc(100% + 0.5rem);
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

    .portfolio-table {
        min-width: 580px;
    }

    .finding-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.45rem;
    }

    .highlight-card {
        padding: 1.35rem 1.15rem;
    }

    .section-title {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
    }

    .legal-body {
        padding: 1.15rem 1rem;
    }

    .footer-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

.portfolio-table-scroll-hint {
    display: none;
    margin: 0.75rem 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

@media (max-width: 768px) {
    .portfolio-table-scroll-hint {
        display: block;
    }
}

/* Homepage hero — fill first screen so metrics stay below the fold */
.page-home .landing-section {
    min-height: 100svh;
    min-height: 100dvh;
    min-height: 100vh;
    box-sizing: border-box;
}