/* RG 2026 brand refresh — the sailor-navy palette + the header chrome (src/brand-2026.ts), served at
   /_rg2026/chrome.css on every page (Rg2026Head), BEFORE the page's bundled CSS — so every rule here wins on
   specificity, never on order.

   Sailor navy (Carla 2026-11-04, docs rg-navy-mocks option 1: "sailor navy it is") replaces logo 70's slate navy
   #162a36 in the logo, the home panels, the Search word and the menus; the footer takes its lighter step, as today's
   #213948 is to #162a36. The values live in packages/tokens (road-genius-2026.css: --rg26-navy, --rg26-navy-footer). */

/* Sailor navy takes over the old navy everywhere on the page (Carla 2026-11-04: "just adjust the sailor navy to take
   over the old navy we used to use for anything on the page"): every token that carried #213948 / rgb(33 57 72) in
   packages/tokens road-genius.css — prose ink, table heads, the results pages' ink, scrims and shadows. html:root
   outranks the tokens' :root, which loads after this file. The footer keeps its own lighter step (footer.css). */
html:root {
  /* Figtree for all the text (Carla 2026-11-04: "it needs to change to figtree a google font for all the content"):
     the brand face token (headings, body, menus, search box, footer, results pages, chart labels) and the statistics
     pages' serif + sans pair. Its @font-face comes from Rg2026Head (packages/tokens fonts, vendored). */
  --font-sans: var(--rg26-font-sans);
  --font-stat-serif: var(--font-sans);
  --font-stat-sans: var(--font-sans);
  --color-ink: var(--rg26-navy);
  --color-table-head: var(--rg26-navy);
  --color-results-ink: var(--rg26-navy);
  --shadow-breadcrumb-inset: inset 0 10px 10px -10px rgb(var(--rg26-navy-rgb) / 0.15);
  --color-results-scrim: rgb(var(--rg26-navy-rgb) / 0.45);
  --color-results-scrim-strong: rgb(var(--rg26-navy-rgb) / 0.72);
  --color-results-shadow-soft: rgb(var(--rg26-navy-rgb) / 0.06);
  --color-results-shadow: rgb(var(--rg26-navy-rgb) / 0.08);
  --color-results-shadow-sheet: rgb(var(--rg26-navy-rgb) / 0.14);
  --color-results-shadow-pop: rgb(var(--rg26-navy-rgb) / 0.18);
}

/* The header's top strip (language + support links, shown from 1050px): the page bands' pale blue instead of today's
   mint tint (Carla 2026-11-04: "change the strip up the top to match the blue shading down the page as that aqua doesnt
   work anywhere"). Two classes, so it outranks shell.css's .site-header__top. */
.site-header .site-header__top {
  background: var(--color-tint-blue);
}

/* The whole menu in sailor navy (Carla 2026-11-04: "the entire nav needs to be adjusted the menu and icons"): the
   header's tokens re-pointed inside .site-header only (the mobile menu lives inside it), so prose, links and tiles
   elsewhere keep today's colours.
   - ink: the menu words, the carets (currentColor), the dropdown links, EN (US), the phone menu's words
   - link: the hamburger, the dropdown links' hover words, the phone menu's open item and its deepest list (white
     words on navy)
   - tint / mobile-submenu: the dropdown hover pill (mint) and the phone menu's nested panel (lilac) → the top strip's
     pale blue (Carla 2026-11-04: "the hover colour also needs to be the light blue top strip colour")
   The icons are navy copies served from /_rg2026/ (site.ts: language, globe, headset, close). */
.site-header {
  --color-ink: var(--rg26-navy);
  --color-link: var(--rg26-navy);
  --color-tint: var(--color-tint-blue);
  --color-mobile-submenu: var(--color-tint-blue);
}

/* Hover/open on a top-level item: sky blue, so the open menu still shows which one is open (it was the link indigo,
   now navy like the rest). */
.site-header .menu__item:is(:hover, :focus-within) > .menu__item-link {
  color: var(--color-primary);
}

/* The headings inside the menus stay the headings' sky blue (Carla 2026-11-04: "the headings inside the nav need to be
   the original sky blue like the headings"): the dropdown column headings (were the link indigo, which this file
   turns navy). The phone menu's nested headings are sky already (shell.css: --color-primary). */
.site-header .sub-menu .menu__item--heading > .menu__item-link {
  color: var(--color-primary);
}