/* =====================================================================
   nav-mobile.css  —  injected by nav.js on every page
   ===================================================================== */

/* ---- Hamburger button (hidden on desktop) ---- */
#nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
}
#nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.18s ease;
    transform-origin: center;
}
body.nav-open #nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open #nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open #nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Overlay menu: sized to its links only, not the full screen, so the
   page behind shows through below the last link ---- */
#nav-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    z-index: 999;
    background: #00462c;
    flex-direction: column;
    overflow-y: auto;
    /* padding-top is set via JS to clear below the header */
}
#nav-mobile-menu a {
    display: block;
    font-family: 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    padding: 20px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    -webkit-tap-highlight-color: transparent;
}
#nav-mobile-menu a:active {
    background: rgba(255,255,255,0.1);
}

/* ---- Mobile breakpoint ---- */
@media (max-width: 768px) {
    /* Hide desktop nav links */
    .top-nav { display: none !important; }

    /* Show hamburger */
    #nav-hamburger { display: flex; }

    /* Show overlay when open */
    body.nav-open #nav-mobile-menu { display: flex; }

    /* Ensure header sits above the overlay */
    .page-header,
    .hero-header {
        position: relative !important;
        z-index: 1000 !important;
        border-bottom-width: 13.8px !important;   /* dark stripe: 12px +15% */
        padding-top: 18.4px !important;           /* header bar: 16px +15% */
        padding-bottom: 18.4px !important;
    }

    /* While the popup menu is open, pin the header (logo + close button) to
       the top so it never scrolls away, no matter how far down the page/menu
       you scroll. Sticky isn't enough here — it only holds within its own
       containing block (the hero section), so it would still let go once
       you scroll past the hero's own height. Fixed has no such limit.
       Closing the menu drops this rule and restores normal scroll-away
       behavior above. */
    body.nav-open .page-header,
    body.nav-open .hero-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Logo on mobile (3.75rem, then +15% to fill the taller header) */
    .logo { height: 4.3125rem !important; }

    /* Global touch-friendly inputs and buttons */
    input, select, textarea {
        font-size: 16px !important; /* prevents iOS auto-zoom */
        border-radius: 6px;
    }
    button, .btn, .nav-button {
        min-height: 44px;
    }
}