/* =============================================================
   barrio_npm_prototype main navbar — three-level menu
   Desktop: mega-menu dropdown + level-3 floating popup
   Mobile (<992px): single-open accordion + drill-down to level-3
   ============================================================= */

:root {
  /* Desktop palette */
  --np-mega-bg: #faf8f3;
  /* Top-level menu link + mega-menu title colour. Iteration history:
       indianred (~3.7:1 contrast, borderline WCAG, no brand tie)
         → --npm-tukutuku-navy (#1B2E52, tied to hero apex ring)
         → --np-link (#4c1e79, tied to the site's primary link colour)
     Current value ties the menu to the same violet used on every
     CTA pill site-wide, reinforcing a one-token "violet = clickable"
     language. 12+:1 contrast on the white #header band. */
  --np-mega-text: var(--np-link);
  --np-mega-text-muted: #666666;
  --np-mega-border: #eaeaea;
  --np-popup-bg: #ffffff;
  --np-popup-fg: #1a1a1a;
  --np-popup-fg-muted: #555555;
  --np-popup-hover-bg: #2a2a2a;
  --np-popup-hover-fg: #ffffff;

  /* News accent — applied to news titles and the "More news" CTA in the
     mega-menu banner. Distinguishes news links from L2 navigation items. */
  --np-news-accent: #006e6d;

  /* Mobile palette */
  --np-mobile-card-bg: #ffffff;
  --np-mobile-card-fg: #000000;
  --np-mobile-text-muted: #666666;
  --np-mobile-card-radius: 12px;
  --np-mobile-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --np-mobile-card-gap: 10px;
  --np-mobile-card-padding-y: 18px;
  --np-mobile-card-padding-x: 20px;
  --np-mobile-divider: #eeeeee;
  --np-mobile-page-bg: #f5f6f8;
}

/* ----- Shared base ----- */
.np-navbar {
  width: 100%;
  font-family: inherit;
  border-radius: 10px;
  margin: 5px;
  margin-bottom: 20px;
}
.np-navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.np-navbar a {
  text-decoration: none;
  color: inherit;
}
.np-navbar button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.np-navbar [hidden] {
  display: none !important;
}
.np-indicator {
  display: inline-block;
  line-height: 1;
}
.np-navbar .np-top-link:focus-visible,
.np-navbar .np-l2-link:focus-visible,
.np-navbar .np-l3-link:focus-visible,
.np-navbar button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* =============================================================
   Desktop layout (>= 992px)
   ============================================================= */
@media (min-width: 992px) {
  .np-navbar {
    display: flex;
    align-items: center;
    /* Navbar bg is a near-white off-white (#fdfdfd) so the pill sits
       as the SLIGHTEST possible tonal step down from #header's #ffffff
       band — just enough for the pill's border-radius + shadow to
       register visually without the pill "claiming" its own colour
       zone. Iteration history on this line:
         v1: --np-mega-bg (#faf8f3)   — invisible, matched header band
         v2: #ffffff                  — invisible, matched white header
         v3: #f1ece1 (warm cream)     — too much contrast, warm pill
         v4: #fdfdfd (near-white)     — current, minimal-contrast pill
       Subtle shadow reinforces the lift so the pill reads as a card
       sitting on the band rather than a colour zone cut into it. */
    background: #fdfdfd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 0 20px;
    /* Positioning context for the full-width dropdown — the dropdown
       anchors to the navbar bounds rather than to the parent <li>, so it
       appears in the same place regardless of which top-level item opened
       it. */
    position: relative;
  }
  .np-logo {
    flex: 0 0 auto;
    margin-right: 24px;
    /* Stretch to fill the navbar's cross-axis so the border-bottom
       below lands at the same Y as every .np-top-item's coloured
       border (which sit at .np-menu's bottom edge — the tallest
       flex line in the navbar). display:flex + align-items:center
       keeps the img itself vertically centred inside the stretched
       anchor. */
    align-self: stretch;
    display: flex;
    align-items: center;
    /* Matching bar under the logo — black (semantic "home / brand
       anchor", contrasts with the section-hue coloured bars) at the
       same 4px thickness as .np-navbar .np-top-item. */
    border-bottom: 4px solid #000;
  }
  .np-logo img {
    height: 54px;
    display: block;
    /* Grow rightward from the left edge on hover so the enlarged
       image doesn't push into the nav or shift the logo's own
       position. Transform-origin default is centre — overriding to
       `left center` anchors the left edge. */
    transform-origin: left center;
    transition: transform .18s ease;
  }
  .np-logo:hover img,
  .np-logo:focus-visible img {
    /* ~8% growth — noticeable "clickable" affordance without being
       aggressive. Since it's a transform (not width change), the
       layout doesn't reflow — surrounding nav items don't jitter. */
    transform: scale(1.08);
  }
  .np-menu {
    display: flex;
    align-items: stretch;
    flex: 1;
    justify-content: flex-end;
    gap: 18px;
  }
  .np-top-item {
    /* No positioning context here — the dropdown anchors to .np-navbar
       instead so it can span the full navbar width. */
    position: static;
    display: flex;
    align-items: flex-start;
  }
  /* Top-align the row's contents (link and toggle) so the + button lands
     at a consistent Y across primary items regardless of how many lines
     the link spans (a long description that wraps to 2 lines would
     otherwise lower the centre of that row). The toggle's margin-top
     below positions the + glyph at the title's vertical centre. */
  .np-top-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  /* Note the .np-navbar prefix: the colour rules need higher specificity
     than the shared .np-navbar a { color: inherit } rule, which is
     (0,1,1). Prefixed selectors are (0,2,1) and win. */
  .np-navbar .np-top-link {
    padding: 18px 10px;   /* was 18px 4px — extra horizontal room so
                             the hover pill has breathing space between
                             adjacent top-level items */
    border-radius: 6px;
    color: var(--np-mega-text);
    /* text-transform: uppercase retired 2026-08-20 per
       main-menu-casing-sweep-plan.md — source YAML now carries the
       intended APA title case; CSS was masking it as all-caps. */
    font-weight: 600;
    line-height: 1.15;
    transition: background-color .15s ease, transform .15s ease;
  }
  /* Hover — subtle pale-violet bg + micro-lift (translateY) so users
     see a clear "hovered" zone. Addresses user testing feedback that
     the previous no-bg hover was invisible. Same pattern applied to
     L2 + L3 items below, tuned per axis (top-level = translateY
     because items are horizontal siblings; L2/L3 = translateX because
     items are vertical siblings). */
  .np-navbar .np-top-link:hover,
  .np-navbar .np-top-link:focus {
    background-color: color-mix(in srgb, var(--np-link), white 92%);
    transform: translateY(-1px);
  }
  .np-top-title {
    font-size:0.8em;
    display: block;
  }
  .np-top-desc {
    display: block;
    color: var(--np-mega-text-muted);
    font-size: 0.8em;
    font-weight: 400;
    /* text-transform: uppercase retired 2026-08-20 — descriptions
       now sentence-cased at the source per the title-case
       guideline. */
    margin-top: 2px;
  }
  /* Toggle button is visually hidden by default and revealed only when
     keyboard-focused. Mouse users open the mega-menu via hover, so the
     +/× button is informational for them; keyboard and screen-reader
     users still get the disclosure control via Tab.

     This is the standard .visually-hidden + :focus-visible pattern
     ("sr-only-focusable"). When focused the button re-enters the row's
     flex flow and reclaims its 28×28 size, causing a small one-step
     layout shift — intentional, it confirms focus has landed on a
     control. Required for WCAG-compliant disclosure widgets on a
     hover-driven mega-menu. */
  .np-top-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .np-top-toggle:focus-visible {
    /* Reveal the toggle with its original visible appearance. margin-top
       centres the + glyph on the title text's vertical centre so the
       focused button lands at a consistent Y across primary items.
       Calculation:
         - link padding-top:       18px  (from .np-navbar .np-top-link)
         - title line-height:    ~18.4px (0.9em * line-height 1.15)
         - title vertical centre: 18 + 18.4 / 2 = ~27.2px from row top
         - button centre when top-aligned: height / 2 = 14px
         - margin-top to align centres: 27.2 - 14 = ~13.2px → rounded to 12px
       Re-tune if you change .np-top-link padding, .np-top-title font-size,
       or the button height. */
    position: static;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 12px 0 0 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  /* Desktop indicator: + closed, × open. */
  .np-top-toggle .np-indicator::before {
    content: '+';
    font-size: 22px;
    font-weight: 400;
    line-height: 2;
  }
  .np-top-toggle[aria-expanded="true"] .np-indicator::before {
    content: '×';
    font-size: 24px;
    line-height: 2;
  }

  /* Mega-menu dropdown — full-width, anchored to .np-navbar so the
     position is identical regardless of which top-level item opened it.
     Banner left, L2 list right; widths split via the existing flex. */
  .np-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 0;
    /* Plain white dropdown — cleaner background for the tinted
       violet CTA column + the L2 list. Was --np-mega-bg (#faf8f3)
       previously; switched 2026-08-18. .np-search-popup still uses
       the token so the search UI keeps its warm off-white. */
    background: #ffffff;
    border: 1px solid var(--np-mega-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 24px;
    z-index: 100;
    display: flex;
    gap: 28px;
  }
  .np-mega-banner {
    flex: 0 0 45%;
    border-right: 1px solid var(--np-mega-border);
    padding-right: 20px;
    /* Beige tint retired 2026-08-18 with the CTA-column ship —
       banner reads on the parent dropdown's --np-mega-bg so the
       tinted violet pills carry the colour weight, not the
       container. */
  }
  /* Section title — mixed-case editorial treatment with a
     tukutuku triangle decoration to the left. Triangle echoes
     the hero pyramid vocabulary + picks up each section's
     --cluster-hue (assigned via .np-landing-group--<slug>) so
     the banner ties visually to the top-nav underline for the
     same section. Iteration history:
       previous: 1.5em bold uppercase, no decoration — flat, no
                 visual identity per section
       current:  2em mixed-case + triangle in cluster-hue —
                 editorial feel + per-section colour identity
     `clip-path: polygon(0 100%, 100% 100%, 50% 0)` draws an
     upward triangle from a plain box — no SVG asset needed,
     colour tunable via background-color. */
  .np-mega-banner-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 2em;
    line-height: 1.05;
    font-weight: 700;
    text-transform: none;    /* was uppercase — mixed case for editorial feel */
    /* Title text carries the same per-section --cluster-hue as the
       triangle decoration below + the top-nav underline for this
       section, so the banner reads as one colour-tagged block.
       Fallback to --np-link violet on sections without a defined hue
       (contrast passes AA for all 5 defined cluster hues on white
       given 2em title text = large-text threshold). */
    color: var(--cluster-hue, var(--np-link));
    margin-bottom: 6px;
  }
  .np-mega-banner-title::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 22px;
    background-color: var(--cluster-hue, var(--np-link));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
  }

  .np-mega-banner-desc {
    /* Small caption below the mega banner title — reads as the
       English translation / subtitle. 2026-08-20: retired uppercase
       + letter-spacing per title-case-guideline.md — descriptions
       are sentence-cased at the source. Padding-left aligns with
       the title's text (past the triangle decoration). */
    font-size: 0.85em;
    font-weight: 500;
    color: #666;
    padding-left: 36px;   /* triangle width (24px) + gap (12px) */
  }
  /* Brand line as a quiet footer at the bottom of the banner — divider above,
     small uppercase muted text. The dropdown is full-width so this is a
     subtle brand presence rather than a competing element. */

  .np-mega-banner-heading {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    /* 2026-08-20 iteration: retired the border-top + middle-dot
       single-line treatment. Now a stacked mi/en pair — te reo top
       line reads as the "name badge" (larger, darker weight); en
       under-line reads as a secondary tagline. No divider — sits
       naturally below the CTA row (margin-top 28px gives the
       cluster room to breathe). */
  }
  .np-mega-banner-heading-mi {
    font-size: 1.06em;
    font-weight: 600;
    /* 30% --np-link violet mixed into near-black — subtle undertone
       so the top line stays readable at small size but visually
       ties into the CTA cluster's violet identity above. */
    color: color-mix(in srgb, var(--np-link) 30%, #2c2c2b);
  }
  .np-mega-banner-heading-en {
    font-size: 0.9em;
    /* 40% --np-link mixed into mid-grey — more pronounced violet
       cast on the secondary line where legibility contrast is less
       critical (smaller weight, tagline-role). Same violet family
       as the mi line above so the two feel like one identity. */
    color: color-mix(in srgb, var(--np-link) 40%, #888);
  }
  /* CTA column inside the mega-menu banner — replaces the earlier
     news-view block (retired 2026-08-18 in favour of persistent
     access to the site's 4 primary CTAs from every dropdown).
     Base pill visual + tint mapping live in components.css
     (.np-cta-pill / .np-cta-list); only mega-specific layout here.
     Divider on top matches the news block's separator. */
  .np-mega-banner .np-cta-list--mega {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--np-mega-border);
    gap: 8px;
    align-items: stretch;   /* pills fill the banner column width */
  }
  /* Mega pill treatment 2026-08-20 update: unified with the hero
     CTA visual language for site-wide consistency. All rest+hover
     colour rules (filled tinted-violet, matching 3px border, self-
     darken hover, pill 1 brand-blue variant) live on the shared
     base .np-cta-pill in components.css. This block owns only the
     mega-specific LAYOUT tweaks — width + alignment inside the
     dropdown column. Iteration history of the retired subtle-fill
     treatment (pale bg + coloured text + outline border) is
     preserved in the git log around commits 3dda46ba / b21fb411
     if you need to reconstruct that look. */
  .np-navbar .np-cta-pill--mega {
    /* Pills shrunk to ~75% of column width so they don't dominate
       the mega banner. Explicit width overrides the parent flex
       container's `align-items: stretch`; align-self: flex-start
       pulls the pill to the column's left edge (matches the rest
       of the mega banner's left-aligned content flow). */
    width: 75%;
    align-self: flex-start;
    /* Restore white text — the ambient `.np-navbar a { color: inherit }`
       rule at menu.css:56-58 (specificity 0,1,1) beats the base
       `.np-cta-pill { color: #fff }` (0,1,0), so pills inside the
       navbar pick up the mega banner's dark navy text instead of
       staying white. This override is (0,2,0) — takes priority. */
    color: #fff;
  }
  /* English label kept on the mega variant (matches the hero
     variant's bilingual pattern) so international users who don't
     read te reo can still parse the CTA. Small vertical density
     cost accepted for the a11y/i18n benefit. Iteration history:
       Day 3: hidden with `.np-cta-pill__en { display: none }` to
              reduce banner dominance
       Day 3+: restored — te-reo-only was too opaque for users
              (esp. international audience). */
  /* L3 items — force single-line "title · description" layout in
     the mega menu. Was flex-column with title above, desc below
     (2 lines per item). Cuts vertical density in the L2/L3 nav
     columns so the mega banner doesn't need to compete with a
     tall stack. L2 items keep their 2-line title + desc format
     (see .np-l2-title / .np-l2-desc rules elsewhere in this file)
     — L2 = section headers, deserve breathing room; L3 = leaf
     nav rows, can be tight. */
  .np-navbar .np-l3-link {
    display: block;
  }
  .np-l3-link-title,
  .np-l3-desc {
    display: inline;
  }
  .np-l3-desc::before {
    content: '· ';
    margin-left: 0.35em;
    color: var(--np-popup-fg-muted);
  }
  /* L2 list is the right ~55% of the mega-menu. Each L2 becomes its own
     column header; its L3 children render directly underneath it (no
     hover flyout). The auto-fit grid spreads columns evenly across the
     available width. */
  .np-level-2-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    /* Two-track row template so each L2 item can span both rows via
       subgrid — row 1 = all L2 headings (auto-sized to tallest
       across the visual row); row 2 = L3 lists (auto-sized to
       tallest L3 list; COLLAPSES to zero when all items in a
       visual row have no L3 children, e.g. "Ko Wai Mātou" section).
       Previously `auto 1fr` but 1fr on row 2 pushed second-visual-
       row items to the bottom of the submenu when their row 2 was
       empty — visible huge gap. `auto auto` collapses cleanly.
       Per nav-colour-bars-plan.md. */
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-content: start;
  }
  .np-l2-item {
    /* No longer a popup-anchor; safe to drop position: relative. */
    position: static;
    /* Subgrid — item spans both parent-grid rows; internal rows
       inherit the parent's row tracks. .np-l2-row lands in row 1
       (heading, subgrid-stretched to tallest heading in the visual
       row), .np-l3-panel in row 2 (L3 list). row-gap 0.75rem
       matches the previous .np-l2-row margin-bottom so the visual
       spacing between heading and L3 list is unchanged. */
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0.75rem;
  }
  /* L2 row reads as a column heading: bottom border under the heading
     separates it visually from its L3 sub-items below. Spacing between
     heading and L3 list is now handled by .np-l2-item's subgrid
     row-gap — margin-bottom retired. */
  .np-l2-row {
    display: flex;
    align-items: baseline;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid var(--np-mega-border);
    gap: 8px;
    /* Border sits at the row's bottom edge — in subgrid the row
       stretches to the tallest heading's height across the visual
       row, so all border-bottoms land at the same Y. */
  }
  .np-navbar .np-l2-link {
    flex: 1;
    color: var(--np-mega-text);
    font-weight: 600;
    /* text-transform: uppercase retired 2026-08-20 — L2 titles
       carry their APA title case at the source. */
    font-size: 0.95rem;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    margin: 0 -10px;   /* pull hover bg to column edges so the rectangle
                          feels full-row rather than text-hugging */
    border-radius: 6px;
    transition: background-color .12s ease, transform .12s ease;
  }
  .np-l2-title {
    display: block;
  }
  .np-l2-desc {
    display: block;
    text-transform: none;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--np-mega-text-muted);
    line-height: 1.3;
    letter-spacing: 0;
  }
  /* L2 hover — pale-violet bg + rightward micro-shift. Muted
     description also darkens so both lines respond in unison.
     Replaces the earlier text-decoration-only hover (invisible in
     user testing). */
  .np-navbar .np-l2-link:hover,
  .np-navbar .np-l2-link:focus {
    background-color: color-mix(in srgb, var(--np-link), white 92%);
    transform: translateX(3px);
  }
  .np-navbar .np-l2-link:hover .np-l2-desc,
  .np-navbar .np-l2-link:focus .np-l2-desc {
    color: var(--np-mega-text);
  }
  /* L2 toggle hidden on desktop — its only role was the flyout trigger,
     which is gone. Mobile drilldown still uses it. */
  .np-l2-toggle {
    display: none;
  }

  /* L3 panel becomes a transparent inline container — no flyout
     positioning, no shadow, no background. Its <ul.np-l3-list> stacks
     vertically directly below its L2 heading. */
  .np-l3-panel {
    position: static;
    min-width: 0;
    background: transparent;
    color: var(--np-popup-fg);
    z-index: auto;
    padding: 0;
    box-shadow: none;
  }
  /* Override the HTML `hidden` attribute on desktop. Mobile JS toggles
     it for drilldown state; on desktop the panel is always rendered.
     !important is required to defeat the higher-priority
     `.np-navbar [hidden] { display: none !important }` rule at the top
     of this file, which the JS-toggled `hidden` attribute would otherwise
     trigger on every L3 panel by default. */
  .np-l3-panel[hidden] {
    display: block !important;
  }
  /* Mobile-only chrome — already hidden by the existing rule below; kept
     here for clarity. */
  .np-l3-back,
  .np-l3-title,
  .np-l3-title-desc {
    display: none;
  }
  .np-l3-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  /* L3 links — visually subordinate to L2 (smaller font, muted colour).
     Pale-violet bg + rightward micro-shift on hover so the row reads
     as a highlighted zone; replaces the earlier underline-only hover
     that user testing showed was too subtle. */
  .np-navbar .np-l3-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px;
    margin: 0 -10px;   /* pull hover bg to column edges */
    border-radius: 6px;
    color: var(--np-popup-fg-muted);
    font-size: 0.875em;
    background: transparent;
    transition: background-color .12s ease, transform .12s ease, color .12s ease;
  }
  .np-navbar .np-l3-link:hover,
  .np-navbar .np-l3-link:focus {
    color: var(--np-popup-fg);
    text-decoration: none;
    background-color: color-mix(in srgb, var(--np-link), white 92%);
    transform: translateX(3px);
  }
  .np-l3-link-title {
    display: block;
  }
  .np-l3-desc {
    display: block;
    font-size: 0.82em;
    font-weight: 400;
    color: var(--np-popup-fg-muted);
    line-height: 1.3;
  }
  .np-l3-link:hover .np-l3-desc {
    color: var(--np-popup-fg);
  }

  /* Active-trail styling — underline scoped to title only to keep the
     visual tidy when a description is present below. */
  .np-top-item.is-active-trail > .np-top-row > .np-top-link .np-top-title,
  .np-l2-item.is-active-trail > .np-l2-row > .np-l2-link .np-l2-title,
  .np-l3-item.is-active-trail > .np-l3-link .np-l3-link-title {
    text-decoration: underline;
    color: var(--np-popup-fg);
    font-weight: 700;
  }

  /* Search — desktop renders the form inside a popup triggered by an icon
     button. .np-search-card is positioned so its descendant popup can
     anchor below it, right-aligned. */
  .np-search-card {
    margin-left: 16px;
    display: flex;
    align-items: center;
    position: relative;
  }
  .np-navbar .np-search-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--np-mega-text);
    border-radius: 50%;
  }
  .np-search-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  .np-search-icon {
    display: block;
  }
  .np-search-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 320px;
    background: var(--np-mega-bg);
    border: 1px solid var(--np-mega-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 16px;
    z-index: 120;
  }
  .np-search-card.is-open .np-search-popup {
    display: block;
  }
  .np-search-popup form,
  .np-search-popup input[type="search"],
  .np-search-popup input[type="text"] {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Universal-search GET form (submits to /search-research). */
  .np-search-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  .np-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--np-popup-fg, #1a1a1a);
    background: #fff;
    border: 1px solid var(--np-mega-border, #eaeaea);
    border-radius: 6px;
  }
  .np-search-form input[type="search"]:focus {
    outline: 2px solid var(--np-news-accent, #006e6d);
    outline-offset: 1px;
    border-color: transparent;
  }
  .np-search-form .np-search-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    color: #fff;
    background: var(--np-news-accent, #006e6d);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .np-search-form .np-search-submit:hover { filter: brightness(1.08); }
  .np-search-form .np-search-submit:focus-visible {
    outline: 2px solid var(--np-news-accent, #006e6d);
    outline-offset: 2px;
  }

  /* Parent-link row inside the mega-menu is a mobile affordance only — the
     desktop banner already exposes the parent link. Hide here. */
  .np-l2-item.is-parent-link {
    display: none;
  }
}

/* =============================================================
   Mobile layout (< 992px)
   Single-open accordion cards + drill-down to level-3
   ============================================================= */
@media (max-width: 991.98px) {
  .np-navbar {
    background: var(--np-mobile-page-bg);
    padding: 12px 16px 24px;
  }
  .np-logo {
    display: block;
    text-align: center;
    margin-bottom: 16px;
  }
  .np-logo img {
    height: 36px;
    display: inline-block;
  }
  .np-menu {
    display: flex;
    flex-direction: column;
    gap: var(--np-mobile-card-gap);
  }
  /* Card-style top item */
  .np-top-item {
    background: var(--np-mobile-card-bg);
    color: var(--np-mobile-card-fg);
    border-radius: var(--np-mobile-card-radius);
    box-shadow: var(--np-mobile-card-shadow);
    overflow: hidden;
  }
  .np-top-row {
    display: flex;
    align-items: center;
    padding: var(--np-mobile-card-padding-y) var(--np-mobile-card-padding-x);
  }
  .np-navbar .np-top-link {
    flex: 1;
    color: var(--np-mobile-card-fg);
    font-size: 0.85em;
    font-weight: 600;
    /* text-transform: uppercase retired 2026-08-20 — L1 mobile
       titles carry their APA title case at the source. */
    line-height: 1.2;
  }
  .np-top-title {
    display: inline;
  }
  .np-top-desc {
    display: block;
    font-size: 1em;
    font-weight: 400;
    margin-top: 4px;
  }
  .np-top-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }
  /* Mobile indicator: + closed, − open. */
  .np-top-toggle .np-indicator::before {
    content: '+';
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
  }
  .np-top-toggle[aria-expanded="true"] .np-indicator::before {
    content: '−';
  }

  /* Inline submenu (accordion body) */
  .np-submenu {
    padding: 0 var(--np-mobile-card-padding-x) var(--np-mobile-card-padding-y);
  }
  .np-mega-banner {
    display: none;
  }
  .np-level-2-list {
    border-top: 1px solid var(--np-mobile-divider);
  }
  .np-l2-item + .np-l2-item {
    border-top: 1px solid var(--np-mobile-divider);
  }
  /* Parent-link row: visually distinct so the user knows it goes to the
     top-level page itself, not to a child. 2026-08-20: uppercase
     retired; weight 700 (heavier than sibling L2 rows) does the
     visual-distinct job alone. */
  .np-l2-item.is-parent-link .np-l2-link {
    font-weight: 700;
  }
  .np-l2-row {
    display: flex;
    align-items: center;
    padding: 14px 0;
    gap: 8px;
  }
  .np-navbar .np-l2-link {
    flex: 1;
    color: var(--np-mobile-card-fg);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .np-l2-title {
    display: block;
  }
  .np-l2-desc {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    color: var(--np-mobile-text-muted);
    line-height: 1.3;
  }
  .np-l2-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Mobile L2 toggle: chevron-right to signal drill-down (not collapse). */
  .np-l2-toggle .np-indicator::before {
    content: '›';
    font-size: 22px;
    line-height: 1;
  }

  /* Drill-down panel: full-viewport overlay sliding in from the right. */
  .np-l3-panel {
    position: fixed;
    inset: 0;
    background: var(--np-mobile-page-bg);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 220ms ease;
    overflow-y: auto;
    padding: 16px 20px 32px;
  }
  .np-l3-panel.is-active {
    transform: translateX(0);
  }
  .np-navbar .np-l3-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    padding: 8px 0;
    color: var(--np-mobile-card-fg);
    font-size: 1em;
  }
  .np-l3-title {
    margin: 0 0 4px;
    font-size: 1.4em;
    font-weight: 700;
    /* text-transform: uppercase retired 2026-08-20 — L3 titles
       carry their APA title case at the source. Weight 700 + size
       1.4em hold hierarchy without needing caps. */
  }
  .np-l3-title-desc {
    margin: 0 0 16px;
    font-size: 0.9em;
    color: var(--np-mobile-text-muted);
    line-height: 1.35;
  }
  .np-l3-list {
    background: var(--np-mobile-card-bg);
    border-radius: var(--np-mobile-card-radius);
    box-shadow: var(--np-mobile-card-shadow);
    overflow: hidden;
  }
  .np-l3-item + .np-l3-item {
    border-top: 1px solid var(--np-mobile-divider);
  }
  .np-navbar .np-l3-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px var(--np-mobile-card-padding-x);
    color: var(--np-mobile-card-fg);
    font-size: 0.95em;
  }
  .np-l3-link-title {
    display: block;
  }
  .np-l3-desc {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    color: var(--np-mobile-text-muted);
    line-height: 1.3;
  }

  /* Search as final card. The desktop icon-toggle is hidden on mobile and
     the form (wrapped in .np-search-popup) renders inline as the trailing
     full-width card. */
  .np-search-card {
    background: var(--np-mobile-card-bg);
    border-radius: var(--np-mobile-card-radius);
    box-shadow: var(--np-mobile-card-shadow);
    padding: var(--np-mobile-card-padding-y) var(--np-mobile-card-padding-x);
  }
  .np-search-toggle {
    display: none;
  }
  .np-search-popup {
    display: block;
  }

  /* When drilled, lock body scroll behind the overlay. */
  body.np-drilled {
    overflow: hidden;
  }

  /* Active-trail styling — bolding scoped to title only so descriptions
     remain readable at normal weight. */
  .np-top-item.is-active-trail > .np-top-row > .np-top-link .np-top-title,
  .np-l2-item.is-active-trail > .np-l2-row > .np-l2-link .np-l2-title,
  .np-l3-item.is-active-trail > .np-l3-link .np-l3-link-title {
    font-weight: 700;
  }
}

/* =============================================================
   Nav colour cues — per nav-colour-bars-plan.md.
   Two treatments driven by the same --cluster-hue cascade:

   - L1 top-nav + L2 mega-menu = coloured LINE below the label
     (subtle underline accent under the title+desc block).
   - L3 mega-menu dropdown items = inline round DOT before the
     title (chip-style, matches .np-dot pattern used elsewhere).

   Refinement history (all 2026-07-17):
     1. Vertical border-left bars (3px) — initial ship.
     2. 8px rounded strips matching .np-feat .np-swatch — too heavy.
     3. Round dots absolute-positioned — misaligned on multi-line titles.
     4. Inline dots via ::before on title spans — aligned but noisy.
     5. Mixed: L1/L2 → line-below-text, L3 → keep inline dots.
        (Current — per user request 2026-07-17.)

   --cluster-hue cascade unchanged — set by .np-landing-group--<slug>
   classes on .np-top-item + .np-l2-item (see landing-submenu-groups.css).
   L3 inherits its parent L2's cluster-hue via CSS custom-property
   inheritance so no L3 class needed. Transparent fallback for
   unmapped slugs (accent renders invisible; layout unchanged).
   ============================================================= */

/* L1 top-nav — coloured line at the bottom of each .np-top-item.
   Applied on the ITEM (not the link) so that .np-menu's
   align-items: stretch makes all L1 items the same height →
   all border-bottoms align at the same Y across the navbar row,
   regardless of whether titles wrap to 1 or 2 lines. Thickness
   bumped 2px → 4px 2026-08-18 (DevTools tune) so the section
   colour reads clearly against the white header band. */
.np-navbar .np-top-item {
  border-bottom: 4px solid var(--cluster-hue, transparent);
}

/* L2 mega-menu — the .np-l2-row already draws a border-bottom
   separator between the L2 heading and its L3 children (subtle
   grey by default). Reuse that same border as the accent by
   recolouring it to --cluster-hue when set + thickening slightly.
   Alignment across L2 headings of differing heights (e.g. 1-line
   vs 2-line descriptions) is handled at the outer grid layer:
   .np-level-2-list uses subgrid rows so all .np-l2-row cells in
   the same visual row share the tallest heading's height. See
   .np-level-2-list rules above. */
.np-navbar .np-l2-row {
  border-bottom-color: var(--cluster-hue, var(--np-mega-border));
  border-bottom-width: 2px;
}

/* L3 dropdown items — inline round dot before the title text,
   7px round (subordinate scaling vs the 10px chip elsewhere).
   display: inline-block; vertical-align: middle inherits the
   title's baseline so multi-line titles keep the dot on line 1. */
.np-l3-link-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cluster-hue, transparent);
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -0.15em;
}

/* =============================================================
   Front-page navbar float-over-hero (Interpretation B, desktop only)
   -------------------------------------------------------------
   Pulls the .bg-img-hero image UP behind the .np-navbar card so
   the menu visually sits ON the hero photo rather than in a
   separate pale band above it. Reclaims ~80px of above-the-fold
   real estate on the 1080p baseline (~10% more content visible
   before scroll). Front-page only — `#header .bg-img-hero` matches
   nothing on other routes.

   Gated on @media (min-width: 768px) because at mobile the navbar
   is stacked + shorter (~60px vs ~85-95px desktop), so a fixed
   -80px overlap would over-pull the hero above the navbar's top
   edge. Mobile keeps today's sequential-sibling layout with the
   pale gap.

   See documentation/navbar-float-over-hero-plan.md for the full
   analysis, mobile risk enumeration, vertical-real-estate math,
   and the follow-up custom-property pattern for per-breakpoint
   tuning if user testing warrants extending overlap to mobile.
   ============================================================= */
@media (min-width: 768px) {
  /* Pull hero image UP behind the navbar. Value = approx navbar
     height including .container padding + .np-navbar margin. Tune
     per iteration; typical range 60-100px. */
  #header .bg-img-hero {
    margin-top: -80px;
  }
  /* Lift the navbar container above the hero in z-order. z-index
     only works on positioned elements — position: relative gives
     the element a stacking context without changing its layout.
     Applies on all routes at this breakpoint (harmless where there's
     no hero to stack against). */
  #header > .container {
    position: relative;
    z-index: 2;
  }
}

/* =============================================================
   Header band — white background under ticker + navbar +
   (front-page-only) tangerina hero.
   -------------------------------------------------------------
   Post-tangerina-pivot (2026-08-18): started as --np-mega-bg
   (#faf8f3, warm off-white), iterated to plain white so the
   navbar pill's warm-cream (#f1ece1) reads with more contrast
   and the whole top zone feels lighter/airier before the body
   cream picks up below.

   Contrast comes from what's BELOW #header — the body cream
   (#f1ece1) shows through starting at .outer-front-news-wrapper,
   giving a "white top, warm cream below" layering that mirrors
   the Tangerina-style vertical section stacking.

   --np-mega-bg is unchanged and still used by the mega-menu
   dropdown panels; only the #header + navbar-pill palette was
   split off from it.
   ============================================================= */
#header {
  background-color: #ffffff;
}

/* =============================================================
   Non-front #header top-padding — match navbar Y position
   -------------------------------------------------------------
   The front page's #header contains #ticker above the navbar,
   so the navbar sits at Y≈40px. Non-front pages have no ticker,
   so the navbar would sit at Y=0 — users experience the navbar
   "jumping down" when navigating from non-front to front.

   Add matching padding to non-front #header so the navbar sits
   at the same Y position across all routes. Also gives the
   floating navbar card breathing room from the very top of the
   viewport on non-front pages — visual bonus per §4a-A of
   documentation/frontpage-design-plan.md.

   Body class `path-frontpage` is added by Drupal on the front
   page only (verified 2026-08-18); `:not(.path-frontpage)`
   targets every other route.

   Value: 15px. Started at 40px (my approximation of the ticker's
   rendered height), tuned DOWN to 15px by TWN via DevTools once
   he could see both routes side-by-side — ticker was shorter than
   my guess. Re-tune here if a Y-delta reappears (e.g. if ticker
   padding changes in frontpage.css, or the navbar's own margin
   changes).
   ============================================================= */
try body:not(.path-frontpage) #header {
  padding-top: 15px;
}