/* content.css — buying guides + money pages
   Loaded AFTER theme.css and legal.css. legal.css styles the legal-wrap
   scaffold, serif headings, paragraphs, strong/em, links, .callout and
   .back-link; this file adds what the markdown content needs (tables, code,
   blockquotes, rules) and aligns the CTA + list markers to the HOMEPAGE's
   design language (public/index.html):
     • the CTA mirrors the homepage primary button (.hero-cta / .btn-fill)
     • list markers mirror the tier-card dash (.tier-list li::before)
   All colour + font come from theme.css tokens (lib/theme.js) — no hardcoded
   values. */

.content-page { --max-width: 760px; }

/* A touch more breathing room between sections than the legal default. */
.content-page h2 { margin-top: 64px; }

/* Tables (generation-by-generation comparison grids in the guides) */
.content-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 16px;
  line-height: 1.5;
}
.content-page th,
.content-page td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.content-page thead th {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-3);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.content-page tbody tr:last-child td { border-bottom: none; }
.content-page td strong { color: var(--text-1); }

/* Inline + block code */
.content-page code {
  font-family: var(--mono);
  font-size: max(0.88em, 14px);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
}
.content-page pre {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 18px;
  overflow-x: auto;
}
.content-page pre code { background: none; border: none; padding: 0; }

/* Blockquotes */
.content-page blockquote {
  margin: 24px 0;
  padding: 4px 20px;
  border-left: 2px solid var(--warm);
  color: var(--text-3);
  font-style: italic;
}
.content-page blockquote p:last-child { margin-bottom: 0; }

/* Section dividers (markdown ---) */
.content-page hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}

/* ── Primary CTA ──────────────────────────────────────────────────────────
   The standalone CTA line renders as <p><strong><a>…→</a></strong></p>.
   Mirror the homepage primary button (.hero-cta / .btn-fill in index.html):
   solid warm-muted fill, dark text, mono uppercase, generous padding, SQUARE
   corners, brightening to --warm on hover. */
.content-page p > strong > a {
  display: inline-block;
  margin: 16px 0;
  padding: 18px 44px;
  background: var(--warm-muted);
  border: 1px solid var(--warm-muted);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;            /* override legal.css link underline */
  transition: background 0.4s, border-color 0.4s;
}
.content-page p > strong > a:hover {
  background: var(--warm);
  border-color: var(--warm);
  border-bottom: none;
}

/* ── Free-check CTA ───────────────────────────────────────────────────────
   The shared block lib/content-pages.js emits twice on every guide page. A
   card rather than a bare button, so it reads as an offer sitting in the flow
   and stays visually distinct from the authored "Run a report" primary button
   (styled above) that remains the page's terminal action. Gold accent is the
   theme's --warm (#c8b088); every colour here is a theme.css token. */
.content-page .guide-cta {
  margin: 48px 0;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--warm);
}
.content-page .guide-cta-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
  color: var(--text-1);
}
.content-page .guide-cta-body {
  margin: 0 0 22px;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1.6;
}
/* Mirrors the primary button above, one step tighter. Not `p > strong > a`,
   so the two rules cannot collide. */
.content-page a.guide-cta-btn {
  display: inline-block;
  padding: 16px 38px;
  background: var(--warm-muted);
  border: 1px solid var(--warm-muted);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;            /* override legal.css link underline */
  transition: background 0.4s, border-color 0.4s;
}
.content-page a.guide-cta-btn:hover {
  background: var(--warm);
  border-color: var(--warm);
  border-bottom: none;
}

/* ── List markers ─────────────────────────────────────────────────────────
   Replace default discs with the homepage tier-card marker — a short gold
   dash (.tier-list li.tier-extra::before in index.html). Ordered lists keep
   their numbers; the /guides index list keeps its own treatment. */
.content-page ul:not(.guide-list) {
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px;
}
.content-page ul:not(.guide-list) li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
.content-page ul:not(.guide-list) li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--warm-muted);
}

/* /guides index list */
/* ── Guide hero image ─────────────────────────────────────────────────────
   The one <picture class="guide-hero"> lib/content-pages.js emits between
   the byline and the first paragraph on a guide that has a row in
   content/guide-images.json. Full width of the content column (the column
   is .content-page --max-width 760px inside .legal-wrap's 24px padding);
   the 4px radius is the one .content-page pre (above) and legal.css
   .contact-card already use. No colour: the image is its own surface. */
.content-page .guide-hero { display: block; margin: 0 0 32px; }
.content-page .guide-hero img { display: block; width: 100%; height: auto; border-radius: 4px; }

.content-page .guide-list { list-style: none; padding-left: 0; }
.content-page .guide-list li { margin-bottom: 28px; }
.content-page .guide-list a {
  font-family: var(--serif);
  font-size: 22px;
}
.content-page .guide-desc { color: var(--text-3); font-size: 16px; }

@media (max-width: 600px) {
  /* Tables keep full-size text (16px floor rulings, 2026-08-25) and scroll
     sideways inside their own box instead of overflowing the page. The
     overflow predates the type increase (508px-wide table at 390) and only
     got wider with it; scrolling the table, not shrinking the text, is the
     ruling-compatible fix. */
  .content-page table { display: block; overflow-x: auto; }
  .content-page th, .content-page td { padding: 8px 10px; }
  .content-page p > strong > a { padding: 16px 32px; }
  /* At ~380px the button's tracking makes it wider than the card's content
     box, so it goes full width rather than overflowing. */
  .content-page .guide-cta { margin: 36px 0; padding: 22px 20px; }
  .content-page .guide-cta-title { font-size: 21px; }
  .content-page a.guide-cta-btn {
    display: block;
    padding: 16px 12px;
    text-align: center;
  }
}