/* =====================================================================
   ADHD Assessment Guides: magazine component styles.
   Loaded on guide web pages (/assets/guides.css) and inlined into the PDF
   pipeline, so web and PDF render every component identically. Tokens come
   from brand.css (the single token source). Everything is scoped under
   .nfx-guide so it cannot affect the rest of the site.
   ===================================================================== */

.nfx-guide {
  font-family: var(--nfx-guide-font-body);
  font-size: var(--nfx-guide-text-base);
  line-height: var(--nfx-guide-leading-body);
  color: var(--nfx-ink);
}
.nfx-guide :where(h1, h2, h3) {
  font-family: var(--nfx-guide-font-display);
  color: var(--nfx-teal);
  line-height: var(--nfx-guide-leading-tight);
  font-weight: 600;
}

/* ---- content column ---- */
.nfx-guide .nfxg-chapter { max-width: var(--nfx-guide-measure); margin: 0 auto; }
/* The body owns the gap between its direct children. Selector is deliberately
   specific (.nfxg-chapter scope) so it outranks figure-based blocks that reset
   their own margin to 0 (tables, pull-quotes, inline images), which would
   otherwise butt straight against the block above them. */
.nfx-guide .nfxg-chapter .nfxg-body > * + * { margin-top: var(--nfx-guide-block-gap); }

/* ---- intro / lead paragraph ---- */
.nfx-guide .nfxg-intro {
  font-size: var(--nfx-guide-text-lg);
  color: var(--nfx-teal-deep);
  line-height: 1.55;
  margin: 0 0 var(--nfx-guide-section-gap);
}

/* ---- chapter header ---- */
.nfx-guide .nfxg-chead { margin-bottom: var(--nfx-guide-section-gap); }
.nfx-guide .nfxg-chead__eyebrow {
  font-size: var(--nfx-guide-text-sm);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nfx-accent-deep); font-weight: 600; margin: 0 0 0.6rem;
}
.nfx-guide .nfxg-chead__number {
  display: inline-block; font-family: var(--nfx-guide-font-display);
  font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft);
  letter-spacing: 0.04em; margin: 0 0 0.4rem;
}
.nfx-guide .nfxg-chead__title { font-size: var(--nfx-guide-h1); margin: 0 0 1rem; }
.nfx-guide .nfxg-chead__meta {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); margin: 0;
}
.nfx-guide .nfxg-chead__dot { color: var(--nfx-accent); }

/* ---- hero image ---- */
.nfx-guide .nfxg-hero { margin: 0 0 var(--nfx-guide-section-gap); }
.nfx-guide .nfxg-hero__img {
  width: 100%; height: auto; border-radius: var(--nfx-radius-lg);
  box-shadow: var(--nfx-shadow);
}
.nfx-guide .nfxg-hero__caption,
.nfx-guide .nfxg-figcaption {
  font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft);
  margin-top: 0.6rem; font-style: italic;
}

/* ---- prose ---- */
.nfx-guide .nfxg-prose > * + * { margin-top: var(--nfx-guide-flow); }
.nfx-guide .nfxg-prose h2 {
  font-size: var(--nfx-guide-h2); margin-top: var(--nfx-guide-section-gap);
  margin-bottom: 0.2em; padding-top: 0.2em;
}
.nfx-guide .nfxg-prose h3 { font-size: var(--nfx-guide-h3); margin-top: 1.6em; }
.nfx-guide .nfxg-prose p { margin: 0; }
.nfx-guide .nfxg-prose a { color: var(--nfx-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.nfx-guide .nfxg-prose a:hover { color: var(--nfx-teal); }
.nfx-guide .nfxg-prose ul, .nfx-guide .nfxg-prose ol { margin: 0; padding-left: 1.3em; }
.nfx-guide .nfxg-prose li + li { margin-top: 0.4em; }
.nfx-guide .nfxg-prose blockquote {
  margin: 0; padding: 0.4em 0 0.4em 1.1em;
  border-left: 3px solid var(--nfx-accent); color: var(--nfx-ink-soft);
}
.nfx-guide .nfxg-prose code {
  font-size: 0.92em; background: var(--nfx-paper-2);
  padding: 0.1em 0.35em; border-radius: 6px;
}

/* ---- callout box ---- */
.nfx-guide .nfxg-callout {
  border-radius: var(--nfx-radius-card); padding: 1.25rem 1.4rem;
  border: 1px solid var(--nfx-rule); background: var(--nfx-paper-2);
  break-inside: avoid;
}
.nfx-guide .nfxg-callout__title { font-weight: 600; margin: 0 0 0.4rem; color: var(--nfx-teal); }
.nfx-guide .nfxg-callout__body > * + * { margin-top: 0.6em; }
.nfx-guide .nfxg-callout__body p { margin: 0; }
.nfx-guide .nfxg-callout__attr { margin: 0.8rem 0 0; font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); font-style: italic; }
.nfx-guide .nfxg-callout__badge {
  display: inline-block; font-size: var(--nfx-guide-text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--nfx-accent-deep); margin-bottom: 0.5rem;
}
.nfx-guide .nfxg-callout--warm { background: var(--nfx-gold-wash); border-color: rgba(231,190,39,0.35); }
.nfx-guide .nfxg-callout--blue { background: var(--nfx-accent-wash); border-color: color-mix(in srgb, var(--nfx-accent) 30%, transparent); }
.nfx-guide .nfxg-callout--decision {
  background: #fff; border-left: 4px solid var(--nfx-accent);
}
.nfx-guide .nfxg-callout--personal {
  background: var(--nfx-accent-wash);
  border: 1px solid color-mix(in srgb, var(--nfx-accent) 35%, transparent);
}

/* ---- pull quote ---- */
.nfx-guide .nfxg-pullquote { margin: 0; padding: 0.5rem 0 0.5rem 1.4rem; border-left: 4px solid var(--nfx-accent); }
.nfx-guide .nfxg-pullquote__q {
  margin: 0; font-family: var(--nfx-guide-font-display);
  font-size: var(--nfx-guide-text-xl); line-height: 1.35; color: var(--nfx-teal);
}
.nfx-guide .nfxg-pullquote__attr { margin-top: 0.6rem; font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); }
.nfx-guide .nfxg-pullquote--personal .nfxg-pullquote__q { font-style: italic; }

/* ---- key takeaways ---- */
.nfx-guide .nfxg-takeaways {
  background: var(--nfx-teal); color: #fff;
  border-radius: var(--nfx-radius-lg); padding: 1.6rem 1.8rem;
  break-inside: avoid;
}
.nfx-guide .nfxg-takeaways__title { color: #fff; font-size: var(--nfx-guide-h3); margin: 0 0 0.8rem; }
.nfx-guide .nfxg-takeaways__list { margin: 0; padding: 0; list-style: none; }
.nfx-guide .nfxg-takeaways__list li { position: relative; padding-left: 1.6rem; }
.nfx-guide .nfxg-takeaways__list li + li { margin-top: 0.7rem; }
.nfx-guide .nfxg-takeaways__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--nfx-gold);
}

/* ---- tables (comparison / symptom / cost) ---- */
.nfx-guide .nfxg-table { margin: 0; break-inside: avoid; }
.nfx-guide .nfxg-table__scroll { overflow-x: auto; border-radius: var(--nfx-radius-card); border: 1px solid var(--nfx-rule); }
.nfx-guide .nfxg-table table { width: 100%; border-collapse: collapse; font-size: var(--nfx-guide-text-sm); }
.nfx-guide .nfxg-table thead th {
  background: var(--nfx-teal); color: #fff; text-align: left;
  font-family: var(--nfx-guide-font-body); font-weight: 600;
  padding: 0.8rem 1rem; font-size: var(--nfx-guide-text-sm);
}
.nfx-guide .nfxg-table tbody th, .nfx-guide .nfxg-table tbody td {
  padding: 0.8rem 1rem; vertical-align: top; border-top: 1px solid var(--nfx-rule);
}
.nfx-guide .nfxg-table tbody th { text-align: left; font-weight: 600; color: var(--nfx-teal); background: var(--nfx-paper-2); }
.nfx-guide .nfxg-table tbody tr:nth-child(even) td { background: var(--nfx-rule-soft); }
.nfx-guide .nfxg-table__caption { margin-top: 0.6rem; font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); font-style: italic; }
.nfx-guide .nfxg-cost__price { font-weight: 700; color: var(--nfx-teal); white-space: nowrap; }
.nfx-guide .nfxg-cost__notes { display: block; font-weight: 400; font-size: var(--nfx-guide-text-xs); color: var(--nfx-ink-soft); margin-top: 0.2rem; }

/* ---- step timeline ---- */
.nfx-guide .nfxg-timeline { break-inside: avoid; }
.nfx-guide .nfxg-timeline__list { list-style: none; margin: 0; padding: 0; }
.nfx-guide .nfxg-step { position: relative; display: flex; gap: 1rem; padding-bottom: 1.4rem; }
.nfx-guide .nfxg-step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: 0;
  width: 2px; background: var(--nfx-accent-wash);
}
.nfx-guide .nfxg-step__marker {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--nfx-accent); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-family: var(--nfx-guide-font-display); z-index: 1;
}
.nfx-guide .nfxg-step__title { font-weight: 600; color: var(--nfx-teal); margin: 0.2rem 0 0.3rem; }
.nfx-guide .nfxg-step__text > * + * { margin-top: 0.5em; }
.nfx-guide .nfxg-step__text p { margin: 0; }
.nfx-guide .nfxg-timeline__caption { font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); font-style: italic; margin: 0.4rem 0 0; }

/* ---- stat block ---- */
.nfx-guide .nfxg-stat {
  background: var(--nfx-accent-wash); border-radius: var(--nfx-radius-lg);
  padding: 1.6rem 1.8rem; text-align: center; break-inside: avoid;
}
.nfx-guide .nfxg-stat__value {
  font-family: var(--nfx-guide-font-display); font-size: var(--nfx-guide-display);
  line-height: 1.05; color: var(--nfx-accent-deep); margin: 0;
}
.nfx-guide .nfxg-stat__label { margin: 0.5rem 0 0; color: var(--nfx-ink-soft); }
.nfx-guide .nfxg-stat__source { display: block; margin-top: 0.4rem; font-size: var(--nfx-guide-text-xs); color: var(--nfx-ink-soft); }

/* ---- inline figures ---- */
.nfx-guide .nfxg-figure { margin: 0; }
.nfx-guide .nfxg-figure img { width: 100%; height: auto; border-radius: var(--nfx-radius-card); }
.nfx-guide .nfxg-figure--inset { max-width: 100%; }
.nfx-guide .nfxg-figure--full img { border-radius: var(--nfx-radius-lg); }

/* ---- mini FAQ ---- */
.nfx-guide .nfxg-faq { margin-top: var(--nfx-guide-section-gap); }
.nfx-guide .nfxg-faq__title { font-size: var(--nfx-guide-h2); margin: 0 0 1rem; }
.nfx-guide .nfxg-faq__item { padding: 1rem 0; border-top: 1px solid var(--nfx-rule); break-inside: avoid; }
.nfx-guide .nfxg-faq__q { font-size: var(--nfx-guide-h3); color: var(--nfx-teal); margin: 0 0 0.4rem; }
.nfx-guide .nfxg-faq__a > * + * { margin-top: 0.5em; }
.nfx-guide .nfxg-faq__a p { margin: 0; }

/* ---- author box ---- */
.nfx-guide .nfxg-authors { margin-top: var(--nfx-guide-section-gap); padding: 1.6rem 1.8rem; background: var(--nfx-paper-2); border-radius: var(--nfx-radius-lg); }
.nfx-guide .nfxg-authors__title { font-size: var(--nfx-guide-h3); margin: 0 0 1rem; }
.nfx-guide .nfxg-authors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.nfx-guide .nfxg-author__name { font-weight: 700; color: var(--nfx-teal); margin: 0 0 0.2rem; font-size: var(--nfx-guide-text-lg); }
.nfx-guide .nfxg-author__name a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.nfx-guide .nfxg-author__role { margin: 0 0 0.2rem; font-size: var(--nfx-guide-text-sm); }
.nfx-guide .nfxg-author__byline { margin: 0; font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); }
.nfx-guide .nfxg-author__links { margin: 0.5rem 0 0; font-size: var(--nfx-guide-text-sm); }
.nfx-guide .nfxg-author__links a { color: var(--nfx-accent-deep); text-decoration: underline; }

/* ---- closing colophon (ebook only): author box + reviewed line + disclaimer once at the end ---- */
.nfx-guide .nfxg-colophon__reviewed { margin: var(--nfx-guide-block-gap) 0 0; font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); }

/* ---- disclaimer ---- */
.nfx-guide .nfxg-disclaimer { margin-top: var(--nfx-guide-block-gap); padding: 1rem 1.2rem; border: 1px dashed var(--nfx-rule); border-radius: var(--nfx-radius-card); }
.nfx-guide .nfxg-disclaimer p { margin: 0; font-size: var(--nfx-guide-text-sm); color: var(--nfx-ink-soft); }

@media (max-width: 640px) {
  .nfx-guide .nfxg-authors__grid { grid-template-columns: 1fr; }
}