/*
 * Design tokens — the single source of truth for the whole site.
 *
 * `scripts/prerender.mjs` prepends this file to `public/guides/guides.css` at
 * build time, so the static guide pages and the React app share one palette,
 * one type scale and one spacing rhythm. Add a token here, not in a component.
 *
 * Every ink, brand and state colour below was checked with a contrast script
 * against every light surface it is allowed to sit on. The minimum ratio in
 * the palette is 4.73:1, so body text passes WCAG AA everywhere. The single
 * exception is `--accent-600` (4.07:1 on the tinted surfaces), which is
 * therefore reserved for fills, borders and large display text — never body
 * copy. Use `--accent-700` when an accent colour has to carry running text.
 */
/*
 * Self-hosted variable fonts.
 *
 * Served from `public/fonts/` rather than a font CDN: it removes a third-party
 * connection from the critical path, and keeps visitor IP addresses out of
 * another party's logs, which matters for a health site with a UK audience.
 */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* ---- Typefaces ------------------------------------------------------- */
  --font-display: 'Source Serif 4 Variable', 'Source Serif 4', ui-serif, Georgia,
    'Times New Roman', serif;
  --font-body: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Surfaces, light to dark ---------------------------------------- */
  --surface-0: #ffffff; /* cards and raised panels */
  --surface-1: #f8f7f5; /* the page itself — a warm paper, not a cold grey */
  --surface-2: #eef3f4; /* clinical tint, pairs with the teal */
  --sand-100: #f4ece1; /* warm accent surface — human, not clinical */
  --sand-200: #e8dbc8;
  --surface-darker: #092230;
  --surface-deepest: #06171f;

  /* ---- Ink ------------------------------------------------------------- */
  --ink-900: #0a2231; /* display headings          13.4:1 worst case */
  --ink-700: #1d3a4c; /* body copy                  9.8:1 */
  --ink-600: #33566a; /* supporting copy            6.4:1 */
  --ink-500: #4e6675; /* captions and meta          4.9:1 */
  --ink-inverse: #ffffff;
  --ink-inverse-soft: #c5d6de; /* on dark surfaces           9.7:1 */
  --ink-inverse-mute: #9fb6c2; /* on dark surfaces           6.9:1 */

  /* ---- Brand ----------------------------------------------------------- */
  --brand-700: #08505c; /* pressed and hover states   7.5:1 */
  --brand-600: #0a6472; /* primary actions            5.6:1 */
  --brand-500: #0c7080; /* links and eyebrows         4.7:1 */
  --brand-300: #7fc4ce; /* decorative rules on light */
  --brand-100: #daecef;
  --brand-050: #eff7f9;
  --brand-bright: #56c7d4; /* the only brand step legible on dark  7.3:1 */

  /* ---- Accent (warm clay — used sparingly, to keep the site human) ------ */
  --accent-700: #8a4f27; /* accent text                5.3:1 */
  --accent-600: #a35f30; /* fills and large text only  4.1:1 */
  --accent-100: #f5e7d8;

  /* ---- State ----------------------------------------------------------- */
  --danger-700: #8c2b21;
  --danger-600: #a8382c;
  --danger-100: #f7dcd6;
  --danger-050: #fdf3f0;

  /* ---- Borders --------------------------------------------------------- */
  --border-subtle: #ecebe7;
  --border: #dfe3e2;
  --border-strong: #c6d1d3;
  --border-inverse: rgba(255, 255, 255, 0.16);
  --border-inverse-strong: rgba(255, 255, 255, 0.28);

  /* ---- Type scale ------------------------------------------------------
     Body starts at 17px rather than the more usual 16px: this site is read
     mostly by adults over 50 who arrived because their hearing changed, and
     the extra step costs nothing on any breakpoint. */
  --fs-2xs: 0.6875rem; /* 11px — legal lines only */
  --fs-xs: 0.75rem; /* 12px — eyebrows, meta */
  --fs-sm: 0.8125rem; /* 13px */
  --fs-base: 0.875rem; /* 14px */
  --fs-lg: 1rem; /* 16px */
  --fs-body: 1.0625rem; /* 17px — the default reading size */
  --fs-xl: 1.125rem; /* 18px */
  --fs-2xl: 1.25rem; /* 20px */
  --fs-3xl: 1.4375rem; /* 23px */

  /* Fluid display scale. Each is linear in viewport width and strictly
     increasing, so a heading never shrinks as the screen grows. */
  --fs-lead: clamp(1.0625rem, 1rem + 0.32vw, 1.3125rem);
  --fs-display-4: clamp(1.25rem, 1.16rem + 0.42vw, 1.625rem);
  --fs-display-3: clamp(1.5rem, 1.31rem + 0.88vw, 2.25rem);
  --fs-display-2: clamp(1.875rem, 1.55rem + 1.5vw, 3.125rem);
  --fs-display-1: clamp(2.375rem, 1.95rem + 1.95vw, 4rem);

  /* ---- Tracking and leading -------------------------------------------- */
  --track-display: -0.022em;
  --track-tight: -0.014em;
  --track-eyebrow: 0.14em;
  --leading-display: 1.06;
  --leading-heading: 1.18;
  --leading-body: 1.65;

  /* ---- Space ----------------------------------------------------------
     A 4px-based ramp. `--gutter` and `--section` are fluid so the vertical
     rhythm scales with the viewport instead of stepping at breakpoints. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(56px, 8vw, 116px);
  --section-tight: clamp(40px, 5.5vw, 72px);
  --measure: 68ch; /* comfortable reading width */
  --content-max: 1200px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---- Elevation ------------------------------------------------------
     Restrained on purpose. Depth here comes from surface changes and hairline
     borders; shadow is reserved for things that genuinely float. */
  --sh-1: 0 1px 2px rgba(10, 34, 49, 0.05), 0 2px 6px rgba(10, 34, 49, 0.04);
  --sh-2: 0 2px 6px rgba(10, 34, 49, 0.06), 0 10px 24px rgba(10, 34, 49, 0.07);
  --sh-3: 0 8px 20px rgba(10, 34, 49, 0.08), 0 24px 56px rgba(10, 34, 49, 0.1);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.5s;

  /* ---- Focus ----------------------------------------------------------
     Two rings: a light halo then the brand colour, so the indicator stays
     visible on white, on tint and on photography. */
  --focus-ring: 0 0 0 3px var(--surface-0), 0 0 0 5.5px var(--brand-600);
  --focus-ring-inverse: 0 0 0 3px var(--surface-deepest), 0 0 0 5.5px var(--brand-bright);

  /* Minimum comfortable hit area (WCAG 2.2 target size, AAA). */
  --tap: 44px;

  /* Height of the sticky header, kept in a token so `scroll-margin-top` on
     anchor targets always clears it. */
  --header-h: 64px;
}

@media (min-width: 900px) {
  :root {
    --header-h: 76px;
  }
}

/*
 * Stylesheet for the six static guide pages.
 *
 * These pages are plain HTML — no bundler, no React — so they cannot import
 * from `src/`. `scripts/prerender.mjs` prepends `src/styles/00-tokens.css` to
 * this file at build time, which is where every colour, size, font face and
 * spacing value below comes from. Keep this file free of raw hex values and
 * one-off font stacks so the guides can never drift from the main site.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-8);
}

body {
  min-width: 320px;
  background: var(--surface-1);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--brand-600);
  text-underline-offset: 0.22em;
}

:focus-visible {
  outline: none;
  border-radius: var(--r-xs);
  box-shadow: var(--focus-ring);
}

h1,
h2,
h3 {
  color: var(--ink-900);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--surface-deepest);
  color: var(--ink-inverse);
  font-size: var(--fs-base);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sp-6)));
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.container {
  width: 100%;
  max-width: calc(1080px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.brand {
  flex: none;
  display: block;
  border-radius: var(--r-xs);
  line-height: 0;
}

.brand img {
  width: 170px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.header-actions > a:first-child {
  display: none;
  color: var(--ink-900);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
}

.header-actions > a:first-child:hover {
  color: var(--brand-700);
}

.button {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand-600);
  color: var(--ink-inverse);
  font-size: var(--fs-lg);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 34, 49, 0.16), 0 6px 16px rgba(10, 100, 114, 0.22);
  transition: background-color var(--dur) var(--ease);
}

.button:hover {
  background: var(--brand-700);
}

/*
 * The header button and the wordmark compete for a phone's width, and
 * "Book an appointment" wraps to two lines and doubles the header height.
 * The tail of the label is dropped rather than the label being shrunk to
 * something unreadable.
 */
.button-tail {
  display: none;
}

@media (min-width: 560px) {
  .button-tail {
    display: inline;
  }
}

/* ----------------------------------------------------------- breadcrumb -- */

.breadcrumb {
  padding-block: var(--sp-5);
  color: var(--ink-500);
  font-size: var(--fs-base);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--sp-2);
  color: var(--border-strong);
}

/* ----------------------------------------------------------- article top -- */

.article-hero {
  padding-block: var(--sp-7) var(--sp-9);
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  color: var(--brand-500);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--brand-500);
}

h1 {
  max-width: 20ch;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-display-1);
  line-height: var(--leading-display);
}

.standfirst {
  max-width: 62ch;
  margin-bottom: var(--sp-6);
  color: var(--ink-600);
  font-size: var(--fs-lead);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  color: var(--ink-500);
  font-size: var(--fs-base);
}

.article-meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--sp-5);
  color: var(--border-strong);
}

/* --------------------------------------------------------- article body -- */

.article-layout {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-8) var(--sp-11);
}

.article-body {
  min-width: 0;
  max-width: 72ch;
}

.article-body h2 {
  margin: var(--sp-9) 0 var(--sp-4);
  font-size: var(--fs-display-3);
}

.article-body h3 {
  margin: var(--sp-7) 0 var(--sp-2);
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
}

.article-body p,
.article-body li {
  color: var(--ink-700);
}

.article-body p + p {
  margin-top: var(--sp-4);
}

.article-body ul,
.article-body ol {
  margin-block: var(--sp-4);
  padding-left: var(--sp-6);
  list-style: revert;
}

.article-body li + li {
  margin-top: var(--sp-2);
}

.article-body li::marker {
  color: var(--brand-500);
}

/* ------------------------------------------------------------- callouts -- */

.safety-box,
.note-box,
.answer-box {
  margin-block: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--brand-100);
  border-left: 4px solid var(--brand-600);
  border-radius: var(--r-md);
  background: var(--brand-050);
}

.safety-box {
  border-color: var(--danger-100);
  border-left-color: var(--danger-600);
  background: var(--danger-050);
}

.safety-box strong,
.note-box strong,
.answer-box strong {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
}

.safety-box a {
  color: var(--danger-700);
}

/* The lead answer: the passage a search engine or assistant is most likely to
   quote, so it is set apart and written to stand alone. */
.answer-box {
  border-color: var(--border);
  border-left-color: var(--ink-500);
  background: var(--surface-0);
}

.contents {
  margin-block: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-0);
}

.contents h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.contents ol {
  margin: 0;
  padding-left: var(--sp-5);
  list-style: decimal;
}

.contents li::marker {
  color: var(--ink-500);
  font-size: var(--fs-base);
}

.contents li + li {
  margin-top: var(--sp-2);
}

.contents a {
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
}

.contents a:hover {
  text-decoration: underline;
}

.checklist {
  display: grid;
  gap: var(--sp-3);
  margin-block: var(--sp-5);
  padding: 0;
  list-style: none;
}

.article-body .checklist {
  padding-left: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-11);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-0);
}

.checklist li::before {
  content: '✓';
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-5);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-circle);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: var(--fs-base);
  font-weight: 700;
}

/* ---------------------------------------------------------------- table -- */

.table-scroll {
  max-width: 100%;
  margin-block: var(--sp-6) var(--sp-7);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-0);
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--ink-700);
  font-size: var(--fs-lg);
  line-height: 1.55;
}

.comparison-table th,
.comparison-table td {
  padding: var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: 0;
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
  border-bottom: 0;
}

.comparison-table thead th {
  background: var(--surface-darker);
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.comparison-table tbody th {
  width: 26%;
  background: var(--brand-050);
  color: var(--ink-900);
  font-weight: 650;
}

/* --------------------------------------------------------------- source -- */

.source-list {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-0);
}

.source-list h2 {
  margin-top: 0;
  font-size: var(--fs-2xl);
}

.source-list li {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- aside -- */

.article-aside {
  align-self: start;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-0);
  box-shadow: var(--sh-1);
}

.article-aside h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
}

.article-aside p {
  margin-bottom: var(--sp-5);
  color: var(--ink-600);
  font-size: var(--fs-lg);
}

.article-aside .button {
  width: 100%;
}

.article-aside hr {
  margin-block: var(--sp-6);
  border: 0;
  border-top: 1px solid var(--border);
}

.article-aside a:not(.button) {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
}

.article-aside a:not(.button):hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  padding-block: var(--sp-9);
  background: var(--surface-deepest);
  color: var(--ink-inverse-mute);
}

.footer-inner {
  display: grid;
  gap: var(--sp-5);
}

.site-footer p {
  max-width: 76ch;
  font-size: var(--fs-base);
  line-height: 1.55;
}

.site-footer a {
  color: var(--brand-bright);
}

.site-footer :focus-visible {
  box-shadow: var(--focus-ring-inverse);
}

/* ------------------------------------------------------- wider screens -- */

@media (min-width: 680px) {
  .header-actions > a:first-child {
    display: inline;
  }

  .brand img {
    width: 200px;
  }

  .article-hero {
    padding-block: var(--sp-10) var(--sp-11);
  }
}

@media (min-width: 960px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-10);
    padding-block: var(--sp-9) var(--sp-12);
  }

  .article-aside {
    position: sticky;
    top: calc(72px + var(--sp-6));
  }

  .footer-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}