/* nav.css — the site navigation: one link tree, three interaction contracts.
   Loaded after site.css, which still owns .gu-header's shell (sticky bar, inner
   flex row, logo box) and .gu-btn. Everything below either extends that or,
   where noted, deliberately overrides it.

   THE THREE CONTRACTS

     desktop  >= 1080px   mega panels, full header width, opened by pointer
                          intent and by keyboard focus, with one panel image
                          per section (desktop only, cloned from an inert
                          <template> so the bytes are never fetched elsewhere)
     tablet   768-1079px  no hover anywhere. A sheet drops from the header;
                          inside it every section is a tap-to-open disclosure
                          with a 44px floor on every target and no imagery
     mobile   <= 767px    a drawer from the right edge, one column, nested
                          disclosures, a close control at thumb height, focus
                          trapped and the page behind it scroll-locked

   AND THE FOURTH, WHICH IS THE ONE THAT MATTERS MOST

     no JavaScript        every panel renders open, in flow, at every width.
                          nav.js adds .gu-nav-js to <html>; until it does, the
                          rules below leave the whole tree visible. A menu that
                          needs script to reveal its links is a menu Google
                          cannot follow, and the links are the point.

   ZERO LAYOUT SHIFT is a hard constraint, so opening a panel animates opacity
   and transform ONLY. Desktop panels are absolutely positioned; the tablet
   sheet and the mobile drawer are fixed. Nothing in the document flow moves
   when a menu opens, at any width.

   Colors come from the surface tokens in theme/tokens/tokens.css and nothing
   here introduces a new pairing — the header sits on the `ink` surface, so
   --gu-fg / --gu-fg-muted / --gu-accent / --gu-focus are the measured, gated
   values for this background. theme/docs/audit-surfaces.mjs stays green
   because this file declares no color of its own. */

/* ── shared shell ─────────────────────────────────────────────────────────── */

:root {
  /* Measured by nav.js and written back here, so the tablet sheet and the
     mobile drawer can start exactly at the bottom edge of the bar without
     either of them hard-coding a height the bar is free to change. The
     fallback is site.css's declared min-height. */
  --gu-nav-header-h: 64px;
}

/* CRITICAL — --gu-bg-raised is declared on [data-surface], which is <body>, NOT
   on :root. An alias defined as `:root { --gu-nav-panel-bg: var(--gu-bg-raised) }`
   therefore resolves AT :root, where that property does not exist: the
   substitution yields the guaranteed-invalid value, it inherits down as invalid,
   and `background: var(--gu-nav-panel-bg)` falls back to the initial value.
   The panel rendered fully TRANSPARENT with the hero headline reading straight
   through it — and nothing errored, because an invalid custom property is not a
   parse error. Read the surface token where it is actually defined. */
[data-surface] { --gu-nav-panel-bg: var(--gu-bg-raised); }

/* CRITICAL — site.css puts `backdrop-filter: blur(10px)` on .gu-header itself,
   and a filtered element becomes the CONTAINING BLOCK for every `position:
   fixed` descendant. The mobile drawer and the scrim live inside the header, so
   with that declaration in place they were laid out against the 64px bar
   instead of against the viewport: a "full-height" drawer 64px tall. Moving the
   blur onto a pseudo-element keeps the exact same look and takes the containing
   block away, because a filter on a CHILD does not capture its parent's other
   descendants. */
.gu-header {
  backdrop-filter: none;
  background: transparent;
  isolation: isolate;
}
.gu-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--gu-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.gu-header__inner { position: relative; }

/* One focus treatment for every control in the header. :focus-visible, not
   :focus, so a pointer user never sees a ring they did not ask for and a
   keyboard user always does. --gu-focus is gated at 3:1 against this surface
   (WCAG 1.4.11) by audit-surfaces.mjs. */
.gu-header :is(a, button):focus-visible {
  outline: 2px solid var(--gu-focus);
  outline-offset: 2px;
  border-radius: var(--gu-radius-sm);
}

.gu-nav__list {
  display: flex;
  gap: var(--gu-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* CRITICAL — base.css caps EVERY <li> at the readable measure:
   `:where(p, li) { max-width: var(--gu-measure) }`, 66ch. That is right for
   body copy and wrong for a navigation row: measured at 834px the tablet
   sheet's <ul> was 776px wide and every <li> computed max-width: 660px, so the
   separator rules and the full-row tap targets stopped 116px short of the
   sheet edge and it read as a broken layout. `:where()` carries zero
   specificity, so one honest declaration undoes it. */
.gu-nav__item { position: relative; max-width: none; }
.gu-mega__list li { max-width: none; }

.gu-nav__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--gu-font-display);
  font-size: var(--gu-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--gu-fg);
  white-space: nowrap;
}
.gu-nav__link:hover,
.gu-nav__link.is-current,
.gu-nav__link[aria-current="page"] { color: var(--gu-accent); }

/* The trigger is a SEPARATE control from the link on purpose: the link
   navigates to the section index, the button opens the panel. One element
   cannot do both without stealing one of the two from a keyboard user. */
.gu-nav__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--gu-fg-muted);
  cursor: pointer;
}
.gu-nav__trigger:hover { color: var(--gu-accent); }
.gu-nav__caret {
  width: 16px;
  height: 16px;
  transition: transform var(--gu-dur-fast) var(--gu-ease);
}
.gu-nav__item.is-open .gu-nav__caret { transform: rotate(180deg); }
.gu-nav__item.is-open .gu-nav__link { color: var(--gu-accent); }

/* ── panel contents (shared by all three regimes) ─────────────────────────── */

.gu-mega__inner {
  display: grid;
  gap: var(--gu-space-lg);
}
.gu-mega__cols {
  display: grid;
  gap: var(--gu-space-md) var(--gu-space-lg);
  min-width: 0;
}
.gu-mega__col { min-width: 0; }
.gu-mega__heading {
  margin: 0 0 var(--gu-space-2xs);
  font-family: var(--gu-font-display);
  font-size: var(--gu-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gu-fg-muted);
}
.gu-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.gu-mega__link {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: var(--gu-space-2xs);
  /* 44px is the touch-target floor and it is set HERE, on the shared rule,
     rather than only in the tablet block — a phone in landscape is 767px wide
     and lands in the mobile regime, and a desktop user with a trackpad is
     better served by a large target too. */
  min-height: 44px;
  padding: var(--gu-space-3xs) var(--gu-space-2xs);
  border-radius: var(--gu-radius-md);
  text-decoration: none;
  color: var(--gu-fg);
  transition: background-color var(--gu-dur-fast) var(--gu-ease),
              color var(--gu-dur-fast) var(--gu-ease);
}
.gu-mega__link:hover,
.gu-mega__link:focus-visible { background: color-mix(in srgb, var(--gu-fg) 8%, transparent); }
.gu-mega__link[aria-current="page"] { color: var(--gu-accent); }
.gu-mega__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--gu-accent);
}
.gu-mega__icon .gu-icon { width: 20px; height: 20px; }
/* The icon lifts on hover and focus. transform only, so nothing reflows, and
   the reduced-motion block at the end of this file removes it entirely. */
.gu-mega__icon .gu-icon {
  transition: transform var(--gu-dur-base) var(--gu-ease-out);
}
.gu-mega__link:hover .gu-mega__icon .gu-icon,
.gu-mega__link:focus-visible .gu-mega__icon .gu-icon { transform: translateY(-2px) scale(1.08); }

.gu-mega__text { display: grid; gap: 2px; min-width: 0; }
.gu-mega__label {
  font-family: var(--gu-font-display);
  font-size: var(--gu-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Long program names ("Extreme Leadership Mastermind") must wrap inside a
     narrow column rather than push the panel wider than the viewport. */
  overflow-wrap: anywhere;
}
.gu-mega__desc {
  font-size: var(--gu-text-xs);
  color: var(--gu-fg-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gu-mega__aside { display: grid; gap: var(--gu-space-sm); align-content: start; }
.gu-mega__blurb {
  margin: 0;
  font-size: var(--gu-text-sm);
  color: var(--gu-fg-muted);
  line-height: 1.5;
}
.gu-mega__media {
  overflow: hidden;
  border-radius: var(--gu-radius-lg);
  border: 1px solid var(--gu-rule);
  /* The box reserves its space from the first paint whether or not an image is
     ever cloned into it, so the panel never resizes when one arrives. */
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--gu-fg) 6%, transparent);
}
.gu-mega__media picture,
.gu-mega__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gu-mega__overview {
  display: inline-flex;
  align-items: center;
  gap: var(--gu-space-3xs);
  min-height: 44px;
  font-family: var(--gu-font-display);
  font-size: var(--gu-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--gu-accent);
}
.gu-mega__overview .gu-icon {
  width: 16px; height: 16px;
  transition: transform var(--gu-dur-fast) var(--gu-ease);
}
.gu-mega__overview:hover .gu-icon,
.gu-mega__overview:focus-visible .gu-icon { transform: translateX(3px); }

/* ── the fourth contract: no JavaScript ───────────────────────────────────── */
/* Read this block first. Until nav.js runs, the tree is a plain, complete,
   fully visible list of links at every width — which is the state a crawler,
   a text browser and a scripting-disabled visitor get. */
html:not(.gu-nav-js) .gu-nav__toggle,
html:not(.gu-nav-js) .gu-nav__trigger,
html:not(.gu-nav-js) .gu-nav__foot,
html:not(.gu-nav-js) .gu-nav__scrim { display: none; }
html:not(.gu-nav-js) .gu-mega { display: block; }
/* The image is cloned by nav.js and by nothing else, so with scripting off the
   reserved box can never be filled — it rendered as an empty grey rectangle in
   every panel. Hidden rather than left reserved, because there is no arriving
   image for the reservation to prevent a shift for. */
html:not(.gu-nav-js) .gu-mega__media { display: none; }
html:not(.gu-nav-js) .gu-nav__list { flex-wrap: wrap; }

/* With JS off there is no room for five open mega panels in a 64px bar, so
   below the desktop breakpoint the whole nav simply becomes a block of links
   under the bar. Still zero shift: the header is not sticky-overlapping
   anything at that point, it is just taller. */
@media (max-width: 1079px) {
  html:not(.gu-nav-js) .gu-header__inner { flex-wrap: wrap; }
  /* CRITICAL — these are RESETS, not decoration. Below 1080px the .gu-nav rule
     further down this file makes the element a fixed, hidden, transformed
     sheet or drawer. Those declarations are unconditional, so without an
     explicit reset here a scripting-disabled visitor gets a navigation that is
     visibility:hidden and translated off-screen with nothing able to open it.
     The specificity (0,2,1) beats the bare .gu-nav (0,1,0) regardless of
     source order, which is why this can sit above them and still win. */
  html:not(.gu-nav-js) .gu-nav {
    display: block;
    position: static;
    inset: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    flex-basis: 100%;
    padding-bottom: var(--gu-space-md);
  }
  html:not(.gu-nav-js) .gu-nav__scroll { padding: 0; overflow: visible; max-height: none; }
  html:not(.gu-nav-js) .gu-nav__item { display: block; border: 0; }
  html:not(.gu-nav-js) .gu-nav__list { flex-direction: column; gap: var(--gu-space-sm); }
  /* The blurb is desktop furniture; the overview link is a destination and
     stays reachable with scripting off too. */
  html:not(.gu-nav-js) .gu-mega__blurb { display: none; }
}

/* ── DESKTOP: the mega menu, >= 1080px ────────────────────────────────────── */
@media (min-width: 1080px) {
  .gu-nav__toggle { display: none; }
  .gu-nav__foot { display: none; }
  .gu-nav__scrim { display: none; }

  .gu-nav { display: block; }
  .gu-nav__scroll { display: flex; align-items: center; }
  .gu-nav__list { gap: var(--gu-space-sm); align-items: center; }
  .gu-nav__item--panel { display: inline-flex; align-items: center; gap: 2px; }
  .gu-nav__link { min-height: 44px; }
  .gu-nav__trigger { width: 28px; height: 44px; }

  /* The panel spans the full header inner, not the width of its own <li>.
     `position: static` on the item is what lets the absolute panel resolve
     against .gu-header__inner instead. */
  .gu-nav__item--panel { position: static; }
  .gu-mega {
    position: absolute;
    top: calc(100% + var(--gu-space-2xs));
    left: 0;
    right: 0;
    z-index: 20;
    padding: var(--gu-space-lg);
    background: var(--gu-nav-panel-bg);
    border: 1px solid var(--gu-rule);
    border-radius: var(--gu-radius-lg);
    box-shadow: var(--gu-shadow-lg);
    /* Closed. `visibility` is what takes the panel out of the tab order and out
       of the accessibility tree; opacity alone would leave every link
       focusable behind an invisible panel. It stays in the DOM either way, so
       a crawler still reads all thirty destinations. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--gu-dur-base) var(--gu-ease),
                transform var(--gu-dur-base) var(--gu-ease-out),
                visibility 0s linear var(--gu-dur-base);
  }
  /* Two openers. `.is-open` is the JS one and it is the only one in play once
     nav.js has run, because JS also has to keep aria-expanded truthful.
     :hover / :focus-within is the no-script path — it is what makes the mega
     menu work with JavaScript disabled, on a real pointer and on a real Tab
     key, without a line of script. */
  html:not(.gu-nav-js) .gu-nav__item--panel:hover > .gu-mega,
  html:not(.gu-nav-js) .gu-nav__item--panel:focus-within > .gu-mega,
  .gu-nav__item--panel.is-open > .gu-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity var(--gu-dur-base) var(--gu-ease),
                transform var(--gu-dur-base) var(--gu-ease-out),
                visibility 0s;
  }

  .gu-mega__inner {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: start;
  }
  /* A panel with no aside is all columns. */
  .gu-mega__inner:not(:has(.gu-mega__aside)) { grid-template-columns: minmax(0, 1fr); }
  /* One and two column panels do NOT stretch to the full width. At 1fr each,
     the three links in the Videos panel spread a 24px icon and a 20-character
     label across 780px and the panel read as mostly void. Capping the track
     keeps a short list looking like a list. */
  .gu-mega__cols[data-cols="1"] { grid-template-columns: minmax(240px, 380px); }
  .gu-mega__cols[data-cols="2"] { grid-template-columns: repeat(2, minmax(200px, 330px)); }
  .gu-mega__cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gu-mega__cols[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* The panel image drifts. Transform only, on an element inside an
     overflow:hidden box, so it cannot move a single pixel of layout. It runs
     only on the cloned <img> — and nav.js only clones on desktop, so on tablet
     and mobile this animation has nothing to animate and the file it would
     have animated was never requested. */
  .gu-mega__media img {
    animation: gu-nav-drift 18s var(--gu-ease) infinite alternate;
    will-change: transform;
  }
}

@keyframes gu-nav-drift {
  from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, 0.8%, 0); }
}

/* ── TABLET: the disclosure sheet, 768-1079px ─────────────────────────────── */
/* No hover exists here, so nothing opens on hover: every panel is a tap on its
   own trigger. The sheet drops from the bar across the full width, scrolls
   inside itself, and carries no imagery at all. */
@media (min-width: 768px) and (max-width: 1079px) {
  .gu-nav {
    /* CRITICAL — site.css declares `.gu-nav { display: none }` and only turns it
       back on at >= 1080px. Every other property below can be perfect and the
       sheet still never appears: measured at 834px with is-open set on the nav
       AND on the item, mega display:block, visibility:visible, and zero client
       rects, because the ancestor was display:none. An open state is not a
       visible state. */
    display: block;
    position: fixed;
    top: var(--gu-nav-header-h);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: calc(100dvh - var(--gu-nav-header-h));
    overflow: hidden auto;
    overscroll-behavior: contain;
    background: var(--gu-nav-panel-bg);
    border-bottom: 1px solid var(--gu-rule);
    box-shadow: var(--gu-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--gu-dur-base) var(--gu-ease),
                transform var(--gu-dur-base) var(--gu-ease-out),
                visibility 0s linear var(--gu-dur-base);
  }
  .gu-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--gu-dur-base) var(--gu-ease),
                transform var(--gu-dur-base) var(--gu-ease-out),
                visibility 0s;
  }
  .gu-nav__scroll {
    max-width: var(--gu-max-width);
    margin-inline: auto;
    padding: var(--gu-space-md) var(--gu-gutter) var(--gu-space-xl);
  }
  .gu-nav__list { flex-direction: column; gap: 0; }
  .gu-nav__item {
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: center;
    border-bottom: 1px solid var(--gu-rule);
    /* Explicit, because flex cross-axis stretch did not reach these: measured
       at 834px the <ul> was 776px wide and every row 660px, so the separator
       rules and the tap targets stopped 116px short of the sheet edge. The row
       IS the tap target here; it has to be as wide as the thing it sits in. */
    width: 100%;
  }
  .gu-nav__link { min-height: 56px; font-size: var(--gu-text-base); }
  .gu-nav__trigger { width: 44px; height: 44px; justify-self: end; }
  .gu-nav__caret { width: 20px; height: 20px; }

  .gu-mega {
    grid-column: 1 / -1;
    display: none;
    padding: 0 0 var(--gu-space-md);
  }
  .gu-nav__item.is-open > .gu-mega { display: block; }
  .gu-mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No mega-panel imagery on tablet, and no blurb — the sheet is a navigation
     control, not a landing page. The "All programs / All events / All videos"
     OVERVIEW link stays: hiding the whole aside took it with the image, and
     that is a destination disappearing at a breakpoint. */
  .gu-mega__media, .gu-mega__blurb { display: none; }
  .gu-mega__link { min-height: 48px; }
  .gu-mega__overview { padding-left: var(--gu-space-2xs); }
  .gu-nav__foot { display: none; }
}

/* ── MOBILE: the drawer, <= 767px ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .gu-nav {
    position: fixed;
    top: var(--gu-nav-header-h);
    right: 0;
    bottom: 0;
    z-index: 40;
    width: min(420px, 100%);
    display: grid;
    grid-template-rows: 1fr auto;
    background: var(--gu-bg);
    border-left: 1px solid var(--gu-rule);
    box-shadow: var(--gu-shadow-lg);
    /* translateX, not `right: -100%` — the second animates the box and would
       make the page 420px wider for the length of the transition, which is a
       horizontal scrollbar at every width the battery checks. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--gu-dur-base) var(--gu-ease-out),
                visibility 0s linear var(--gu-dur-base);
  }
  .gu-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--gu-dur-base) var(--gu-ease-out), visibility 0s;
  }
  .gu-nav__scroll {
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--gu-space-sm) var(--gu-space-md) var(--gu-space-lg);
  }
  .gu-nav__list { flex-direction: column; gap: 0; }
  .gu-nav__item {
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: center;
    border-bottom: 1px solid var(--gu-rule);
    /* Explicit, because flex cross-axis stretch did not reach these: measured
       at 834px the <ul> was 776px wide and every row 660px, so the separator
       rules and the tap targets stopped 116px short of the sheet edge. The row
       IS the tap target here; it has to be as wide as the thing it sits in. */
    width: 100%;
  }
  .gu-nav__link { min-height: 52px; font-size: var(--gu-text-base); }
  .gu-nav__trigger { width: 44px; height: 44px; justify-self: end; }
  .gu-nav__caret { width: 20px; height: 20px; }

  .gu-mega {
    grid-column: 1 / -1;
    display: none;
    padding: 0 0 var(--gu-space-sm);
  }
  .gu-nav__item.is-open > .gu-mega { display: block; }
  /* One column. A phone is a column. */
  .gu-mega__cols { grid-template-columns: minmax(0, 1fr); }
  /* Same as tablet: image and blurb go, the overview link stays. */
  .gu-mega__media, .gu-mega__blurb { display: none; }
  .gu-mega__link { min-height: 48px; padding-left: var(--gu-space-sm); }
  .gu-mega__overview { padding-left: var(--gu-space-sm); }
  .gu-mega__heading { padding-left: var(--gu-space-sm); }

  /* Thumb-reachable close: pinned to the bottom edge of the drawer, which is
     the part of a phone screen a thumb actually reaches. The toggle in the bar
     also closes it, but that is at the top of a 900px-tall screen. */
  .gu-nav__foot {
    padding: var(--gu-space-2xs) var(--gu-space-md)
             calc(var(--gu-space-md) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--gu-rule);
    background: var(--gu-bg);
  }
  .gu-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gu-space-2xs);
    width: 100%;
    min-height: 48px;
    background: none;
    border: 1px solid var(--gu-rule);
    border-radius: var(--gu-radius-md);
    color: var(--gu-fg);
    font-family: var(--gu-font-display);
    font-size: var(--gu-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .gu-nav__close:hover { color: var(--gu-accent); border-color: var(--gu-accent); }
}

/* ── the bar's own controls ───────────────────────────────────────────────── */
@media (max-width: 1079px) {
  .gu-nav__toggle { display: inline-flex; }
}
.gu-nav__toggle .gu-nav__toggle-close { display: none; }
.gu-nav__toggle[aria-expanded="true"] .gu-nav__toggle-open { display: none; }
.gu-nav__toggle[aria-expanded="true"] .gu-nav__toggle-close { display: inline; }

/* The scrim sits under the drawer and over the page, and is only ever shown by
   nav.js. It is `hidden` in the markup so a no-script visitor never meets it. */
.gu-nav__scrim {
  position: fixed;
  inset: var(--gu-nav-header-h) 0 0;
  z-index: 30;
  background: rgb(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity var(--gu-dur-base) var(--gu-ease);
}
.gu-nav__scrim.is-open { opacity: 1; }
.gu-nav__scrim[hidden] { display: none; }
@media (min-width: 1080px) { .gu-nav__scrim { display: none; } }

/* The CTA is the one destination that must never be behind a menu, so unlike
   v1's header it is not dropped on small screens — it loses its label instead
   and keeps a 44px square target with an accessible name from its own text,
   which is still in the DOM for a screen reader. */
@media (max-width: 479px) {
  .gu-btn.gu-header__cta {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--gu-space-2xs);
    font-size: var(--gu-text-xs);
  }
  .gu-header__inner { gap: var(--gu-space-2xs); }
  .gu-header__logo { width: clamp(96px, 30vw, 140px); }
}

/* ── reduced motion ───────────────────────────────────────────────────────── */
/* tokens.css already collapses every --gu-dur-* to 1ms here, so the
   transitions above are effectively instant. This block removes what a
   duration token cannot reach: the keyframe animation on the panel image, the
   icon lift, and the caret rotation. "Every animation" means every one. */
@media (prefers-reduced-motion: reduce) {
  .gu-mega,
  .gu-nav,
  .gu-nav__scrim,
  .gu-mega__link,
  .gu-nav__caret,
  .gu-mega__icon .gu-icon,
  .gu-mega__overview .gu-icon { transition: none !important; }
  .gu-mega__media img { animation: none !important; transform: none !important; }
  .gu-mega__link:hover .gu-mega__icon .gu-icon,
  .gu-mega__link:focus-visible .gu-mega__icon .gu-icon { transform: none; }
  .gu-mega__overview:hover .gu-icon,
  .gu-mega__overview:focus-visible .gu-icon { transform: none; }
}

/* Spanish header (board item 128): Programas / Eventos / Aprender / Nosotros /
   Socios run about 15% wider than the English labels, and at 1440 the row
   wrapped SOCIOS onto a second line. Tighter tracking on the Spanish row only;
   the English header is unchanged. */
@media (min-width: 1080px) {
  html[lang="es"] .gu-nav__link { letter-spacing: 0; }
  html[lang="es"] .gu-nav__list { gap: var(--gu-space-2xs); }
}
