/* Global menubar — auto-loaded for the header snippet (site/snippets/layout/header.php) */

.menubar {
    --fa-serif: 0;
    --fa-weight: 0; position: sticky;
    top: 0;
    z-index: var(--z-menubar);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: flex-end;
    padding-bottom: var(--space-3xs);
    gap: var(--space-s);
    min-height: var(--menubar-h);
    padding-inline: var(--space-s);
    background: var(--color-bar);
    border-bottom: var(--border);
    font-size: var(--fs-menu);
}

.menubar__cluster {
    display: flex;
    align-items: center;
    gap: var(--space-l);
}
.menubar__cluster--right {
    justify-content: flex-end;
}

.menubar__item {
    white-space: nowrap;
}
/* The Search entry stays plain text under the pointer; on the search page it
   is a chip at the bar's size (ui/chip, chip--large). */
.menubar__item--plain:hover {
    text-decoration: none;
}

/* The centred wordmark is the dynamic logo snippet (site/snippets/layout/logo.php);
   its styles live in assets/css/layout/logo.snippet.css. */

/* Grid / Index toggle — a single glossy pill switch (Figma 290:5815) plus a
   label naming the current view. Sized in `em` so it tracks --fs-menu. */
.view-toggle {
    display: inline-flex;
    align-items: inline;
    gap: var(--space-2xs);
}
.view-toggle__label {
    white-space: nowrap;
    line-height: .9;
}

.view-switch {
    --sw-w: 2.5rem; /* 39px at 2rem — matches the Figma node */
    --sw-h: 1.5rem; /* 23px */
    --sw-pad: 0.3rem;
    position: relative;
    flex: none;
    width: var(--sw-w);
    height: var(--sw-h);
    padding: 0;
    /*border: 0.5px solid rgba(0, 0, 0, 0.28);*/
    border-radius: 999px;
    background: linear-gradient(180deg, #c9c9c9, #dcdcdc);
    box-shadow: inset 0 0.06em 0.13em rgba(0, 0, 0, 0.22);
    cursor: pointer;
}
.view-switch__knob {
    position: absolute;
    top: var(--sw-pad);
    left: var(--sw-pad);
    width: calc(var(--sw-h) - 2 * var(--sw-pad));
    height: calc(var(--sw-h) - 2 * var(--sw-pad));
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #d4d4d4 50%, #bcbcbc);
    box-shadow: 0 0.06em 0.13em rgba(0, 0, 0, 0.4);
}
/* Only animate the knob once Alpine has hydrated (body.is-ready), so a page
   that loads on the persisted Index position places the knob there instead of
   sliding into it. */
.is-ready .view-switch__knob {
    transition: transform 0.2s ease;
}
.view-switch[aria-checked="true"] .view-switch__knob {
    transform: translateX(calc(var(--sw-w) - var(--sw-h)));
}
.view-switch:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* --- Head bar and site menu (below 60rem) -------------------------------- */
/* The bar keeps its three tracks: the two compact sides replace the clusters
   around the same centre. Controls take the bar's colour (currentColor). */
.menubar__compact,
.menubar__menu {
    display: none;
}
.menubar__control {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
}
.menubar__control:hover {
    text-decoration: none;
}
.menubar__control .icon {
    width: 1em;
}
/* The loupe link is the search bar's own loupe size (search-bar__icon), so the
   loupe keeps its size when the search opens. */
.menubar__control .menubar__loupe {
    width: var(--mark-size);
}
/* The open menu's language switch: the desktop's (layout/language-switch),
   a globe in each toggle. Both toggles' text, plain or in the chip, moves
   down by half of --optical-shift, as elsewhere on the bar. */
.menubar__lang {
    display: flex;
    align-items: center;
    /* A smaller optical shift than elsewhere on the bar, for the plain
       toggle and the chip alike. */
    --optical-shift: var(--optical-shift-bar);
}
.menubar__lang .lang-switch__label,
.menubar__lang .chip__label {
    translate: 0 calc(var(--optical-shift) / 2);
}

/* Info button (Figma 322:16151): on an article, in the wordmark's place below
   60rem. It stands out from the bar, and is pressed in while the article info
   is open. Optical centring as in a chip (ui/chip). */
.menubar__info {
    display: none;
    padding:
        calc(var(--space-3xs) + var(--optical-shift) / 2) var(--space-s)
        calc(var(--space-3xs) - var(--optical-shift) / 2);
    font-size: var(--fs-wordmark);
    line-height: var(--leading-none);
    background: var(--color-bar);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-raised);
    cursor: pointer;
}
.menubar__info:hover {
    background: var(--color-bar-hover);
}
.menubar__info[aria-expanded="true"] {
    background: var(--color-bar-hover);
    box-shadow: var(--shadow-inset);
}
.menubar__info:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* A list item (ui/list-item) at the bar's size. */
.menubar__menu .menubar__row {
    padding-inline: var(--space-s);
    font-size: var(--fs-menu);
}

@media (max-width: 60rem) {
    .menubar {
        align-items: center;
        padding-bottom: 0;
    }
    .menubar__cluster {
        display: none;
    }
    .menubar__compact {
        display: flex;
    }
    .menubar__compact--right {
        justify-content: flex-end;
    }
    /* On an article the Info button takes the wordmark's track. */
    .menubar__info {
        display: block;
        /* A smaller optical shift than elsewhere on the bar. */
        --optical-shift: var(--optical-shift-bar);
    }
    .menubar--article .logo {
        display: none;
    }
    .menubar--open .logo,
    .menubar--open .menubar__info,
    .menubar--open .search-bar {
        visibility: hidden;
    }
    /* On the search page: dark, and the search bar (put into the left side by
       the search component) in place of the wordmark. */
    .menubar--search {
        grid-template-columns: minmax(0, 1fr) auto;
        color: var(--color-white);
        background: var(--color-black);
    }
    .menubar--search .logo {
        display: none;
    }
    /* With the menu open the bar is the menu's light grey, on the search page
       as well. */
    .menubar--search.menubar--open {
        color: var(--color-fg);
        background: var(--color-bar);
    }
    /* Slides down from under the bar, over the page. The menu belongs to the
       bar, so it can't be stacked beneath it; instead the nav is a still box
       under the bar that clips (overflow: hidden), and the panel inside it
       slides down from under the box's top. Only the panel's transform and
       opacity move — the browser runs both off the main thread; a clip-path
       animated with them ran on the main thread, fell out of step and
       flickered (iOS). Closed,
       the nav is hidden once the slide has run, so its links leave the tab
       order. */
    .menubar__menu {
        display: block;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0s linear var(--slide-duration);
    }
    .menubar__panel {
        max-height: calc(100vh - var(--menubar-h));
        overflow-y: auto;
        /* Its own scroll stays its own: the page's scroll closes the menu. */
        overscroll-behavior: contain;
        border-top: var(--border);
        background: var(--color-bar);
        color: var(--color-fg);
        /* A short way down, not its whole height, fading as it comes, as
           the article's author panel does. */
        transform: translateY(calc(-1 * var(--slide-nudge)));
        opacity: 0;
        transition:
            transform var(--slide-duration) var(--ease-panel),
            opacity var(--slide-duration) var(--ease-panel);
    }
    .menubar--open .menubar__menu {
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }
    .menubar--open .menubar__panel {
        transform: none;
        opacity: 1;
    }
}
@media (max-width: 60rem) and (prefers-reduced-motion: reduce) {
    .menubar__menu,
    .menubar__panel {
        transition: none;
    }
}