/* shared/nav.css — NAVBAR + WORK DROPDOWN + MOBILE OVERLAY + responsive.
   ONE shared surface for all five pages (Home + four briefs). Consolidated in
   task 6.2.1 from Home's nav.css and each brief's inline nav block. */
/* ============================================================ NAVBAR ============================================================ */
.nav {
  position:fixed; top:0; left:0; width:100%; height:var(--nav-height);
  z-index:100; background:rgba(var(--ground),0.88);
  backdrop-filter:blur(1rem); -webkit-backdrop-filter:blur(1rem);
  border-bottom:1px solid var(--color-border-faint);
  transition:transform 350ms var(--ease-standard);
}
.nav--hidden { transform:translateY(-100%); }

.nav__inner {
  max-width:var(--max-content-width); margin:0 auto; height:100%;
  padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:clamp(1rem,2.5vw,2.5rem);
}

/* LEFT — wordmark logo (shared, replaces Home's four-state SVG set) */
.nav__logo {
  display:inline-flex; align-items:baseline; gap:0.5rem; flex-shrink:0;
  font-weight:var(--fw-black); letter-spacing:-0.01em; font-size:1.05rem;
  color:var(--color-brand-white);
}
.nav__logo small {
  font-weight:var(--fw-medium); color:var(--color-text-muted);
  letter-spacing:0.14em; font-size:0.62rem; text-transform:uppercase;
}
.nav__logo:hover small { color:var(--color-brand-purple); }

/* CENTER — links + Work dropdown. Muted resting, solid white on hover/focus,
   NO underline sweep (global link grammar, task 6.2.1). */
.nav__center { display:flex; align-items:center; justify-content:center; gap:clamp(0.25rem,0.5vw,0.75rem); }

.nav__link {
  position:relative; display:inline-flex; align-items:center; gap:0.35rem;
  color:var(--color-text-muted); font-size:0.9rem; font-weight:var(--fw-medium);
  font-family:var(--font-primary); letter-spacing:0.005em; padding:0.5rem 0.75rem;
  background:none; border:none; cursor:pointer;
  transition:color var(--duration-ui) var(--ease-standard);
}
.nav__link:hover, .nav__link:focus-visible { color:var(--color-brand-white); }
/* P-6a scrollspy — current section link holds solid white + semibold weight
   (reconciliation for the retired underline; aria-current still set in JS). */
.nav__link--current { color:var(--color-brand-white); font-weight:var(--fw-semibold); }
/* W6.2.2 — dedicated pages carry an explicit page-level current state as an
   authored attribute (scrollspy no longer applies once the categories are page
   routes). Attribute-based so navbar/overlay CLASS sequences stay byte-identical. */
.nav__link[aria-current="page"],
.nav__overlay-link[aria-current="page"] { color:var(--color-brand-white); font-weight:var(--fw-semibold); }

/* Work dropdown — disclosure over the four brief pages */
.nav__dropdown { position:relative; display:inline-flex; }
.nav__work-caret {
  width:0; height:0;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
  transition:transform var(--duration-ui) var(--ease-standard);
}
.nav__work-trigger[aria-expanded="true"] .nav__work-caret { transform:rotate(180deg); }
.nav__work-menu {
  position:absolute; top:100%; left:0; margin-top:0.5rem; min-width:15rem;
  background:var(--surface-panel); border:1px solid var(--color-border-soft);
  padding:0.3rem 0; display:flex; flex-direction:column; z-index:101;
}
.nav__work-menu[hidden] { display:none; }
.nav__work-item {
  display:block; padding:0.6rem 1rem;
  color:var(--color-text-muted); font-size:0.85rem; font-weight:var(--fw-medium);
  letter-spacing:0.005em;
  transition:color var(--duration-ui) var(--ease-standard);
}
.nav__work-item:hover, .nav__work-item:focus-visible {
  color:var(--color-brand-white); font-weight:var(--fw-bold);
}

.nav__utility { display:flex; align-items:center; justify-content:flex-end; gap:clamp(0.75rem,1.25vw,1.25rem); }

/* ============================================================
   SEGMENTED SWITCH — one component, two instances (theme, language).
   Both options stay visible and the active one is filled purple, so the
   current state is readable at rest rather than inferred from an icon
   that changes meaning. Replaces the old hover-dropdown language panel
   and the single-glyph theme button, neither of which showed state.
   ============================================================ */
.nav__switch {
  display:inline-flex; align-items:stretch; flex-shrink:0;
  border:1px solid var(--color-border-soft);
  background:transparent;
}
.nav__switch > button {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--color-text-muted);
  font-family:var(--font-primary); font-size:0.7rem; font-weight:var(--fw-semibold);
  letter-spacing:0.08em; line-height:1;
  padding:0.4rem 0.55rem; min-width:2.1rem; min-height:1.85rem;
  transition:background var(--duration-ui) var(--ease-standard),
             color var(--duration-ui) var(--ease-standard);
}
.nav__switch > button + button { border-left:1px solid var(--color-border-soft); }
.nav__switch > button:hover { color:var(--color-brand-white); }
.nav__switch > button svg {
  width:0.95rem; height:0.95rem; display:block;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Active segment. #FFFFFF is literal, not --color-brand-white: that token
   inverts to near-black in light mode, and black on brand purple measures
   3.96:1. White on purple is 5.30:1 and holds in both themes. */
.nav__switch > .nav__lang-option--active,
.nav__switch > .nav__overlay-lang-option--active,
.nav__switch > [aria-pressed="true"] {
  background:var(--color-brand-purple);
  color:#FFFFFF;
}
.nav__switch > .nav__lang-option--active:hover,
.nav__switch > .nav__overlay-lang-option--active:hover,
.nav__switch > [aria-pressed="true"]:hover {
  background:var(--color-purple-hover); color:#FFFFFF;
}
.nav__switch > button:focus-visible {
  outline:2px solid var(--color-brand-purple); outline-offset:2px;
}

/* Hamburger — hidden at desktop/tablet, real display at ≤767px.
   PR #37 (N1, PR37-Q4): a 44×44 target. PR #42 (G6b): the purple box is the button in both states, at the open X's
   position; only the symbol changes on tap (three lines → X), both centred on the box's axis. */
.nav__hamburger { display:none; position:relative; box-sizing:border-box; flex-direction:column; justify-content:center; align-items:center;
  gap:0.3rem; width:44px; height:44px; min-width:44px; margin-right:0; background:var(--color-brand-purple); border:none; cursor:pointer; padding:0; }
.nav__hamburger span { display:block; flex:0 0 auto; width:1.5rem; height:2px; background:#FFFFFF; transition:transform 250ms var(--ease-standard), opacity 200ms; }
.nav__hamburger--open span:nth-child(1) { transform:translateY(0.45rem) rotate(45deg); }
.nav__hamburger--open span:nth-child(2) { opacity:0; }
.nav__hamburger--open span:nth-child(3) { transform:translateY(-0.45rem) rotate(-45deg); }

/* ============================================================ MOBILE OVERLAY ============================================================ */
.nav__overlay {
  position:fixed; inset:0; z-index:99; background:var(--color-brand-black);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transition:opacity 300ms var(--ease-standard); overflow-y:auto;
}
.nav__overlay--open { opacity:1; pointer-events:auto; }

.nav__overlay-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter); height:var(--nav-height);
  border-bottom:1px solid var(--color-border-faint); flex-shrink:0;
}
/* The overlay's own × has been covered by the open menu button since PR #39, which is the visible close.
   It stays in the markup as that button's name source (aria-labelledby, kept in the reader's language by the
   i18n engines; navchrome.js), so it is hidden rather than removed (PR #41, PR41-Q1). */
.nav__overlay-close { display:none; }
.nav__overlay-logo {
  display:inline-flex; align-items:baseline; gap:0.5rem; flex-shrink:0;
  font-weight:var(--fw-black); letter-spacing:-0.01em; font-size:1.05rem;
  color:var(--color-brand-white);
}
.nav__overlay-logo small {
  font-weight:var(--fw-medium); color:var(--color-text-muted);
  letter-spacing:0.14em; font-size:0.62rem; text-transform:uppercase;
}

.nav__overlay-links { flex:1; display:flex; flex-direction:column; padding:1.5rem 0; }
.nav__overlay-group { display:flex; flex-direction:column; }

.nav__overlay-link {
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem; width:100%;
  padding:1.1rem var(--gutter); font-size:1.375rem; font-weight:var(--fw-medium);
  font-family:var(--font-primary); text-align:left;
  color:var(--color-brand-white); border-bottom:1px solid var(--color-border-faint);
  background:none; border-left:none; border-right:none; border-top:none;
  transition:color var(--duration-ui) var(--ease-standard); cursor:pointer;
}
.nav__overlay-group:first-child .nav__overlay-link:first-child,
.nav__overlay-links > .nav__overlay-link:first-child { border-top:1px solid var(--color-border-faint); }

.nav__overlay-submenu { display:flex; flex-direction:column; }
.nav__overlay-submenu[hidden] { display:none; }
.nav__overlay-subitem {
  display:block; padding:0.85rem var(--gutter) 0.85rem calc(var(--gutter) + 1.25rem);
  font-size:1rem; font-weight:var(--fw-medium); color:var(--color-text-muted);
  border-bottom:1px solid var(--color-border-faint);
  transition:color var(--duration-ui) var(--ease-standard);
}
.nav__overlay-subitem:hover, .nav__overlay-subitem:focus-visible { color:var(--color-brand-white); }

/* W1: the overlay is three left-aligned groups — SITEMAP, THEME, LANGUAGE —
   each opened by its own eyebrow. The switches keep the shared .nav__switch
   component; only their placement changes. */
.nav__overlay-section { display:flex; flex-direction:column; align-items:flex-start; }
/* A 2px rule divides the three groups; the row borders inside a group stay at
   1px faint, so the group boundary reads as the stronger line. */
.nav__overlay-section + .nav__overlay-section {
  border-top:2px solid var(--color-border-soft); margin-top:0.75rem;
}
/* Visibility of system status: the row for the page you are on carries the
   brand rule on its left edge and a filled container. The purple tint reads
   on both the black and the white surface, so one value serves both themes. */
.nav__overlay-link.is-current,
.nav__overlay-subitem.is-current {
  background:rgba(161, 0, 255, 0.14);
  box-shadow:inset 3px 0 0 var(--color-brand-purple);
  color:var(--color-brand-white);
}
.nav__overlay-eyebrow {
  margin:0; padding:1.5rem var(--gutter) 0.5rem;
  font-family:var(--font-primary); font-size:0.62rem; font-weight:var(--fw-medium);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-muted);
}
.nav__overlay-section > .nav__switch { margin:0.25rem var(--gutter) 0.5rem; }
/* The overlay's two switches use the same component as the navbar's, one
   step larger for touch: 44px of height clears the minimum target size. */
.nav__overlay-section > .nav__switch > button {
  font-size:0.85rem; padding:0.7rem 1.1rem; min-height:2.75rem; min-width:3rem;
}
.nav__overlay-section > .nav__switch > button svg { width:1.15rem; height:1.15rem; }

/* WC-Q46: THEME and LANGUAGE share one row, so the language switch can no
   longer fall below the fold on a short phone. SITEMAP spans the full width;
   the two switch groups take a column each, split by a thin rule. Each switch
   fills its column as a two-segment control, taller and with a clearer
   outline than the bar's, so it reads as a control at a glance. */
.nav__overlay-links {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-content:start;
}
.nav__overlay-links > .nav__overlay-section:first-child { grid-column:1 / -1; }
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section { align-items:stretch; }
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section + .nav__overlay-section {
  border-left:1px solid var(--color-border-soft);
}
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section > .nav__switch {
  display:grid; grid-template-columns:1fr 1fr;
  margin:0.25rem var(--gutter) 1.25rem;
  border-color:var(--color-text-muted);
}
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section > .nav__switch > button {
  min-height:3rem; min-width:0; padding:0.7rem 0.5rem; font-size:0.95rem;
}
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section > .nav__switch > button + button {
  border-left-color:var(--color-text-muted);
}
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section > .nav__switch > button svg {
  width:1.3rem; height:1.3rem;
}
/* A tighter vertical rhythm, so the whole menu, switches included, fits a
   phone's visible height without scrolling. */
.nav__overlay-links { padding:0.5rem 0 0.75rem; }
.nav__overlay-links .nav__overlay-link { padding-top:0.8rem; padding-bottom:0.8rem; }
.nav__overlay-links .nav__overlay-subitem { padding-top:0.6rem; padding-bottom:0.6rem; }
.nav__overlay-links .nav__overlay-eyebrow { padding-top:1rem; }
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section { margin-top:0.5rem; }
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section > .nav__switch { margin-bottom:0.75rem; }

/* WC-Q47: the overlay exists for the mobile layout only. Wider than that it
   never paints, even if a resize leaves it open; navchrome.js also closes it. */
@media (min-width:768px) { .nav__overlay { display:none; } }

/* ============================================================ TABLET ============================================================ */
@media (min-width:768px) and (max-width:1023px) {
  .nav__inner { grid-template-columns:1fr auto 1fr; gap:0.75rem; }
  .nav__link { padding:0.5rem 0.5rem; font-size:0.85rem; }
  .nav__utility { gap:0.5rem; }
  .nav__hamburger { display:none; }
  .nav__center { display:flex; }
}

/* ============================================================ MOBILE ============================================================ */
/* Per the principal's dispatch note: the mobile bar carries ONLY the wordmark
   (left) and the hamburger (right). SwapLang and the Contact CTA (both in
   .nav__utility) are hidden here — language switching + Work/Contact live in
   the overlay reached by tapping the hamburger. */
@media (max-width:767px) {
  .nav__inner { display:flex; align-items:center; justify-content:space-between; gap:0; }
  .nav__logo { order:1; }
  .nav__hamburger { display:flex; order:2; }
  .nav__center { display:none; }
  .nav__utility { display:none; }
}

/* ============================================================
   PRIMARY NAVIGATION — uppercase labels (S4D · F3.1).
   Presentation only: the dictionary values stay mixed-case in both
   languages, so no key changes and no ES debt is created. Deleting
   this block restores the original casing exactly.
   ============================================================ */
.nav__link,
.nav__work-trigger,
.nav__work-item,
.nav__overlay-link,
.nav__overlay-subitem {
  text-transform: uppercase;
}
/* The Contact CTA is deliberately NOT uppercased (S4D-fix): it is a button,
   not a nav label, and sentence case keeps it distinct from the link set. */

/* ============================================================
   NAV POLISH (S4D-fix) — hover weight and the Work dropdown.
   ============================================================ */

/* Hover and keyboard focus resolve to solid white and heavier. The default
   stays muted and unweighted. The weight is drawn with a hairline shadow on
   either side, not set with font-weight: bold is wider than medium, and the
   labels beside the hovered one used to move (PR #45, PR45-Q25). Same rule
   as the footer's legal row (shared/legal.css). */
.nav__link:hover,
.nav__link:focus-visible,
.nav__work-trigger:hover,
.nav__work-trigger:focus-visible {
  color: var(--color-brand-white);
  text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}

/* ---- Work dropdown ---- */
.nav__work-menu {
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  min-width: 18rem;
  padding: 0.4rem 0;
  border-radius: 2px;
  box-shadow: 0 12px 32px var(--shadow-3);
}
/* One line per label — 01 · ACCREDITAPASS · SPORTS is the longest at 27
   characters and was wrapping against the old 15rem floor. */
.nav__work-item {
  white-space: nowrap;
  padding: 0.7rem 1.35rem;
  border-left: 2px solid transparent;
  transition:
    color var(--duration-ui) var(--ease-standard),
    background var(--duration-ui) var(--ease-standard),
    border-color var(--duration-ui) var(--ease-standard);
}
.nav__work-item:hover,
.nav__work-item:focus-visible {
  color: var(--color-brand-white);
  background: rgba(161, 0, 255, 0.10);
  border-left-color: var(--color-brand-purple);
}
@media (prefers-reduced-motion: reduce) {
  .nav__work-item { transition: none; }
  /* The nav's hide/return slide, the menu's fade, the menu icon and the work caret rest still too: Main and the
     briefs already stopped them through their own rules; About and Contact did not. */
  .nav, .nav__overlay, .nav__hamburger span, .nav__work-caret { transition: none; }
}

/* ============================================================
   OPEN MENU (PR #37: M4 · E3 · F2 — PR37-Q11, Q15, Q26, Q27). Phones only: the overlay never paints at 768+.
   Theme and language come first, then the pages. Each group carries a 16.5 px label; a 4 px purple line opens
   PAGES and a 2 px grey line separates its clusters (HOME | WORK + its briefs | ABOUT | CONTACT). Every row is
   at least 44 px. The close is the menu button itself, open: the same 44 px purple square, now with a white X.
   ============================================================ */
.nav__hamburger--open { margin-right:0; background:var(--color-brand-purple); }
.nav__hamburger--open span { height:2px; background:#FFFFFF; }
.nav__hamburger--open span:nth-child(1) { transform:translateY(calc(0.3rem + 2px)) rotate(45deg); }
.nav__hamburger--open span:nth-child(3) { transform:translateY(calc(-0.3rem - 2px)) rotate(-45deg); }

.nav__overlay-links { padding:8px 0 24px; row-gap:0; }
.nav__overlay-links .nav__overlay-section + .nav__overlay-section { border-top:0; border-left:0; margin-top:0; }
/* Theme and language first (a row of two), the pages after them */
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section { order:1; padding-bottom:4px; }
.nav__overlay-links > .nav__overlay-section + .nav__overlay-section + .nav__overlay-section { box-shadow:inset 1px 0 0 var(--color-border-soft); }
.nav__overlay-links > .nav__overlay-section:first-child { order:2; grid-column:1 / -1; margin-top:20px; border-top:4px solid var(--color-brand-purple); }
/* Group labels that lead their clusters */
.nav__overlay-links .nav__overlay-eyebrow { font-size:1.1rem; font-weight:var(--fw-black); letter-spacing:0.08em;
  color:var(--color-brand-white); padding-top:1.25rem; padding-bottom:0.5rem; }
/* Pages: roomier rows, separated by cluster */
.nav__overlay-links .nav__overlay-link { font-size:1.25rem; min-height:44px; box-sizing:border-box; padding-top:1rem; padding-bottom:1rem; border-top:0; border-bottom:0; }
.nav__overlay-links .nav__overlay-section:first-child > .nav__overlay-link:not(:last-child),
.nav__overlay-links .nav__overlay-section:first-child > .nav__overlay-group { border-bottom:2px solid var(--color-border-soft); }
.nav__overlay-section:first-child > .nav__overlay-group { align-self:stretch; width:100%; }
.nav__overlay-group:first-child .nav__overlay-link:first-child,
.nav__overlay-links > .nav__overlay-link:first-child { border-top:0; }
/* Work's briefs ride a purple rail inside Work's cluster */
.nav__overlay-links .nav__overlay-submenu { align-self:stretch; margin:4px 0 12px var(--gutter); border-left:2px solid var(--color-brand-purple); }
.nav__overlay-links .nav__overlay-subitem { min-height:44px; display:flex; align-items:center; box-sizing:border-box;
  border-bottom:0; padding:0.62rem 0.5rem 0.62rem 1rem; }

/* ---- Phone-menu icons (PR #43, PR43A-Q1…Q8). One 24-unit line icon per row, drawn like the theme switch's
   glyphs; it takes the row's colour, so a muted row has a muted icon and the current row's icon is white.
   Decorative: aria-hidden, no tab stop; the label stays the accessible name. The overlay never paints at 768+. ---- */
.nav__ov-row { display:inline-flex; align-items:center; gap:0.85rem; }
.nav__ov-icon {
  flex:0 0 auto; width:24px; height:24px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav__overlay-subitem { gap:0.7rem; }
.nav__overlay-subitem .nav__ov-icon { width:20px; height:20px; }