/* ==========================================================================
   Zentek — site navigation
   Shared, all-page furniture for the grouped main menu, in both of its
   forms: the desktop mega panels that drop out of the sticky <nav>, and the
   group headings inside the phone panel that /js/mobile-nav.js builds.
   Loaded on every page after the page's own inline <style>, so these rules
   win on equal specificity — same contract as /css/newsletter.css.

   The markup lives inside the existing .nav-links of every page and carries
   no <div> of its own (the nav byte-identity check reads .nav-links up to
   its first closing </div>):

     .nav-links > ul.nav-list > li.nav-item
         either a plain <a>
         or  <button class="nav-trigger"> + <ul class="mega"> panel

   Only the <a> elements vary between pages, and only by class="on" /
   class="". The triggers are identical everywhere; /js/mobile-nav.js adds
   .on to the trigger of whichever group holds the current page at runtime.
   ========================================================================== */

/* --- The top row ---------------------------------------------------------
   .nav-links keeps the flex/13px/weight-500 rules it already has in every
   page's inline <style>; the <ul> inside it becomes the actual row, so the
   list markup costs nothing visually. */
.nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Deliberately static: each panel is positioned against <nav> rather than
   against its own <li>, which is what lets it run the full width of the bar
   instead of the width of one label. */
.nav-item { position: static; }

/* A group trigger has to read as one of the links beside it. */
.nav-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--ink2);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"],
.nav-trigger.on { color: var(--ink); }
.nav-trigger:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* The only affordance that says a label opens a panel rather than navigating.
   It turns with aria-expanded, so open/closed is not signalled by colour
   alone. The transition is dropped under prefers-reduced-motion by the
   `*{transition:none!important}` rule each page already carries. */
.nav-trigger::after {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* --- Desktop: the mega panel --------------------------------------------
   921px up only; below that the whole .nav-links row is display:none and the
   hamburger panel takes over. */
@media (min-width: 921px) {
  .mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    /* Lines the first column up with the logo: the plain .wrap gutter while
       the viewport is under the 1160px measure, half the leftover once there
       is any. */
    padding: 24px max(28px, calc((100% - 1160px) / 2 + 28px)) 30px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    /* Column-major: row 1 is the heading, rows 2-3 hold the links two to a
       column, so a group of five reads as 2 + 2 + 1 down short columns rather
       than as a row of four with one link orphaned underneath. */
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 0 34px;
    list-style: none;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(12, 14, 12, .10);
  }
  /* Same guard as the grids in /mobile.css: a long label must not widen its
     track. */
  .mega > li { min-width: 0; }

  /* Hover bridge. The trigger row sits 25px above the panel (the bar's bottom
     padding plus the row's centring slack), and a pointer travelling down
     from the label to the first link crosses that gap; without this the
     :hover fallback would drop the panel half-way. Sized to the gap exactly,
     never taller, or it would sit over the neighbouring triggers and stop the
     pointer reaching them. */
  .mega::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    height: 25px;
  }

  /* Closed unless hovered or opened by /js/mobile-nav.js. .is-closed is the
     Escape / click-to-close override — it has to beat :hover so the panel
     stays shut with the pointer still resting on the trigger, which is why
     it is last. */
  .nav-item > .mega { display: none; }
  .nav-item:hover > .mega,
  .nav-item.is-open > .mega { display: grid; }
  .nav-item.is-closed > .mega { display: none; }

  /* Visual heading only: the trigger already gives the panel its name, and
     the <li> is aria-hidden in the markup. Pinned to row 1 so the links flow
     under it. */
  .mega-k {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 12px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--green);
  }

  /* --ink rather than the row's --ink2: these sit on paper at 13px and are
     the panel's only content. */
  .mega a {
    display: block;
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .mega a:hover,
  .mega a.on { color: var(--green); }
}

/* --- Phone: group headings in the hamburger panel ------------------------
   /js/mobile-nav.js mirrors the same groups into .mnav-panel, each behind a
   heading that is text, not a link — the group labels have no page of their
   own. .mnav-panel itself is styled in /mobile.css. */
@media (max-width: 920px) {
  .mnav-k {
    margin: 0;
    padding: 20px 0 4px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--green);
  }
  .mnav-panel > :first-child .mnav-k { padding-top: 12px; }
}