/* Mobile navigation, shared by every page.
   ---------------------------------------------------------------------------
   Loaded AFTER each page's inline <style> on purpose. The nav's desktop rules
   are duplicated in all four pages, and this file only has to win below the
   breakpoint - linking it last is simpler and easier to follow than inflating
   the selectors here until they out-specify whatever a page happens to declare.

   Why this exists: the bar was a single flex row at every width. Below roughly
   540px it ran off the right edge - the Support pill was sliced in half, the
   theme toggle was pushed off-screen entirely and could not be reached at all,
   and the page scrolled sideways. The breakpoint is 640px rather than the width
   where it actually broke, so the bar has room to spare instead of sitting one
   long word away from breaking again.
--------------------------------------------------------------------------- */

/* The bar is the positioning context for the drop-down panel. */
header.nav { position: sticky; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Hidden on desktop, where the links speak for themselves. */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line); color: var(--dim); cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px; place-items: center;
  transition: color .15s, border-color .15s;
}
.nav-toggle:hover { color: var(--text); border-color: var(--dim); }
.nav-toggle svg { width: 17px; height: 17px; }
/* Two glyphs in one button: bars closed, cross open. Swapped off aria-expanded
   rather than a class, so the accessible state and the visible state cannot
   disagree - if the icon is a cross, the attribute says open. */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-bars { display: none; }

@media (max-width: 640px) {
  .nav-toggle { display: grid; }

  /* What pushes the controls to the right edge is margin-left:auto on .nav-links,
     and below the breakpoint that element is taken out of flow - so it stops
     pushing anything and the buttons drift in beside the wordmark. The actions
     group has to claim the free space itself. */
  .nav-actions { margin-left: auto; }

  /* The links leave the bar and become a panel under it. Anchored to the header
     rather than the viewport so it always meets the bar's lower edge, whatever
     the bar's height works out to be. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; padding: 6px 0 10px;
    /* Fully opaque, unlike the bar above it. The bar is translucent because
       content moving under it looks good; a menu is there to be read, and at even
       slight transparency the hero text showed straight through the rows. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }

  /* Full-width rows: the whole strip is the target, not just the word. */
  .nav-links a {
    padding: 13px 24px; font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-links a:last-child { border-bottom: none; }

  /* Discord is dropped from the cramped bar between 640 and 860, but a vertical
     panel has all the room it needs - so it comes back here. */
  .nav-links a.hide-sm { display: block; }

  /* The Support pill keeps its shape rather than stretching across the row,
     which would read as a banner instead of a button. */
  /* No border-bottom here: Support is the last row, and the :last-child rule above
     cannot win on its own - equal specificity, and this rule comes later. Doubling
     up put a divider directly on top of the panel's own bottom edge. */
  .nav-links a.support {
    align-self: flex-start; margin: 10px 24px 2px;
    padding: 9px 18px; font-size: 14.5px;
  }

  /* The theme toggle deliberately stays in the bar rather than moving into the
     panel: it is a control rather than a destination, and burying a one-tap
     switch behind a menu costs more than the 34px it occupies. */
}

/* Nothing here should animate for anyone who has asked for less motion; the
   panel still opens, just without the transition. */
@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-toggle { transition: none !important; }
}