/* ══ MOBILE HAMBURGER NAV ══
   Shared across all pages. Adds hamburger menu for ≤768px.
   Desktop nav is completely untouched.
*/

/* Hamburger button — hidden on desktop */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
}
.hamburger-btn svg {
    width: 26px;
    height: 26px;
    stroke: var(--bark, #5C4033);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}
.hamburger-btn .hamburger-line {
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}
/* Animate to X when open */
nav.nav-open .hamburger-btn .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
nav.nav-open .hamburger-btn .hamburger-line:nth-child(2) {
    opacity: 0;
}
nav.nav-open .hamburger-btn .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay backdrop */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(92, 64, 51, 0.2);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nav-overlay.visible {
    opacity: 1;
}

/* ══ MOBILE: ≤768px ══ */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The nav links container — hidden by default on mobile */
    nav .nav-links {
        display: none !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        max-width: 85vw;
        height: 100dvh;
        background: var(--cream, #FDF6EC);
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 80px 24px 40px !important;
        z-index: 1000;
        box-shadow: -4px 0 24px rgba(92, 64, 51, 0.15);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    /* When menu is open — raise nav stacking context above all page content.
       Overlay is now INSIDE nav, so nav-links (z-index:1000) > overlay (z-index:999)
       within the same stacking context. Nav at 10000 ensures it covers everything. */
    nav.nav-open {
        z-index: 10000 !important;
    }

    /* When menu is open */
    nav.nav-open .nav-links {
        display: flex !important;
        transform: translateX(0);
    }

    /* Animate in after display is set */
    nav.nav-open .nav-links.nav-animating {
        transform: translateX(0);
    }

    .nav-overlay.active {
        display: block;
    }

    /* Nav link items in mobile menu */
    nav .nav-links a {
        display: block !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        color: var(--bark-light, #7A6555) !important;
        text-decoration: none !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        transition: background-color 0.2s, color 0.2s !important;
        white-space: nowrap;
    }
    nav .nav-links a:hover,
    nav .nav-links a:active {
        background-color: rgba(232, 196, 184, 0.4) !important;
        color: var(--bark, #5C4033) !important;
        text-decoration: none !important;
    }
    nav .nav-links a.active {
        background-color: rgba(232, 196, 184, 0.5) !important;
        color: var(--bark, #5C4033) !important;
        font-weight: 600 !important;
    }
}

/* ══ DESKTOP: >768px — ensure no interference ══ */
@media (min-width: 769px) {
    .hamburger-btn {
        display: none !important;
    }
    .nav-overlay {
        display: none !important;
    }
}