/* Loaded after tokens.css. Applies the new design system to the whole site. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* In-page anchor links glide instead of jumping (first use: the EFT
     Supervision hero's "Explore Supervision Approach" ghost CTA). */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Anchored rows land below the sticky header instead of underneath it
   (#supervision-approach, #crisis-support). */
.fl-row[id] {
  scroll-margin-top: 10rem;
}

/* In-content crisis link (Contact page hero, change request 2026-09-13
   T8.1) — must unmistakably read as a link: heavy weight, permanent
   underline, deep blue (7.99:1 on the off-white hero). */
/* Class tripled: module body-link rules (e.g. therapist-intro's, 0,2,1+)
   would otherwise repaint it a mid blue that only reaches 3.6:1. */
a.cs-crisis-link.cs-crisis-link.cs-crisis-link,
a.cs-crisis-link.cs-crisis-link.cs-crisis-link:link,
a.cs-crisis-link.cs-crisis-link.cs-crisis-link:visited {
  font-weight: 700;
  color: var(--cs-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.cs-crisis-link.cs-crisis-link.cs-crisis-link:hover,
a.cs-crisis-link.cs-crisis-link.cs-crisis-link:focus-visible {
  color: var(--cs-orange);
  text-decoration: underline;
}

/* Decoration glow layers (inset: -32rem) extend past the viewport edge;
   `clip` removes the resulting trackpad horizontal scroll without creating
   a scroll container (so position: sticky keeps working). */
html {
  overflow-x: clip;
}

/* `html body` (not bare `body`): on live, WP-Optimize minify inlines this
   sheet BEFORE the merged BB skin bundle, so BB's `body{background:#fff}`
   would win on source order. Higher specificity keeps these rules winning
   regardless of how optimizers reorder the stylesheets. */
html body {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-body);
  line-height: var(--cs-line-base);
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-ink);
  background: var(--cs-off-white);
  /* Full-bleed breakouts (100vw + negative margins) include the scrollbar
     width, which creates a phantom horizontal scroll — clip it. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* BB Theme's Customizer skin paints this wrapper white, hiding the body
   background — make it transparent so `body` stays the single source of truth.
   Doubled class outranks the skin's `.fl-page-content` whatever the order. */
.fl-page-content.fl-page-content {
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Section rhythm — spacing belongs to the modules, not to BB's row chrome.

   Rows were authored in the builder with ad-hoc padding and module margins:
   measured across the homepage they varied 0, 20, 40, 60 and 80px from one row
   to the next, on top of each module's own padding. The result was that two
   otherwise identical sections could sit anywhere from 80px to 236px apart.

   Zeroing the chrome here makes the gap between any two sections exactly the
   sum of their own padding-block — predictable, and tunable from the module
   rather than by editing every row by hand. Individual modules that need to
   hug their neighbour still override with their own `:has()` rules.

   Only rows containing a cs-* section are touched, so legacy rows (html and
   rich-text modules on the older pages) keep BB's default spacing.
   --------------------------------------------------------------------------- */
.fl-builder-content-primary > .fl-row:has([class^="cs-"]) > .fl-row-content-wrap {
  padding-block: 0;
}

.fl-builder-content-primary > .fl-row:has([class^="cs-"]) .fl-module-content:has(> [class^="cs-"]) {
  margin-block: 0;
}

/* ---------------------------------------------------------------------------
   Hero alignment — every page opens at the same y.

   Per Figma the hero starts where the navbar ends, so the lead row carries no
   BB row padding, no module margin, and (for heroes that pad themselves for
   mid-page use) no top padding. Offset is tokenised for one-line tuning.

   "Lead row" is the page's first content row, or the row right after a
   zero-height cs-page-backdrop row — meet-the-team paints its backdrop art
   from row 1, so its hero is row 2.

   Scoped to .fl-builder-content-primary so Themer header/footer layouts,
   which are separate .fl-builder-content wrappers, are untouched.
   --------------------------------------------------------------------------- */
/* Standard case: the page's first row carries the offset. */
.fl-builder-content-primary > .fl-row:first-child:not(:has(.cs-page-backdrop)) > .fl-row-content-wrap {
  padding-top: var(--cs-hero-offset);
}

/* Backdrop case (meet-the-team): row 1 is a zero-height artwork layer and row 2
   is the hero. The artwork is absolutely positioned from its row's top edge, so
   padding on that row would not move it — offset the row itself, which carries
   artwork and hero down together and keeps them aligned. The hero row then
   takes no offset of its own, or the two would stack. */
.fl-builder-content-primary > .fl-row:first-child:has(.cs-page-backdrop) {
  margin-top: var(--cs-hero-offset);
}
.fl-builder-content-primary > .fl-row:first-child:has(.cs-page-backdrop) + .fl-row > .fl-row-content-wrap {
  padding-top: 0;
}

/* Only the top-most module loses its margin — a lead row that stacks modules
   still gets normal spacing between them. */
.fl-builder-content-primary > .fl-row:first-child .fl-module:first-child > .fl-module-content,
.fl-builder-content-primary > .fl-row:first-child:has(.cs-page-backdrop) + .fl-row .fl-module:first-child > .fl-module-content {
  margin-top: 0;
}

/* Image-led heroes pad themselves generously so they can also sit mid-page; at
   the top of a page that padding just re-opens the gap. Zero — not the offset —
   so the gap is only ever counted once, on the row above. Colour-band heroes
   (.cs-hero-feature) are excluded — their headline needs the inset. */
.fl-builder-content-primary > .fl-row:first-child :is(.cs-hero-split, .cs-therapist-intro),
.fl-builder-content-primary > .fl-row:first-child:has(.cs-page-backdrop) + .fl-row :is(.cs-hero-split, .cs-therapist-intro) {
  padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cs-font-display);
  font-weight: 700;
  line-height: var(--cs-line-tight);
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-ink);
  margin: 0 0 var(--cs-space-md);
}

h1 { font-size: var(--cs-text-display); font-weight: 800; }
h2 { font-size: var(--cs-text-display); font-weight: 700; }
h3 { font-size: var(--cs-text-h2); font-weight: 800; }
h4 { font-size: var(--cs-text-h3); font-weight: 800; }
h5 { font-size: var(--cs-text-eyebrow); font-weight: 700; }
h6 { font-size: var(--cs-text-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 768px) {
  h1, h2 { font-size: clamp(3.2rem, 7vw, 4.8rem); }
  h3 { font-size: 2.4rem; }
}

a {
  color: var(--cs-blue);
  text-decoration: none;
  transition: color 200ms ease;
}

a:hover,
a:focus {
  color: var(--cs-blue-dark);
  text-decoration: underline;
}

p {
  margin: 0 0 var(--cs-space-md);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  /* --cs-blue-card, not --cs-blue: selected text is white on this fill, and
     3.90:1 made highlighted text harder to read than unhighlighted. */
  background: var(--cs-blue-card);
  color: var(--cs-white);
}

/* Auto-linked phone numbers (cs-tel-links.php). They appear in every color
   context — white promo-cta captions, dark crisis lists, classic post copy —
   so inherit the surrounding text color and mark tappability with the
   underline alone. */
a.cs-tel-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* Insights & Videos (page 6270) — denser section rhythm. The page is a long
   stack of video bands; at the site-standard 96px module padding each gap
   runs ~192px and the next section never peeks into the viewport. Halving
   the padding here brings gaps to ~96px (still the --cs-space-2xl rhythm,
   just carried by one section instead of two). Page-scoped on purpose —
   every other page keeps the global standard. */
.page-id-6270 .cs-intro-band--spacing-md,
.page-id-6270 .cs-video-split,
.page-id-6270 .cs-video-gallery,
.page-id-6270 .cs-promo-cta {
  padding-block: var(--cs-space-section-sm);
}

/* Same page: align the hero to the shared side edge. cs-intro-band has no
   gutter of its own — it inherits BB's row padding + module margin, which
   land it at 100px desktop / 20px mobile while every other section on this
   page sits at 84/24. Strip the chrome and let the module carry the gutter,
   the same treatment the video modules apply globally. Page-scoped because
   intro-band instances elsewhere were authored against the BB chrome. */
.page-id-6270 .fl-row-content-wrap:has(.cs-intro-band) {
  padding-inline: 0;
}
.page-id-6270 .fl-module-content:has(> .cs-intro-band) {
  margin-inline: 0;
}
.page-id-6270 .cs-intro-band__inner {
  padding-inline: var(--cs-gutter);
}