/* ==========================================================================
   Mobile navigation + touch enhancements
   Progressive enhancement layer loaded on every page (after inline styles).
   The .nav-toggle button is injected by assets/js/mobile-nav.js.
   ========================================================================== */

/* Reduce the 300ms tap delay and avoid grey tap flashes on touch devices */
a,
button,
.nav-toggle {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Never let a page scroll sideways on a phone.
   overflow-x: clip is used (not hidden) so it doesn't break the sticky header. */
body {
    max-width: 100%;
    overflow-x: clip;
}

/* --- Hamburger button (hidden on desktop, shown on mobile) --------------- */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1100;
}

.nav-toggle-bar {
    display: block;
    width: 26px;
    height: 3px;
    margin: 5px auto;
    background: #1a472a;
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Animate the bars into an "X" when the menu is open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-toggle:focus-visible {
    outline: 2px solid #2d5a3d;
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- Phone layout ------------------------------------------------------- */
@media (max-width: 768px) {
    nav {
        position: relative;
        flex-wrap: nowrap;
    }

    .nav-toggle {
        display: block;
    }

    /* Turn the inline link list into a full-width dropdown panel */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0.25rem 0;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.25s ease;
    }

    .nav-links.is-open {
        max-height: 85vh;
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 0.9rem 1.5rem;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-links li:last-child a {
        border-bottom: 0;
    }

    .nav-links a:active {
        background: #eef3ef;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .nav-toggle-bar,
    .nav-links {
        transition: none;
    }
}