/* Dark site header, matching the RALPH app's Marine top bar.
   Colours come from ralph-production apps/angular/src/styles/themes.css (Marine
   --nf-header-fill) and --nf-text-inverse. Loaded last so it wins over the older
   header layers; those rules are !important, so this sheet is too. Layout (position,
   height, spacing, breakpoints) is deliberately untouched. */
:root {
  --site-header-fill: linear-gradient(100deg, #072a52 0%, #0b3f75 100%);
  --site-header-text: #ffffff;
  --site-header-line: rgb(255 255 255 / 0.22);
  --site-header-hover: rgb(255 255 255 / 0.14);
}

html body main.page > #top.site-nav-global {
  background: var(--site-header-fill) !important;
  border-bottom: 0 !important;
  box-shadow: 0 4px 22px rgb(7 42 82 / 0.28) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* RALPH wordmark in white. The people mark keeps its three blues, using a lightened copy of the
   SVG (assets/ralph-r-mark-header.svg) because the original dark blues vanish on navy. */
html body main.page > #top .site-title a,
html body main.page > #top .site-title .ralph-brand-lockup,
html body main.page > #top .site-title .ralph-brand-text {
  color: var(--site-header-text) !important;
  -webkit-text-fill-color: var(--site-header-text) !important;
}

/* Section links */
html body main.page > #top .site-nav-links a {
  color: var(--site-header-text) !important;
  border-radius: 8px;
  padding: 6px 10px;
  margin: -6px -10px;
  transition: background-color 0.15s;
}
html body main.page > #top .site-nav-links a:hover,
html body main.page > #top .site-nav-links a:focus-visible {
  color: var(--site-header-text) !important;
  background: var(--site-header-hover);
}

/* Narrow-window menu button (phones are routed to /mobile/, which has no site header). */
html body main.page > #top .site-nav-mobile > summary {
  color: var(--site-header-text) !important;
  background: var(--site-header-hover) !important;
  border-color: var(--site-header-line) !important;
}
html body main.page > #top .site-nav-mobile > summary svg {
  stroke: currentColor;
}

/* Keyboard focus stays visible on the dark fill. */
html body main.page > #top a:focus-visible,
html body main.page > #top summary:focus-visible {
  outline: 2px solid var(--site-header-text);
  outline-offset: 3px;
}