/* NeuroFX brand tokens, shared across all pages */
:root {
  /* Primary palette (from brand guidelines) */
  --nfx-gold: #E7BE27;
  --nfx-gold-soft: #F3D870;
  --nfx-gold-wash: #FAEFC9;
  --nfx-teal: #01485D;
  --nfx-teal-deep: #023442;
  --nfx-teal-mid: #2D6677;
  --nfx-sky: #7DB7C8;
  --nfx-sky-wash: #E4F1F5;
  --nfx-sage: #8CBDBC;
  --nfx-sage-wash: #E6F0EF;
  --nfx-lavender: #B4B5D0;
  --nfx-lavender-wash: #ECECF4;

  /* Neutrals, warm off-whites */
  --nfx-paper: #FAF7F1;
  --nfx-paper-2: #F4EFE5;
  --nfx-ink: #1A1F22;
  --nfx-ink-soft: #45525A;
  --nfx-rule: rgba(1, 72, 93, 0.12);
  --nfx-rule-soft: rgba(1, 72, 93, 0.06);

  /* Shadow + radius */
  --nfx-shadow-sm: 0 1px 2px rgba(1, 72, 93, 0.04), 0 4px 12px rgba(1, 72, 93, 0.04);
  --nfx-shadow: 0 2px 6px rgba(1, 72, 93, 0.06), 0 18px 48px rgba(1, 72, 93, 0.08);
  --nfx-shadow-lg: 0 4px 16px rgba(1, 72, 93, 0.08), 0 32px 80px rgba(1, 72, 93, 0.12);
  --nfx-radius: 18px;
  --nfx-radius-lg: 28px;
  --nfx-radius-card: 20px;
}

* { box-sizing: border-box; }
/* Clip horizontal overflow site-wide so off-canvas fixed elements (the mobile nav drawer, slid
   off to the right) cannot create a horizontal scroll / empty band on the right, which iOS Safari
   in particular allows. overflow-x: clip is used (not hidden) so it does not break position: sticky. */
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  color: var(--nfx-ink);
  background: var(--nfx-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Container */
.nfx-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 640px) { .nfx-container { padding: 0 22px; } }

/* CTA primary (gold) */
.nfx-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--nfx-gold);
  color: var(--nfx-teal-deep);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 18px rgba(231, 190, 39, .25);
}
.nfx-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 12px 24px rgba(231, 190, 39, .32); }
.nfx-btn--ghost {
  background: transparent;
  color: var(--nfx-teal);
  box-shadow: inset 0 0 0 1.5px rgba(1, 72, 93, 0.22);
}
.nfx-btn--ghost:hover { background: rgba(1, 72, 93, 0.04); box-shadow: inset 0 0 0 1.5px rgba(1, 72, 93, 0.4); }
.nfx-btn--teal {
  background: var(--nfx-teal);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 18px rgba(1, 72, 93, .25);
}
.nfx-btn--lg { padding: 18px 28px; font-size: 16px; }

/* Eyebrow / kicker */
.nfx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nfx-teal-mid); font-weight: 600;
}
.nfx-eyebrow::before {
  content: ""; width: 24px; height: 1.5px; background: var(--nfx-gold); border-radius: 1px;
}

/* Soft section divider: gentle curve, no harsh edges */
.nfx-wave { display: block; width: 100%; line-height: 0; }

/* ----- Brand asset utilities ----- */

/* NeuroFX wordmark logo (PNG). The aspect ratio of the PNG is ~2.6:1. */
.nfx-logo { display: block; height: 44px; width: auto; }
.nfx-logo--lg { height: 56px; }
.nfx-logo--sm { height: 38px; }

/* Payment marks: keep generous clear space around each */
.nfx-pay {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px;
}
.nfx-pay img { height: 100%; width: auto; display: block; }
.nfx-pay--klarna {
  background: #FFA8CD;
  color: #0A0B09;
  padding: 0 18px; border-radius: 999px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}
.nfx-pay--paypal img { height: 28px; }
.nfx-pay--amazon img { height: 22px; }
.nfx-pay--clearpay img { height: 34px; }

/* Origami bird wrapper: keep tight (PNGs already have natural padding) */
.nfx-bird-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }

/* ===================================================================== */
/* ADHD Assessment Guides: magazine design tokens (build-scope Section 5) */
/* Additive layer over the brand tokens above. Reuses teal/gold/neutrals; */
/* never introduces #1F4788. Mirrored 1:1 in /pdf/tokens.mjs so the web   */
/* and PDF renderers match. If you change a value here, change it there.  */
/* ===================================================================== */
:root {
  /* Accent palette (added for the guides). Periwinkle = Guide A mark,    */
  /* purple = treatment chapters (A9/B9). Guide B reuses the core teal.    */
  --nfx-periwinkle: #8A8FD0;
  --nfx-periwinkle-soft: #B9BCE6;
  --nfx-periwinkle-wash: #ECEDF9;
  --nfx-periwinkle-deep: #565CA6;
  --nfx-purple: #6D5BA6;
  --nfx-purple-soft: #A99BD2;
  --nfx-purple-wash: #EEEAF6;
  --nfx-purple-deep: #4C3F7D;

  /* Semantic guide accents (consumed via --nfx-accent, set per guide). */
  --nfx-guide-a-accent: var(--nfx-periwinkle);
  --nfx-guide-a-accent-soft: var(--nfx-periwinkle-soft);
  --nfx-guide-a-accent-wash: var(--nfx-periwinkle-wash);
  --nfx-guide-a-accent-deep: var(--nfx-periwinkle-deep);
  --nfx-guide-b-accent: var(--nfx-teal);
  --nfx-guide-b-accent-soft: var(--nfx-sky);
  --nfx-guide-b-accent-wash: var(--nfx-sky-wash);
  --nfx-guide-b-accent-deep: var(--nfx-teal-deep);
  --nfx-guide-treatment-accent: var(--nfx-purple);
  --nfx-guide-treatment-accent-soft: var(--nfx-purple-soft);
  --nfx-guide-treatment-accent-wash: var(--nfx-purple-wash);
  --nfx-guide-treatment-accent-deep: var(--nfx-purple-deep);

  /* Editorial type families (the site already loads both via Google Fonts) */
  --nfx-guide-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --nfx-guide-font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid magazine type scale */
  --nfx-guide-text-xs: 0.78rem;
  --nfx-guide-text-sm: 0.875rem;
  --nfx-guide-text-base: 1.0625rem;
  --nfx-guide-text-lg: 1.1875rem;
  --nfx-guide-text-xl: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --nfx-guide-h3: clamp(1.2rem, 1.06rem + 0.7vw, 1.55rem);
  --nfx-guide-h2: clamp(1.55rem, 1.28rem + 1.35vw, 2.3rem);
  --nfx-guide-h1: clamp(2.1rem, 1.55rem + 2.8vw, 3.5rem);
  --nfx-guide-display: clamp(2.6rem, 1.8rem + 4vw, 4.4rem);

  /* Line heights and measure */
  --nfx-guide-leading-tight: 1.1;
  --nfx-guide-leading-snug: 1.28;
  --nfx-guide-leading-body: 1.65;
  --nfx-guide-measure: 68ch;
  --nfx-guide-measure-narrow: 60ch;

  /* Magazine spacing rhythm */
  --nfx-guide-flow: 1.15em;
  --nfx-guide-block-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  --nfx-guide-section-gap: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  /* Magazine cues */
  --nfx-guide-dropcap-size: 3.4em;
  --nfx-guide-marker-size: 2.75rem;
  --nfx-guide-hairline: 1.5px;

  /* Default accent (teal) before a guide context sets one. */
  --nfx-accent: var(--nfx-teal);
  --nfx-accent-soft: var(--nfx-sky);
  --nfx-accent-wash: var(--nfx-sky-wash);
  --nfx-accent-deep: var(--nfx-teal-deep);
}

/* Guide context: a chapter/hub root carries data-guide ("a"|"b") and,    */
/* for treatment chapters, data-accent="treatment". Every guide component */
/* references var(--nfx-accent) so accent swaps are a single source.       */
.nfx-guide { color: var(--nfx-ink); }
.nfx-guide[data-guide="a"] {
  --nfx-accent: var(--nfx-guide-a-accent);
  --nfx-accent-soft: var(--nfx-guide-a-accent-soft);
  --nfx-accent-wash: var(--nfx-guide-a-accent-wash);
  --nfx-accent-deep: var(--nfx-guide-a-accent-deep);
}
.nfx-guide[data-guide="b"] {
  --nfx-accent: var(--nfx-guide-b-accent);
  --nfx-accent-soft: var(--nfx-guide-b-accent-soft);
  --nfx-accent-wash: var(--nfx-guide-b-accent-wash);
  --nfx-accent-deep: var(--nfx-guide-b-accent-deep);
}
.nfx-guide[data-accent="treatment"] {
  --nfx-accent: var(--nfx-guide-treatment-accent);
  --nfx-accent-soft: var(--nfx-guide-treatment-accent-soft);
  --nfx-accent-wash: var(--nfx-guide-treatment-accent-wash);
  --nfx-accent-deep: var(--nfx-guide-treatment-accent-deep);
}
/* ===================== end ADHD Guides tokens ======================== */

/* ===================================================================== */
/* Global desktop nav "Resources" dropdown. Loaded on every page via      */
/* brand.css, so the markup (injected by global-embeds navResourcesEmbed) */
/* needs no per-surface CSS. The trigger is a real link to the news hub,  */
/* so it works without JS; hover or keyboard focus reveals the menu. It   */
/* only shows on desktop because each layout hides .nav__links at <=760px */
/* and the centralised drawer carries these links on small screens.       */
/* ===================================================================== */
.nav__dd { position: relative; display: inline-flex; align-items: center; }
.nav__dd-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav__dd-trigger::after {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.65;
  transition: transform .18s ease, opacity .18s ease;
}
.nav__dd:hover .nav__dd-trigger::after,
.nav__dd:focus-within .nav__dd-trigger::after { transform: rotate(180deg); opacity: 0.9; }
.nav__dd-menu {
  position: absolute; top: 100%; right: 0; transform: translateY(8px);
  min-width: 232px; padding: 8px; margin: 0;
  background: var(--nfx-paper); border: 1px solid var(--nfx-rule);
  border-radius: 14px; box-shadow: var(--nfx-shadow);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index: 120;
}
/* Transparent bridge so the hover does not drop when crossing the gap. */
.nav__dd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.nav__dd:hover .nav__dd-menu,
.nav__dd:focus-within .nav__dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(3px); transition-delay: 0s;
}
.nav__dd-menu a {
  display: block; padding: 9px 14px; border-radius: 9px;
  font-size: 14.5px; line-height: 1.3; font-weight: 500;
  white-space: nowrap; color: var(--nfx-teal) !important; opacity: 1 !important;
  transition: background .14s ease, color .14s ease;
}
.nav__dd-menu a:hover, .nav__dd-menu a:focus-visible {
  background: var(--nfx-sky-wash); color: var(--nfx-teal-deep) !important; outline: none;
}
/* Hairline rule above the "All ADHD guides" summary link. */
.nav__dd-menu a.nav__dd-all { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--nfx-rule); border-radius: 0 0 9px 9px; }

/* "on LinkedIn" button: a reliable first-party link, used instead of the official LinkedIn badge
   widget, which Chrome's Opaque Response Blocking and ad-blockers routinely stop from rendering.
   LinkedIn brand blue. The sameAs LinkedIn URL still lives in each page's Person JSON-LD for SEO. */
.li-connect { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: #0A66C2; color: #fff; font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.li-connect:hover, .li-connect:focus-visible { background: #0a58ab; color: #fff; transform: translateY(-1px); }
.li-connect svg { width: 17px; height: 17px; flex: 0 0 auto; }