/* Navbar Component Styles */

/* CHR-1 (DONI-555) — GEOMETRY, measured from the canonical Figma file
 * `TJC7pZhPM2o5S0wuc1tnVI` (fingerprint 29701:77158 = 6613px):
 *
 *   desktop  node 29701:77294  "Top nav"     1440 x 111
 *   mobile   node 29978:88114  "Mobile nav"   375 x  90
 *
 * Everything in this file was previously the legacy port, unmeasured
 * against the 2026 design. The measured values are annotated inline with
 * the node id they came from so a re-measure is cheap.
 *
 * Independent corroboration of the desktop container: `pages/dosing.css:25`
 * carries a DEAD ported rule `.element-d-dosing .top-nav { width: 1440px;
 * padding: 12px 120px 0px }` — the same codegen, from the same frame,
 * scoped to a wrapper class that exists in no template.
 */

.navbar {
  position: relative;
  width: 100%;
  background-color: var(--color-white);
}

.nav-container {
  /* Sticky positioning lives on .navbar--container.
   *
   * 29701:77294 — the header is a COLUMN of two full-width rows, 8px
   * apart, inside `padding: 12px var(--gutter)`. 12 + 19 + 8 + 60 + 12
   * = 111, which is the frame height. It measured 152px before this. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: var(--page-width);       /* 1368 — see below */
  margin: 0 auto;

  /* The gutter is fluid, not flat.
   *
   * A flat `padding: 12px var(--gutter)` is what the frame measures, but
   * it only describes 1440. Applied at every width it takes 240px out of
   * a 1200px viewport, leaving 960px for a 180px logo and a 972px nav
   * row — measured overflow of 60px at 1200 and 178px at 992.
   *
   * FND-2 (DONI-542) moved that expression into --gutter-fluid in
   * css/base/variables.css so .container and the headline band use the
   * identical one and every page-level left edge agrees at every width.
   * Do not re-inline it here.
   *
   * ⚠️ The comment this replaced said "Verified: 1440 -> 120". That was
   * true when --page-width was 1440 and --gutter was 120. PR #128 moved
   * them to 1368 / 84 without updating it, and it read as a regression
   * for a while. It is not one: at 1440 the 1368 shell is centred with a
   * 36px margin, and 36 + 84 = 120. Measured in a browser 2026-08-03 —
   * content edge x=120, content box 1200 wide. Identical render, and it
   * keeps more content visible below 1440. */
  padding: 12px var(--gutter-fluid);
}

/* Scrolled state styles - removed JavaScript dependency, now handled by sticky positioning */

.navbar--transparent {
  background-color: transparent;
  box-shadow: none;
}

.navbar__container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 29701:77294 / I29701:77294;27788:5744 "Logo + Nav Items" — 1200x60,
 * space-between, BOTTOM aligned. The nav row's 38px labels sit on the
 * same baseline as the bottom of the 60px logo. */
.masthead {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
}

/* Logo — 180x60 desktop (I29701:77294;27788:5745), 149x50 mobile
 * (29978:88122). The padding-bottom: 2.5rem here was compensating for the
 * old two-column header; .masthead bottom-aligns instead. */
.navbar__logo {
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.navbar__logo:hover {
  opacity: 0.8;
  text-decoration: none;
}

.navbar__logo img {
  display: block;
  width: 149px;
  height: 50px;
}

/* Navigation Menu */
.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__item {
  position: relative;
}

/* 29701:77294 / "Nav Label" — 20px Agenda BOLD, line-height normal,
 * CHARCOAL. It rendered `#374151`, a Tailwind gray that is not a brand
 * token and appears nowhere in the design.
 *
 * Vertical structure of one label (total 38px):
 *
 *     [ copy  6px  caret ]   <- 24px row, items-center
 *              8px           <- gap
 *     [====== 6px =======]   <- indicator, full width
 *
 * The 8px + 6px is expressed as padding-bottom: 14px so the ::after
 * indicator can sit at `bottom: 0` and stretch the label's full width
 * without a wrapper element. */
.navbar .navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-charcoal);
  text-decoration: none;
  transition: color 0.15s ease;
  position: relative;
  padding: 0 0 14px;
  white-space: nowrap;
}

/* Button-specific styles for dropdown toggles.
 *
 * These rules predate CHR-1 and were already correct — the theme expected
 * a <button> here. The TEMPLATE was the odd one out, rendering
 * `<a href="javascript:void(0);">`, which is why navbar.js's
 * `querySelector('button.navbar__link')` found nothing and the entire
 * keyboard implementation never bound. Template fixed in DONI-555. */
.navbar button.navbar__link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
}

/* CHR-1 (DONI-555): was `:focus` with `outline: 2px solid
 * var(--color-primary)` — the same two faults as the `.btn` rule in
 * buttons.css. `:focus` paints a ring after a mouse click, which FND-4
 * designed against, and `--color-primary` is the coral, which does not
 * clear 3:1 against the white header with any margin.
 *
 * Restated from the house tokens rather than deleted, because
 * `outline: none` above is specificity (0,2,1) and would otherwise beat
 * interaction.css's `*:focus-visible` (0,1,0) and leave no ring at all. */
.navbar button.navbar__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-outer);
  outline-offset: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-inner);
}

/* This ticket's description is explicit about the colour: "Reference
 * var(--color-coral); do not hardcode either hex." `--color-primary` is
 * the LEGACY coral #f16b50; `--color-coral` is the 2026 Figma variable
 * `Coral` (#eb6f56) that FND-1 landed. So the active state moves from
 * #f16b50 to #eb6f56 here, and DONI-546 stays a one-token change. */
.navbar__link:hover {
  color: var(--color-coral);
  text-decoration: none;
}

.navbar .navbar__link--active {
  color: var(--color-coral);
}

/* Indicator — I29701:77294;27788:6366;27788:4031. 6px tall, FULL label
 * width, `border-radius: 999px 999px 0 0`, coral when active and
 * transparent otherwise.
 *
 * It was `border-radius: 50% 50% 0 0`, which on a 6px-tall box wide
 * enough to underline a word is an ellipse, not the pill the design
 * draws. `--radius-full` is 9999px and clamps to the same shape as 999px. */
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-color: var(--color-coral);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

/* DONI-555 QA round (2026-08-13): hover was painting the FULL active
 * treatment — same colour AND the same coral underline — so hovering any
 * non-active item was visually indistinguishable from the page you were
 * actually on. That is wrong regardless of what Figma draws, because the
 * underline is this nav's ONLY "you are here" signal (C-020 doesn't apply
 * to a fabricated confusion, only to a real design disagreement).
 *
 * Checked for a genuine Figma hover frame before picking a treatment:
 * get_metadata on the canonical file's whole layouts canvas (29999:57034,
 * TJC7pZhPM2o5S0wuc1tnVI) lists every top-level instance on it, and none is
 * named "hover" or carries a "Property 1=Hover" variant — the ONLY
 * variant-style property visible anywhere near the nav is the utility
 * links' `Property 1=Inactive`, which is unrelated. get_design_context on
 * a single "Nav Label" instance (I29999:57225;28339:19920;27788:6366, the
 * "Home" label on the canonical Home frame) shows only two things baked
 * into an instance: default (implied charcoal, no indicator) and this
 * frame's override (coral text + visible indicator, because Home is the
 * active page there). No separate hover treatment exists to read.
 *
 * So this is the "no Figma hover frame" branch this ticket asked for: kept
 * the coral colour-only change already on :hover (line ~181, unedited —
 * that rule predates this ticket and nothing here contradicts it), and
 * split the underline off so ONLY :active gets it. Colour-without-underline
 * is the minimal, reversible distinction — flag if design ever draws a real
 * hover comp so this can be replaced with a sourced value instead of a
 * judgment call. */
.navbar__link--active::after {
  transform: scaleX(1);
}

/* Navbar Actions */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Mobile Toggle — 29978:88128 "Frame 79026":
 *
 *     [ 24x24 hamburger ]
 *     [      Menu       ]   <- 12px Agenda Medium, STEEL
 *
 * It shipped as a 48x48 background-image button with no visible label
 * (the <span>Menu</span> was commented out of page.html.twig). The icon
 * stays a background-image because the open/close swap is already wired
 * to that; only the box and the restored label are new.
 *
 * mobile-menu.svg re-exported 2026-08-08 from the canonical Figma file
 * (TJC7pZhPM2o5S0wuc1tnVI, node 105:3027 "Icons" — three bars, confirmed
 * identical id in both HCP files, so this is a genuinely shared symbol
 * and not subject to C-030). The PREVIOUS file had the word "MENU" drawn
 * as vector letterforms baked into a second <path> below the three bars
 * — a real second rendering of the label, layered under the SEPARATE
 * `.navbar__toggle-label` span below. That combination is what read as
 * "Menu" twice under the hamburger. The new file is icon-only; the word
 * is the span's job. Do NOT add an XML comment inside this SVG file —
 * tried that for exactly this provenance note and it silently broke
 * Chromium's image decoder for background-image/`<img>` contexts
 * (confirmed: `new Image().onerror` fired, loaded fine as a direct
 * document navigation). Whatever documentation this file needs belongs
 * here instead.
 *
 * 2026-08-08: box height corrected from 32px to 42px, and the label's
 * line-height from 8px to 18px (matches Figma's own footnote text style,
 * canonical file node 105:2998, `leading-[var(--line-height/footnote,18px)]`
 * on 12px text — confirmed live via get_design_context). The old 8px
 * value was smaller than the 12px font using it, which forced the glyph
 * to paint outside its own line box; combined with the old mobile-menu.svg
 * asset having "MENU" baked into it as a second graphic (see that file's
 * own history), the two defects together read as the word "Menu"
 * appearing twice, stacked, under the icon. 32px was sized assuming a
 * zero-overhead label (24 icon + 8 label); it was never enough room for
 * real 12px/18px text to begin with.
 *
 * mobile-menu-close.svg re-exported 2026-08-08 from the canonical file,
 * the close button inside "0.2 M Home - Drop Down Menu" (29999:57242 —
 * paired by name with the superseded file's 29701:77343, C-030). The
 * icon there is a "+" (Union shape, 18.6x18.6) rotated -135deg into an
 * X; asset itself carries `fill="#F16B50" stroke="#F16B50"` — that's
 * `--color-nav-active`, NOT charcoal or black. Flagged live by Ofer
 * Shaal ("its color is coral") before this citation was found; the two
 * agree. Pre-rotated 45deg (equivalent to -135deg on a 4-fold-symmetric
 * "+") and centred in a 24x24 canvas here, matching the hamburger's
 * format, rather than applying the rotation via CSS — this file is a
 * static background-image, never interactive, so there's no reason to
 * carry Figma's runtime rotation trick into a context that will only
 * ever render the X. The PREVIOUS file was 20x20 with hardcoded
 * `stroke="black"` — both the size mismatch against the hamburger's
 * 24x24 and the wrong colour are what "too big" and "black" were. */
.navbar__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 28px;
  height: 42px;
  padding: 0;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  background-image: url(/themes/custom/hcp_nxt/images/icons/mobile-menu.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 24px 24px;
  background-color: transparent;

  &.navbar__toggle--active {
    background-image: url(/themes/custom/hcp_nxt/images/icons/mobile-menu-close.svg);
  }
}

/* 29978:88133 "Menu" — 12px, STEEL, sitting immediately under the 24px
 * glyph (text box top = 24, i.e. no gap). */
.navbar__toggle-label {
  display: block;
  margin-top: 24px;
  font-family: var(--font-agenda);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-steel);
}

/* `outline: none` on the toggle would defeat FND-4's house ring the same
 * way buttons.css and navbar.css did before CHR-1's first half. It is
 * simply not set; interaction.css's `*:focus-visible` applies. */

.navbar__toggle:hover {
  /* background-color: var(--color-gray-100); */
}

.navbar__toggle-icon {
  position: relative;
  width: 24px;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.navbar__toggle-icon::before {
  top: -8px;
}

.navbar__toggle-icon::after {
  bottom: -8px;
}

/* Toggle Active State */
.navbar__toggle--active .navbar__toggle-icon {
  background-color: transparent;
}

.navbar__toggle--active .navbar__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.navbar__toggle--active .navbar__toggle-icon::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* Dropdown Menu */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 267px;
  background-color: var(--color-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
}

.navbar__item:hover .navbar__dropdown,
.navbar__item--open .navbar__dropdown,
.navbar__dropdown--open {
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}


.navbar__dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar__dropdown-item {
  padding: 0;
  margin-bottom: 0;
}

/* DONI-555 QA round (2026-08-13): the ticket for this round claimed the
 * canonical dropdown-open frame draws LEFT-aligned, UNDERLINED sub-items,
 * against this rule's center/no-underline. Re-checked with fresh
 * get_screenshot reads (not codegen, per C-024/C-020) of TWO desktop
 * dropdown-open frames: 29999:57233 ("4.0 D Getting Started") and
 * 29999:57244 ("1.1 Long-Term Efficacy", whose 4-item Clinical Data panel
 * mixes short labels — "Safety" — with a long one — "Patient-Reported
 * Outcomes" — which is exactly the case that would expose center- vs
 * left-alignment). Both frames show every item CENTERED, at equal margins
 * on both sides, and NONE underlined, active or not — only the #FEEEE6
 * background differs on the current-page item. That is exactly what this
 * rule already does. Left unchanged; the ticket's alignment claim does not
 * hold against a keyed screenshot and implementing it would be a
 * regression against the design, not a fix. (Mobile IS underlined — see
 * the mobile-only rule further down, already correct, sourced from
 * 29999:57242 in an earlier round.)
 *
 * The other half of that same ticket item — "verify the active-highlight
 * rule is actually reachable" — WAS real, but the fix is not CSS: see
 * hcp_nxt.theme's _hcp_nxt_menu_mark_current(). The `navbar__link--active`
 * class itself was failing to reach the Dosing child link/parent pair
 * because of a menu-link/redirect alias split, same root cause as the
 * mobile active-indicator bug below. */
.navbar__dropdown-link {
  display: block;
  padding: var(--space-sm) 0;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: 20px;
  text-align: center;
}

/* DONI-823 (2026-09-01): client asked hover/active dropdown items to match
 * the live legacy site — bold text on the existing #FEEEE6 tint (image001
 * on the ticket). Supersedes the DONI-555 QA call above that removed bold;
 * that was correct for the canonical frame at the time, this is a deliberate
 * reversal per updated client direction, not a repeat of the same mistake. */
.navbar__dropdown-link:focus,
.navbar__dropdown-link:active,
.navbar__dropdown-link:hover {
  background-color: #FEEEE6;
  outline: none;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* DONI-555 QA round (2026-08-13): reported as "hovering the current-page
 * sub-item shows white instead of #FEEEE6" and suspected as a source-order/
 * specificity loss against the :hover rule above. Tested directly: on
 * /clinical-data/efficacy, where `navbar__link--active` DOES reach the
 * "Efficacy" dropdown link, a real synthesized :hover (confirmed via
 * `.matches(':hover')`, not just a mouseover event) left
 * `background-color: rgb(254, 238, 230)` unchanged — #FEEEE6, exactly.
 * Both selectors are (0,2,0); this one is declared AFTER `:hover` (~line
 * 409), so it already wins on source order with no reordering needed.
 * The Dosing page symptom this ticket described was never a cascade bug —
 * it was `navbar__link--active` not being applied there at all, same root
 * cause as the mobile indicator bug below. Fixed in hcp_nxt.theme. */
.navbar__dropdown-link.navbar__link--active {
  background-color: #FEEEE6;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* `.nav-container-left` / `.nav-container-right` are gone. They were the
 * two columns of the old header, and the design has no columns — it has
 * two stacked full-width rows. Their rules are deleted rather than left
 * behind, because a selector that matches nothing is indistinguishable
 * from one that is merely being out-specified. */

/* Mobile Navigation
 *
 * DONI-864: this used to be `max-width: 991px`. There is no tablet comp
 * (Area23/Ofer, 2026-08-08) and the drawn hamburger pattern (29978:88114
 * "Mobile nav", 375x90) is the only mobile-nav frame that exists, so it
 * now covers the whole gap CHR-1 discovered — the desktop header cannot
 * hold its 885px track + 180px logo below ~1200 regardless of gutter
 * scaling (measured overflow: 60px at 1200, 146px at 1024, 178px at 992).
 * PR #93's row-wrap holding measure for that gap is retired; this is the
 * real fix it was standing in for. */
@media (max-width: 1199px) {
  /* 29978:88121 "Frame 79024" — the masthead row is 375x66 with
   * `padding: 8px 24px`, logo left, menu control right. The desktop
   * 12px/120px column padding does not apply at this width. */
  .nav-container {
    padding: 0;
    gap: 0;
  }

  .masthead {
    padding: 8px 24px;
    align-items: center;
  }

  .navbar__logo img {
    /* 29978:88122 */
    width: 149px;
    height: 50px;
  }

  .top-nav__container {
    display: none;
  }
  .navbar__toggle {
    display: flex;
    z-index: 1030;
  }

  .navbar__container {
    justify-content: end;
  }
  .navbar__menu {
    position: fixed;

    /* NOT `top: var(--header-height-mobile)`, even though 90px is what
     * the drawer must clear in viewport coordinates.
     *
     * `.navbar--container` sets `backdrop-filter: blur(10px)`, and a
     * backdrop-filter establishes a containing block for fixed-position
     * DESCENDANTS — so this offset is measured from the top of that
     * element, which already sits below the 24px utility strip. Using 90
     * here put the drawer at viewport y=114, a 24px band of page content
     * showing between the header and the menu.
     *
     * The strip is subtracted so the value still tracks both tokens:
     * 90 - 24 = 66, the masthead row's own height (29978:88121).
     *
     * `height` is NOT adjusted the same way: it is a length, not an
     * offset, and 100dvh - 90 correctly reaches the viewport bottom from
     * y=90. navbar.js:86 recomputes it from the same 90px token when the
     * ISI tray is showing, and stays correct. */
    top: calc(var(--header-height-mobile) - var(--utilitybar-height));
    left: -100%;
    width: 100%;
    height: calc(100dvh - var(--header-height-mobile));
    background-color: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    /* DONI-555 QA round (2026-08-13): the vertical value here was
     * --space-xl (32px), measured live as a 40px gap between the mobile
     * logo's bottom edge and "Home"'s top edge — against a design that
     * draws 16px. Re-measured from raw geometry rather than trusting
     * either number (this ticket's own "~16px" included, per C-024):
     * canonical file, mobile masthead component
     * (I29999:57242;...;28630:40167;28630:40145) — the logo sits at
     * masthead-relative y=32 (24px utility strip + 8px), height 50, so its
     * bottom edge is y=82; the masthead ROW itself (Frame 79024, 24-90)
     * ends at y=90, i.e. 8px of the masthead's own bottom padding below
     * the logo. The drawer wrapper (Frame 79024 inside "0.2 M Home - Drop
     * Down Menu", 29999:57242) starts exactly at that same y=90 — matching
     * this file's own `.navbar__menu { top: ... }` calc below, which
     * positions the drawer at the masthead row's bottom edge on purpose —
     * and its "Utility Links" child, holding "Home", sits 8px further in.
     * 82 to 98 is 16px total, but it is NOT one gap: 8px belongs to the
     * MASTHEAD (already correct, not this rule) and 8px is the DRAWER's
     * own top inset, which is what this padding controls. --space-sm is
     * 8px (variables.css:384). Confirmed live post-fix: logo bottom stayed
     * 82px (masthead unaffected), first item top moved from 122px to 98px,
     * an exact 16px gap.
     *
     * Horizontal and bottom padding are untouched — this ticket's bug was
     * scoped to the top gap only, and the bottom edge is unmeasured. */
    padding: var(--space-sm) var(--container-padding) var(--space-xl);
    /* DONI-555 QA (2026-08-10): was --space-lg (24px). Measured off raw
     * geometry (not a screenshot) on 29378:104010 in the canonical mobile
     * drawer node (29999:57242): "Home" ends at y=32, "Clinical Data" (the
     * next top-level item) starts at y=42 — a flat 10px between every
     * top-level row, confirmed the same gap repeats between every sibling
     * pair down the drawer (Dosing at y=212 after the Clinical Data group
     * ends at y=202, MOA at y=318 after y=308, and so on). Off the 8px
     * grid, but it is what the frame draws, not a design token. */
    gap: 10px;
    overflow-y: auto;

    /* CHR-1 (DONI-555). `left: -100%` moves the drawer off-screen but
     * leaves every one of its 18 links FOCUSABLE. Measured at 375 with
     * real Tab presses: tab 3 onward landed on menu items at x=-351,
     * so a keyboard user tabbed through eighteen controls they could
     * not see, with the toggle still reporting aria-expanded="false".
     * WCAG 2.1 A, 2.4.7 Focus Visible.
     *
     * `visibility: hidden` is what takes them out of the tab order.
     * It is used in preference to the alternatives on purpose:
     *
     *   display: none   kills the slide — there is nothing to animate
     *                   from, so the drawer would pop rather than slide
     *   inert / hidden  needs JS, and navbar.js already has one source
     *                   of truth for the open state (the --active class)
     *
     * visibility is discretely animatable: hidden -> visible applies at
     * once (drawer is visible for the whole slide in), visible -> hidden
     * holds until the transition ends (drawer stays visible for the
     * whole slide out). That is exactly the behaviour a drawer wants,
     * which is why it is listed in the transition below. */
    visibility: hidden;
    transition:
      left var(--transition-base),
      visibility var(--transition-base);
    z-index: var(--z-fixed);
  }

  .navbar__menu--active {
    left: 0;
    visibility: visible;
    box-shadow: var(--shadow-xl);
  }

  .utility-navbar-mobile {
    display: block;
    width: 100%;
  }

  .utility-navbar-mobile .navbar__cta .btn {
    width: 100%;
  }

  .navbar__item {
    width: 100%;
    margin: 0;
  }

  .navbar .navbar__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* 18px = the 6px indicator + Figma's 12px gap between it and the
     * label (29701:77343 "Mobile Nav label"). Other sides stay 0. */
    padding: 0 0 0 18px;
    font-size: 20px;
    position: relative;
    /* Was `var(--CHARCOAL, #1D2D3A)`. `--CHARCOAL` is one of the ~84
     * undefined tokens FND-7 (DONI-675) exists for — it resolves to
     * nothing and silently renders the codegen fallback. The defined
     * token has the same value, so this one is free to repair here. */
    color: var(--color-charcoal);
  }

  /* 2026-08-07 (DONI-572 follow-up). Without this, "Home" rendered
   * charcoal instead of coral on the active page. Both this and the base
   * rule above are `.navbar .navbar__link` at (0,2,0) specificity, so it
   * comes down to source order — the base rule sits later in the file
   * than the desktop `.navbar .navbar__link--active` rule (:186) and was
   * silently winning against it inside this media query. Restated here,
   * same fix shape as the desktop cascade. */
  .navbar .navbar__link--active {
    color: var(--color-coral);
  }

  .navbar__link::after {
    display: none;
  }

  /* Mobile active indicator — a 6px vertical coral bar to the left of the
   * label, NOT the desktop bottom bar (hidden above). Figma's own
   * structure rotates a horizontal pill 90deg to get this; an absolutely
   * positioned pseudo-element gets the same picture without adding a node
   * to the template. Absolute positioning keeps it out of the flex flow,
   * so it does not disturb the label/chevron space-between layout — only
   * the 18px padding-left above makes room for it.
   *
   * Scope: top-level items only (`.navbar .navbar__link`). Figma draws an
   * indicator on child rows too (`.navbar__dropdown-link`), left for a
   * follow-up — children use a different active treatment already
   * (`.navbar__dropdown-link.navbar__link--active`, a background pill,
   * :374) and reconciling the two wants its own look, not a drive-by. */
  .navbar .navbar__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: var(--radius-full);
    background: transparent;
  }

  .navbar .navbar__link--active::before {
    background: var(--color-coral);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
  }

  .navbar__dropdown {
    position: static;
    opacity: 1;

    /* visibility is deliberately NOT set here — see the pair of rules
     * below this block. A one-class selector cannot decide it, because
     * `.navbar__item:hover .navbar__dropdown` (:331) is two classes and
     * outranks anything written at this specificity. */
    transform: none;
    box-shadow: none;
    /* CORRECTED 2026-08-10 (DONI-555 QA, still failing). The 2026-08-08
     * round estimated "~16-17px" from a rendered screenshot and landed on
     * --space-md. Raw geometry on 29378:104010 says otherwise: the
     * "Clinical Data" row (y=0, h=32) and its first child's group (y=32)
     * are FLUSH — zero gap, not 16px. The child row's own 16px indent
     * comes from `padding-left` on the link itself (matches Figma's
     * `pl-[16px]` on the "Mobile Nav label" instance), not from a margin
     * on this wrapper — so margin-left is retained (it produces the same
     * visual indent here) but margin-top has no basis in the frame. */
    margin-top: 0;
    margin-left: var(--space-md);
  }

  /* CHR-1 (DONI-555). The drawer's dropdowns follow the DRAWER's open
   * state, and they are stated as a matched pair on purpose.
   *
   * In the drawer every dropdown is permanently expanded — there is no
   * per-item toggle at this width — so the desktop `visibility: hidden`
   * at :325 has to be undone. It was undone with a bare
   * `.navbar__dropdown { visibility: visible }`, and that also undid the
   * DRAWER's own hidden state: with the drawer closed and off-screen at
   * x=-351, six dropdown children stayed in the tab order. Measured with
   * real Tab presses at 375, after the parent fix had already taken the
   * top-level items out of it.
   *
   * Inheriting from the drawer does not work either. `:331` is
   * `.navbar__item:hover .navbar__dropdown` — TWO classes — so any
   * one-class rule here loses to it whenever the pointer happens to rest
   * over a nav item, and a keyboard-order guarantee may not depend on
   * where a pointer is.
   *
   * So both states are written at two classes, and both sit after :331
   * in source order. The outcome is then a function of the drawer class
   * alone, in both directions, with no inheritance and no pointer
   * involved. */
  .navbar__menu:not(.navbar__menu--active) .navbar__dropdown {
    visibility: hidden;
  }

  .navbar__menu--active .navbar__dropdown {
    visibility: visible;
  }

  .navbar__dropdown-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* CORRECTED 2026-08-10 (DONI-555 QA, still failing). The 2026-08-08
     * round estimated "~14-20px row-to-row" from a screenshot and landed
     * on --space-md (16px). Raw geometry on 29378:104164 (Efficacy y=0,
     * Switch Data y=32, Patient-Reported Outcomes y=64, Safety y=96 — all
     * exactly 32px apart, matching each row's own 32px height) says the
     * true gap is zero: rows are flush, and the visual air between text
     * baselines is just 32px-tall rows with centred 20px text, not a gap
     * property. */
    gap: 0;
    row-gap: 8px;
    padding-top: 5px;
    padding-left: 18px;
  }

  .navbar__dropdown-item {
    margin: 0;
    line-height: normal;
  }

  .navbar__dropdown-link {
    padding: 0;
    color: var(--color-text-secondary);
    font-size: 20px;
    text-align: left;
    /* DONI-555 QA round (2026-08-08): every mobile dropdown child is
     * underlined in the canonical render (29999:57242) — Efficacy, Switch
     * Data, Patient-Reported Outcomes, Safety, Dosing, Switch Protocol,
     * Starting Patients, Ionis Every Step™ all carry an underline. */
    text-decoration: underline;
  }

  .navbar__actions {
    width: 100%;
    flex-direction: column;
    margin-top: 10px;
    padding-top: 14px;
    /* CORRECTED 2026-08-10 (DONI-555 QA: "divider line not bold enough").
     * It measured as a colour miss, not a weight one: `--color-border`
     * (#E0E0E0, a light UI-chrome grey) against the frame's own divider
     * (29378:104029, `bg-[var(--charcoal,#1d2d3a)] h-px`) — the same
     * CHARCOAL every other nav/footer divider in this theme already uses.
     * Still 1px; the "not bold enough" read is what a near-invisible grey
     * hairline looks like next to a dark one. */
    border-top: 1px solid var(--color-charcoal);
  }

  .navbar__actions .btn {
    width: 100%;
  }

  .footer-navbar-mobile .footer__link {
    color: var(--color-charcoal);
    font-family: var(--font-agenda);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-decoration: underline;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-fast);
    white-space: nowrap;
    width: auto;
    padding-bottom: 14px;
  }

  .footer-navbar-mobile .footer__link:hover {
    color: var(--color-coral);
    text-decoration: underline;
  }

  /* Privacy Choices icon is footer-only; the mobile drawer draws text. */
  .footer-navbar-mobile .footer__link svg {
    display: none;
  }

  /* Site Map stays in the page footer, not the mobile nav drawer. */
  .footer-navbar-mobile .sitemap-link {
    display: none;
  }
}

.navbar--container {
  max-width: 100%;
  width: 100%;
  position: sticky;
  top: 0;
  background-color: var(--color-white);
  backdrop-filter: blur(10px);
  z-index: var(--z-sticky);
  transition: all var(--transition-base);

  /* 29701:77294 carries a DROP_SHADOW effect: colour #51586129, offset
   * (0, 8), radius 24, spread -4 — which `--shadow-header` in
   * variables.css has held verbatim since FND-1. The only line that used
   * it was commented out, so the header shipped with NO shadow at all
   * and nothing separated it from the page beneath.
   *
   * Note the Figma codegen renders this as `drop-shadow(0 8px 12px …)`.
   * That is a lossy conversion, not a second measurement: the CSS
   * `drop-shadow()` FILTER has no spread parameter, so the exporter folds
   * the -4 spread into a halved blur. The effect definition is the value. */
  box-shadow: var(--shadow-header);

  /* 29978:88114 — the mobile header's shadow is a different effect:
   * offset (0, 4) rather than (0, 8), same colour, radius and spread. */
  @media (max-width: 1199px) {
    box-shadow: 0 4px 24px -4px rgba(81, 88, 97, 0.16);
  }
}



/* Desktop specific. DONI-864: was `min-width: 992px` — moved to 1200,
 * see the Mobile Navigation comment above. */
@media (min-width: 1200px) {

  .navbar__logo img {
    /* I29701:77294;27788:5745 */
    width: 180px;
    height: 60px;
  }

  /* I29701:77294;27788:6365 "Nav Labels" — 885px wide, space-between,
   * BOTTOM aligned. It was `max-width: 932px` with `gap: 40px`, neither
   * of which is in the design.
   *
   * space-between is deliberate rather than a fixed gap: the seven labels
   * measure 37.5px apart in the frame, but that spacing is DERIVED from
   * `justify-content: space-between` over the labels' own widths. Pinning
   * 37.5px would break the moment CNT-3 edits a label, and the last item
   * would no longer land flush on the 885px right edge. */
  .navbar__menu {
    min-width: 885px;
    align-items: flex-end;
    justify-content: space-between;

    /* ⚠️ A FLOOR, not a measurement — and it is inert once the menu
     * matches the design.
     *
     * The 885px row is sized for the SEVEN LABELS THE DESIGN DRAWS:
     * Home · Clinical Data · Dosing · MOA · Getting Started · Resources
     * · HAE Impact. Those measure 660px of text, so space-between leaves
     * 37.5px between each. This site's menu currently renders Home ·
     * Assess HAE Impact · RNA Technology · DAWNZERA Results · Dosing ·
     * Getting DAWNZERA · Resources — 876px of text on one line, which
     * leaves 9px to share between six gaps and runs the words together.
     *
     * The labels are menu CONTENT (DONI-548 / CNT-3) and this ticket's
     * first acceptance criterion forbids hardcoding them here, so the
     * fix is not available from this file.
     *
     * The two declarations do DIFFERENT jobs; do not read them as a
     * pair:
     *
     *   min-width: 885px  is the DESIGN TRACK. It is not a fallback —
     *                     it is what produces the 37.5px spacing, since
     *                     space-between has nothing to distribute
     *                     without it. `min-` rather than a flat `width`
     *                     only so the row grows instead of overflowing.
     *
     *   column-gap: 16px  is the CONTENT-OVERFLOW FLOOR, and it is the
     *                     one that is inert: 16 < 37.5, so once the
     *                     labels match the design it has no effect at
     *                     all. It is a readability constant, NOT a
     *                     measured value — nothing in Figma says 16.
     *
     * ⚠️ A legible header is not a fixed header. With today's labels the
     * row is 972px, not 885, and the logo clearance is 49px, not 135px.
     * The 885 vs 972 delta is the blocking evidence for the content
     * ticket: it fails a WIDTH check, which is objective, rather than a
     * readability one, which is not. */
    column-gap: 16px;
    height: auto !important;
  }

  .navbar__item {
    margin-bottom: 0;
  }

  /* DONI-555 QA round (2026-08-08): this used to rotate the caret 180deg
   * on hover. Removed — the canonical file's own OPEN-dropdown frame
   * (29999:57233, "4.0 D Getting Started - Drop Down Menu") still draws
   * the chevron pointing DOWN while the panel is open, so a hover-flip
   * is a mismatch, not a nicety. Confirmed via get_screenshot, not a
   * codegen read (C-024). */

  .top-nav {
    display: flex;
    width: 100%;
    padding: 0;
  }

  /* I29701:77294;27805:5813 "Utility Links + Button" — 1200x19,
   * space-between across the FULL content width. */
  .top-nav__container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
}

/* DONI-864: the row-wrap holding measure that used to live here (CHR-1,
 * PR #93, `@media (min-width: 992px) and (max-width: 1439px)`) is
 * retired. It was a deliberately reversible stand-in for exactly this
 * decision — Ofer's ruling, 2026-08-08: no tablet comp exists, so move
 * the hamburger breakpoint to 1200 instead of teaching the desktop
 * header to wrap. See the Mobile Navigation comment above. */
/*end desktop*/



/* Dark navbar variant */
.navbar--dark {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.navbar--dark .navbar__logo {
  color: var(--color-white);
}

.navbar--dark .navbar__link {
  color: var(--color-white);
}

.navbar--dark .navbar__link:hover {
  color: var(--color-primary);
}

.navbar--dark .navbar__toggle-icon,
.navbar--dark .navbar__toggle-icon::before,
.navbar--dark .navbar__toggle-icon::after {
  background-color: var(--color-white);
}

/* Top Navigation — the utility row. The vertical padding that used to
 * live here (12px top / 24px bottom) is now the .nav-container column
 * padding and its 8px row gap; keeping it here as well would double it. */
.top-nav {
  background-color: var(--color-white);

  @media (max-width: 1199px) {
    display: none;
  }
}

/* I29701:77294;27805:5814 — 16px Agenda Regular, CHARCOAL, one line,
 * 233px natural width. It rendered STEEL (#515861) at 220px fixed width
 * wrapped onto two lines by a <br> in the template, so the row measured
 * 40px tall against a design of 19px. */
.top-nav__text {
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

/* I29701:77294;28049:5920 — gap 24px. `--space-lg` is 1.5rem = 24px, so
 * the shipped value was already right; it is restated against the token
 * for the same reason FND-1 exists. */
.top-nav__links,
.top-nav__links nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Utility links — 16px Agenda Regular, CHARCOAL, UNDERLINED AT REST.
 *
 * ⚠️ Corrected AGAIN 2026-08-08 (DONI-555 QA round). The 2026-08-07
 * "underline on hover only" correction below was itself wrong, and it was
 * wrong for the exact reason this project's own doctrine warns about
 * (`C-020`/`C-024`): it was sourced from a `get_design_context` CODEGEN
 * text dump, not a rendered image. A direct `get_screenshot` of the
 * canonical file (fileKey TJC7pZhPM2o5S0wuc1tnVI, node 29999:57233 desktop
 * and 29999:57242 mobile) shows all five utility links — Important Safety
 * Information, Prescribing Information, Patient Site, Enrollment Form,
 * Request Ionis Specialist — underlined by default, on both viewports.
 * QA (Aman Malik, DONI-555, 2026-08-08) caught the regression this caused.
 * Also: "Important Safety Information" and "Request Ionis Specialist" ARE
 * both drawn — the "5 links -> 4" claim below was wrong too; both links
 * are confirmed enabled in content. */
.top-nav__link {
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 6px;                    /* I29701:77294;28049:5921;28049:5864 */
  transition: color var(--transition-fast);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .top-nav__link {
    width: auto;
    padding-bottom: 14px;
  }
}

.top-nav__link:hover {
  color: var(--color-coral);
  text-decoration: underline;
}

.top-nav__icon {
  width: 16px;
  height: 16px;
}

/* Navigation Dropdown Enhancement */
.navbar__item--dropdown {
  position: relative;
}

.navbar__dropdown-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Mobile menu follow-up, 2026-08-07 (DONI-572). This used to be
 * `display: none` at this width, but the canonical mobile drop-down frame
 * (`ysKdLJZq7FA0mJo8YcGkef` 29701:77343, read the same session the 3-item
 * children were confirmed) draws the chevron on Clinical Data, Dosing and
 * Getting Started same as desktop. The drawer keeps every dropdown
 * permanently expanded on mobile (see the big comment on
 * `.navbar__menu:not(.navbar__menu--active) .navbar__dropdown` below) — that
 * behaviour is untouched here. This only restores the visual affordance
 * Figma draws; it does not make the icon a toggle. */
@media (max-width: 1199px) {
  .navbar__dropdown-icon-wrapper {
    display: flex;
  }
}

/* Caret colour — DONI-572 follow-up, 2026-08-07, revised same day.
 *
 * First pass here made the caret inherit the label colour (charcoal by
 * default, coral on hover/active) — that matched the desktop chrome.md
 * extraction, which sets no colour on `.main-nav__caret` and lets it
 * inherit `.main-nav__link`'s charcoal. Ofer Shaal reviewed that render
 * live (charcoal renders very dark at 24px icon size, close enough to
 * read as black at a glance) and decided the caret should be CORAL
 * ALWAYS, not state-dependent, superseding the chrome.md inheritance
 * reading. No Figma citation for "always coral" was available at
 * decision time; this is a direct human call, same shape as DONI-548.
 *
 * Two rules, not one: the `color` rule covers the SVG's normal
 * `currentColor` inheritance; the `path` rule is belt-and-suspenders
 * because the SVG in menu--main.html.twig also carries
 * `fill="currentColor" stroke="currentColor"` as presentation
 * ATTRIBUTES, which any CSS `fill`/`stroke` declaration overrides
 * regardless of specificity — so if that inheritance chain ever breaks
 * again upstream, the path-level rule still lands the right colour. */
.navbar__dropdown-icon-wrapper,
.navbar__dropdown-icon {
  color: var(--color-coral);
}

.navbar__dropdown-icon {
  width: 100%;
  height: 100%;
}

.navbar__dropdown-icon path {
  fill: var(--color-dark-coral);
  stroke: var(--color-dark-coral);
}

/* Advanced Navigation Layout Variants */
.nav-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-end;
}

.utility-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.disclaimer {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  width: 155px;
  line-height: var(--line-height-normal);
}

.utility-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.utility-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
  line-height: var(--line-height-normal);
}

.utility-link:hover {
  color: var(--color-primary);
}

.utility-link .icon {
  width: 16px;
  height: 16px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0 var(--space-xs);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link--active {
  color: var(--color-primary);
}

.nav-link--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.nav-link.dropdown {
  flex-direction: row;
  gap: var(--space-sm);
  align-items: center;
}

.nav-link .icon {
  width: 16px;
  height: 16px;
}

@media (min-width: 1200px) {
  .utility-navbar-mobile {
    display: none;
  }
}
.mobile-utility-strip {
  display: none;
}

/* Mobile utility strip — 29978:88115 "Frame 1321315584", 375x24.
 *
 * Measured: background #eee, padding 4px top / 2px bottom / 16px inline,
 * text 14px Agenda Regular with an 18px line box, CHARCOAL. It shipped at
 * 16px STEEL with 6px/6px padding, i.e. a 30px strip against a 24px one —
 * which is also why `--utilitybar-height` was 30px.
 *
 * 2026-08-08: the second cell (Prescribing Information link) is built now
 * that CNT-3 (DONI-572) has shipped a real, editable utility-nav menu —
 * see the template comment for why the link is still hardcoded rather
 * than pulled out of that menu by title. `.mobile_us_text` is now the
 * FIRST cell only, 216px per the canonical frame
 * (I29999:57242;...;28011:5117, matches the superseded file's
 * 29701:77343 equivalent); it used to be the whole strip.
 *
 * DONI-677 resolved 2026-08-08 (Ofer Shaal, Figma as source of truth):
 * the notice now reads "For US Healthcare Professionals", matching the
 * canonical mobile frame verbatim. Covers hcp_nxt only — see the
 * template comment for why the live legacy theme is untouched. */
@media (max-width: 1199px) {
  .mobile-utility-strip {
    display: flex;
    align-items: center;
    background: #eee;
    position: sticky;
    top: 0;
    z-index: 14;
  }

  .mobile_us_text {
    flex: 0 0 216px;
    color: var(--color-charcoal);
    text-align: center;
    font-family: var(--font-agenda);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    padding: 4px 16px 2px;
  }

  .mobile-utility-strip__link {
    flex: 1 0 0;
    color: var(--color-charcoal);
    text-align: center;
    font-family: var(--font-agenda);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-decoration: underline;
    white-space: nowrap;
    /* Figma's cell (I29999:57242;...;112:15303) carries pt-4/pr-16/pb-2
     * and NO left padding — asymmetric on purpose, the notice cell to its
     * left already supplies the visual gap. A symmetric 16px/16px here
     * (matching the notice cell) cost exactly the width "Prescribing
     * Information" needed to stay on one line at 375px: with the extra
     * left padding the text was 127px wide fitting a smaller area than
     * scrollWidth wanted, wrapping "Prescribing" / "Information" onto two
     * lines (confirmed via Range.getClientRects(), 2 line boxes). */
    padding: 4px 16px 2px 0;
  }
}

header.top-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  padding: 0;
  text-align: center;
  background: white;
  transition: transform 0.5s ease;
  z-index: var(--z-sticky);

  @media (max-width: 1199px) {
    top: var(--utilitybar-height, 30px);
  }
}

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

  @media (max-width: 1199px) {
    top: 0;
  }
}

.mobile-utility-strip {
  transition: transform 0.5s ease;
}

.mobile-utility-strip:has(+ header.hide-header) {
  transform: translateY(-100%);
}

body.navbar-open {
  /* DONI-870: intentional — scroll LOCK, not a layout clip; released when the overlay closes. */
  overflow: hidden;
}

@media (max-width: 1199px) {
  header.top-header {
    z-index: 1001;
  }
}

@media (max-width: 1199px) {
  .navbar__dropdown {
    display: none;
  }

  /* Open when toggled, or when this section is the active trail (current page). */
  .navbar__dropdown.dropdown-active,
  .navbar__item--dropdown:has(> .navbar__link--active) .navbar__dropdown {
    display: block;
  }

  .navbar__item--dropdown:has(.dropdown-active) .navbar__dropdown-icon-wrapper,
  .navbar__item--dropdown:has(> .navbar__link--active) .navbar__dropdown-icon-wrapper {
    transform: rotate(180deg);
  }
}