/* ============================================================================
   content.css — inner-page content layer for adultadhd101.com
   Added 2026-10-02. Derived ENTIRELY from the tokens in style.css.
   Linked only by inner pages (hubs, guides, articles, legal). The approved
   homepage does not link this file, so it cannot regress the homepage.
   Mobile-first: base = mobile, min-width media queries up.
   Rule: inner pages use ONLY these classes + the shared shell/homepage classes.
   ========================================================================== */

/* ---------- inner page hero (reuses .hero for background + padding) ------- */
/* the inner column is CENTRED inside the wide container (user 2026-10-03): a
   max-width with no auto margin left the hero and body hugging the left edge */
.page-hero__inner { max-width: 780px; margin-inline: auto; }
.page-hero h1 { font-size: clamp(32px, 8.4vw, 46px); line-height: 1.12; margin-block: 10px 14px; }
.page-hero .hero__lead { margin-block-end: 0; }
@media (min-width: 768px) { .page-hero h1 { font-size: 44px; } }

/* ---------- breadcrumbs (nav wayfinding on deep pages) -------------------- */
.crumbs { font-size: 13px; color: var(--muted); margin-block-end: 14px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--muted); }
.crumbs a { color: var(--teal-dark); }

/* ---------- content band ------------------------------------------------- */
.band { padding-block: 56px 64px; }
.band--soft { background: var(--cream); }
.band--tight { padding-block: 40px 48px; }
@media (min-width: 768px) { .band { padding-block: 72px 80px; } }

/* ---------- template guard: every band aligns to the article column ------- */
/* Band skeleton = .container > (.prose | .guide-grid). If a future build drops an
   <h2> or the FAQ .accordion straight into .container, this keeps it on the same
   column as the hero and body instead of the 1300px container's left edge. */
.container:not(.free-pack__inner):not(.announcement__inner):not(.header__inner) > h2,
.container:has(> .accordion) { max-width: 780px; margin-inline: auto; }

/* ---------- long-form typography ---------------------------------------- */
/* ONE column for every inner-page band (user 2026-10-03): body copy, FAQs and
   section headings line up with the hero column above them instead of hugging
   the left of the 1300px container. Width matches .page-hero__inner. */
.prose { max-width: 780px; margin-inline: auto; }
.prose > * + * { margin-block-start: 18px; }
.prose p,
.prose li { font-size: 17px; line-height: 1.7; color: var(--slate); }
.prose h2 { font-size: clamp(25px, 6.2vw, 33px); line-height: 1.16; color: var(--ink); margin-block: 40px 0; }
.prose h3 { font-size: 20px; line-height: 1.28; color: var(--ink); margin-block: 26px 0; }
.prose ul,
.prose ol { padding-inline-start: 22px; }
.prose li + li { margin-block-start: 8px; }
.prose a { color: var(--teal-dark); text-underline-offset: 2px; }
/* a button inside prose must keep ITS OWN label colour — .prose a would otherwise
   repaint .button--solid's white text teal on a teal fill (1.48:1, fails AA) */
.prose a.button--solid { color: var(--white); }
.prose a.button--solid:hover { color: var(--white); }
.prose a.button--ghost { color: var(--teal-dark); }
.prose a.button--ghost:hover { color: var(--white); }
.prose b { color: var(--ink); }
.prose > :first-child { margin-block-start: 0; }
@media (min-width: 768px) { .prose p, .prose li { font-size: 18px; } }

/* ---------- answer box: the direct, quotable answer (AEO) --------------- */
.answer-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; }
.answer-box p { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0; }

/* ---------- callout ------------------------------------------------------ */
.callout { border-inline-start: 5px solid var(--teal); background: #f2f7f6; border-radius: 14px; padding: 16px 20px; }
.callout__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); font-weight: 700; margin: 0 0 6px; }
.callout > :last-child { margin-block-end: 0; }

/* ---------- key list (icon + line) -------------------------------------- */
.key-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.key-list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--slate); }
.key-list img { width: 20px; height: 20px; flex: 0 0 20px; margin-block-start: 3px; }

/* ---------- numbered steps ---------------------------------------------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 44px; font-size: 16px; line-height: 1.6; color: var(--slate); }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 1px; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.steps b { color: var(--ink); }

/* ---------- tables: ONE template, every .table-wrap on every page -------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table,
.cmp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-wrap table { min-width: 640px; background: var(--white); }
.table-wrap th,
.table-wrap td,
.cmp-table th,
.cmp-table td { border: 1px solid var(--line); padding: 11px 13px; text-align: start; vertical-align: top; }
.table-wrap thead th,
.cmp-table thead th { background: #eaf2f1; color: var(--ink); font-weight: 700; }
.table-wrap tbody tr:nth-child(even) td,
.cmp-table tbody tr:nth-child(even) td { background: #fafaf8; }
.table-wrap tbody tr:hover td,
.cmp-table tbody tr:hover td { background: #f2f6f5; }
.table-wrap td:first-child,
.cmp-table td:first-child { color: var(--ink); font-weight: 600; }
.table-wrap a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.table-wrap a:hover { color: var(--ink); }

/* ---------- printable sheet cards in the article body -------------------- */
.sheet-list { display: grid; gap: 20px; margin-block: 24px 28px; }
.sheet-item { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.sheet-item__shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); }
.sheet-item__body h3 { margin-block: 0 8px; font-size: 19px; }
.sheet-item__body p { margin-block: 0 8px; }
.sheet-item__cta { margin: 0; }
.sheet-item__cta a { font-weight: 600; }
.how-to-get { margin-block: 30px 6px; padding: 20px; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--r-card); background: var(--cream); }
.how-to-get p { margin-block: 0 12px; }
.how-to-get__label { color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: .09em; }
@media (min-width: 720px) {
  .sheet-item { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; }
}

/* ---------- what-you-get list inside the email gate --------------------- */
.free-pack--lead { padding-top: 44px; }
.free-pack__list { margin: 14px auto 0; padding: 0; list-style: none; display: grid; gap: 5px; max-width: 470px; text-align: left; }
.free-pack__list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.4; color: #ffffff; }
.free-pack__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.free-pack__list span { color: #c3ccd6; font-size: 13.5px; }

/* ---------- in-content product card (Gumroad) --------------------------- */
.cta-inline { display: grid; gap: 16px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.cta-inline img { width: 150px; border-radius: 12px; }
.cta-inline h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; color: var(--ink); }
.cta-inline p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--slate); }
.cta-inline .button { justify-self: start; }
@media (min-width: 768px) {
  .cta-inline { grid-template-columns: 150px 1fr; align-items: center; padding: 22px 24px; }
  .cta-inline p { margin-block-end: 12px; }
}

/* ---------- on-page contents (long pages only) -------------------------- */
.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; }
.toc > p { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.toc ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 15px; }
.toc a { color: var(--teal-dark); }

/* ---------- small print under a form / CTA ------------------------------ */
.fine-print { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- last-updated line (legal pages) ---------------------------- */
.updated { font-size: 14px; color: var(--muted); margin-block-end: 20px; }

/* featured article image */
.post-figure { margin: 0 0 1.75rem; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 14px; }
.post-figure figcaption { margin-top: .6rem; font-size: .82rem; line-height: 1.5; color: var(--muted); }