/*
  Global site header / primary navigation.
  Shared across every page — keep page-specific styling out of this file.

  Covers the default/closed desktop bar plus the shared morphing dropdown
  shell (wired up for Insurance, Why us, and all four utility icons —
  Partner login, Documents, Contact, Search — see DROPDOWN_MENU_IDS in
  js/navigation.js).
*/

.site-header {
  position: fixed;
  /* 76px into the hero, per Figma — but .site-header has no positioned
     ancestor, so this offset is relative to the top of the page itself,
     not to .hero's own top edge. .hero sits in normal flow, so inserting
     the 48px .notice-bar before it (in index.html) pushes .hero's top edge
     down by 48px while leaving this absolute offset untouched, unless
     compensated here: 76 + 48 = 124px keeps the header sitting exactly
     76px into the hero, matching the pre-notice-bar layout. */
  top: 76px;
  left: 0;
  width: 100%;
  z-index: 20;
  box-sizing: border-box;
}

/* .site-header__bar is the visual surface for the row, open or closed —
   background, border, radius, shadow live here. __row is a plain-flow
   child with none of its own, so at rest the bar's height is simply
   __row's own (today's closed appearance, unchanged). A full-width mega
   shell (Insurance, etc.) is ALSO a plain-flow child, so opening one grows
   the bar around it for free — one box getting taller, not a second card
   appearing underneath it — and overflow: hidden keeps its width/height/
   slide animation clipped to the bar's own rounded corners. A compact
   shell (a third-level drill-in) is the one exception: it gets its own
   independent surface instead, hanging below the bar rather than growing
   it — see .site-header__shell.is-compact further down for why. */
.site-header__bar {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 12px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  box-sizing: border-box;
  /* Self-clips to the bar's own corner radius, rather than relying solely
     on the bar's overflow: hidden to round it off — .is-compact switches
     the bar to overflow: visible (so its compact shell isn't clipped),
     which would otherwise let the row's own square corners show past the
     bar's rounded ones as a stray straight edge right at the curve. */
  overflow: hidden;
  border-radius: 12px;
}

/* The one subtle division allowed between Level 1 and open menu content
   (carried over from the previous Nautilus project's own panel, which kept
   a hairline rather than a duplicate border) — not a second border/card,
   just a 1px seam. On __row rather than __shell so it always spans the
   bar's full width, even when a compact (narrower) dropdown is open. */
.site-header__bar.is-open .site-header__row {
  border-bottom: 1px solid var(--colour-light-grey);
}

/* Compact dropdowns (a third-level drill-in, e.g. Insurance ▸ Recreational
   Boats, or a narrow compact-text/compact-icon menu) break from the "one
   growing card" model above: instead of the bar growing to contain a
   full-width shell, the shell hangs below the bar as its OWN independent,
   narrower panel — see .site-header__shell.is-compact below for why. The
   bar itself just needs to stop clipping a shell that no longer lives
   inside its own box; it keeps its normal full 12px radius on all four
   corners regardless (the row's own bottom corners stay rounded even with
   a compact submenu open beneath it). is-compact is toggled on both
   elements together by js/navigation.js wherever it already toggles it on
   the shell (openMenu, slideShellTo). */
.site-header__bar.is-compact {
  overflow: visible;
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.site-header__logo img {
  width: 239px;
  height: auto;
  display: block;
}

/* ---- Primary links ---- */

.site-header__primary-list {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__primary-link {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-s);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 27px;
  color: var(--colour-header-grey);
  text-decoration: none;
  white-space: nowrap;
}

/* Every primary link gets the same teal hover/focus feedback, whether or
   not it opens a dropdown (Claims/Renew/Boating hub included) — only
   dropdown triggers also need the persistent aria-expanded state, so their
   trigger stays teal while its panel is open, not just while directly
   hovered/focused. */
.site-header__primary-link:hover,
.site-header__primary-link:focus-visible,
.site-header__primary-link[aria-expanded="true"] {
  color: var(--colour-brand-teal);
}

/* ---- Shared morphing shell ----
   The dropdown CONTENT area. For a full-width mega menu it has no visual
   surface of its own (that's .site-header__bar's, so opening one never
   reads as a second card) — a normal-flow sibling of __row, so its height
   genuinely occupies space in the bar's box rather than floating over it;
   js/navigation.js grows it from 0 via GSAP, which grows the bar around it
   for free. A compact drill-in is the exception — see .is-compact below,
   which gives it an independent surface instead. position: relative (both
   cases) is also what the sliding inner content (below) anchors to during
   a switch/drill transition. */

.site-header__shell {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.site-header__shell.is-open {
  pointer-events: auto;
}

/* Compact shells (third-level drill-ins, e.g. Insurance ▸ Recreational
   Boats) are the one case that DOES get its own visual surface, rather
   than relying on .site-header__bar's shared one above: a full-width mega
   panel naturally fills the bar edge-to-edge so sharing one continuous
   card reads correctly, but a ~230px compact column sharing a full 1280px-
   wide card would leave a large empty white area to its right — exactly
   the bug this rule fixes. Taken out of normal flow (the bar no longer
   grows to fit it, see .site-header__bar.is-compact) and hung directly
   below the row instead, as its own panel: square top corners where it
   meets the row (nothing to round against), rounded bottom, and the same
   extremely subtle shadow/border the bar already uses elsewhere — reused,
   not a new decorative style. */
.site-header__shell.is-compact {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.site-header__shell-inner {
  position: absolute;
  top: 0;
  left: 0;
  /* Fills whatever width the shell currently has once GSAP clears the
     inline width it uses during the open/slide tweens — without this, an
     auto-sized grid (the mega layout below) would shrink to its content's
     intrinsic width instead of spanning the shell. Compact layouts (below)
     override this with their own fixed width. Horizontal padding matches
     .site-header__row's so mega content lines up with the logo/nav above
     it; that's also why widths below are measured off the row, not just
     an arbitrary number. */
  width: 100%;
  padding: var(--space-xl);
  box-sizing: border-box;
}

/* Compact list layout — a narrow anchored dropdown of rows (plain text or,
   for compact-icon, icon rows — see .nav-panel-icon-link). Shared by any
   compact top-level menu and by every third-level drill-in, whatever the
   level-2 menu's own layout. Third-level (--submenu) doesn't get the fixed
   320px width below — see that rule's own comment. */

.site-header__shell-inner--compact-text,
.site-header__shell-inner--compact-icon,
.site-header__shell-inner--submenu {
  display: flex;
  flex-direction: column;
}

.site-header__shell-inner--compact-text,
.site-header__shell-inner--compact-icon {
  width: 320px;
  gap: var(--space-3xs);
}

/* Third-level drill-in (e.g. Insurance ▸ Recreational Boats) — unlike the
   other compact types above, this one isn't a fixed 320px box: it hugs
   whatever width its own content (the heading, the back link, the
   longest item label — all nowrap, see their own rules) actually needs.
   js/navigation.js's openSubmenu() measures that natural width per open
   and animates .site-header__shell to it directly; this element just
   inherits the base 100% width rule above to fill whatever width the
   shell lands on, rather than overriding it back to a fixed number.

   Its own padding/gap (rather than inheriting the base
   .site-header__shell-inner padding or the compact rule's tighter 2px
   list rhythm above): a little more horizontal room than the mega/compact
   dropdowns since this column is so much narrower, and a touch more
   vertical breathing room between its handful of rows — still a dense
   list, just not a cramped one. Horizontal padding is also exactly what
   js/navigation.js's getSubmenuOffsetX() reads back off the rendered
   heading to align this panel's text with the "Insurance" trigger's own,
   so a change here keeps that alignment correct automatically. */
.site-header__shell-inner--submenu {
  gap: var(--space-2xs);
  padding: var(--space-l) var(--space-2xl) var(--space-xl);
}

/* Restrained rule between the category/back area and the actual third-
   level links — a plain <hr>, so it's inert content, not styled as its own
   list row. Sits as a normal flex child of the column above, so it's
   already inset by the column's own padding and never spans past it. */
.nav-panel-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--colour-light-grey);
}

/* Full-width grid of icon links, no CTA column — Why us's level 2. */

.site-header__shell-inner--icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3xs);
}

/* Mega layout — Insurance's level 2: a promo CTA card beside a two-column
   grid of icon links. Structure/proportions carried over from the previous
   Nautilus project's own "cta-icon-grid" menu type; the CTA column shares
   its width with a compact dropdown (320px) so the shell's two shapes
   morph between a common measurement rather than each inventing one.

   Documents (cta-link-grid) and Search (search) reuse the exact same
   outer shape — same CTA card, same 320px column — since it's the shared
   "Not sure which cover you need?"-style left card the utility menus were
   built to reuse; only what fills the right-hand column differs per type,
   see .nav-panel-grid / .nav-panel-search-column below. */

.site-header__shell-inner--cta-icon-grid,
.site-header__shell-inner--cta-link-grid,
.site-header__shell-inner--search {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: stretch;
}

.nav-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3xs);
  align-content: start;
}

.nav-panel-icon-link {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xl) var(--space-l);
  border-radius: var(--space-xs);
  text-decoration: none;
  color: var(--colour-header-grey);
  border: 1px solid transparent;
}

/* Hover/focus only swaps the background and the heading's colour — the
   icon, description and chevron all keep their own default colours (see
   each element's own rule below), not just carried along by inheritance. */
.nav-panel-icon-link:hover,
.nav-panel-icon-link:focus-visible {
  background: var(--colour-grey-101);
}

.nav-panel-icon-link:hover .nav-panel-icon-link__title,
.nav-panel-icon-link:focus-visible .nav-panel-icon-link__title {
  color: var(--colour-brand-teal);
}

.nav-panel-icon-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--space-xs);
  color: var(--colour-brand-teal);
  background: rgba(0, 0, 0, 0.02);
}

.nav-panel-icon-link__icon svg {
  width: 22px;
  height: 22px;
}

.nav-panel-icon-link__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.nav-panel-icon-link__title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--colour-header-grey);
}

/* Own static colour rather than inheriting the row's — hover/focus only
   changes the heading (see .nav-panel-icon-link:hover above), so the
   description must keep its default colour regardless of row state. */
.nav-panel-icon-link__desc {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--colour-header-grey);
  opacity: 0.75;
}

.nav-panel-icon-link__chevron {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--colour-mid-grey);
}

.nav-panel-icon-link__chevron svg {
  width: 100%;
  height: 100%;
}

.nav-panel-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  height: 100%;
  padding: var(--space-2xl);
  box-sizing: border-box;
  background: var(--colour-grey-101);
  border: 1px solid var(--colour-light-grey);
  border-radius: var(--space-s);
}

.nav-panel-cta__heading {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
}

.nav-panel-cta__body {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
  color: var(--colour-body-grey);
}

.nav-panel-cta__link {
  margin-top: auto;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--colour-brand-teal);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.nav-panel-cta__link:hover,
.nav-panel-cta__link:focus-visible {
  color: var(--colour-cta-orange);
}

.nav-panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--space-xs);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--colour-header-grey);
  text-decoration: none;
  /* Every row's natural (unwrapped) width is what .site-header__shell-inner
     --submenu's own width: 100% actually resolves against — see
     openSubmenu()'s natural-width measurement in js/navigation.js. */
  white-space: nowrap;
}

.nav-panel-link:hover,
.nav-panel-link:focus-visible {
  background: var(--colour-grey-101);
  color: var(--colour-brand-teal);
}

.nav-panel-link__chevron {
  display: flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--colour-mid-grey);
}

.nav-panel-link__chevron svg {
  width: 100%;
  height: 100%;
}

/* ---- Search ----
   Search's right column: the field above a "Popular searches" shortcut
   grid. The field itself borrows the capsule shape already established by
   .step-nav__pill (css/form.css) — white fill, 1px light-grey border, full
   radius, internal padding around its controls — rather than a plain
   .form-input, so it reads as substantially more prominent while still
   built entirely from existing tokens/colours (no new visual language). */

.nav-panel-search-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.nav-panel-search {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-2xs);
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: var(--space-full);
  transition: border-color 0.2s ease;
}

.nav-panel-search:focus-within {
  border-color: var(--colour-brand-teal);
}

.nav-panel-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 var(--space-xl);
  border: none;
  background: transparent;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-ink);
}

.nav-panel-search__input:focus {
  outline: none;
}

.nav-panel-search__input::placeholder {
  color: var(--colour-mid-grey);
}

/* Clears the native search-field decorations (WebKit's own clear/cancel
   glyph) so only Nautilus's own .btn submit button appears. */
.nav-panel-search__input::-webkit-search-decoration,
.nav-panel-search__input::-webkit-search-cancel-button {
  appearance: none;
}

.nav-panel-search__submit {
  flex-shrink: 0;
}

.nav-panel-search-popular__label {
  margin: 0 0 var(--space-s);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: 0.42px;
  color: var(--colour-mid-grey);
  text-align: center;
}

/* Search's own popular-searches grid — a third column, rather than the
   two every other .nav-panel-grid (Insurance, Documents, ...) uses. */
.nav-panel-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Third-level heading block — the drilled-into item's own title (e.g.
   "Recreational Boats") as a plain heading with no chevron, plus the
   actual "back" control underneath as a small chip, not a full-width row —
   see .nav-panel-back below. Not part of getStaggerTargets() (matches the
   previous single-row back link's own behaviour), so it appears instantly
   while the item rows beneath it stagger in. */
.nav-panel-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 8px, heading to the back chip */
  padding: var(--space-m) var(--space-l) var(--space-s);
}

.nav-panel-heading__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
  white-space: nowrap;
}

/* Small back-link ("Back to Insurance") — plain text/icon, no chip
   background (default or hover) and no padding, muted --colour-mid-grey
   throughout so it reads as a quiet secondary action beneath the category
   heading rather than competing with it. */
.nav-panel-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  width: fit-content;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 19.5px;
  letter-spacing: 0.42px;
  color: var(--colour-mid-grey);
  text-decoration: none;
  white-space: nowrap;
}

.nav-panel-back__icon {
  display: flex;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--colour-mid-grey);
  transform: rotate(180deg);
}

.nav-panel-back__icon svg {
  width: 100%;
  height: 100%;
}

/* ---- Utility (icons) + CTA ---- */

.site-header__utility {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  flex-shrink: 0;
}

.site-header__utility-list {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__utility-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.site-header__utility-link img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* ==========================================================================
   Mobile nav — hamburger trigger + accordion panel INSIDE the floating
   header card. .site-header__mobile-menu lives in the markup as a normal-
   flow sibling of .site-header__row, inside .site-header__bar (see
   index.html) — opening it grows the same rounded white card downward,
   the same way the desktop shell further below grows it for the mega-menu,
   rather than swapping to a separate full-screen sheet.
   Both this and the trigger exist in the markup on every breakpoint but
   are display: none outside the compact-nav media query below, so they
   take no part in the desktop layout/appearance at all (zero risk to the
   desktop bar this file otherwise describes). See js/navigation.js for the
   accordion build/open/close logic — this file only ever toggles the
   .is-open/.is-active classes it sets.
   ========================================================================== */

.site-header__mobile-toggle {
  display: none;
}

.site-header__mobile-menu {
  display: none;
}

/* ---- Compact nav (hamburger + accordion panel) ----
   Threshold is content-fit, not a device size: the desktop row (239px logo
   + 5 primary links + 4 utility icons + "Get a quote") needs roughly
   1150-1200px to lay out without the links crowding the logo or the
   utility group, well past where a phone/tablet viewport would let it
   breathe. Rather than let the desktop nav get cramped at genuine tablet
   widths (iPad portrait/landscape, small laptops), it stays in this same
   compact mode all the way up to 1179px — the "mobile nav is the more
   appropriate treatment" call from the responsive brief — and only
   switches to the inline desktop bar at 1180px, comfortably past the
   ~1150-1200px this row needs. Sizing within this range is then refined
   for phone vs. tablet by
   the two narrower media queries further below, but the show/hide split
   itself (and all .mobile-nav-* styling) is shared across the whole range
   so there's exactly one nav paradigm below 1180px, not a third
   in-between one. */
@media (max-width: 1179px) {
  /* .site-header__bar has no gutter of its own on desktop — at ≥1280px
     that's fine (nothing sits past its own max-width), but below that it
     would otherwise span edge-to-edge, leaving its rounded corners
     floating against the viewport edge with no margin. Matches the same
     inset used by the rest of the page at each width (16px on phone,
     24px on tablet — see the two refinement queries below). */
  .site-header__bar {
    width: calc(100% - 2 * var(--space-l));
  }

  .site-header__primary-nav,
  .site-header__utility {
    display: none;
  }

  .site-header__row {
    padding: var(--space-l);
  }

  .site-header__mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    flex-shrink: 0;
    cursor: pointer;
  }

  .site-header__mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--colour-header-grey);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .site-header__mobile-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header__mobile-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .site-header__mobile-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---- Panel ----
     The floating white card itself expands downward to reveal this,
     rather than switching to a separate full-screen sheet: .site-header__
     mobile-menu is a normal-flow sibling of .site-header__row INSIDE
     .site-header__bar (same architecture the desktop shell above already
     uses — the bar has no fixed height of its own, so growing this from 0
     grows the bar around it for free, rounded corners/gutter/background
     all staying exactly what they were closed). max-height (not height:
     auto) is what makes that growth transition-able, and doubles as the
     viewport-height safety cap below; .site-header__bar's own overflow:
     hidden clips the animation and keeps the corners rounded throughout. */

  .site-header__mobile-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .site-header__mobile-menu.is-open {
    /* Keeps the whole floating card (row + this) on-screen below the
       header's own 76px top offset, whatever the viewport height —
       76px top offset + ~80px row + ~24px breathing room. */
    max-height: calc(100vh - 180px);
  }

  .site-header__mobile-menu-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    /* Scrolls internally once content exceeds the card's own viewport-
       height cap above, rather than being clipped/inaccessible — the
       floating-card appearance holds even when the nav content itself is
       taller than the screen. */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: var(--space-2xs) var(--space-l) var(--space-2xl);
    box-sizing: border-box;
  }

  .mobile-nav-cta-button {
    width: auto;
  }

  /* ---- Top-level list ---- */

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-nav-divider {
    height: 1px;
    margin: var(--space-s) 0;
    background: var(--colour-light-grey);
  }

  /* ---- Shared row look (leaf links, group/subgroup summaries) ---- */

  .mobile-nav-link,
  .mobile-nav-group__summary,
  .mobile-nav-subgroup__summary {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-s);
    border-radius: var(--space-xs);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--colour-header-grey);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }

  .mobile-nav-link::-webkit-details-marker,
  .mobile-nav-group__summary::-webkit-details-marker,
  .mobile-nav-subgroup__summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:focus-visible,
  .mobile-nav-group__summary:hover,
  .mobile-nav-subgroup__summary:hover {
    background: var(--colour-grey-101);
    color: var(--colour-brand-teal);
  }

  .mobile-nav-link--top {
    font-size: 18px;
  }

  .mobile-nav-group__title,
  .mobile-nav-group__summary {
    font-size: 18px;
  }

  .mobile-nav-link__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--colour-brand-teal);
  }

  .mobile-nav-link__icon svg,
  .mobile-nav-link__icon img {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-link__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-width: 0;
  }

  .mobile-nav-link__desc {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: inherit;
    opacity: 0.75;
  }

  .mobile-nav-group__chevron,
  .mobile-nav-subgroup__chevron {
    flex-shrink: 0;
    margin-left: auto;
    width: 14px;
    height: 14px;
    color: var(--colour-mid-grey);
    transition: transform 0.2s ease;
  }

  .mobile-nav-group__chevron svg,
  .mobile-nav-subgroup__chevron svg {
    width: 100%;
    height: 100%;
  }

  .mobile-nav-group[open] > .mobile-nav-group__summary .mobile-nav-group__chevron,
  .mobile-nav-subgroup[open] > .mobile-nav-subgroup__summary .mobile-nav-subgroup__chevron {
    transform: rotate(90deg);
  }

  /* ---- Group/subgroup bodies ---- */

  .mobile-nav-group {
    border-bottom: 1px solid var(--colour-light-grey);
  }

  .mobile-nav-group:last-child {
    border-bottom: none;
  }

  .mobile-nav-group__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    /* No left indent — the CTA card and second-level items line up flush
       with the first-level summary's own text/icon above them, rather than
       being indented under it. More top padding than the old 4px so the
       first thing inside (the CTA card, or Search's field) reads as its
       own group, not crowded against the summary it just opened from. */
    padding: var(--space-l) 0 var(--space-m);
  }

  .mobile-nav-sublist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-nav-subgroup__body {
    padding: 0 0 0 var(--space-l);
  }

  /* ---- CTA (Insurance's promo card) ---- */

  .mobile-nav-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-l);
    background: var(--colour-grey-101);
    border: 1px solid var(--colour-light-grey);
    border-radius: var(--space-s);
  }

  .mobile-nav-cta__heading {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--colour-header-grey);
  }

  .mobile-nav-cta__body {
    margin: 0;
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6; /* bumped for readability, was 1.4 */
    color: var(--colour-body-grey);
  }

  .mobile-nav-cta__link {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: var(--colour-brand-teal);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* ---- Search (mobile) ----
     Search's own accordion body, in place of the CTA-card+link-list shape
     every other group uses (see buildMobileTopRow) — just the field, same
     capsule treatment as its desktop counterpart (.nav-panel-search,
     css/header.css) so it still reads as the same search tool, scaled for
     a full-width mobile row instead of a fixed desktop column. */
  .mobile-nav-search {
    display: flex;
    align-items: stretch;
    gap: var(--space-s);
    padding: var(--space-2xs);
    background: var(--colour-white);
    border: 1px solid var(--colour-light-grey);
    border-radius: var(--space-full);
  }

  .mobile-nav-search:focus-within {
    border-color: var(--colour-brand-teal);
  }

  .mobile-nav-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0 var(--space-l);
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 16px;
    color: var(--colour-ink);
  }

  .mobile-nav-search__input:focus {
    outline: none;
  }

  .mobile-nav-search__input::placeholder {
    color: var(--colour-mid-grey);
  }

  .mobile-nav-search__input::-webkit-search-decoration,
  .mobile-nav-search__input::-webkit-search-cancel-button {
    appearance: none;
  }

  .mobile-nav-search__submit {
    flex-shrink: 0;
  }
}

/* ---- Phone refinement (≤767px) ----
   The logo shrinks further than tablet needs to, matching the tighter row
   padding a phone-width bar actually has room for. */
@media (max-width: 767px) {
  .site-header__logo img {
    width: 160px;
  }
}

/* ---- Tablet refinement (768–1179px) ----
   Same compact nav as phone (shared block above), but with more breathing
   room: the logo stays closer to its desktop size, and the bar gets the
   wider gutter the rest of the page uses at tablet widths (see
   css/home.css). The expanded card itself stays exactly as wide as the
   closed bar (no separate max-width for its content) — it's the same
   floating card, just taller. */
@media (min-width: 768px) and (max-width: 1179px) {
  .site-header__bar {
    width: calc(100% - 2 * var(--space-2xl));
  }

  .site-header__logo img {
    width: 200px;
  }

  .site-header__row {
    padding: var(--space-xl);
  }
}

/* Locks background scroll while the mobile panel is open — set/removed by
   js/navigation.js alongside .site-header__mobile-menu's own .is-open. */
body.mobile-nav-open {
  overflow: hidden;
}