/* THE ONE HEADER ON EVERY PUBLIC DRSAAS PAGE (Pete 2026-11-10 20:07, by the
   bridge: "Please ask the director for a nicer header", job
   a-nicer-header-on-drsaas-co-uk).

   Before this file the public pages had three headers: the homepage bar, the
   search page bar and the legal page row, each with its own words and its own
   mark (the search pages drew a lightning bolt, never the brand mark). At 390
   wide the homepage crammed five things into one row, and its outlined "Make
   my free video" repeated the big amber button just below it.

   Now there is one header and it holds three things: the mark with the
   wordmark and the strapline, a quiet Sign in, and the light or dark button.
   No call to action sits in it, because every page that has one already shows
   it as the big amber button right under the header.

   THE MARKUP is typed once, in tools/the-shared-site-header.html, and
   tools/stamp-the-shared-site-header.py writes it into every page. The guard
   tests/test-every-public-page-wears-the-shared-header.py goes red when a page
   wears anything else.

   THE COLOURS are the brand file's own (brand/brand-guidelines.md) and are set
   here on the header itself, so the header looks the same on every page
   whatever tokens that page names. Dark mode follows the phone until the
   visitor taps the button; the tap stamps data-theme on the html element. */

.site-header {
  --site-header-background: #F6F8FB;
  --site-header-ink: #0E2136;
  --site-header-saas: #8A5A00;
  --site-header-quiet: #566579;
  --site-header-line: #E1E8F0;
  --site-header-button-line: #D3DDE9;
  --site-header-amber: #F4A300;
  --site-header-hover: rgba(18, 58, 94, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    --site-header-background: #08151F;
    --site-header-ink: #EAF2FA;
    --site-header-saas: #FFC968;
    --site-header-quiet: #9FB0C4;
    --site-header-line: #1C3547;
    --site-header-button-line: #244055;
    --site-header-amber: #FFB733;
    --site-header-hover: rgba(159, 196, 228, 0.10);
  }
}
:root[data-theme="dark"] .site-header {
  --site-header-background: #08151F;
  --site-header-ink: #EAF2FA;
  --site-header-saas: #FFC968;
  --site-header-quiet: #9FB0C4;
  --site-header-line: #1C3547;
  --site-header-button-line: #244055;
  --site-header-amber: #FFB733;
  --site-header-hover: rgba(159, 196, 228, 0.10);
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  margin: 0; padding: env(safe-area-inset-top, 0px) 0 0;
  background: var(--site-header-background);
  background: color-mix(in srgb, var(--site-header-background) 90%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--site-header-line);
  color: var(--site-header-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.2;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 1080px; min-height: 64px; margin: 0 auto;
  padding: 0 20px;
}
/* WHERE THE MARK STANDS (three cold reviews, 2026-11-10). The header stands in one
   place on every page, 20 px in on a phone and on the one 1080 row on a desktop,
   so the mark and Sign in never jump sideways when a visitor moves between pages.
   The first review wanted it on each page's own column instead; the next two said
   a still header matters more, and the pages' columns differ (650, 680, 1080). */

/* The mark, the wordmark and the strapline are one link home.
   The header's two links are named through the row as well, because the legal
   pages colour every link amber in dark (":root[data-theme] a" outranks a
   single class), and the header must look the same on every page. */
.site-header .site-header-row .site-header-brand {
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 0;
  color: var(--site-header-ink); text-decoration: none; border-radius: 10px;
}
.site-header-mark {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: #123A5E; color: #FFFFFF;
}
/* In dark the navy square sank into the dark background (cold review 2026-11-10),
   so a faint light edge lifts it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header-mark { box-shadow: inset 0 0 0 1px rgba(159, 196, 228, 0.28); }
}
:root[data-theme="dark"] .site-header-mark { box-shadow: inset 0 0 0 1px rgba(159, 196, 228, 0.28); }
.site-header-mark svg { width: 20px; height: 20px; display: block; }
.site-header-words { display: flex; flex-direction: column; min-width: 0; }
.site-header-wordmark {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1;
  color: var(--site-header-ink); white-space: nowrap;
}
.site-header-wordmark span { color: var(--site-header-saas); }
/* The strapline is the body font, never mono (brand file, 2026-11-08). */
.site-header-strapline {
  margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0.01em;
  text-transform: lowercase; color: var(--site-header-quiet); white-space: nowrap;
}

/* Sign in is quiet text: no fill and no border, 44 px tall for a thumb. */
.site-header-right { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.site-header .site-header-right .sign-in-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--site-header-ink);
  text-decoration: none; white-space: nowrap; background: transparent; border: 0;
}
.site-header .site-header-right .sign-in-link:hover { background: var(--site-header-hover); }

.site-header .theme-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--site-header-quiet);
  /* The icon's visible edge lines up with the gutter, as the mark's does on the
     left; the 44 px tap box reaches into the gutter instead of pushing the row. */
  margin-right: -12px;
  cursor: pointer; font: inherit;
}
/* Quiet until a finger or a pointer finds it (cold review 2026-11-10: a boxed
   square was the heaviest thing in the header). The tap area stays 44 px. */
.site-header .theme-btn:hover { border-color: var(--site-header-button-line); background: var(--site-header-hover); color: var(--site-header-ink); }
.site-header .theme-btn svg { width: 20px; height: 20px; display: block; }
.site-header .theme-btn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .theme-btn .sun { display: none; }
  :root:not([data-theme="light"]) .site-header .theme-btn .moon { display: block; }
}
:root[data-theme="dark"] .site-header .theme-btn .sun { display: none; }
:root[data-theme="dark"] .site-header .theme-btn .moon { display: block; }

.site-header a:focus-visible, .site-header button:focus-visible {
  outline: 3px solid var(--site-header-amber); outline-offset: 2px;
}

/* A desktop gets a touch more height. */
@media (min-width: 768px) {
  .site-header-row { min-height: 68px; max-width: 1080px; padding: 0 28px; }
  .site-header-right { gap: 10px; }
  .site-header-mark { width: 40px; height: 40px; border-radius: 11px; }
  .site-header-mark svg { width: 23px; height: 23px; }
  .site-header-wordmark { font-size: 21px; }
  .site-header-strapline { font-size: 13px; }
}
/* The narrowest phones (under 360) drop the strapline first, because the
   wordmark beside it already says who we are. */
@media (max-width: 359px) {
  .site-header-row { gap: 10px; }
  .site-header-strapline { display: none; }
  .site-header .site-header-right .sign-in-link { padding: 0 8px; }
}