/* ===========================================================
   CardioLearn Design System
   Brand: Logo A "Pulse Heart" — Harbor Blue / Meadow Green
   (original palette, with a Brick Red accent — from the
   @cardio.learn campaign — layered in for bullets and tags)
   Typography: Lexend (headings) + Source Sans 3 (body)
   Accessibility target: WCAG AA minimum, AAA where practical
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand ---- */
  --color-primary: #0F5FA6;       /* Harbor Blue */
  --color-primary-dark: #0C4C85;
  --color-primary-tint: #E8F1FA;
  --color-accent: #16A374;        /* Meadow Green */
  --color-accent-dark: #10804F;
  --color-highlight: #BC3A2A;     /* Brick Red — decorative-only accent from the campaign:
                                      bullet markers, tag/badge pills. Never used on the main
                                      buttons/links, so it stays clear of the danger/911 color. */
  --color-highlight-dark: #93281B;
  --color-heading: #17233F;       /* Deep Navy — the campaign's headline color, used just for
                                      h1/h2/h3 and the "Cardio" wordmark. Body text stays neutral
                                      ink so paragraphs don't compete with the headline color. */

  /* ---- Neutrals (warm-biased, not pure gray) ---- */
  --color-bg: #FBF9F5;
  --color-bg-alt: #F1EEE6;
  --color-card: #FFFFFF;
  --color-ink: #22262A;
  --color-ink-muted: #5B6169;
  --color-border: rgba(34, 38, 42, 0.14);
  --color-border-strong: rgba(34, 38, 42, 0.24);

  /* ---- Semantic (deliberately distinct from brand blue/green,
          so medical urgency never gets confused with brand color) ---- */
  --color-info-bg: #EAF3FB;
  --color-info-border: #7FB0DE;
  --color-info-text: #0C4C85;

  --color-warn-bg: #FFF6E5;
  --color-warn-border: #C98A1D;
  --color-warn-text: #7A5210;

  --color-danger-bg: #FDECEC;
  --color-danger-border: #C0392B;
  --color-danger-text: #8B1E14;

  /* ---- Type scale ---- */
  --font-heading: 'Lexend', system-ui, -apple-system, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --step-caption: 0.8125rem;   /* 13px */
  --step-small: 0.9375rem;     /* 15px */
  --step-body: 1.0625rem;      /* 17px */
  --step-lg: 1.25rem;          /* 20px */
  --step-xl: 1.75rem;          /* 28px */
  --step-2xl: 2.25rem;         /* 36px */
  --step-3xl: 2.75rem;         /* 44px */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius: 6px;
  --radius-lg: 12px;
  --max-content: 760px;
  --max-wide: 1120px;
  --max-header: 1400px; /* wider than --max-wide so all 12 nav sections can share one row, in either language, before the hamburger takes over */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #6FA8D8;
    --color-primary-dark: #8FBEE4;
    --color-primary-tint: #16232E;
    --color-accent: #3FC496;
    --color-accent-dark: #63D2AB;
    --color-highlight: #D9695A;
    --color-highlight-dark: #E8897C;
    --color-heading: #EDEAE3;      /* navy would be illegible on a dark ground, so headings
                                       fall back to the same light ink used for body text */

    --color-bg: #14181C;
    --color-bg-alt: #1B2025;
    --color-card: #1E2328;
    --color-ink: #EDEAE3;
    --color-ink-muted: #A9AFB6;
    --color-border: rgba(255, 255, 255, 0.14);
    --color-border-strong: rgba(255, 255, 255, 0.24);

    --color-info-bg: #172431;
    --color-info-border: #3E6690;
    --color-info-text: #9CC4E8;

    --color-warn-bg: #2B2312;
    --color-warn-border: #A9781F;
    --color-warn-text: #E8C46B;

    --color-danger-bg: #2B1615;
    --color-danger-border: #9A3C32;
    --color-danger-text: #F0A79E;
  }
}
:root[data-theme="dark"] {
  --color-primary: #6FA8D8; --color-primary-dark: #8FBEE4; --color-primary-tint: #16232E;
  --color-accent: #3FC496; --color-accent-dark: #63D2AB;
  --color-highlight: #D9695A; --color-highlight-dark: #E8897C;
  --color-heading: #EDEAE3;
  --color-bg: #14181C; --color-bg-alt: #1B2025; --color-card: #1E2328;
  --color-ink: #EDEAE3; --color-ink-muted: #A9AFB6;
  --color-border: rgba(255,255,255,.14); --color-border-strong: rgba(255,255,255,.24);
  --color-info-bg: #172431; --color-info-border: #3E6690; --color-info-text: #9CC4E8;
  --color-warn-bg: #2B2312; --color-warn-border: #A9781F; --color-warn-text: #E8C46B;
  --color-danger-bg: #2B1615; --color-danger-border: #9A3C32; --color-danger-text: #F0A79E;
}
:root[data-theme="light"] {
  --color-primary: #0F5FA6; --color-primary-dark: #0C4C85; --color-primary-tint: #E8F1FA;
  --color-accent: #16A374; --color-accent-dark: #10804F;
  --color-highlight: #BC3A2A; --color-highlight-dark: #93281B;
  --color-heading: #17233F;
  --color-bg: #FBF9F5; --color-bg-alt: #F1EEE6; --color-card: #FFFFFF;
  --color-ink: #22262A; --color-ink-muted: #5B6169;
  --color-border: rgba(34,38,42,.14); --color-border-strong: rgba(34,38,42,.24);
  --color-info-bg: #EAF3FB; --color-info-border: #7FB0DE; --color-info-text: #0C4C85;
  --color-warn-bg: #FFF6E5; --color-warn-border: #C98A1D; --color-warn-text: #7A5210;
  --color-danger-bg: #FDECEC; --color-danger-border: #C0392B; --color-danger-text: #8B1E14;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Bump the base font size on desktop/larger screens for legibility — all
   type-scale values are in rem, so this scales every font-size on the site
   proportionally. Mobile (<=900px, same breakpoint as the nav collapse)
   keeps the default 16px root and is left untouched. */
@media (min-width: 901px) {
  html { font-size: 18px; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--color-heading);
}
h1 { font-size: var(--step-3xl); font-weight: 700; margin: 0 0 var(--space-5); }
h2 { font-size: var(--step-xl); margin: var(--space-8) 0 var(--space-4); }
h3 { font-size: var(--step-lg); margin: var(--space-6) 0 var(--space-3); }
p, ul, ol, table { margin: 0 0 var(--space-4); max-width: 68ch; }
li { margin-bottom: var(--space-2); line-height: 1.65; }
strong { color: var(--color-ink); }

/* Bulleted content lists get a Brick Red marker — a small, repeated red
   touch on every article page (bullets, not the disc's text), echoing
   the campaign's red bullet dots without recoloring any actual link,
   button, or the danger/911 boxes. */
.article-body ul li::marker { color: var(--color-highlight); }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-3);
}

/* ---- Layout ---- */
.wrap { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--space-5); }
.wrap-wide { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--space-5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff;
  padding: 12px 20px; z-index: 100; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 20;
}
.site-header-inner {
  max-width: var(--max-header); margin: 0 auto; padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); position: relative;
}
.site-header-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: space-between; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand svg { width: 35px; height: 32px; }
.brand-name { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-heading); letter-spacing: -0.01em; }
.brand-name b { font-weight: 700; color: var(--color-primary); }
.brand-name i { font-style: normal; font-weight: 450; }

/* Plain-text nav (desktop) — deliberately no button chrome (background/
   border/shadow) so 12 sections read as a quiet reference list rather than
   a wall of buttons; the current page is marked with an underline instead
   of a filled pill. Mobile (see the 900px breakpoint below) already used
   this same plain-text approach in its collapsed dropdown, so this brings
   desktop in line with it rather than introducing a second style. */
.main-nav { width: 100%; }
.main-nav ul {
  display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--color-border);
  /* Spread the links across the full row (matching the search/lang row's
     width above) instead of clumping them to the left with empty space
     on the right. nowrap + the 1240px breakpoint below (rather than the
     old 900px) are tuned together so all 12 sections, in either language,
     always share one row whenever this isn't the collapsed mobile menu.
     max-width overrides the global "p, ul, ol, table { max-width: 68ch }"
     readability rule, which was clipping this nav list to article-text
     width instead of letting it fill the header. */
  justify-content: space-between; max-width: none;
}
.main-nav a {
  display: inline-block; color: var(--color-ink-muted); text-decoration: none; font-weight: 600; font-size: var(--step-small);
  padding: 10px 4px; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover {
  color: var(--color-primary-dark); border-color: var(--color-border-strong);
}
.main-nav a[aria-current="page"] {
  color: var(--color-primary); border-color: var(--color-primary);
}
.main-nav a[aria-disabled="true"] { color: var(--color-border-strong); cursor: default; }
.main-nav a[aria-disabled="true"]:hover { color: var(--color-border-strong); border-color: transparent; }
/* Thin vertical divider between each item on the one-row desktop nav —
   a real flex item of its own (not an absolutely-positioned overlay), so
   the equal space-between gaps land evenly on both sides of it and each
   label reads centered between its neighboring dividers, whatever its
   own text length. Mirrors the "·" separators already used on every
   "Related:" line elsewhere on the site. Hidden in the mobile dropdown
   below, where a stacked list already has its own row dividers. */
.nav-divider {
  display: flex; align-items: center; list-style: none;
}
.nav-divider::before {
  content: ''; width: 1px; height: 14px; background: var(--color-border-strong);
}
.nav-soon {
  display: inline-block; font-size: 0.6875rem; font-family: var(--font-mono); font-weight: 600;
  background: var(--color-bg-alt); color: var(--color-ink-muted); padding: 1px 6px; border-radius: 999px;
  margin-left: 5px; vertical-align: middle; letter-spacing: 0.02em;
}

.tile[aria-disabled="true"] { opacity: 0.62; }
.tile[aria-disabled="true"]:hover { transform: none; border-color: var(--color-border); cursor: default; }

.site-search { position: relative; flex: 1 1 200px; max-width: 260px; }
.site-search .search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--color-ink-muted); pointer-events: none;
}
.site-search input[type="search"] {
  width: 100%; font-family: var(--font-body); font-size: var(--step-small); color: var(--color-ink);
  background: var(--color-bg-alt); border: 1px solid var(--color-border-strong); border-radius: 999px;
  padding: 8px 12px 8px 34px; -webkit-appearance: none; appearance: none;
}
.site-search input[type="search"]::placeholder { color: var(--color-ink-muted); }
.site-search input[type="search"]:focus { background: var(--color-card); outline: 3px solid var(--color-primary); outline-offset: 1px; }
.site-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, 92vw);
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,0.16); max-height: 360px; overflow-y: auto; z-index: 30; padding: var(--space-2);
}
.search-results[hidden] { display: none; }
.search-result { display: block; padding: var(--space-3); border-radius: var(--radius); text-decoration: none; color: var(--color-ink); }
.search-result:hover, .search-result.is-active { background: var(--color-bg-alt); }
.search-result .sr-title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--step-small); }
.search-result .sr-section {
  display: block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-ink-muted); margin-top: 2px;
}
.search-result .sr-snippet {
  display: block; font-size: 0.75rem; color: var(--color-ink-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result .sr-snippet mark { background: none; color: var(--color-ink); font-weight: 600; padding: 0; }
.search-empty { margin: 0; padding: var(--space-4) var(--space-3); text-align: center; color: var(--color-ink-muted); font-size: var(--step-small); }

.lang-switch {
  display: inline-flex; background: var(--color-bg-alt); border-radius: 999px; padding: 3px;
  font-family: var(--font-body); font-size: var(--step-small); flex: none;
}
.lang-switch a {
  display: inline-block; padding: 7px 14px; border-radius: 999px; font-weight: 600;
  color: var(--color-ink-muted); text-decoration: none;
}
.lang-switch a[aria-current="true"] { background: var(--color-primary); color: #fff; }

.nav-toggle {
  display: none; background: var(--color-bg-alt); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius);
  padding: 10px 18px; min-height: 44px; cursor: pointer; color: var(--color-ink);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--step-small);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-toggle:hover { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary-dark); }
.nav-toggle[aria-expanded="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-9);
  background: var(--color-bg-alt);
  padding: var(--space-8) 0 var(--space-7);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7);
  max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--space-5);
}
.footer-grid h4 { font-family: var(--font-heading); font-size: var(--step-small); margin: 0 0 var(--space-3); color: var(--color-ink); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--space-2); }
.footer-grid a { color: var(--color-ink-muted); text-decoration: none; font-size: var(--step-small); }
.footer-grid a:hover { color: var(--color-primary); }
.footer-disclaimer {
  max-width: var(--max-wide); margin: var(--space-7) auto 0; padding: var(--space-5) var(--space-5) 0;
  border-top: 1px solid var(--color-border); font-size: var(--step-caption); color: var(--color-ink-muted); line-height: 1.6;
}
.footer-disclaimer p { max-width: none; }
.footer-disclaimer p.review-date { margin-top: var(--space-3); font-size: var(--step-caption); opacity: 0.75; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600;
  font-size: var(--step-small); padding: 13px 24px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
  min-height: 44px;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---- Hero (home) ---- */
.hero { padding: var(--space-9) 0 var(--space-8); }
.hero-inner { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--space-5); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
.hero h1 { font-size: clamp(2.25rem, 4vw, var(--step-3xl)); margin-bottom: var(--space-4); }
.hero .lede { font-size: var(--step-lg); line-height: 1.6; color: var(--color-ink-muted); max-width: 46ch; margin-bottom: var(--space-6); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-mark { display: flex; align-items: center; justify-content: center; }
.hero-mark svg { width: 100%; max-width: 280px; height: auto; }

/* ---- Feedback + Latest Updates panel (home, bottom split) ---- */
.home-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; margin-top: var(--space-8); }
.feedback-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); text-align: center; }
.feedback-card h2 { margin-top: 0; }
.feedback-card p { color: var(--color-ink-muted); max-width: 52ch; margin: 0 auto var(--space-5); }
.updates-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.updates-card h2 { margin: 0 0 var(--space-4); font-size: var(--step-lg); }
.updates-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: none; }
.updates-list li { margin: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.updates-list li:last-child { padding-bottom: 0; border-bottom: none; }
.updates-list a { display: block; text-decoration: none; color: var(--color-ink); }
.updates-list a:hover .update-title { color: var(--color-primary); text-decoration: underline; }
.update-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-highlight); background: var(--color-primary-tint);
  padding: 2px 8px; border-radius: 999px; margin-bottom: 6px;
}
.update-title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--step-small); margin-bottom: 3px; }
.update-desc { display: block; color: var(--color-ink-muted); font-size: var(--step-caption); }

/* ---- Food-example list "pop-up window" (diet page) ---- */
.foodlist-trigger-wrap { margin: var(--space-4) 0; }
.foodlist-trigger {
  background: var(--color-primary-tint); border: 1px solid var(--color-primary); color: var(--color-primary-dark, var(--color-primary));
  font: inherit; font-weight: 600; font-size: var(--step-small); padding: 0.6em 1.1em; border-radius: 999px; cursor: pointer;
}
.foodlist-trigger:hover { background: var(--color-primary); color: #fff; }
.foodlist-dialog {
  border: none; border-radius: var(--radius-lg); padding: 0; max-width: 680px; width: 92vw; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
  /* Native <dialog> elements get an opaque UA background/color of their own
     (approximately Canvas/CanvasText) that ignores the page's own theme
     unless overridden explicitly — without this, the popup renders as a
     plain white box with low-contrast text in both light and dark mode. */
  background: var(--color-card); color: var(--color-ink);
}
.foodlist-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.foodlist-dialog-inner { position: relative; padding: var(--space-6); max-height: 82vh; overflow-y: auto; }
.foodlist-dialog h3 { margin: 0 0 var(--space-5); padding-right: 2.25rem; font-size: var(--step-lg); color: var(--color-ink); }
.foodlist-close {
  position: absolute; top: var(--space-4); right: var(--space-4); width: 2rem; height: 2rem; line-height: 1;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; font-size: 0.9rem; color: var(--color-ink-muted);
}
.foodlist-close:hover { color: var(--color-ink); border-color: var(--color-border-strong); }
.foodlist-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5) var(--space-6); }
.foodlist-group h4 { margin: 0 0 var(--space-2); font-size: var(--step-body); color: var(--color-ink); }
ul.foodlist { margin: 0; padding-left: 1.15rem; font-size: var(--step-small); color: var(--color-ink); line-height: 1.6; }
ul.foodlist li { margin-bottom: 0.35em; }

/* ---- Section tiles (home) ---- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); padding: var(--space-8) 0; }
.tile {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); text-decoration: none; color: var(--color-ink);
  transition: border-color .15s ease, transform .15s ease;
}
.tile:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.tile-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary-tint); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.tile-icon svg { width: 22px; height: 22px; }
.tile h3 { margin: 0 0 var(--space-2); font-size: var(--step-lg); }
.tile p { color: var(--color-ink-muted); font-size: var(--step-small); margin: 0; max-width: none; }

/* ---- Article / long-form content page ---- */
.article-header { padding: var(--space-8) 0 var(--space-5); border-bottom: 1px solid var(--color-border); }
.breadcrumb { font-size: var(--step-caption); color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-ink-muted); }
.article-body { padding: var(--space-7) 0 var(--space-8); }

.callout {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 var(--space-6);
  font-size: var(--step-body);
  color: var(--color-ink);
}
.callout p:last-child { margin-bottom: 0; }
.callout-label { font-family: var(--font-heading); font-weight: 600; font-size: var(--step-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-dark); margin-bottom: 6px; display: block; }

/* Semantic alert boxes — always paired with an icon + text label, never color alone */
.alert { border-radius: var(--radius); padding: var(--space-5); margin: 0 0 var(--space-5); border: 1px solid; }
.alert-header { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: var(--step-small); margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.04em; }
.alert-header svg { width: 20px; height: 20px; flex: none; }
.alert ul { margin: 0; padding-left: 1.25em; }
.alert li { margin-bottom: 6px; }
.alert-info { background: var(--color-info-bg); border-color: var(--color-info-border); }
.alert-info .alert-header { color: var(--color-info-text); }
.alert-warn { background: var(--color-warn-bg); border-color: var(--color-warn-border); }
.alert-warn .alert-header { color: var(--color-warn-text); }
.alert-danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.alert-danger .alert-header { color: var(--color-danger-text); }

.alert-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: 0 0 var(--space-6); }
.alert-pair .alert { margin-bottom: 0; }

/* Numbered step list (procedures, care instructions) */
.steps { list-style: none; padding: 0; margin: 0 0 var(--space-6); counter-reset: step; }
.steps li {
  position: relative; padding-left: 44px; margin-bottom: var(--space-5); line-height: 1.65;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-primary-tint); color: var(--color-primary-dark); font-family: var(--font-heading);
  font-weight: 700; font-size: var(--step-small); display: flex; align-items: center; justify-content: center;
}

/* FAQ accordion — native <details>, zero JS, keyboard accessible by default */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--step-body);
  padding: var(--space-4) 0; cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--color-primary); flex: none; line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding-bottom: var(--space-4); color: var(--color-ink-muted); }

/* Comparison table */
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: var(--step-small); max-width: none; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
thead th { background: var(--color-bg-alt); font-family: var(--font-heading); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

/* Explanatory diagrams (schematic, not anatomically literal) */
.figure {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); margin: var(--space-2) 0 var(--space-7);
}
.figure svg { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 560px; }
.figure figcaption { font-size: var(--step-caption); color: var(--color-ink-muted); text-align: center; margin-top: var(--space-4); max-width: none; }

.ef-compare { display: flex; gap: var(--space-7); justify-content: center; flex-wrap: wrap; }
.ef-panel { text-align: center; max-width: 220px; }
.ef-panel svg { max-width: 200px; }
.ef-panel .ef-label { font-family: var(--font-heading); font-weight: 600; margin-top: var(--space-3); font-size: var(--step-small); }
.ef-panel .ef-value { color: var(--color-ink-muted); font-size: var(--step-caption); }

.related-links { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--step-small); color: var(--color-ink-muted); }
.related-links b { color: var(--color-ink); font-weight: 600; }

/* Bio page */
.bio-header { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-7); align-items: start; padding: var(--space-8) 0; }
.bio-photo { width: 220px; height: 220px; border-radius: var(--radius-lg); background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--color-ink-muted); font-size: var(--step-caption); text-align: center; overflow: hidden; }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-title { color: var(--color-ink-muted); font-size: var(--step-body); margin-bottom: var(--space-4); }

/* ---- Responsive ---- */
/* Search + language now sit on their own row above a full-width nav row, so
   the nav no longer has to fight either for space — it can stay visible as a
   wrapping row down to a much narrower width than before, and only collapses
   to the hamburger once the header genuinely runs out of room. */
/* Nav collapses to the hamburger dropdown on its own breakpoint, separate
   from the general content breakpoint below — 1420px is tuned (with a
   real safety margin, not a knife's-edge fit) so all 12 sections, in
   either language, always fit on one row above it (see .main-nav ul's
   nowrap above); collapsing any earlier would still leave room for a
   one-line nav that we'd be hiding unnecessarily. */
@media (max-width: 1420px) {
  .nav-divider { display: none; }
  .main-nav ul {
    display: none; flex-direction: column; gap: 0; flex-wrap: wrap;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    border-radius: 0; padding: var(--space-2) var(--space-5) var(--space-4);
  }
  .main-nav ul.is-open { display: flex; }
  .main-nav li { width: 100%; }
  .main-nav ul a {
    display: flex; align-items: center; width: 100%; border-radius: 0;
    background: transparent; border: none; border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0; box-shadow: none; transform: none;
    font-size: var(--step-small);
  }
  .main-nav ul a:hover, .main-nav ul a[aria-current="page"] {
    background: transparent; color: var(--color-primary); padding-left: var(--space-2);
    box-shadow: none; transform: none;
  }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav { width: auto; }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-mark { order: -1; max-width: 160px; margin: 0 auto; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bio-header { grid-template-columns: 1fr; }
  .bio-photo { width: 160px; height: 160px; }
  .home-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .header-actions { flex-basis: 100%; justify-content: space-between; }
  .site-search { flex: 1 1 auto; max-width: none; }
  .search-results { left: 0; right: 0; width: auto; }
  .tiles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .alert-pair { grid-template-columns: 1fr; }
  .ef-compare { gap: var(--space-5); }
  h1 { font-size: var(--step-2xl); }
}

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

/* ---- Interactive risk-score calculators (scores/ section) ---- */
.calc-intro { font-size: var(--step-lg); color: var(--color-ink-muted); max-width: 62ch; margin-bottom: var(--space-6); }
.calc-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 640px; }
.calc-form { display: grid; gap: var(--space-4); }
.calc-field { display: grid; gap: 6px; }
.calc-field label { font-family: var(--font-heading); font-weight: 600; font-size: var(--step-small); }
.calc-field .calc-hint { font-size: var(--step-caption); color: var(--color-ink-muted); font-weight: 400; }
.calc-field input[type="number"],
.calc-field select {
  font: inherit; font-size: var(--step-body); padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-ink);
  width: 100%; max-width: 260px;
}
.calc-field input[type="number"]:focus, .calc-field select:focus { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.calc-checkbox-group { display: grid; gap: 10px; }
.calc-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: var(--step-small); cursor: pointer; }
.calc-checkbox input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-primary); cursor: pointer; }
.calc-checkbox .calc-checkbox-pts { color: var(--color-ink-muted); font-size: var(--step-caption); }
.calc-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.calc-result { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius); border: 1px solid; display: none; }
.calc-result.is-visible { display: block; }
.calc-result-low { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-text); }
.calc-result-moderate { background: var(--color-warn-bg); border-color: var(--color-warn-border); color: var(--color-warn-text); }
.calc-result-high { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.calc-result-score { font-family: var(--font-heading); font-weight: 700; font-size: var(--step-2xl); display: block; line-height: 1.1; }
.calc-result-category { font-family: var(--font-heading); font-weight: 600; font-size: var(--step-lg); display: block; margin: 4px 0 var(--space-3); }
.calc-result p { margin: 0 0 var(--space-2); }
.calc-result p:last-child { margin-bottom: 0; }
.calc-disclaimer { font-size: var(--step-caption); color: var(--color-ink-muted); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .calc-grid { grid-template-columns: 1fr; } }
.score-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.score-tile { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s; }
.score-tile:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.score-tile h3 { margin: 0 0 6px; font-size: var(--step-lg); color: var(--color-primary-dark, var(--color-primary)); }
.score-tile p { margin: 0; color: var(--color-ink-muted); font-size: var(--step-small); }
.score-tile .score-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-highlight); background: var(--color-primary-tint); padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }

.risk-score-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.risk-score-row { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.risk-score-row:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.risk-score-row-head { flex: 0 0 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.risk-score-row-head h3 { margin: 0; font-size: var(--step-small); line-height: 1.25; color: var(--color-primary-dark, var(--color-primary)); }
.risk-score-row .score-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-highlight); background: var(--color-primary-tint); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.risk-score-row p { margin: 0; color: var(--color-ink-muted); font-size: var(--step-caption); line-height: 1.5; flex: 1 1 auto; }
@media (max-width: 720px) {
  .risk-score-list { grid-template-columns: 1fr; }
  .risk-score-row { flex-direction: row; }
}
@media (max-width: 480px) {
  .risk-score-row { flex-direction: column; gap: var(--space-2); }
  .risk-score-row-head { flex-basis: auto; }
}

/* ---- Printable tools (checklists, trackers) ---- */
.print-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600;
  font-size: var(--step-small); padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06); margin: var(--space-4) 0 var(--space-2);
  transition: border-color .15s ease, color .15s ease;
}
.print-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.print-btn svg { width: 16px; height: 16px; }
.fill-table table { table-layout: fixed; }
.fill-table td { min-height: 2.4em; height: 2.4em; }
.tool-note {
  background: var(--color-info-bg); border: 1px solid var(--color-info-border); color: var(--color-info-text);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; font-size: var(--step-small);
}

@media print {
  .site-header, .site-footer, .print-btn, .skip-link, .search-results,
  .breadcrumb, .related-links, .nav-toggle, .foodlist-trigger-wrap,
  .review-date, .callout .callout-label + p + .print-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none !important; padding: 0 !important; }
  .article-body { padding: 0 !important; }
  a { color: #000; text-decoration: underline; }
  .table-wrap { overflow: visible !important; }
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #999; padding: 8px; }
  .callout, .tool-note { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  .tile, .score-tile, .risk-score-row { border: 1px solid #999; box-shadow: none !important; }
  h1, h2, h3 { page-break-after: avoid; }
  table, .callout, .tool-note { page-break-inside: avoid; }
}