/* ============================================================
   MOBILE SIDE DRAWER NAVIGATION
   Replace / append after your existing nav styles in style.css
   Applies at ≤1024px (your existing breakpoint)
   ============================================================ */

/* ── Overlay backdrop ── */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 26, 29, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 999998;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nav-overlay.active {
    display: block;
    opacity: 1;
}

/* ── Drawer panel ── */
@media screen and (max-width: 1024px) {

    /* Remove the old dropdown positioning */
    .main-navigation:not(.toggled) .menu-main-nav-container {
        display: none;
        /* keep hidden when closed */
    }
    .main-navigation {
        position: relative;
        /* establish containing block for absolute/fixed children */
        z-index: 999999;
    }
    .main-navigation.toggled .menu-main-nav-container {
        /* Override old absolute dropdown — now a fixed side panel */
        position: fixed;
        top: 0;
        left: 0;
        width: min(320px, 85vw);
        height: 100dvh;
        height: 100vh;
        /* fallback */
        margin-top: 0;
        border-radius: 0 24px 24px 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        box-shadow: 4px 0 32px rgba(6, 26, 29, 0.18);
        z-index: 999999;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;

        /* Slide-in animation */
        transform: translateX(-100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;

        /* Match brand background */
        background-color: var(--color-white, #fff);
    }

    /* When drawer is open: slide to visible position */
    .main-navigation.toggled .menu-main-nav-container.drawer-open {
        transform: translateX(0);
    }

    /* Drawer inner menu list */
    .main-navigation.toggled .menu-main-nav-container .menu {
        flex-direction: column;
        gap: 0;
        padding: 63px 0 32px 0;
        background-color: transparent;
        border-radius: 0;
        align-items: stretch;
        width: 100%;
    }

    /* Top drawer header bar with logo area and close button */
    .drawer-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        border-bottom: 1px solid var(--color-dark-20, #E6E8E8);
        background: var(--color-primary, #ffe96d);
    }

    .drawer-header-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-dark, #061A1D);
    }

    .drawer-close-btn {
        background: var(--color-dark, #061A1D);
        border: none;
        color: var(--color-primary, #ffe96d);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transition: background 0.2s, transform 0.2s;
        flex-shrink: 0;
    }
    .drawer-close-btn:hover {
        background: var(--color-accent, #FF5154);
        transform: rotate(90deg);
    }

    /* Top-level menu items */
    .main-navigation.toggled .menu-main-nav-container .menu>li {
        border-bottom: 1px solid var(--color-dark-20, #E6E8E8);
    }
    .main-navigation.toggled .menu-main-nav-container .menu>li:last-child {
        border-bottom: none;
    }

    .main-navigation.toggled .menu-main-nav-container .menu>li>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-dark, #061A1D);
        transition: background 0.15s, color 0.15s, padding-left 0.15s;
    }
    .main-navigation.toggled .menu-main-nav-container .menu>li>a:hover,
    .main-navigation.toggled .menu-main-nav-container .menu>li.current-menu-item>a,
    .main-navigation.toggled .menu-main-nav-container .menu>li.current-menu-parent>a {
        background: var(--color-light-yellow, #fff7c7);
        padding-left: 32px;
        color: var(--color-dark, #061A1D);
    }

    /* Parent li becomes a flex row: link on left, chevron button on right */
    .main-navigation.toggled .menu>li.menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .main-navigation.toggled .menu>li.menu-item-has-children>a {
        flex: 1;
    }
    /* Sub-menu spans full width below the flex row */
    .main-navigation.toggled .menu>li.menu-item-has-children>.sub-menu {
        width: 100%;
    }

    /* Chevron toggle button (injected by JS) */
    .main-navigation.toggled .sub-menu-toggle {
        background: none;
        border: none;
        border-left: 1px solid var(--color-dark-20, #E6E8E8);
        cursor: pointer;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-dark, #061A1D);
        transition: background 0.15s;
        flex-shrink: 0;
    }
    .main-navigation.toggled .sub-menu-toggle:hover {
        background: var(--color-primary, #ffe96d);
    }
    .main-navigation.toggled .sub-menu-toggle i {
        font-size: 11px;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .main-navigation.toggled .menu>li.sub-open>.sub-menu-toggle i {
        transform: rotate(-180deg);
    }

    /* Sub-menu: collapsible accordion */
    .main-navigation.toggled ul.sub-menu {
        display: none !important;
        /* hidden by default — JS toggles */
        flex-direction: column;
        gap: 0;
        position: relative;
        float: none;
        left: auto;
        top: auto;
        box-shadow: none;
        background: var(--color-dark-5, #F2F3F3);
        border-radius: 0;
        padding: 0;
    }
    .main-navigation.toggled ul.sub-menu.sub-open {
        display: flex !important;
    }
    .main-navigation.toggled ul.sub-menu li {
        display: block;
        border-top: 1px solid var(--color-dark-20, #E6E8E8);
    }
    .main-navigation.toggled ul.sub-menu li:before {
        content: none;
        /* remove the dot bullet */
    }
    .main-navigation.toggled ul.sub-menu a {
        display: block;
        padding: 13px 24px 13px 40px;
        font-size: 14px;
        font-weight: 400;
        min-width: 0;
        color: var(--color-dark, #061A1D);
        transition: background 0.15s, padding-left 0.15s;
        text-align: left;
    }
    .main-navigation.toggled ul.sub-menu a:hover {
        background: var(--color-primary, #ffe96d);
        padding-left: 50px;
    }

    /* ── Menu toggle button tweaks (hamburger) ── */
    .menu-toggle {
        position: relative;
        z-index: 10;
        width: 43px;
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
    }
    .menu-toggle:hover {
        background-color: var(--color-primary, #ffe96d);
    }
    .menu-toggle .fa-bars,
    .menu-toggle .fa-xmark {
        font-size: 18px;
        color: var(--color-dark, #061A1D);
        transition: opacity 0.15s, transform 0.2s;
    }

    /* ── Prevent body scroll when drawer is open ── */
    body.drawer-is-open {
        overflow: hidden;
    }

    /* ── Sticky nav: keep toggle accessible above drawer ── */
    .main-navigation.sticky {
        z-index: 1000;
    }
}

/* ── Chevron toggle button (injected by JS next to parent links) ── */
@media screen and (max-width: 1024px) {

    /* Parent link row: link takes all space, chevron is a fixed tap target */
    .main-navigation.toggled .menu>li {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .main-navigation.toggled .menu>li>a {
        flex: 1 1 auto;
        /* Remove the old ::after chevron — now handled by the button */
    }

    /* Hide old CSS ::after chevron since we have a real button now */
    .main-navigation.toggled .menu>li.menu-item-has-children>a::after {
        display: none;
    }

    .sub-menu-toggle {
        flex: 0 0 48px;
        width: 48px;
        background: transparent;
        border: none;
        border-left: 1px solid var(--color-dark-20, #E6E8E8);
        color: var(--color-dark, #061A1D);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: background 0.15s, color 0.15s;
    }

    .sub-menu-toggle:hover {
        background: var(--color-primary, #ffe96d);
    }

    .sub-menu-toggle i {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    /* Rotate chevron when open */
    .menu-item-has-children.sub-open>.sub-menu-toggle i {
        transform: rotate(-180deg);
    }

    /* Sub-menu spans full width */
    .main-navigation.toggled ul.sub-menu {
        flex-basis: 100%;
    }
}