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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 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;
}

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. */
.fl-page-content {
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   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 {
  background: var(--cs-blue);
  color: var(--cs-white);
}