/* ==========================================================================
   ch-surface.css — the citation-grade reading surface (GLOBAL, additive)
   Ships the audit's verified legibility fixes as a token layer that loads
   AFTER custom.css. On a medical site legibility IS credibility, so every
   rule here moves reading text to WCAG AA without touching any content.
   Scope discipline: light-ground fixes are scoped to light wrappers so the
   dark shell keeps its own (brighter) values.
   ========================================================================== */

:root {
  --chs-teal-ink: #1f7d72;   /* AA on white (4.97:1) — teal as TEXT */
  --chs-steel-ink: #4a5764;  /* ~7:1 — body/meta on light ground */
  --chs-gold-ink: #b8941a;   /* ~4.5:1 — gold as TEXT on light ground */
}

/* --- teal-as-text on light ground: links + inline teal --------------------
   #2A9D8F stays for fills, buttons, icons, and dark-ground use. */
.bg-ice-white a.text-pressure-teal,
.bg-white a.text-pressure-teal,
.gradient-mesh-light a.text-pressure-teal,
.post-content a,
.study-summary a { color: var(--chs-teal-ink); }
.post-content a:hover,
.study-summary a:hover { color: #16655c; }

/* --- steel body text on light ground -------------------------------------- */
.bg-ice-white .text-steel-gray,
.bg-white .text-steel-gray,
.gradient-mesh-light .text-steel-gray { color: var(--chs-steel-ink); }

/* --- gold-as-text on light ground (journal badges, related-study labels) --- */
.bg-ice-white .text-warm-gold,
.bg-white .text-warm-gold { color: var(--chs-gold-ink); }

/* ==========================================================================
   Article reading experience (.post-content = blog/guide body)
   ========================================================================== */

/* Restore list markers (Tailwind preflight strips list-style; clinical
   criteria lists were rendering as flush-left lines). */
.post-content ul { list-style: disc; padding-left: 1.45em; }
.post-content ol { list-style: decimal; padding-left: 1.55em; }
.post-content ul ul { list-style: circle; }
.post-content li { margin: 0.3em 0; }
.post-content li::marker { color: var(--chs-teal-ink); }

/* Cap the reading measure (was ~90–98 ch/line). Media/tables keep full width. */
.post-content > p,
.post-content > ul,
.post-content > ol,
.post-content > blockquote,
.post-content > h2,
.post-content > h3,
.post-content > h4 { max-width: 68ch; }

/* --- Data tables ---------------------------------------------------------------
   Tailwind's preflight resets ALL table borders + spacing, so a raw <table> in a
   post body renders as bare, unaligned text columns (comparison tables in every
   auto-generated post). Restore a clean, citation-grade grid on the reading surface.
   Mobile: the table scrolls inside itself (display:block) so a wide 4-col table never
   forces the page to scroll sideways; >=640px it lays out as a normal full-width table. */
.post-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 0.94rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  border: 1px solid #d5dee1;
}
@media (min-width: 640px) { .post-content table { display: table; } }
.post-content thead th {
  background: var(--chs-teal-ink);
  color: #fff;
  text-align: left;
  font-weight: 600;
  padding: 0.72em 0.9em;
  border: 1px solid #1a6c62;
  vertical-align: bottom;
}
.post-content tbody td {
  padding: 0.66em 0.9em;
  border: 1px solid #d5dee1;
  vertical-align: top;
  color: var(--chs-steel-ink);
}
.post-content tbody tr:nth-child(even) td { background: #f4f8f9; }
.post-content tbody tr:hover td { background: #eaf3f4; }
.post-content tbody td:first-child { font-weight: 600; color: #22303a; }
.post-content table caption { caption-side: bottom; font-size: 0.82rem; color: var(--chs-steel-ink); padding-top: 0.5em; }

/* ==========================================================================
   Study pages (/research/…)
   ========================================================================== */

/* custom.css:636 points these at 'Cormorant Garamond', which is never loaded,
   so the summary subheads were falling back to Times New Roman. */
.study-summary h3 {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: 0;
}

/* Reading measure inside the 900px study column. */
.study-summary p { max-width: 66ch; }

/* Registry-grade numerals: metadata and citations align like instrument data. */
.hbot-citation-display,
.study-summary,
.single-hbot_study table { font-variant-numeric: tabular-nums; }

/* Global rendering niceties (cheap, sitewide) */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* The off-canvas mobile menu (#mobile-menu: position:fixed; right:0; w-[300px],
   parked off-screen when closed) extends the document width and causes a
   horizontal scroll + right-edge text clipping on mobile. Clip it at the root.
   overflow-x:clip (not hidden) does NOT create a scroll container, so it can't
   break position:sticky anywhere. The menu still slides in normally when opened
   (it lands inside the viewport). */
html { overflow-x: clip; }

/* ==========================================================================
   D3 - study registry type consolidation (Fraunces headings, STIX prose).
   Scoped to the research section (.single-hbot_study) so the rest of the site
   is untouched; this also makes study pages Playfair-free. Registry reading
   face = STIX Two Text; instrument/registry headings = Fraunces.
   ========================================================================== */
.single-hbot_study .font-display { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.012em; }
.single-hbot_study .study-summary p,
.single-hbot_study .study-summary li { font-family: "STIX Two Text", Georgia, serif; }
.single-hbot_study .study-summary { font-size: 1.02rem; }