/* ============================================================================
   Pain Journal site: content pages (guides, hub, comparison, legal).
   Loads after base.css. Shared by every interior page; page-only extras
   (e.g. the clinician print sheet) live in their own file.

   STYLE + RULES: docs/growth/WEBSITE-DESIGN-SYSTEM.md (read before editing).
   ========================================================================== */

/* Layout tokens (--measure / --wide) and the shared .cta-band live in base.css. */

/* ---------- Breadcrumb (replaces the old ad-hoc topnav) ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--ink-muted);
}

.breadcrumb a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb a:hover { color: var(--pine); }
.breadcrumb .sep { color: var(--rule); }
.breadcrumb [aria-current] { color: var(--pine); font-weight: 600; }

/* ---------- Interior page hero (left-aligned reading column) ---------- */
.page-hero {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: clamp(30px, 5vw, 60px);
}

.page-hero-inner {
  max-width: var(--measure);
  margin-inline: auto;
}

.page-hero .kicker { margin-top: 18px; display: block; }

.page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--pine);
  margin-top: 12px;
}

/* Ration the italic accent to the homepage hero only: here the em is upright. */
.page-hero h1 em {
  font-style: normal;
  color: var(--terracotta);
}

.page-hero .lead {
  color: var(--ink-muted);
  font-size: 1.08rem;
  line-height: 1.6;
  margin-top: 16px;
  max-width: 56ch;
}

.page-hero .hero-actions {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ---------- Section headings: one scale shared across interior pages ----------
   (.section-title in base.css is the deliberately larger homepage variant.) */
.subhead,
.prose h2,
.clin-head h2,
.clin-intro h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--pine);
}

.subhead { max-width: var(--measure); margin-inline: auto; }

.subhead + .res-grid { margin-top: clamp(18px, 2.5vw, 26px); }

/* ---------- Article prose ---------- */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
}

.prose > * + * { margin-top: 1rem; }

.prose .lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.42rem);
  line-height: 1.45;
  color: var(--pine);
}

.prose h2 { line-height: 1.2; margin-top: 2.4rem; }
.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--pine);
  margin-top: 1.6rem;
}

/* Shared rich-text bits (prose = guides/comparison; legal = privacy/terms). */
.prose ul, .legal ul { padding-left: 1.4rem; }
.prose li, .legal li { margin-top: 0.5rem; }
.prose li::marker, .legal li::marker { color: var(--terracotta); }
.prose strong, .legal strong { color: var(--pine); font-weight: 600; }
.prose a, .legal a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a { text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* ---------- Tables (comparison + legal share the base skeleton) ---------- */
.cmp, .legal table { width: 100%; border-collapse: collapse; }
.cmp { font-size: 0.95rem; }

.cmp th,
.cmp td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

.cmp thead th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pine);
}

.cmp tbody th { font-weight: 600; color: var(--ink); width: 38%; }
.cmp td.pj { color: var(--pine); font-weight: 600; }
.cmp td.alt { color: var(--ink-muted); }
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: none; }

/* ---------- Download button (printable page): base pill in base.css ---------- */
.download { gap: 10px; font-size: 1rem; padding: 14px 26px; }
.download:hover { transform: translateY(-2px); }
.download svg { width: 20px; height: 20px; }
.download-note { color: var(--ink-muted); font-size: 0.85rem; }

/* PDF page preview (printable page): real page thumbnails, no outer card
   (two "sheets" side by side, not a card nesting two cards). */
.pdf-preview {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  gap: clamp(16px, 3vw, 28px);
  align-items: flex-start;
  justify-content: center;
}

.pdf-preview .pg {
  flex: 1;
  max-width: 300px;
  margin: 0;
  text-align: center;
}

.pdf-preview .pg img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  background: var(--paper-raised);
}

.pdf-preview .pg figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* Figure inside an article (e.g. a product screenshot breaking up a text wall). */
.prose figure {
  margin: 1.8rem 0 0;
  text-align: center;
}

.prose figure .phone {
  margin-inline: auto;
  width: clamp(220px, 42vw, 280px);
}

.prose figure figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* Wide data tables (e.g. the privacy services table) scroll inside their own
   box on narrow screens instead of blowing out the page width. */
.legal .table-scroll {
  margin-top: 1rem;
  overflow-x: auto;
}

.legal .table-scroll table { margin-top: 0; min-width: 640px; }

/* ---------- Related links ---------- */
.related {
  max-width: var(--measure);
  margin-inline: auto;
  border-top: 1px solid var(--rule-soft);
  padding-top: 26px;
}

/* The "Related" heading uses class="kicker" (defined in base.css). */
.related ul { list-style: none; margin-top: 14px; display: grid; gap: 2px; }

.related a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pine);
  font-weight: 600;
  text-decoration: none;
  padding: 7px 0;
  transition: gap 0.18s var(--ease-out), color 0.15s ease;
}

.related a:hover { gap: 12px; color: var(--terracotta); }
.related a svg { flex-shrink: 0; }

/* ---------- Small legal / footnote copy under an article ---------- */
.legal-note {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.legal-note a { color: var(--pine); }

/* .cta-band lives in base.css (shared by the homepage final CTA + every page). */

/* ---------- Legal documents (privacy / terms) ---------- */
.legal {
  max-width: var(--measure);
  margin-inline: auto;
}

.legal .breadcrumb { margin-bottom: 20px; }

.legal h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pine);
}

.legal .doc-meta {
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin-top: 8px;
}

.legal h2 {
  font-size: 1.2rem;
  color: var(--pine);
  margin-top: 2.2rem;
}

.legal p,
.legal li {
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink);
}

.legal p { margin-top: 0.9rem; }
.legal ul { margin-top: 0.6rem; }
/* list-marker / strong / link styling is shared with .prose above. */

.legal table { margin-top: 1rem; font-size: 0.88rem; }

.legal th,
.legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.55;
}

.legal th {
  background: var(--paper-raised);
  color: var(--pine);
  font-weight: 600;
}

/* Callout: full border + tint, never a side-stripe accent (impeccable ban). */
.callout {
  background: color-mix(in srgb, var(--terracotta) 6%, var(--paper-raised));
  border: 1px solid color-mix(in srgb, var(--terracotta) 30%, transparent);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  margin-top: 1.4rem;
}

.callout p { margin-top: 0; }
.callout p + p { margin-top: 0.7rem; }
.callout strong { color: var(--terracotta-deep); }

/* ---------- Content responsive ---------- */
@media (max-width: 600px) {
  .cmp th, .cmp td { padding: 9px 8px; font-size: 0.9rem; }
}

/* ============================================================================
   Interior-page layout (scoped to <main class="doc">, homepage untouched)
   - Content sits in a CENTERED reading column; base rules size it off --measure.
   - Landing pages (<main class="doc land">: hub + for-clinicians) widen that
     column by redefining the token in-scope; every --measure-sized component
     follows automatically (hero, subhead, prose, clin-*), no per-component list.
   - Tighten vertical rhythm: interior sections are shorter than the homepage's,
     and consecutive sections do not stack their full top+bottom padding.
   ========================================================================== */
.doc .section-pad { padding-block: clamp(30px, 4vw, 52px); }
.doc .section-pad + .section-pad { padding-top: 0; }

.land { --measure: var(--wide); }
/* .res-grid is full-bleed on the homepage, so give it the column width here. */
.land .res-grid { max-width: var(--measure); margin-inline: auto; }

/* The footer's large homepage margin-top, stacked on an interior section's own
   bottom padding, leaves a big dead band before the footer. Drop it on interior
   pages; the section padding is the gap. (Footer is a sibling of main, so this
   is an adjacent-sibling selector, not a descendant.) */
main.doc + .site-footer { margin-top: 0; }