/**
 * @file
 * CHR-1 / DONI-726 — the 2026 top navigation.
 *
 * SOURCE OF TRUTH: Figma `PMOumVEsuQEHJFYkbGBD84`.
 *
 * | Thing | Node |
 * |---|---|
 * | Desktop nav, 1440×146 | `8245:1456` (variant of set `8245:1457`) |
 * | Nav label Default / Hover / Active | `8246:1470` / `8257:20406` / `8246:1472` |
 * | Life with HAE panel | `24581:19612` (page `24410:65586`) |
 * | Events & Resources panel | `24581:5556` (page `24410:65586`) |
 *
 * 🔴 `Primary Navigation 8038:1154` is NOT this nav. Same Figma frame, legacy
 * 1200/1920 grid, captioned "For wires". Check the width — 1440 is the real one.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * 🔴 THIS FILE OWNS `header`, `.mobile_us_text` AND `.hide-header`.
 *
 * `css/components/navbar.css` used to. It is no longer in the `global`
 * library (see the note in `dtc_nxt.libraries.yml`) but it is STILL reachable
 * on 14 legacy pages through `css/theme/main.css`'s `@import`, and on
 * `ambassador` / `stay-updated` directly.
 *
 * `@import`ed rules land in Drupal's `theme` bucket, which loads AFTER
 * `component`. So on those pages navbar.css's `header { … }` and
 * `.mobile_us_text { … }` come LAST and win any same-specificity fight.
 * Every rule below that has to beat one of them is therefore written one
 * notch more specific ON PURPOSE — `.topnav`, `.topnav.hide-header`,
 * `body .mobile_us_text`. Do not "simplify" them back down.
 * ─────────────────────────────────────────────────────────────────────────
 *
 * ## Geometry at 1440, all read off `8245:1456`
 *
 * | Part | Value |
 * |---|---|
 * | Header | 1440×146, white, `padding-top: 12`, gutter 120 |
 * | Content column | 1200 (`8364:20500` is `w-full` inside the 120 gutter) |
 * | Shadow | `0 8px 24px -4px rgba(81,88,97,.16)` = `--shadow-card` |
 * | Hairline | 1px `#eee` under the 1200 column, not full bleed |
 * | Logo | 210×70, vertically centred in the 134 row |
 * | Right column | `gap: 24`, right-aligned. 48 + 24 + 62 = 134 ✓ |
 * | Utility row | 48 tall, `gap: 24` (measured: 4 items at 24 across a 736 box) |
 * | Nav row | 62 tall, `gap: 44` (measured: 7 items, six identical 44 gaps) |
 * | Nav label | Agenda 700 20px, `line-height: 1.2` |
 * | Indicator | 6 tall, radius `999px 999px 0 0`, spans the label |
 *
 * 🔎 `line-height: 1.2` is measured, not guessed. `I23259:23385;8245:5845` is
 * a two-line label block 48px tall → 24px per line → 24/20 = 1.2. Agenda's
 * `normal` is 1.16, which lands the item at 60.4 instead of 62.
 *
 * ⚠️ The Nav label MASTER (`8246:1471`) draws Agenda **Regular** with an 18px
 * gap. Every instance in the nav overrides it to **Bold** with an 8px gap.
 * The instances are what the page draws, so the instances win.
 *
 * ## What is NOT reproduced, and why
 *
 * - Hide-on-scroll at every width (prod parity). Scroll down slides the header
 *   off-screen; scroll up brings it back (`js/navbar.js` + `.topnav.hide-header`).
 *   On mobile the US-residents bar hides with the same class so the stack is
 *   not left pinned at the top.
 * - ⛔ `pb-px` on three of the seven Nav label instances. Figma autolayout
 *   rounding — four of seven do not have it, and the indicator sits flush on
 *   the hairline in the render.
 * - ⛔ Per-item `text-align`. Figma says `left` on Home and Getting Started
 *   and `center` on the other five. Home is one line and Getting/Started are
 *   within a few px of each other, so the two are indistinguishable. One
 *   rule, `center`, matching five of seven.
 */

/* ==========================================================================
 * The compression clamps.
 *
 * 🔴 THESE EXIST BECAUSE THE DESIGN ONLY FITS AT 1440.
 *
 * The nav row is 892 wide and the logo is 210, so the header needs 1102px of
 * content column. `css/base/layout.css` gives 1200 at 1440 and, because the
 * gutter is a flat 120 from 768 up, only **784** at 1024. The nav overflows
 * by 318px there. AC 7 says it must not.
 *
 * `layout.css` anticipated exactly this and assigned it here:
 *   "⛔ Header clamp() values for nav gap, nav label and logo width. Those
 *    are one component compensating for its own overflow."
 *
 * So the gutter and the container are left alone — the header keeps sharing
 * the page's left edge at every width, which is the guarantee
 * `project/scripts/layout/check-alignment.py` exists to hold — and five of
 * this component's own numbers fall linearly from their Figma value at 1440
 * to a value that fits at 1024. Continuous: no breakpoint is introduced, and
 * every one of them is exactly the Figma number at ≥1440.
 *
 * | Custom property | 1024 | 1440 (Figma) |
 * |---|---|---|
 * | `--topnav-logo-w`     | 150 | 210 |
 * | `--topnav-gap`        | 16  | 44  |
 * | `--topnav-label-size` | 16  | 20  |
 * | `--topnav-util-gap`   | 8   | 24  |
 * | `--topnav-util-size`  | 14  | 16  |
 *
 * Each is `clamp(min, calc(<slope>vw + <intercept>), max)` where the slope is
 * (max − min) / (1440 − 1024) expressed in vw.
 * ========================================================================== */

.topnav {
  --topnav-logo-w: clamp(150px, calc(14.423vw + 2.308px), 210px);
  --topnav-gap: clamp(16px, calc(6.7308vw - 52.923px), 44px);
  --topnav-label-size: clamp(16px, calc(0.9615vw + 6.154px), 20px);
  --topnav-util-gap: clamp(8px, calc(3.8462vw - 31.385px), 24px);
  --topnav-util-size: clamp(14px, calc(0.4808vw + 9.077px), 16px);

  /* Deliberately below the ISI tray's 1000 (`dtc_nxt_isi/css/isi-tray.css:96`).
     The tray is fixed to the BOTTOM and this is stuck to the top, so they do
     not overlap — but if a future change makes them, the safety tray must win.

     🔴 DONI-702, Ofer Shaal, 2026-08-11 — this now governs MOBILE too, not
     just desktop. `FS-3.34` ("the open mobile menu paints in front of the ISI
     and Indication trays") is SUPERSEDED for `dtc_nxt`: the mobile drawer no
     longer competes for stacking order with the tray at all — it is
     height-capped (below) to stop above wherever the tray currently ends, on
     the HCP `hcp_nxt` model, so the ISI stays reachable/visible whenever the
     menu is open. `--topnav-z` used to have a `1100` mobile override for
     exactly the opposite reason; it is gone, and this desktop value now
     applies at every width. See the `.topnav__right` mobile rule for the
     height math and `dtc_nxt_isi/css/isi-tray.css`'s `z-index` comment for
     the other half of this contract. */
  --topnav-z: 100;
}

/* ==========================================================================
 * The header shell
 * ========================================================================== */

/* `.topnav` (0,1,0) beats navbar.css's bare `header` (0,0,1) whatever the
   load order. `display` is deliberately not set — navbar.css carries
   `header { display: block !important }` on the legacy pages and block is
   what this layout wants anyway. */
.topnav {
  position: sticky;
  top: 0;
  z-index: var(--topnav-z);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  text-align: start;
  transform: translateY(0);
  transition: transform 0.5s ease;
}

header.topnav.hide-header {
  transform: translateY(-430%);
}

.topnav__band {
  padding-inline: var(--layout-gutter);
}

.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: min(100%, var(--layout-content));
  margin-inline: auto;
  padding-block-start: 12px;
  /* `8364:20500` — 1px #eee, under the 1200 column rather than full bleed.
     🔎 An INSET SHADOW, not a border, and that is not a style preference.
     Figma draws the stroke inside the 134 frame, so the header measures 146.
     A real `border-block-end` adds its 1px to the box and measured 147. */
  box-shadow: inset 0 -1px 0 var(--color-eee);
}

.topnav__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.topnav__logo img {
  inline-size: var(--topnav-logo-w);
  /* 210×70 on `10420:78798`. Expressed as a ratio so the clamp cannot skew it. */
  aspect-ratio: 3 / 1;
  block-size: auto;
}

.topnav__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  min-inline-size: 0;
}

/* ==========================================================================
 * Utility band — `8244:27440`
 * ========================================================================== */

.topnav__utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--topnav-util-gap);
  /* `flex-wrap` + `min-block-size` are a GUARD, not the design. Measured at
     1024 the utility row clears the logo by 15px, which is the tightest gap
     anywhere in this component. If the Typekit kit ever fails and Chrome
     falls back to Arial, the strings get wider — this makes that wrap instead
     of pushing the page into a horizontal scrollbar. Neither rule fires at
     1440 or 1024; both were measured at h=48, no wrap. */
  flex-wrap: wrap;
  min-block-size: 48px;
}

.topnav__utility-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--topnav-util-gap);
}

.topnav__mobile-divider {
  display: none;
}

.topnav__indication {
  display: none;
}

.topnav__utility-link {
  font-family: var(--font-agenda);
  font-size: var(--topnav-util-size);
  font-weight: 400;
  line-height: normal;
  color: var(--color-steel);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.topnav__utility-label-mobile {
  display: none;
}

/* ⚠️ OUR DECISION, NOT A MEASUREMENT — the utility links have no hover
   variant in Figma either. Same reasoning as `.topnav__panel-link:hover`. */
.topnav__utility-link:hover {
  color: var(--color-dark-coral);
}

/* `10224:10036` is a stock Filled button — 48 tall, radius 999, 24/16 padding,
   Agenda Bold 20 on Coral. `.btn.btn--primary` already measures all of it
   (FND-7 / DONI-714), so nothing is redefined here.
   ⛔ Not `.btn--lg`, not `.btn--round` — both are legacy modifiers that
   override the measured geometry. */
.topnav__cta {
  flex: 0 0 auto;
}

/* ==========================================================================
 * Primary nav — `8244:27460`
 * ========================================================================== */

.topnav__list {
  display: flex;
  align-items: stretch;
  gap: var(--topnav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topnav__item {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One rule for both the `<a>` items and the `<button>` triggers, so the two
   cannot drift. The button resets are what make them render identically. */
.topnav__link {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Focus comes from `css/base/a11y.css` (FND-5 / DONI-708). Nothing here sets
   `outline` — a `nav a:focus { outline: … }` would outrank the theme ring,
   which is the bug FND-5 fixed in three files. */

/* DONI-702 QA: an orange underline appeared on hover across the mobile
   menu — leaf links, panel sub-items, utility links, and the "Stay updated"
   CTA alike. Root cause: `css/base/typography.css`'s global
   `a:hover { text-decoration: underline }` (0,1,1) was never outranked for
   text-decoration specifically — every hover rule below this one changes
   only `color`. `.topnav a:hover` (0,2,1) beats it and covers every anchor
   in the component in one place, rather than patching each hover rule. None
   of Figma's link/button hover states draw an underline. */
.topnav a:hover {
  text-decoration: none;
}

.topnav__labelwrap {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  /* `I23259:23385` — 8px between the label block and the indicator. */
  gap: 8px;
}

/* `flex: 1` + centring is what reproduces Figma's `pt-[12px]` on the
   single-line "Home": its one 24px line sits centred in the 48px the two-line
   labels occupy, i.e. 12px down. One rule instead of a per-item padding. */
.topnav__label {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-agenda);
  font-size: var(--topnav-label-size);
  font-weight: 700;
  /* Measured, not `normal`. See the file header. */
  line-height: 1.2;
  color: var(--color-charcol);
  text-align: center;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.topnav__label-mobile-separator {
  display: none;
}

.topnav__label br {
  display: none;
}

/* `8245:5848` — 6 tall, radius 999/999/0/0, spans the label, NO fill by
   default. `8246:1472` (Active) is the only variant that fills it. */
.topnav__indicator {
  display: block;
  block-size: 6px;
  inline-size: 100%;
  border-radius: 999px 999px 0 0;
  background-color: transparent;
  transition: background-color var(--transition-fast);
}

/* `8257:20406` Hover — the label goes STEEL. The indicator stays unfilled. */
.topnav__link:hover .topnav__label {
  color: var(--color-steel);
}

/* `8246:1472` Active — Coral label, Coral indicator. Set per page from
   `top_nav_active` in `dtc_nxt_preprocess_page()`. */
.topnav__link.is-active .topnav__label,
.topnav__link.is-active:hover .topnav__label {
  color: var(--color-coral);
}

.topnav__link.is-active .topnav__indicator {
  background-color: var(--color-coral);
}

/* The 24×24 chevron sits in its own column at `pt-[12px]`, OUTSIDE the label
   box — which is why the indicator stops at the label edge (`23259:23386`). */
.topnav__chevron {
  display: flex;
  flex: 0 0 24px;
  align-items: flex-start;
  block-size: 24px;
  margin-block-start: 12px;
  color: var(--color-charcol);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.topnav__link:hover .topnav__chevron {
  color: var(--color-steel);
}

.topnav__link.is-active .topnav__chevron {
  color: var(--color-coral);
}

.topnav__link[aria-expanded="true"] .topnav__chevron {
  transform: rotate(180deg);
}

/* 🔴 DONI-726 (CHR-1, desktop). Figma measured Life with HAE's chevron as
   NOT rotating on open (`I24410:65658`) while Events & Resources rotates
   (`24410:65726`) — a per-trigger override used to sit here forcing
   `transform: none` on the Life with HAE chevron to match that.
   Ofer Shaal approved overriding it: both triggers now rotate on hover/open,
   matching each other rather than Figma. See docs/design-deviations.yml
   DEV-004. The base `[aria-expanded="true"] .topnav__chevron` rule above
   now applies uniformly to both triggers — do not re-add a per-trigger
   override without a fresh approval. */

/* ==========================================================================
 * 🔴 THE TWO DROPDOWN PANELS ARE BUILT DIFFERENTLY, AND THAT IS DELIBERATE.
 *
 * Same role, same markup, two different sets of measured values. This is a
 * known defect in the design file. It ships as drawn — DO NOT HARMONISE IT.
 *
 * | | Life with HAE `24581:19612` | Events & Resources `24581:5556` |
 * |---|---|---|
 * | Container padding | 9px block / 8px inline | **0** |
 * | Gap between items | 4px | **0** |
 * | Item padding | 9px top / 12px inline / 7px bottom | **12px block / 20px inline** |
 * | Item radius | **8px on every item** | **16px on the first and last only** |
 * | First item weight | 400, like the rest | **700** |
 * | Item colour | STEEL `#515861` | STEEL `#515861` |
 * | Panel radius | 16px | 16px |
 *
 * Both panels: white fill, no border, and the same two-layer shadow.
 * ========================================================================== */

.topnav__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  /* Figma's two overlay instances disagree — 4px below the header on
     `24581:19612`, 8px on `24581:5556`. They are hand-placed, so this is a
     nudge rather than a rule. 8 is taken for both; the alternative reading
     is 4. */
  margin-block-start: 8px;
  inline-size: max-content;
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow:
    0 0 16px -4px rgba(12, 12, 13, 0.05),
    0 8px 24px -4px rgba(12, 12, 13, 0.1);
}

.topnav__panel[hidden] {
  display: none;
}

.topnav__panel-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topnav__panel-item {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topnav__panel-link {
  display: block;
  inline-size: 100%;
  font-family: var(--font-agenda);
  font-size: var(--size-body);
  font-weight: 400;
  /* Measured, like the nav label. `24581:19618` is 40 tall with 9/7 padding
     → a 24px line → 24/20 = 1.2. Agenda's `normal` is 1.16 and lands the
     item at 39, which compounds to a 2px error on the whole panel. */
  line-height: 1.2;
  color: var(--color-steel);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* ⚠️ OUR DECISION, NOT A MEASUREMENT. `21185:29573`, the panel-item master,
   is a plain frame with no variants — Figma draws no hover state for these
   at all. A link with no hover affordance is a usability defect, so one is
   supplied here, on the same footing as the focus ring in `css/base/a11y.css`
   (which the design also does not draw). Dark Coral because it is the theme's
   existing link-hover colour and clears 4.76:1 on white.
   ⛔ Do not "restore" this to nothing on a faithful re-extraction. */
.topnav__panel-link:hover {
  color: var(--color-dark-coral);
}

.topnav__panel-link[aria-current="page"] {
  font-weight: 700;
}

/* --- Life with HAE — `24581:19612` ------------------------------------- */

.topnav__panel--life {
  padding: 9px 8px;
}

.topnav__panel--life .topnav__panel-list {
  gap: 4px;
}

.topnav__panel--life .topnav__panel-link {
  padding: 9px 12px 7px;
  border-radius: 8px;
}

/* --- Events & Resources — `24581:5556` ---------------------------------- */

.topnav__panel--events {
  padding: 0;
}

.topnav__panel--events .topnav__panel-list {
  gap: 0;
}

.topnav__panel--events .topnav__panel-link {
  padding: 12px 16px;
  border-radius: 0;
}

.topnav__panel--events .topnav__panel-item:first-child .topnav__panel-link {
  border-radius: 16px 16px 0 0;
}

.topnav__panel--events .topnav__panel-item:last-child .topnav__panel-link {
  border-radius: 0 0 16px 16px;
}

/* ==========================================================================
 * The mobile trigger. Hidden on desktop.
 * ========================================================================== */

.topnav__burger,
.topnav__burger-icon,
.topnav__burger-open,
.topnav__burger-close {
  display: none;
}

/* ==========================================================================
 * Below 1024 — desktop CHR-1 only fits from 1024 up.
 *
 * CHR-2 measured mobile design: collapsed `8245:1455` (375×104), expanded
 * `8364:34718`, label set `8364:34415`.
 * ========================================================================== */

@media (max-width: 1023px) {
  .topnav {
    /* DONI-702: no longer overridden above the ISI tray's 1000 — see the
       base `--topnav-z` comment. The drawer stays below it at every width
       now; it is height-capped instead of raced on stacking order. */
    --topnav-collapsed-height: 104px;
    inline-size: 100%;
  }

  .topnav__band {
    padding-inline: 0;
  }

  .topnav__inner {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    inline-size: 100%;
    min-block-size: 74px;
    /* Measured for the collapsed logo/hamburger row (`8245:1455`). DONI-702:
       `.topnav__right` used to be a flex sibling here and needed a
       negative-margin trick to escape this padding — now that it's
       `position: fixed` (below), it's out of this box's flow entirely and
       never inherits it, so this padding only ever has to be right for the
       row it visibly wraps. */
    padding: 9px 18px 10px 20px;
    box-shadow: none;
  }

  .topnav__logo img {
    inline-size: 165px;
    block-size: 55px;
  }

  .topnav__burger {
    display: flex;
    flex: 0 0 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-charcol);
    cursor: pointer;
  }

  .topnav__burger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
  }

  .topnav__burger-open,
  .topnav__burger-close {
    inline-size: 24px;
    block-size: 24px;
  }

  .topnav__burger-open,
  .topnav__burger-open svg,
  .topnav__burger-close svg {
    display: block;
  }

  .topnav__burger-label {
    display: block;
    font-family: var(--font-agenda);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  .topnav__burger-close,
  .topnav__burger[aria-expanded="true"] .topnav__burger-open {
    display: none;
  }

  .topnav__burger[aria-expanded="true"] .topnav__burger-close {
    display: block;
  }

  .topnav__burger[aria-expanded="true"] {
    flex-basis: 44px;
    align-items: center;
  }

  .topnav__burger[aria-expanded="true"] .topnav__burger-icon {
    inline-size: 28px;
  }

  .topnav__burger[aria-expanded="true"] .topnav__burger-label {
    display: none;
  }

  /* DONI-702, Ofer Shaal 2026-08-11 — ported from HCP's `hcp_nxt` model
     (`navbar.css:471-535`, `navbar.js:100-109`), superseding `FS-3.34`'s
     "menu paints in front of the ISI/Indication trays" for `dtc_nxt`. Was a
     normal-flow flex child that grew `.topnav__inner` to the drawer's own
     content height when open (up to 1049px) — sticky along with the rest of
     `.topnav`, so opening it could push the ISI tray out of reach for the
     whole scroll distance. Now an overlay: fixed, capped to the space between
     the collapsed header and wherever the ISI tray currently starts, and
     scrolls internally past that. The CSS cap below is a static fallback —
     `js/topnav.js` refines `max-block-size` at runtime against the tray's
     LIVE height, which varies by `data-state` (`dtc_nxt_isi/css/isi-tray.css`:
     peek 203px, collapsed 76px, expanded up to `80vh`) in a way no media
     query can express. */
  .topnav__right {
    display: none;
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: var(--topnav-collapsed-height, 104px);
    flex-direction: column;
    align-items: stretch;
    inline-size: 100%;
    max-block-size: calc(100dvh - var(--topnav-collapsed-height, 104px));
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 24px;
    padding-block: 24px;
    /* It painted opaque before only because it was a normal-flow child
       inside `.topnav`'s own white background — `position: fixed` lifts it
       out of that box entirely, so without its own background the page
       underneath showed through the gaps between nav items. `--shadow-card`
       for the same reason `.topnav` itself carries it: a hard edge against
       whatever the drawer now floats over. */
    background-color: var(--color-white);
    box-shadow: var(--shadow-card);
  }

  .topnav__right.is-open {
    display: flex;
  }

  .topnav__utility-row {
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-inline: 24px;
  }

  .topnav__utility {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
    min-block-size: 0;
  }

  .topnav__utility-link {
    /* DONI-702 QA: was a bare 18px, overriding the desktop clamp with a value
       that doesn't match either end of it. Figma's mobile utility list
       (`24410:65589`) reads `Size/Footnote` = 16 — the same token the
       US-residents strip already uses. */
    font-size: var(--size-footnote);
    line-height: 1.2;
    white-space: nowrap;
  }

  .topnav__utility-label-desktop {
    display: none;
  }

  .topnav__utility-label-mobile {
    display: inline;
    white-space: pre;
  }

  .topnav__cta {
    inline-size: 100%;
  }

  .topnav__nav {
    order: 1;
  }

  .topnav__mobile-divider {
    display: block;
    order: 2;
    inline-size: calc(100% - 48px);
    block-size: 1px;
    margin: 0 24px;
    padding: 1px 0 0 0;
    border: 0;
    background-color: var(--color-steel);
  }

  .topnav__indication {
    display: block;
    order: 4;
    margin-block-end: -24px;
  }

  .topnav__indication .indication-bar {
    box-shadow: none;
  }

  .topnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 10px 24px;
  }

  /* 🔴 The item stacks its trigger ABOVE its panel here. Without this it
     keeps the desktop row direction and the panel lands beside the label,
     half off the screen. */
  .topnav__item {
    flex-direction: column;
    align-items: stretch;
  }

  .topnav__link {
    inline-size: 100%;
    min-block-size: 32px;
    padding-block: 0;
  }

  .topnav__labelwrap {
    align-self: auto;
    inline-size: 100%;
    gap: 0;
    width: fit-content;
    margin-right: 18px;
  }

  .topnav__label {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 20px;
    text-align: start;
    white-space: nowrap;
  }

  .topnav__label-mobile-separator {
    display: inline-block;
    flex: 0 0 0.25em;
    inline-size: 0.25em;
    overflow: hidden;
  }

  .topnav__indicator {
    background-color: transparent;
  }

  .topnav__link.is-active .topnav__indicator {
    background-color: transparent;
  }

  .topnav__link.is-active .topnav__label,
  .topnav__link.is-active:hover .topnav__label {
    color: var(--color-coral);
  }

  .topnav__panel,
  .topnav__panel[hidden] {
    position: static;
    margin: 0;
    padding: 0;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    inline-size: 100%;
  }

  .topnav__panel[hidden] {
    display: none;
  }

  .topnav__panel:not([hidden]) {
    display: block;
  }

  .topnav__panel-item {
    inline-size: 100%;
  }

  .topnav__panel-link,
  .topnav__panel--life .topnav__panel-link,
  .topnav__panel--events .topnav__panel-link {
    border-radius: 0;
    font-size: 20px;
    text-align: start;
  }

  /* `8364:34718` draws the mobile sub-items at the same weight as each other.
     The desktop panel's bold first item is a desktop-only treatment. */
  .topnav__panel--events .topnav__panel-item:first-child
    .topnav__panel-link {
    font-weight: 400;
  }

  .topnav__chevron {
    display: flex;
    margin: 0px;
  }

  /* DONI-702 QA: mobile's chevron only turned coral on `.is-active` (the
     desktop rule, reused as-is), staying CHARCOAL while merely open. Figma's
     mobile frame (`I24410:65589;...;23259:46971`, Life with HAE captured
     open) draws it coral independent of the active-page state — "Home" is
     the active item in that frame and its label is coral, but the OPEN
     "Life with HAE" chevron is coral too, on a charcoal label. Two separate
     signals: label colour tracks the active page, chevron colour tracks
     open/closed. Rotation is untouched — the base `chevron-down` asset
     already flips to pointing up at `rotate(180deg)`, matching the screenshot. */
  .topnav__link[aria-expanded="true"] .topnav__chevron {
    color: var(--color-coral);
  }

  .topnav__panel-link[aria-current="page"] {
    color: var(--color-coral);
  }

  .topnav.is-menu-open {
    z-index: 1100;
  }
}

/* ==========================================================================
 * The mobile US-residents bar.
 *
 * `body .mobile_us_text` is (0,1,1) and beats navbar.css's `.mobile_us_text`
 * (0,1,0) even though navbar.css loads later on the 14 `main.css` pages.
 * The class name itself is load-bearing — `js/main.js:32` measures it for the
 * anchor-scroll offset.
 *
 * Values carried over unchanged from navbar.css; only the switch width moves,
 * 991 → 768, so the whole theme flips modes at one number.
 * ========================================================================== */

body .mobile_us_text {
  display: none;
}

@media (max-width: 1023px) {
  body .mobile_us_text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 1101;
    block-size: 30px;
    padding-block: 0;
    background: var(--color-eee);
    font-family: var(--font-agenda);
    font-size: var(--size-footnote);
    font-weight: 400;
    line-height: normal;
    color: var(--color-steel);
    text-align: center;
    transform: translateY(0);
    transition: transform 0.5s ease;
  }

  body .mobile_us_text.hide-header {
    transform: translateY(-100%);
  }

  .topnav {
    top: var(--utilitybar-height, 30px);
  }
}

@media print {
  .topnav,
  body .mobile_us_text {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .topnav__right.is-open {
    top: 74px;
  }
}