/**
 * BSMC Marketing Nav — dropdowns + mobile drawer.
 *
 * Styles the shared marketing header's nav across two modes:
 *   Desktop (>= 900px): flex row of top-level items, submenus drop
 *     down on hover / focus-within, chevron rotates when open.
 *   Mobile (< 900px):   hamburger opens a full-height slide-in
 *     drawer; submenus become accordions with chevron toggle buttons.
 *
 * Accessibility:
 *   - Hamburger is a real <button aria-expanded aria-controls>.
 *   - Chevron toggle is a sibling <button aria-expanded aria-controls>
 *     injected by marketing-nav.js next to each parent item's anchor.
 *   - Drawer gets role="dialog"/aria-modal via JS when open.
 *   - Visible focus outlines on every interactive element (gold ring).
 *   - Backdrop click + Escape both close.
 *   - prefers-reduced-motion disables the slide/rotate transitions.
 *
 * Load order note: this file overrides base .bsmc-mhome__nav / __nav-link
 * rules from home-public.css, so it must enqueue AFTER home-public. See
 * functions.php enqueue for the dependency chain.
 */

/* ─── Menu list container (WP nav menu <ul>) ──────────────────── */
.bsmc-mhome__nav .bsmc-mhome__menu,
.bsmc-mhome__nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
.bsmc-mhome__nav .menu-item {
    position: relative;
    display: flex;
    align-items: center;
}
.bsmc-mhome__nav .menu-item > a {
    /* nav_menu_link_attributes filter already adds bsmc-mhome__nav-link,
       so the parent theme's font/color styling takes over. Only nudge
       the anchor's box-model here so it plays nicely with the chevron. */
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
    white-space: nowrap;
}

/* ─── Chevron toggle button (injected by JS) ──────────────────── */
.bsmc-mhome__submenu-toggle {
    /* Sibling of the parent anchor. On desktop it's decorative-ish
       (submenu opens on hover), but still a real focusable control so
       keyboard + touch users can toggle it. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.15s ease, transform 0.2s ease;
}
.bsmc-mhome__submenu-toggle:hover,
.bsmc-mhome__submenu-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: 2px solid #C8A96E;
    outline-offset: 2px;
}
.bsmc-mhome__submenu-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    pointer-events: none;
}
/* Chevron rotates when the submenu is open (state on the parent <li>). */
.bsmc-mhome__nav .menu-item.is-open > .bsmc-mhome__submenu-toggle svg,
.bsmc-mhome__nav .menu-item-has-children:hover > .bsmc-mhome__submenu-toggle svg,
.bsmc-mhome__nav .menu-item-has-children:focus-within > .bsmc-mhome__submenu-toggle svg {
    transform: rotate(180deg);
}

/* ─── Focus outlines for every anchor + button (WCAG) ─────────── */
.bsmc-mhome__nav a:focus-visible,
.bsmc-mhome__hamburger:focus-visible {
    outline: 2px solid #C8A96E;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
 * DESKTOP (>= 900px)
 * ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    .bsmc-mhome__hamburger { display: none; }
    .bsmc-mhome__backdrop  { display: none !important; }
    .bsmc-mhome__drawer-close { display: none; }

    /* Sub-menu: absolute-positioned dropdown under its parent. Opens on
       hover OR keyboard focus-within OR explicit .is-open class. */
    .bsmc-mhome__nav .sub-menu {
        list-style: none;
        margin: 0;
        padding: 10px 0;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        background: #0e0e0e;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    }
    .bsmc-mhome__nav .menu-item-has-children:hover > .sub-menu,
    .bsmc-mhome__nav .menu-item-has-children:focus-within > .sub-menu,
    .bsmc-mhome__nav .menu-item.is-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
    }
    /* Nested (2nd-level) submenu: fly out to the right of its parent. */
    .bsmc-mhome__nav .sub-menu .sub-menu {
        top: 0;
        left: 100%;
        margin-left: 1px;
    }
    .bsmc-mhome__nav .sub-menu .menu-item {
        display: block;
        width: 100%;
    }
    .bsmc-mhome__nav .sub-menu .menu-item > a {
        display: block;
        width: 100%;
        padding: 9px 20px;
        font-size: 13px !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase;
        color: #edeadf !important;
    }
    .bsmc-mhome__nav .sub-menu .menu-item > a:hover,
    .bsmc-mhome__nav .sub-menu .menu-item > a:focus-visible {
        color: #C8A96E !important;
        background: rgba(255, 255, 255, 0.05);
    }
    /* Submenu chevron on desktop: small right-arrow for nested items. */
    .bsmc-mhome__nav .sub-menu .menu-item-has-children > .bsmc-mhome__submenu-toggle {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
    }
    .bsmc-mhome__nav .sub-menu .menu-item-has-children:hover > .bsmc-mhome__submenu-toggle svg {
        transform: rotate(0);   /* nested rotate handled by state, not hover */
    }
}

/* ═══════════════════════════════════════════════════════════════
 * MOBILE (< 900px) — hamburger + slide-in drawer
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
    .bsmc-mhome__hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-left: auto;   /* pushes hamburger to the right if grid falls back */
        background: transparent;
        border: 0;
        color: #edeadf;
        cursor: pointer;
        border-radius: 4px;
        justify-self: end;
    }
    .bsmc-mhome__hamburger:hover { background: rgba(255, 255, 255, 0.08); }

    /* Three-bar icon, morphs into an X when the drawer is open. */
    .bsmc-mhome__hamburger-lines {
        position: relative;
        display: inline-block;
        width: 24px;
        height: 18px;
    }
    .bsmc-mhome__hamburger-lines > span {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
    }
    .bsmc-mhome__hamburger-lines > span:nth-child(1) { top: 0; }
    .bsmc-mhome__hamburger-lines > span:nth-child(2) { top: 8px; }
    .bsmc-mhome__hamburger-lines > span:nth-child(3) { top: 16px; }
    .bsmc-mhome__hamburger[aria-expanded="true"] .bsmc-mhome__hamburger-lines > span:nth-child(1) {
        top: 8px; transform: rotate(45deg);
    }
    .bsmc-mhome__hamburger[aria-expanded="true"] .bsmc-mhome__hamburger-lines > span:nth-child(2) {
        opacity: 0;
    }
    .bsmc-mhome__hamburger[aria-expanded="true"] .bsmc-mhome__hamburger-lines > span:nth-child(3) {
        top: 8px; transform: rotate(-45deg);
    }

    /* Dark backdrop under the drawer — click to close. */
    .bsmc-mhome__backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .bsmc-mhome__backdrop.is-open {
        opacity: 1;
    }

    /* The drawer itself. Slides in from the right. */
    .bsmc-mhome__nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 84vw);
        max-width: 100vw;
        background: #0e0e0e;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 76px 0 40px;   /* room for the close button + comfortable bottom */
        overscroll-behavior: contain;
    }
    .bsmc-mhome__nav.is-open {
        transform: translateX(0);
    }

    /* When the drawer is closed, hide from ATs without display:none so
       transitions still work. JS toggles aria-hidden. */
    .bsmc-mhome__nav[aria-hidden="true"] { visibility: hidden; }
    .bsmc-mhome__nav.is-open,
    .bsmc-mhome__nav[aria-hidden="false"] { visibility: visible; }

    /* Menu list becomes a vertical column inside the drawer. */
    .bsmc-mhome__nav .bsmc-mhome__menu,
    .bsmc-mhome__nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .bsmc-mhome__nav .menu-item {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .bsmc-mhome__nav .menu-item > a {
        display: block;
        padding: 16px 24px;
        font-size: 16px !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase;
        color: #edeadf !important;
    }
    .bsmc-mhome__nav .menu-item > a:hover,
    .bsmc-mhome__nav .menu-item > a:focus-visible {
        color: #C8A96E !important;
        background: rgba(255, 255, 255, 0.04);
    }

    /* Chevron on mobile — bigger tap target, sits inline with the parent
       anchor so parent link is still clickable independently of toggle. */
    .bsmc-mhome__nav .menu-item-has-children {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .bsmc-mhome__nav .menu-item-has-children > a {
        grid-column: 1;
    }
    .bsmc-mhome__nav .menu-item-has-children > .bsmc-mhome__submenu-toggle {
        grid-column: 2;
        width: 56px;
        height: 100%;
        min-height: 52px;
        margin: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
    }
    .bsmc-mhome__nav .menu-item-has-children > .bsmc-mhome__submenu-toggle:hover {
        background: rgba(255, 255, 255, 0.06);
    }
    .bsmc-mhome__nav .menu-item-has-children > .sub-menu {
        grid-column: 1 / -1;
        list-style: none;
        margin: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.4);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .bsmc-mhome__nav .menu-item-has-children.is-open > .sub-menu {
        max-height: 800px;   /* generous cap; big enough for any real menu */
    }
    .bsmc-mhome__nav .sub-menu .menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .bsmc-mhome__nav .sub-menu .menu-item:last-child { border-bottom: 0; }
    .bsmc-mhome__nav .sub-menu .menu-item > a {
        padding: 14px 24px 14px 40px;
        font-size: 14px !important;
    }
    /* Nested-nested submenu — indent further */
    .bsmc-mhome__nav .sub-menu .sub-menu .menu-item > a {
        padding-left: 56px;
    }

    /* Lock body scroll while drawer is open — added by JS as a class. */
    body.bsmc-mhome__scroll-locked {
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * DRAWER POLISH (< 900px)
 * ═══════════════════════════════════════════════════════════════
 * Two of these are bug fixes, not decoration:
 *
 * 1. The header carried no z-index, while the backdrop is 998 and the
 *    drawer 999 — so the whole header, hamburger included, sat UNDER the
 *    backdrop once the drawer opened. The X was dimmed by the 55% black
 *    scrim and could not be tapped; only Escape or a backdrop tap closed
 *    the drawer. Meanwhile the drawer reserved 76px of top padding "for
 *    the close button", leaving a dead gap with nothing in it. Lifting
 *    the header above the drawer puts the X back on top of that gap,
 *    which is what the padding was always for.
 *
 * 2. The auth links (My Membership / Join BSMC | Log In) are direct
 *    children of <nav>, not part of the <ul>, so none of the drawer's
 *    menu-item rules reached them. They rendered as bare inline text with
 *    a "|" between, jammed under the last menu row. They're now stacked
 *    CTAs pinned to the bottom of the drawer.
 */
@media (max-width: 899px) {

    /* --- 1. Close button, inside the drawer ---
     * Previously the only "close" was the header's hamburger morphing into
     * an X. That was unreachable in two ways: the header sat under the
     * z-998 backdrop, and — more fundamentally — the header is
     * position:relative, so opening the drawer after scrolling down left
     * the X off-screen with no way back except Escape or a backdrop tap.
     * Neither is discoverable on a phone. The drawer now carries its own
     * button and the header is left under the scrim like any modal. */
    .bsmc-mhome__drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: 0 14px 6px 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 2px;
        color: #edeadf;
        cursor: pointer;
    }
    .bsmc-mhome__drawer-close:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #C8A96E;
    }
    .bsmc-mhome__drawer-close:focus-visible {
        outline: 2px solid #C8A96E;
        outline-offset: 2px;
    }

    /* --- 2. Drawer becomes a column so the CTAs can sit at the bottom ---
     * home-public.css sets `.bsmc-mhome__nav { display: inline-flex;
     * align-items: center; gap: 14px; white-space: nowrap }` for the
     * desktop header row, and the mobile query never undid ANY of it. So
     * inside the drawer the nav was still a horizontal row: the <ul> was
     * one flex item — which is why its dividers only spanned half the
     * width — with Join BSMC / | / Log In sitting alongside it, the whole
     * lot vertically centred, leaving a huge dead gap above the menu.
     * Every one of those four declarations has to be reset, not just the
     * direction. */
    .bsmc-mhome__nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;   /* was center → ul shrank to content width */
        gap: 0;                 /* rows carry their own padding */
        white-space: normal;    /* let long menu labels wrap */
        /* The base rule reserved 76px of top padding for a close button
           that was never rendered. The real one is now a flow child, so
           the drawer only needs breathing room above it. */
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        /* Clear the home indicator on notched phones. */
        padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    }

    /* A touch more room per row — 16px rows in a 360px drawer read cramped
       next to the 44px hamburger that opened them. */
    .bsmc-mhome__nav .menu-item > a {
        padding: 18px 24px;
        font-size: 17px !important;
    }

    /* Auth CTAs. `:first-of-type` gets margin-top:auto, which is what
       pushes the pair to the bottom of the flex column; it also correctly
       styles the single "My Membership" link when logged in. */
    .bsmc-mhome__nav > a.bsmc-mhome__nav-link {
        display: block;
        margin: 10px 24px 0;
        padding: 15px 18px;
        border: 1px solid transparent;
        border-radius: 0;
        font-size: 15px !important;
        letter-spacing: 0.14em !important;
        text-align: center;
        text-transform: uppercase;
    }
    .bsmc-mhome__nav > a.bsmc-mhome__nav-link:first-of-type {
        /* auto margin = push this and everything after it to the bottom */
        margin-top: auto;
        padding-top: 15px;
        background: #C8A96E;
        border-color: #C8A96E;
        color: #0e0e0e !important;
        -webkit-text-fill-color: #0e0e0e !important;
    }
    .bsmc-mhome__nav > a.bsmc-mhome__nav-link:first-of-type:hover {
        background: #DFC08A;
        border-color: #DFC08A;
    }
    .bsmc-mhome__nav > a.bsmc-mhome__nav-link ~ a.bsmc-mhome__nav-link {
        background: transparent;
        /* 0.45 not 0.35: at 0.35 the border resolves to #5C5B57, which is
           2.84:1 against the drawer — under the 3:1 that WCAG 1.4.11
           requires for a control's visible boundary. 0.45 gives 3.95:1. */
        border-color: rgba(237, 234, 223, 0.45);
        color: #edeadf !important;
        -webkit-text-fill-color: #edeadf !important;
    }
    .bsmc-mhome__nav > a.bsmc-mhome__nav-link ~ a.bsmc-mhome__nav-link:hover {
        border-color: #edeadf;
    }
    /* The "|" only makes sense between two inline links on desktop. */
    .bsmc-mhome__nav > .bsmc-mhome__nav-sep { display: none; }

    /* Separate the CTA block from the last menu row. */
    .bsmc-mhome__nav .bsmc-mhome__menu,
    .bsmc-mhome__nav > ul {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 22px;
    }
    .bsmc-mhome__nav .menu-item:last-child { border-bottom: 0; }
}

/* ─── Focus ring on the gold CTA ──────────────────────────────────
 * The global focus style is a #C8A96E ring, which is 8.6:1 on the dark
 * drawer — fine everywhere except on the primary CTA, whose background is
 * that same gold. Gold-on-gold measures 1.0:1: the ring is literally
 * invisible, failing WCAG 2.4.7 (Focus Visible) and 1.4.11 (Non-text
 * Contrast). Swap to an ink ring there, which is 8.6:1 against the gold,
 * and add a cream outer ring so it also reads against the drawer behind. */
@media (max-width: 899px) {
    .bsmc-mhome__nav > a.bsmc-mhome__nav-link:first-of-type:focus-visible {
        outline: 3px solid #0e0e0e !important;
        outline-offset: -6px;
        box-shadow: 0 0 0 2px #edeadf;
    }
}

/* ─── Reduced-motion (accessibility) ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bsmc-mhome__nav,
    .bsmc-mhome__nav *,
    .bsmc-mhome__backdrop,
    .bsmc-mhome__hamburger-lines > span,
    .bsmc-mhome__submenu-toggle svg {
        transition: none !important;
    }
}

/* ─── Screen-reader-only helper (for injected aria labels) ────── */
.bsmc-mhome__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}