/* =============================================================================
   Sections — the page skeleton: the dark-section tone switch, section headers,
   the page header, and the background / text utilities.
   Sources: docs/components/sections.md, docs/design-system/page-guidelines.md,
   docs/design-system/colors.md, typography.md, spacing-and-layout.md.
   `.container`, `.section` and `.section--lg` live in css/globals.css — not here.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   TONE SWITCH — contracts.md §3.
   A section declares its ground once; every descendant reads the result and
   never needs to know where it sits:

     --section-fg        headings and primary copy
     --section-fg-muted  supporting / secondary copy
     --section-kicker    the kicker above the H2
     --focus-ring        the :focus-visible outline colour (CR-006)

   Light is the default. It is declared on :root so components rendered outside
   any section still resolve, and repeated on the light background classes so a
   light block nested inside a dark one resets cleanly.
   --------------------------------------------------------------------------- */
:root,
[data-tone='light'],
.bg-white,
.bg-light,
.bg-primary,
.bg-secondary {
  --section-fg: var(--color-primary);
  --section-fg-muted: var(--color-text-gray);
  --section-kicker: var(--color-primary-darkest);
  /* --color-accent-cyan is 1.98:1 on white and 1.80:1 on near-white, under the
     3:1 WCAG 1.4.11 asks of a focus indicator. --color-primary is 12.50:1. */
  --focus-ring: var(--color-primary);
}

/* Dark grounds. `.bg-dark` sets the tone itself so the page keeps working
   until W4 adds `data-tone="dark"` to the markup. */
[data-tone='dark'],
.bg-dark {
  --section-fg: var(--color-white);
  --section-fg-muted: var(--color-primary-light);
  --section-kicker: var(--color-accent);
  /* 6.32:1 on --color-primary — the one ground where the cyan ring passes. */
  --focus-ring: var(--color-accent-cyan);
  color: var(--section-fg);
}

/* Un-classed base elements inside a dark section. globals.css colours h1–h6 and
   p, so these need one class worth of specificity to win — but no more than
   that, or they would beat the `:where([data-tone='dark']) .component` rules the
   other W3 packages write. `:is()` contributes its highest argument (0,1,0),
   `:where()` contributes nothing, so each rule below is exactly 0,1,0 and loses
   to any later component rule of equal weight. */
:is([data-tone='dark'], .bg-dark) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--section-fg);
}

:is([data-tone='dark'], .bg-dark) :where(p) {
  color: var(--section-fg-muted);
}

/* ---------------------------------------------------------------------------
   SECTION HEADERS — sections.md § Heading group / Centered heading.
   Kicker -> 16px -> H2 -> --gap-title-description -> intro, the whole group
   separated from the content below by --gap-section-lg.
   --------------------------------------------------------------------------- */
.section-header {
  max-width: 920px; /* centred-heading cap, Figma note in docs/redesign/contracts.md */
  margin-bottom: var(--gap-section-lg);
}

.section-header--center {
  text-align: center;
  margin-inline: auto;
}

/* typographyKicker. The markup carries `.section-header__label`, not `.kicker`,
   so the scale is restated here; see the report — W4 could add `.kicker` to the
   element and this block would shrink to the colour alone. */
.section-header__label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--section-kicker);
  margin-bottom: var(--space-4);
}

/* typographyH2 comes from the <h2> element itself (globals.css). */
.section-header__title {
  color: var(--section-fg);
  margin-bottom: var(--gap-title-description);
}

/* sections.md § Services: a 120 x 2px rule under the intro, in the division
   colour at 60%. Only rendered when the heading carries an intro paragraph. */
.section-header__rule {
  width: 120px;
  height: 2px;
  margin: var(--gap-section-sm) auto 0;
  border: 0;
  background-color: var(--color-division-brand);
  opacity: 0.6;
}

/* typographyBodyLarge */
.section-header__text {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 160%;
  color: var(--section-fg-muted);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   INTRO — a subpage's title + description under the compact hero (hero.md §
   Compact carries no tagline or intro copy). Left-aligned with the hero title;
   the title is optional, so the header may hold the description alone. When it
   is the only content of its section it takes no bottom gap.
   --------------------------------------------------------------------------- */
.section-header--intro:last-child {
  margin-bottom: 0;
}

/* A <strong> lead sentence in the description reads in the heading colour,
   as the InsurTech About intro does. */
.section-header__text strong {
  font-weight: 700;
  color: var(--section-fg);
}

/* Wide intro — Figma Multi elements `824:5336`: the title runs the full
   content width, the description is capped at 920px, and the title is set in
   primary-darkest rather than the section's primary. The plain centred intro
   (920px cap for the whole header, title in primary) is the InsurTech About
   intro. */
.section-header--wide {
  max-width: none;
}

.section-header--wide .section-header__title {
  color: var(--color-primary-darkest);
}

.section-header--wide .section-header__text {
  max-width: 920px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   BACKGROUNDS — page-guidelines.md § Section Backgrounds.
   Light palette: white, near-white, primary-light, division card background.
   Dark is for hero, CTA and highlight blocks only, never ordinary content.
   Sections stack with no outer margin; none of these add one.
   --------------------------------------------------------------------------- */
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-near-white); }
.bg-primary { background-color: var(--color-primary-light); }
.bg-secondary { background-color: var(--color-division-card-bg); }
.bg-dark { background-color: var(--color-primary-darkest); }

/* ---------------------------------------------------------------------------
   Breakpoints — desktop-first. The spacing tokens above are already redefined
   per breakpoint in variables.css, so only the type scale needs overrides.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .section-header__label { font-size: 0.8125rem; }
  .section-header__text { font-size: 1rem; }
}

@media (max-width: 600px) {
  .section-header__text { font-size: 0.9375rem; }
}