/* =============================================================
   Health Shelf — stylesheet
   Brand: NHS blue (#005EB8), Poppins headings, Roboto body
   ============================================================= */

:root {
  --blue: #005EB8;
  --blue-dark: #003d7a;
  --blue-darker: #002a54;
  --blue-tint: #eaf2fb;
  --blue-tint-2: #f4f8fc;
  --ink: #212b32;
  --text: #3d4a54;
  --muted: #64727d;
  --line: #e2e8ee;
  --white: #ffffff;
  --amber: #e0a800;
  --green: #2f8f4e;
  --red: #c8102e;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 42, 84, .08);
  --shadow: 0 6px 20px rgba(0, 42, 84, .10);
  --shadow-lg: 0 14px 40px rgba(0, 42, 84, .16);
  --maxw: 1140px;
  --readw: 760px;
  --font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.28rem; color: var(--blue-dark); }
h4 { font-size: 1.08rem; }
p { margin: 0 0 1.1em; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tint { background: var(--blue-tint-2); }
.text-center { text-align: center; }
.eyebrow {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: .5rem;
}
.lead { font-size: 1.18rem; color: var(--muted); }

/* Accessibility */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--blue); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 500; font-size: 1rem;
  padding: .8rem 1.6rem; border-radius: var(--radius-pill);
  border: 2px solid var(--blue); cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn--on-blue { background: #fff; color: var(--blue); border-color: #fff; }
.btn--on-blue:hover { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue-tint); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 50%; }
.brand span { line-height: 1; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .4rem;
  width: 44px; height: 44px; color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-menu { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  font-family: var(--font-head); font-weight: 500; font-size: .98rem; color: var(--ink);
  text-decoration: none; padding: .5rem .8rem; border-radius: 8px; display: block;
  transition: color .15s ease, background-color .15s ease;
}
.nav-menu a:hover { color: var(--blue); background: var(--blue-tint); }
.nav-menu a[aria-current="page"] { color: var(--blue); }
.nav-menu a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; background: var(--blue);
  border-radius: 2px; margin-top: 2px;
}

/* The menu becomes the tap-to-open one below 1024px. Six items plus the logo
   need about 950px on one line, so the old 860px switch left a band of widths
   where the menu wrapped onto three rows. 1024px also matches the width at
   which article pages gain their sidebar, so the whole site changes shape at
   one point rather than two. */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: .5rem 1rem 1rem; display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: .85rem .6rem; border-radius: 8px; font-size: 1.05rem; }
  .nav-menu a[aria-current="page"]::after { display: none; }
  .nav-menu li + li { border-top: 1px solid var(--line); }
  .nav[aria-expanded="true"] .nav-toggle .icon-open { display: none; }
  .nav[aria-expanded="true"] .nav-toggle .icon-close { display: block; }
}

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--blue-darker), var(--blue) 70%); color: #fff; overflow: hidden; }
.hero .container { padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,.9); font-size: 1.2rem; max-width: 34ch; }
.hero .eyebrow { color: #bcd6f2; }
.hero .hero-byline { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: #fff; margin-bottom: 1.7rem; }
.hero .hero-byline span { color: rgba(255,255,255,.7); }
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-media { order: -1; }
  .hero p { max-width: none; }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cfe0f2; }
.card .card-tag { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: .6rem; }
.card h3 { color: var(--ink); font-size: 1.35rem; margin-bottom: .5rem; }
.card p { color: var(--text); }
.card .btn { margin-top: auto; align-self: flex-start; }

/* An image beside a single card. Below 820px it becomes one column, and
   because the image comes first in the HTML it lands above the card - the
   same breakpoint the hero uses, so the page changes shape all at once. */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.feature-row-media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* Resource / download list */
.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.resource {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.resource:hover { border-color: #cfe0f2; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.resource .doc-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); border-radius: 9px; }
.resource .doc-icon svg { width: 22px; height: 22px; }
.resource .r-title { font-family: var(--font-head); font-weight: 500; }
.resource .r-meta { font-size: .85rem; color: var(--muted); }
.resource .r-arrow { margin-left: auto; color: var(--blue); }

/* Callout / notice */
.callout { border-left: 4px solid var(--blue); background: var(--blue-tint); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 1.7rem; margin: 3.25rem 0; }
.callout--warn { border-left-color: var(--amber); background: #fff8e6; }
.callout--good { border-left-color: #2e7d3a; background: #edf6ee; }
.callout h4 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.prose img.profile-photo { width: 168px; height: 210px; border-radius: var(--radius); object-fit: cover; display: block; margin: 0 0 1.1rem; box-shadow: var(--shadow-sm); }

/* ---------- Recipes ---------- */
.recipe-controls { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
#recipe-search { width: 100%; max-width: 480px; padding: .7rem .9rem; border: 1px solid #c9d4dd; border-radius: 9px; font: inherit; background: #fff; }
.recipe-filter-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.recipe-filter-label { margin: 0; min-width: 3rem; font-family: var(--font-head); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.recipe-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.recipe-filter { background: var(--blue-tint-2); border: 0; color: var(--blue-dark); font-family: var(--font-head); font-weight: 600; font-size: .85rem; padding: .38rem .8rem; border-radius: var(--radius-pill); cursor: pointer; }
.recipe-filter:hover { background: var(--blue-tint); }
.recipe-filter[aria-pressed="true"] { background: var(--blue); color: #fff; }
.recipe-count { margin: 0; color: var(--muted); font-size: .9rem; }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
.recipe-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.recipe-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cfe0f2; }
.recipe-card-media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--blue-tint), var(--blue-tint-2)); }
.recipe-card-media::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--blue-dark); font-family: var(--font-head); font-weight: 600; opacity: .55; }
.recipe-card-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.recipe-card-meal { font-family: var(--font-head); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--blue); }
.recipe-card h3 { font-size: 1.1rem; margin: 0; color: var(--ink); }
.recipe-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.recipe-tag { display: inline-block; background: var(--blue-tint-2); color: var(--blue-dark); font-size: .72rem; font-family: var(--font-head); font-weight: 600; padding: .15rem .55rem; border-radius: var(--radius-pill); }
.recipe-empty { color: var(--muted); }

.recipe-card-desc { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.recipe-count-row { margin: 0; display: flex; align-items: center; gap: 1rem; }
.recipe-clear { background: none; border: 0; padding: 0; color: var(--blue); font-family: var(--font-head); font-weight: 600; font-size: .85rem; cursor: pointer; min-height: 32px; }
.recipe-clear:hover { text-decoration: underline; }
.recipe-note { color: var(--muted); font-size: .92rem; }
.nutrition-label { font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--muted); text-transform: none; margin-left: .4rem; }
/* Lines that only appear on paper - the print block below switches them on */
.print-source, .print-disclaimer { display: none; }
.nutrition-table-wrap { overflow-x: auto; }
.nutrition-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.nutrition-table th { font-family: var(--font-head); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; padding: .5rem .9rem .5rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.nutrition-table td { padding: .6rem .9rem .6rem 0; font-weight: 600; color: var(--ink); white-space: nowrap; }

.recipe-photo { margin: 0 0 1.5rem; }
.recipe-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.prose p.recipe-tags { margin: 0 0 1.2rem; }
#recipe-detail h2 { margin-top: 2.2rem; padding-top: 0; }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.4rem 0; padding: 1rem 1.3rem; background: var(--blue-tint-2); border-radius: var(--radius); }
.recipe-meta dt { font-family: var(--font-head); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.recipe-meta dd { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }

/* ---------- Article + Table of contents ---------- */
.article-header { background: linear-gradient(160deg, var(--blue-darker), var(--blue) 75%); color: #fff; }
.article-header .container { padding-block: clamp(2.5rem, 6vw, 4rem); }
.article-header h1 { color: #fff; max-width: 20ch; }
.article-header p { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 60ch; margin-bottom: 0; }

/* Two-column header hero — the standard for content-page headers that carry a hero image */
.article-header--hero .article-header-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.article-header--hero .article-header-text p { max-width: 46ch; }
.article-header-media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.article-header-media.is-empty { min-height: 240px; border: 2px dashed rgba(255,255,255,.45); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; text-align: center; color: rgba(255,255,255,.8); font-family: var(--font-head); font-weight: 600; font-size: .95rem; padding: 1.5rem; }
.article-header-media.is-empty::before { content: "Hero image"; }
@media (max-width: 820px) {
  .article-header--hero .article-header-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .article-header--hero .article-header-media { order: -1; }
}
.article-header .eyebrow { color: #bcd6f2; }

.article-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 3rem; align-items: start; }
.article-layout--form { grid-template-columns: minmax(0, 1fr) 360px; }
.download-cta { text-align: center; padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.download-cta .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.6rem .8rem; }
/* Two buttons side by side in article text; row-gap keeps them clear once they stack */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem .8rem; }

/* ---------- Collapsible section panels ---------- */
.section-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); margin: 1.4rem 0; }
.section-panel > summary { display: block; list-style: none; cursor: pointer; position: relative; padding: 1.25rem 3.3rem 1.25rem 1.5rem; border-radius: var(--radius); }
.section-panel > summary::-webkit-details-marker { display: none; }
.section-panel > summary:hover { background: var(--blue-tint-2); }
.section-panel > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.section-panel > summary h2 { margin: 0; padding: 0; font-size: 1.45rem; }
.section-panel-sub { display: block; margin-top: .35rem; color: var(--muted); font-size: 1rem; }
.section-panel > summary::after { content: ""; position: absolute; right: 1.6rem; top: 1.75rem; width: .68rem; height: .68rem; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg); transition: transform .2s ease; }
.section-panel[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.section-panel[open] > summary::after { transform: rotate(-135deg); top: 1.95rem; }
.section-panel-body { padding: 1.4rem 1.5rem 1.6rem; }

.key-points { background: var(--blue-tint-2); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 0 0 1.6rem; }
.key-points h4 { margin: 0 0 .6rem; color: var(--blue-dark); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.key-points ul { margin: 0; padding-left: 1.2rem; }
.key-points li { margin-bottom: .4em; }

.section-media { margin: 1.6rem 0; }
.media-placeholder { border: 2px dashed #b9c9d8; border-radius: var(--radius); background: var(--blue-tint-2); padding: 2.4rem 1rem; text-align: center; display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.media-placeholder span { font-family: var(--font-head); font-weight: 600; color: var(--blue-dark); }
.media-placeholder small { color: var(--muted); font-size: .85rem; }

.toc-toggle-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: .4rem; background: none; border: 0; padding: 0; color: var(--blue); font-family: var(--font-head); font-weight: 600; font-size: .9rem; cursor: pointer; }
.toc-toggle-all:hover { text-decoration: underline; }

/* ---------- Print: expand everything, drop the screen chrome ---------- */
/* A4 with even margins, so what a reader gets on paper matches the PDFs that
   build-pdfs.ps1 generates from these same pages. */
@page { size: A4; margin: 10mm; }

@media print {
  .site-header, .site-footer, .toc, .to-top, .nav-toggle, .download-cta, .toc-toggle-all, .video-embed { display: none !important; }
  /* Keep the tinted panels and boxes rather than printing them as bare text */
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* On paper the margin comes from @page, so the generous on-screen breathing
     space around each section would only push content onto a second sheet. */
  .section { padding-block: 0 !important; }
  .container { padding-inline: 0; max-width: none; }
  .article-layout { display: block; }
  .section-panel { border: 0; box-shadow: none; margin: 0 0 1rem; }
  .section-panel > summary { padding: 0; cursor: auto; }
  .section-panel > summary::after { display: none; }
  .section-panel > .section-panel-body { display: block !important; padding: 0; }

  /* Recipe pages: drop the buttons and the coloured banner, keep the content */
  .recipe-actions, .recipe-back-row, .recipe-controls, #recipe-more { display: none !important; }
  .article-header { background: none !important; }
  .article-header .container { padding-block: 0 0 .5rem !important; }
  .article-header h1, .article-header p, .article-header .eyebrow, .article-header a { color: #000 !important; }
  #recipe-detail h2 { page-break-after: avoid; margin-top: 1.4rem; }
  #recipe-detail ul, #recipe-detail ol, .callout, .nutrition-table-wrap, .recipe-meta { page-break-inside: avoid; }
  .callout { box-shadow: none; }
  .print-source { display: block !important; margin-top: 1.6rem; padding-top: .8rem; border-top: 1px solid #ccc; font-size: .85rem; color: #555; }

  /* ---- Condition pages ---- */
  /* Everything that only makes sense on screen: the buttons, the links between
     the summary and the in-depth version, the by-line. */
  .page-actions, .page-switch, .next-step { display: none !important; }
  .print-disclaimer { display: block !important; font-size: 8.5pt; color: #333; }

  /* Headings should not be left stranded at the foot of a page, and a box of
     key points should not be split across two sheets. */
  .prose h2 { margin-top: 1.8rem; padding-top: 0; }
  .prose.condition, .prose.guide { font-size: 10.5pt; line-height: 1.55; }
  .prose.condition p, .prose.guide p { margin-bottom: .75em; }
  .prose.condition h2, .prose.condition h3, .prose.condition h4,
  .prose.guide h2, .prose.guide h3, .prose.guide h4 { break-after: avoid; page-break-after: avoid; }
  .prose.condition .key-points, .prose.condition .callout, .prose.condition ul,
  .prose.guide .key-points, .prose.guide .callout, .prose.guide ul { break-inside: avoid; page-break-inside: avoid; }
  .prose.condition .callout, .prose.guide .callout { margin: 1.2rem 0; padding: .8rem 1rem; }

  /* The one-page summary prints as the two-column A4 leaflet. The sizes are in
     millimetres because this has to fit one sheet - if a condition ever runs
     over, shorten the text rather than shrinking the type further. */
  .leaflet { max-width: none; column-count: 2; column-gap: 9mm; font-size: 9pt; line-height: 1.32; }
  .leaflet-block { break-inside: avoid; page-break-inside: avoid; margin-bottom: 3mm; }
  .leaflet-block h2 { font-size: 10.5pt; margin-bottom: 1.2mm; }
  .leaflet-block ul { padding-left: 4.5mm; margin-bottom: 1.6mm; }
  .leaflet-block li { margin-bottom: .6mm; }
  .leaflet-actions li { margin-bottom: 1.6mm; }
  .leaflet-note { font-size: 8.6pt; }
  .leaflet-block--highlight { background: #eaf2fb; padding: 2.5mm 3.5mm; border-radius: 2mm; }
  .leaflet-block--boxed { border: .4mm solid #b9c9d8; padding: 2.5mm 3.5mm; border-radius: 2mm; }
  /* Sits outside .leaflet in the HTML, so it runs the full width under both
     columns. Do not move it back inside and use column-span: all - Chrome
     starts a fresh column row for a spanning element and pushes the whole
     footer onto a second sheet. */
  .leaflet-footer { border-top: .3mm solid #b9c9d8; margin-top: 2mm; padding-top: 1.5mm; break-inside: avoid; }
  .leaflet-footer .print-disclaimer { font-size: 8pt; margin-bottom: 0; }
  .leaflet-footer .print-source { margin-top: .8mm; padding-top: 0; border-top: 0; font-size: 8pt; }
  .leaflet-header .container { padding-block: 0 2mm !important; }
  .leaflet-header h1 { font-size: 17pt; margin-bottom: 1mm; }
  .leaflet-header .eyebrow { font-size: 8pt; margin-bottom: .5mm; }
  .leaflet-header p { font-size: 9.2pt; max-width: none; margin-bottom: 0; }
}
.article-layout .toc { position: sticky; top: 90px; }
.toc-title { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600; color: var(--muted); margin: 0 0 .7rem; }
.toc nav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc nav a {
  display: block; padding: .35rem .9rem; font-size: .92rem; color: var(--muted);
  text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; line-height: 1.4;
}
.toc nav a:hover { color: var(--blue); }
.toc nav a.active { color: var(--blue); font-weight: 600; border-left-color: var(--blue); }

.prose { max-width: var(--readw); }
.prose { line-height: 1.85; }
.prose p { margin-bottom: 1.9em; }
.prose h2 { margin-top: 5.5rem; padding-top: 1rem; scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 0; padding-top: 0; }
.prose h3 { margin-top: 3rem; }
.prose h4 { margin-top: 1.4rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 1.6rem 0; }
.prose figure { margin: 1.8rem 0; }
.prose figcaption { font-size: .9rem; color: var(--muted); text-align: center; margin-top: .6rem; }
.prose blockquote {
  margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--blue);
  background: var(--blue-tint-2); border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* Video */
.video-embed { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin: 3.75rem 0; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Article pages switch between the single-column reading layout and the
   two-column layout with a sticky contents sidebar at 1024px.
   That number is deliberate: the widest phone in landscape is about 956px
   (iPhone 16 Pro Max), so every phone stays single column, while an iPad in
   landscape - exactly 1024px - is wide enough to earn the sidebar.
   The matching (min-width: 1024px) block below must be kept in step. */
@media (max-width: 1023px) {
  .article-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .article-layout .toc { position: static; }
  .toc details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-tint-2); padding: .4rem 1rem; }
  .toc summary { font-family: var(--font-head); font-weight: 600; cursor: pointer; padding: .5rem 0; color: var(--blue-dark); }
  .toc nav ul { border-left: none; margin-top: .5rem; }
}
@media (min-width: 1024px) {
  .toc summary { list-style: none; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc details { display: block; }
  .toc details > summary { display: none; }
  /* The contents panel starts closed in the HTML so it is collapsed on small
     screens. At this width it is the sticky sidebar and the summary above is
     hidden, so there would be nothing to click to reopen it - show the list
     whether the panel is open or not. Browsers hide a closed panel in two
     different ways, so both rules are needed: older engines use display, newer
     Chrome uses content-visibility on ::details-content. */
  .toc details > *:not(summary) { display: block; }
  .toc details::details-content { content-visibility: visible; }
}

/* ---------- Health condition pages ----------
   Two page types per condition:
     - the one-page summary, which reads as an ordinary web page on screen and
       prints as a two-column A4 leaflet (see the print block above)
     - the in-depth leaflet, which is a normal article page with a contents
       sidebar, marked up as <article class="prose condition">          */

/* The lists on conditions.html and guides.html. Rows rather than cards,
   because these have to stay easy to scan once there are twenty or thirty
   entries on them. */
.index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; max-width: 820px; }
.index-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.index-item:hover { border-color: #cfe0f2; box-shadow: var(--shadow); }
.index-item h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.index-item h2 a { color: var(--ink); text-decoration: none; }
.index-item h2 a:hover { color: var(--blue); text-decoration: underline; }
.index-item p { margin: 0 0 .9rem; }
.index-links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-bottom: 0; font-family: var(--font-head); font-weight: 500; font-size: .95rem; }

/* Moving between the summary and the in-depth version, and the by-line */
.page-switch { font-family: var(--font-head); font-weight: 500; margin-bottom: 1.6rem; }
.page-meta { color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.5rem; max-width: var(--readw); }

/* The one-page summary */
.leaflet { max-width: var(--readw); }
.leaflet-block { margin-bottom: 2.2rem; }
.leaflet-block h2 { font-size: 1.35rem; margin-bottom: .6rem; color: var(--blue-dark); }
.leaflet-block ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.leaflet-block li { margin-bottom: .35em; }
.leaflet-block > :last-child { margin-bottom: 0; }
.leaflet-actions li { margin-bottom: .8em; }
.leaflet-note { color: var(--muted); font-size: .95rem; }
.leaflet-block--highlight { background: var(--blue-tint); border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.leaflet-block--boxed { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; }
/* Print-only: the disclaimer and source line a printed leaflet has to carry.
   Empty on screen, so it must not leave a gap there. */
.leaflet-footer { margin: 0; }

.next-step { max-width: var(--readw); margin-top: 3rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.next-step h2 { font-size: 1.5rem; }

/* Quiz styling */
.quiz { counter-reset: q; }
.quiz-q { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1rem 0; background: #fff; }
.quiz-q > p:first-child { font-weight: 500; font-family: var(--font-head); color: var(--ink); }
.quiz-q ol { margin: .4rem 0 0; }
details.answers { margin: 1.4rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-tint-2); padding: 0 1.3rem; }
details.answers summary { font-family: var(--font-head); font-weight: 600; color: var(--blue-dark); cursor: pointer; padding: 1rem 0; }
details.answers[open] { padding-bottom: 1rem; }

/* ---------- Contact form ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.form-row { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.form-row label { font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: var(--ink); }
.form-row input, .form-row textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid #c9d4dd; border-radius: 9px; background: #fff; width: 100%;
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0,94,184,.15); }
.form-row textarea { min-height: 140px; resize: vertical; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c9d4dd; padding-block: 2.8rem 2rem; margin-top: 2rem; }
/* Three blocks: the brand note, Explore, and Legal. */
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.site-footer .brand { color: #fff; }
.site-footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #c9d4dd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-about { max-width: 34ch; font-size: .95rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.3rem; font-size: .85rem; color: #93a2ae; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--blue); color: #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--blue-dark); transform: translateY(-2px); }

/* Small helpers */
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1rem; }
.pill-note { display: inline-block; background: var(--blue-tint); color: var(--blue-dark); font-size: .85rem; padding: .3rem .8rem; border-radius: var(--radius-pill); font-family: var(--font-head); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}