/*
 * course.css — shared stylesheet for the Alcohol & Substance Abuse course.
 *
 * Every lesson and reference document links this file so the whole course
 * reads as one calm, consistent, print-friendly document. Design goals:
 *   - Non-judgmental, warm, low-anxiety. The audience may be court-mandated
 *     and initially resistant; nothing here should feel clinical or preachy.
 *   - Tufte-inspired: generous margins, readable measure, quiet color.
 *   - Prints cleanly to paper (participants may keep hard copies).
 *
 * Link from a lesson with:  <link rel="stylesheet" href="../assets/course.css">
 */

:root {
  --ink:        #2b2622;   /* body text — warm near-black, softer than #000 */
  --ink-soft:   #6b6157;   /* captions, secondary text */
  --paper:      #fbf8f3;   /* warm off-white background */
  --panel:      #f3ede2;   /* callout / card fill */
  --rule:       #e0d7c8;   /* hairlines */
  --accent:     #5b7a6b;   /* muted sage — calm, non-alarming */
  --accent-ink: #3f5a4d;
  --warn:       #a6603a;   /* used sparingly for consequences/risk */
  --link:       #4a6d8c;
  --measure:    38rem;     /* readable line length */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Georgia", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { font-size: 18px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  max-width: var(--measure);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

/* ---- Top nav bar ----------------------------------------------------- */
/* Persistent "back to the course map" affordance on every lesson &
 * reference page. Sits above the kicker; hidden when printing. */
.topbar {
  display: flex; align-items: center; gap: 1.25rem;
  font-family: var(--sans); font-size: 0.8rem;
  margin: -2rem 0 2.5rem; padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.topbar a { border: none; color: var(--accent-ink); font-weight: 600; }
.topbar a:hover { color: var(--link); }
.topbar__home { margin-right: auto; }

/* ---- Kicker / lesson meta ------------------------------------------- */
.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.75rem;
}

h1, h2, h3 { font-family: var(--sans); line-height: 1.2; color: var(--ink); }
h1 { font-size: 2rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; font-weight: 650; margin: 2.75rem 0 0.75rem; }
h3 { font-size: 1.02rem; font-weight: 650; margin: 1.75rem 0 0.5rem; }

p { margin: 0 0 1rem; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-color: var(--link); }

/* Superscript citation links back to sources */
a.cite {
  font-family: var(--sans);
  font-size: 0.62em;
  vertical-align: super;
  border: none;
  color: var(--accent-ink);
  padding: 0 0.1em;
}

/* ---- Lede / summary -------------------------------------------------- */
.lede { font-size: 1.15rem; color: var(--ink); }

/* ---- Hero illustration ---------------------------------------------- */
/* One contextual illustration near the top of a lesson. Full-measure width,
 * soft corners; caption is quiet and right-aligned. */
figure.hero { margin: 0 0 2.5rem; }
figure.hero img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  background: var(--panel);
}
figure.hero figcaption {
  font-family: var(--sans); font-size: 0.7rem; color: var(--ink-soft);
  margin-top: 0.45rem; text-align: right;
}

/* ---- Callouts -------------------------------------------------------- */
.callout {
  font-family: var(--sans);
  font-size: 0.92rem;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.callout--warn  { border-left-color: var(--warn); }
.callout--help  { border-left-color: var(--link); }
/* CONVENTION: a box's eyebrow (uppercase title) echoes its rail color, so the
 * category reads the same from the rail and the header. Sage is the default;
 * --help overrides to blue, --warn to terracotta. The "go deeper" note (sage)
 * follows the same rule in its own block below. */
.callout .callout__title {
  font-weight: 650; letter-spacing: 0.02em; margin-bottom: 0.3rem;
  text-transform: uppercase; font-size: 0.72rem; color: var(--accent-ink);
}
.callout--help .callout__title { color: var(--link); }
.callout--warn .callout__title { color: var(--warn); }
/* Sources is an un-railed footer, so its eyebrow stays neutral (not a category). */
.sources .callout__title { color: var(--ink-soft); }

/* Help box: the crisis / where-to-get-help block repeated across lessons */
.help-line { font-weight: 650; }

/* ---- Rail-color system ----------------------------------------------
 * All boxed notes share the warm --panel fill + a left rail; the RAIL COLOR
 * carries meaning:
 *   sage (--accent)  → key takeaway / encouraging "go deeper" reading
 *   blue (--link)    → supportive, reassuring note  (.callout--help)
 *   terracotta(--warn)→ caution / important         (.callout--warn)
 * (Support & help lines is NOT a boxed callout — it's a plain section.)
 * -------------------------------------------------------------------- */

/* ---- Support & help lines (plain section) ---------------------------- */
/* A definition list in sans type: each entry is a situation (dt) → action
 * (dd), so the eye scans "which situation am I in?" then the number/link.
 * No box or dividers — whitespace carries the grouping. Ordered by urgency:
 * emergency → crisis → support line → treatment locator. */
.helplines { font-family: var(--sans); font-size: 0.92rem; line-height: 1.5;
             color: var(--ink); margin: 0.5rem 0 2.5rem; }
.helplines dt { font-weight: 650; margin-top: 1.05rem; }
.helplines dt:first-child { margin-top: 0; }
.helplines dd { margin: 0.1rem 0 0; }
.helplines .hl-note { font-weight: 400; color: var(--ink-soft); }

/* Dial chip: phone/short-code numbers, styled like inline code so they read as
 * "a number to dial" and don't compete with the bold situation labels. */
.dial {
  font-family: var(--mono); font-size: 0.86em; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.08em 0.4em; white-space: nowrap;
}
.helpbar li { padding: 0.35rem 0; border-top: 1px solid var(--rule); }
.helpbar li:first-child { border-top: none; padding-top: 0; }
.helpbar b { color: var(--ink); }

/* ---- Source note (encouraging "go deeper" recommendation) ------------ */
/* Same panel fill + sage rail as a takeaway callout so it holds its weight
 * on the page, but labeled as an optional invitation, not a command. */
.source-note {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
  background: var(--panel); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 0.85rem 1.1rem; margin: 1.9rem 0;
}
.source-note__label {
  display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 650; margin-bottom: 0.3rem;
}
.source-note a { font-weight: 600; }

/* ---- Key term inline ------------------------------------------------- */
.term { font-style: italic; color: var(--accent-ink); }

/* ---- Definition list for spectrums/comparisons ---------------------- */
dl.spectrum { margin: 1.25rem 0; }
dl.spectrum dt { font-family: var(--sans); font-weight: 650; margin-top: 0.85rem; }
dl.spectrum dd { margin: 0.15rem 0 0; color: var(--ink); }

/* ---- Footer nav ------------------------------------------------------ */
.lesson-nav {
  margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

/* ---- Ask-your-teacher reminder -------------------------------------- */
.ask-teacher {
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft);
  background: transparent; border: 1px dashed var(--rule); border-radius: 6px;
  padding: 0.85rem 1rem; margin: 2rem 0;
}
.ask-teacher strong { color: var(--accent-ink); }

/* ---- Source list ----------------------------------------------------- */
.sources { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); }
.sources ol { padding-left: 1.2rem; }
.sources li { margin-bottom: 0.35rem; }

/* ---- Print ----------------------------------------------------------- */
@media print {
  :root { --paper: #fff; }
  body { padding: 0; max-width: 100%; font-size: 12pt; color: #000; }
  a { color: #000; border: none; }
  a.cite { color: #000; }
  .quiz__feedback, .ask-teacher { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lesson-nav, .topbar { display: none; }
}

/* ---- Small screens --------------------------------------------------- */
@media (max-width: 30rem) {
  html { font-size: 17px; }
  body { padding: 2.5rem 1.1rem 4rem; }
}