/* === Site menu (top horizontal strip on desktop, slide-in panel on mobile) ===
 *
 * Two layout regimes that share NOTHING beyond reset/colour:
 *   - Desktop (>= 1050px): horizontal row of links, items can wrap their
 *     label internally (centered) when the strip gets cramped.
 *   - Mobile (<= 1049px): vertical slide-in panel from the right with a
 *     translucent backdrop. Items are stacked, left-aligned, no extra gap.
 */

/* ─────────────────────────────────────────────── */
/* Base — visual reset shared by both regimes (no layout) */

ul.headers {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--main-menu-bg);
  width: 100%;
  display: flex;
  position: relative;
  z-index: var(--z-sticky);
}

li.heads,
li.headst {
  margin: 0;
}

a.headlink,
a.login,
a.logout {
  color: var(--main-text-color);
  text-decoration: none;
  font-weight: var(--font-weight-semilight);
  font-size: var(--font-size-base);
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

/* Active styling (any regime) */
a.headlink.active,
a.login.active,
a.logout.active {
  font-weight: var(--font-weight-semibold);
}

/* Underline effect on hover (any regime) */
a.headlink::after,
a.login::after,
a.logout::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: var(--main-text-color);
  transition: width var(--transition-medium) ease;
}

a.headlink:hover:not(.active)::after,
a.login:hover:not(.active)::after,
a.logout:hover:not(.active)::after {
  width: 100%;
}

/* ─────────────────────────────────────────────── */
/* Desktop (>= 1050px) */

@media (min-width: 1050px) {
  nav#menu {
    border-top: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
    margin-top: 1.5rem;
    /* No padding on the nav strip itself. Padding lives on each link
       (vertical padding 0.5rem) so the link's bottom edge coincides with
       the strip's bottom border. That alignment lets each link's hover
       underline (::after at bottom: -1px) sit exactly on the bottom border,
       producing a "bottom border gets bolder under the hovered item" effect. */
  }

  ul.headers {
    flex-direction: row;
    /* align-items: stretch so every li/a fills the ul vertically — keeps
       single-line items the same height as wrapped (multi-line) ones, so
       all underlines sit at the same baseline. Text inside each link is
       still centered via align-items: center on the link itself. */
    align-items: stretch;
    /* Items pack from the left with column-gap between them; the last
       item (li.headst) gets margin-left:auto below to pin it to the right
       edge. */
    gap: 1.5rem;
    min-height: 2rem;
  }

  li.headst {
    margin-left: auto;
  }

  /* Each li lets its <a> child fill the cell (so the underline-on-hover
     pseudo spans the full link width). No flex-shrink override → items
     shrink when the row gets cramped, and the label inside wraps centered. */
  li.heads,
  li.headst {
    display: flex;
    align-items: stretch;
  }

  /* The link is itself a flex container so we can center the (single) inner
     <span class="link-label"> child both horizontally and vertically.
     Vertical padding (0.5rem) is on the LINK rather than the parent nav so
     the link's outer bottom edge coincides with the strip's bottom border
     — required for the hover underline to align with the border. */
  a.headlink,
  a.login,
  a.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    min-height: 2rem;
    padding: 0.5rem;
    gap: 0.4rem;
  }
}

/* ─────────────────────────────────────────────── */
/* Mobile (<= 1049px) — slide-in panel from the right */

@media (max-width: 1049px) {
  #menu {
    position: relative;
    z-index: var(--z-popup);
  }

  /* Single source of truth for the mobile hamburger's box + position (header.css
     owns only the desktop `display:none` + the ☰/✖ glyph `::before`). Flex-centred
     in a 40px band (= the mobile logo height) and `top: 0.5rem` (= header
     padding-top) so the glyph's vertical centre lines up with BOTH the logo and
     the `.header-locale` switcher — they all centre on the same band. `z-index:
     var(--z-modal)` (not the header's dead z-header) is what lifts the X-to-close
     glyph above the slide-in panel — keep it here; do NOT make the header
     positioned (see header.css top-of-file note). */
  #menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    height: 40px;
    padding: 0 0.4rem;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    z-index: var(--z-modal);
  }

  #menu-toggle::before {
    transform-origin: center;
    display: inline-block;
    transition: transform 0.3s ease;
  }

  #menu-toggle.open::before {
    transform: rotate(90deg);
  }

  /* Slide-in panel */
  #mobile-menu-wrapper {
    background-color: var(--sidebar-bg);
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    opacity: 1;
    pointer-events: none;
    visibility: hidden;
    transition: right 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: var(--menu-top-padding, 1rem);
    box-shadow: -10px 0 24px rgba(0, 0, 0, 0.18);
  }

  #mobile-menu-wrapper.open {
    right: 0;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  /* Backdrop sits BELOW the panel (z-popup < z-modal). Same z-index would
     have made the backdrop win on stacking order (later in DOM) and cover
     the panel, blocking clicks — that was a recent bug. */
  #menu-overlay-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-popup);
    background: var(--ink-overlay-soft);
    backdrop-filter: blur(4px);
  }

  #menu-overlay-backdrop.open {
    display: block;
  }

  /* Items stacked vertically, full-width, left-aligned. No row gap —
     padding on each link controls spacing. */
  ul.headers {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: transparent;
  }

  li.heads,
  li.headst {
    width: 100%;
  }

  a.headlink,
  a.login,
  a.logout {
    display: block;
    width: 100%;
    /* Reduced vertical padding (was 2rem) — items were taller than needed
       with too much air between them. The 1.5rem horizontal padding is
       kept so labels indent from the panel edge. */
    padding: 1rem 1.5rem;
    font-size: var(--font-size-lg);
    line-height: 1.4;
    color: var(--inverted-text-color);
    text-align: left;
    min-height: 3rem;
  }

  a.headlink::after,
  a.login::after,
  a.logout::after {
    background-color: var(--inverted-text-color);
  }
}

/* Impersonation banner — shown site-wide (server-rendered in the menu) while
   an admin is browsing as another user. The return link rides the global
   data-ajax-click flow (stopImpersonation → redirect). */
.impersonation-banner {
  margin: 0.6rem auto;
  padding: 0.5rem 1rem;
  max-width: 40rem;
  text-align: center;
  background: var(--brand-accent);
  border-radius: var(--brand-radius-pill);
}

.impersonation-banner__return {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}