/* =========================================================
   app-c-menu.css — vanilla responsive menu
   BEM namespace under .c-menu. All color, spacing, radius,
   and motion values come from the design system's semantic
   tokens via menu-scoped indirection (--c-menu-*). Hosts
   re-theme by overriding --c-menu-* on .c-menu inside the
   brand layer.
   ========================================================= */

@layer components {

    .c-menu {
        /* Menu-scoped tokens — rebind these in @layer brand if needed. */
        --c-menu-bg:          var(--color-surface);
        --c-menu-bg-deep:     var(--color-surface-alt);
        --c-menu-border:      var(--color-line);
        --c-menu-text:        var(--color-ink-soft);
        --c-menu-text-strong: var(--color-ink);
        --c-menu-hover-bg:    var(--color-surface-alt);
        --c-menu-active-bg:   var(--color-accent);
        --c-menu-focus-ring:  var(--color-accent);

        background: var(--c-menu-bg);
        color: var(--c-menu-text-strong);
        position: relative;
        font-size: var(--fs-ui);
    }

    .c-menu *,
    .c-menu *::before,
    .c-menu *::after { box-sizing: border-box; }

    /* When a leaf link is clicked, the menu is marked as navigating so
       further interaction is blocked until the new page loads. */
    .c-menu--navigating {
        pointer-events: none;
        opacity: 0.6;
    }

    .c-menu__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-3) var(--space-4);
        max-width: 80rem;
        margin-inline: auto;
        gap: var(--space-4);
    }

    /* ── Hamburger toggle (hidden on desktop) ──────────────────── */
    .c-menu__toggle {
        display: none;
        background: transparent;
        border: 1px solid var(--c-menu-border);
        color: var(--c-menu-text-strong);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        cursor: pointer;
        line-height: 1;
    }
    .c-menu__toggle:focus-visible {
        outline: 2px solid var(--c-menu-focus-ring);
        outline-offset: 2px;
    }

    .c-menu__toggle-icon,
    .c-menu__toggle-icon::before,
    .c-menu__toggle-icon::after {
        display: block;
        width: 1.25rem;
        height: 2px;
        background: currentColor;
        border-radius: var(--radius-sm);
        transition:
            transform  var(--dur-base) var(--ease),
            opacity    var(--dur-base) var(--ease),
            background var(--dur-base) var(--ease);
    }
    .c-menu__toggle-icon { position: relative; }
    .c-menu__toggle-icon::before,
    .c-menu__toggle-icon::after { content: ""; position: absolute; left: 0; }
    .c-menu__toggle-icon::before { top: -0.375rem; }
    .c-menu__toggle-icon::after  { top:  0.375rem; }

    .c-menu--open .c-menu__toggle-icon { background: transparent; }
    .c-menu--open .c-menu__toggle-icon::before { transform: translateY(0.375rem) rotate(45deg); }
    .c-menu--open .c-menu__toggle-icon::after  { transform: translateY(-0.375rem) rotate(-45deg); }

    /* ── Menu list + items ────────────────────────────────────── */
    .c-menu__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;     /* explicit — legacy ul rule sets column */
        align-items: center;     /* align leaf <a> and submenu <button> on the same line */
        gap: var(--space-1);
    }

    .c-menu__item { position: relative; }

    .c-menu__link {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
        margin: 0;                 /* reset legacy button margin */
        line-height: 1;            /* explicit — button and anchor render same height */
        color: var(--c-menu-text);
        text-decoration: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        background: transparent;
        border: none;
        font: inherit;
        width: 100%;
        text-align: left;
        white-space: nowrap;
    }
    .c-menu__link:hover {
        background: var(--c-menu-hover-bg);
        color: var(--c-menu-text-strong);
    }
    .c-menu__link:focus-visible {
        outline: 2px solid var(--c-menu-focus-ring);
        outline-offset: -2px;
        color: var(--c-menu-text-strong);
    }

    .c-menu__link--active {
        background: var(--c-menu-active-bg);
        color: var(--color-on-dark);
    }
    .c-menu__link--active:hover { background: var(--c-menu-active-bg); }

    /* ── Submenu caret ───────────────────────────────────────── */
    .c-menu__caret {
        display: inline-block;
        width: 0; height: 0;
        border-left:  4px solid transparent;
        border-right: 4px solid transparent;
        border-top:   5px solid currentColor;
        margin-left: 0.2rem;
        opacity: 0.7;
        transition: transform var(--dur-base) var(--ease);
    }
    .c-menu__submenu .c-menu__caret {
        /* Right-pointing caret for nested submenus */
        border-left:   5px solid currentColor;
        border-top:    4px solid transparent;
        border-bottom: 4px solid transparent;
        border-right:  none;
        margin-left: auto;
        padding-left: var(--space-2);
    }

    /* ── Submenu flyout ──────────────────────────────────────── */
    .c-menu__submenu {
        list-style: none;
        margin: 0;
        padding: var(--space-1) 0;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 13.75rem;       /* 220 px */
        background: var(--c-menu-bg-deep);
        border: 1px solid var(--c-menu-border);
        border-radius: var(--radius-sm);
        box-shadow: 0 4px 12px rgb(0 0 0 / .15);
        z-index: 100;
        display: none;
    }
    .c-menu__submenu .c-menu__link {
        border-radius: 0;
        padding: var(--space-2) var(--space-3);
    }
    .c-menu__item--open > .c-menu__submenu { display: block; }

    /* Nested submenus open to the right of their parent */
    .c-menu__submenu .c-menu__submenu {
        top: calc(var(--space-1) * -1);
        left: 100%;
        margin-left: 0;
    }
    .c-menu__submenu--flip-left { left: auto !important; right: 100%; }

    /* ── Separator ──────────────────────────────────────────── */
    .c-menu__separator {
        list-style: none;
        border-top: 1px solid var(--c-menu-border);
        margin: var(--space-1) 0;
        padding: 0;
    }
    .c-menu__submenu .c-menu__separator {
        margin-inline: var(--space-2);
    }

    /* ── Titled heading (labeled separator) ────────────────── */
    /* Rendered when AddSeparator("Text") passes a label. In the
       dropdown this is a small muted caption above the group of
       items that follow it — visual hint without adding a real
       menuitem to keyboard traversal. */
    .c-menu__heading {
        list-style: none;
        padding: var(--space-2) var(--space-4) var(--space-1);
        font-family: var(--font-display);
        font-size: var(--fs-caption);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
    }

    /* ── Icon slot ─────────────────────────────────────────── */
    /* Optional leading FontAwesome glyph. Fixed width so text labels
       stay aligned whether or not individual items carry icons. */
    .c-menu__icon {
        display: inline-block;
        width: 1.25rem;
        margin-right: var(--space-2);
        text-align: center;
        color: var(--color-ink-mute);
        transition: color var(--dur-fast) var(--ease);
    }

    .c-menu__link:hover .c-menu__icon,
    .c-menu__link:focus-visible .c-menu__icon,
    .c-menu__link--active .c-menu__icon {
        color: var(--color-accent);
    }

    /* ── Mobile (below --bp-sm = 48rem / 768px) ──────────────── */
    @media (max-width: 48rem) /* --bp-sm */ {
        .c-menu__toggle { display: inline-block; }

        .c-menu__list {
            display: none;
            flex-direction: column;
            gap: 0;
            /* Fixed overlay escapes narrow flex-parent containers and spans
               the full viewport. JS sets --c-menu-bar-bottom to the bar's
               getBoundingClientRect().bottom when opening; fallback is 3.5rem. */
            position: fixed;
            top: var(--c-menu-bar-bottom, 3.5rem);
            left: 0;
            right: 0;
            z-index: 100;
            background: var(--c-menu-bg);
            border-top: 1px solid var(--c-menu-border);
            box-shadow: 0 4px 12px rgb(0 0 0 / .15);
            max-height: calc(100vh - var(--c-menu-bar-bottom, 3.5rem));
            overflow-y: auto;
        }
        .c-menu--open .c-menu__list { display: flex; }

        .c-menu__item { width: 100%; }
        .c-menu__link { padding: var(--space-3) var(--space-4); }

        .c-menu__submenu {
            position: static;
            display: none;
            background: var(--c-menu-bg-deep);
            border: none;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            min-width: 0;
        }
        .c-menu__submenu .c-menu__submenu { padding-left: var(--space-4); }
        .c-menu__item--open > .c-menu__submenu { display: block; }
        .c-menu__item--open > .c-menu__link > .c-menu__caret { transform: rotate(180deg); }

        /* Flip caret back to downward on mobile (not to the right) */
        .c-menu__submenu .c-menu__caret {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid currentColor;
            border-bottom: none;
            margin-left: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .c-menu__toggle-icon,
        .c-menu__toggle-icon::before,
        .c-menu__toggle-icon::after,
        .c-menu__caret { transition: none; }
    }
}