/* ==========================================================================
   Devgun Family Law -- Foundation: Base
   Font-family application, type-scale headings, body/intro/link styles,
   focus-visible standard, skip-link, reduced-motion, and the section
   background utility classes (SHARED CONTRACT - see header comment below).

   Depends on: foundation/tokens.css (custom properties), foundation/fonts.css
   (@font-face). Load order: fonts.css -> tokens.css -> base.css.

   Source: docs/design/frontend-build-spec.md Sections 1.4, 2, 7.1.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * Base font application
 * ------------------------------------------------------------------ */

html {
  font-family: var(--font-family-base);
  color: var(--color-text-default);
  background-color: var(--color-bg-page);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body1);
  line-height: var(--lh-body1);
  color: var(--color-text-default);
  background-color: var(--color-bg-page);
}

/* ------------------------------------------------------------------ *
 * Headings h1-h5, mapped to the type-scale tokens.
 * Per build spec 7.1: a block never emits <h1>; blocks start at <h2>.
 * That page-structure rule is enforced in templates, not here -- this
 * file only supplies the visual styling per heading LEVEL.
 * ------------------------------------------------------------------ */

h1, .h1 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
  overflow-wrap: break-word;
}

h2, .h2 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
  overflow-wrap: break-word;
}

h3, .h3 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
  overflow-wrap: break-word;
}

h4, .h4 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
  overflow-wrap: break-word;
}

h5, .h5 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
  overflow-wrap: break-word;
}

/* h6 has no Figma token (the design's scale stops at Heading-5); give it
   a sensible bottom step (body-size, semibold) so CMS content that uses
   Heading 6 doesn't fall back to browser defaults. Mirrored in editor.css. */
h6, .h6 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body1);
  line-height: var(--lh-h5);
  letter-spacing: 0;
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ *
 * Intro / body / links
 * ------------------------------------------------------------------ */

.intro {
  font-weight: var(--fw-regular);
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  letter-spacing: 0;
}

p, .body1 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-body1);
  line-height: var(--lh-body1);
  letter-spacing: var(--ls-body1);
  margin: 0 0 var(--space-gap);
}

.body2 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: var(--ls-body2);
}

a {
  color: var(--color-link);
  font-weight: var(--fw-bold);
  font-size: var(--fs-links);
  line-height: var(--lh-links);
  letter-spacing: var(--ls-links);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* Links on dark surfaces (see section background utilities below) */
[class*='section-bg--dark-blue'] a,
[class*='section-bg--forest-green'] a,
[class*='section-bg--dark-green'] a,
[class*='section-bg--rich-black'] a {
  color: var(--color-link-on-dark);
}

/* ------------------------------------------------------------------ *
 * Focus-visible standard
 * Every interactive element shows a visible focus indicator. Never
 * outline:none without a replacement. Dark-surface override below
 * switches the ring to white so it stays perceivable (build spec 7.1).
 * ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-input);
}

[class*='section-bg--dark-blue'] :focus-visible,
[class*='section-bg--forest-green'] :focus-visible,
[class*='section-bg--dark-green'] :focus-visible,
[class*='section-bg--rich-black'] :focus-visible {
  box-shadow: 0 0 0 3px var(--color-white);
}

/* Hero (chrome/hero.css): full-bleed and contained variants sit on a
   photo + fixed dark scrim, never a section-bg--* token class, so the
   rule above never reaches hero CTAs/links. The scrim is a REQUIRED
   a11y guarantee that white text always reads regardless of the
   uploaded photo (hero.css build-spec 7.2) -- the focus ring needs the
   same guarantee, so it gets the identical white ring rather than the
   default Canopy Blue ring (which is unverifiable against an arbitrary
   photo and measures under 2:1 against the hero CTA's own focused
   Slate fill). */
.hero--full :focus-visible,
.hero--contained :focus-visible {
  box-shadow: 0 0 0 3px var(--color-white);
}

/* Callout band (chrome/callout.css) is Light Green (section-bg--light-
   green), not dark -- flagged here because the default Canopy Blue
   ring measures ~2.2:1 against it (fails the 3:1 non-text-contrast
   minimum); a white ring would be worse still (~1.5:1). Dark Blue
   matches --color-action (the band's own button fill) and clears
   6.3:1. Scoped to the class, so it also covers any other block an
   editor sets to the Light Green background, not just the callout. */
.section-bg--light-green :focus-visible {
  box-shadow: 0 0 0 3px var(--color-blue-dark);
}

/* ------------------------------------------------------------------ *
 * Skip link
 * First focusable element in Page.ss; visually hidden until focused;
 * jumps to #main on the $Layout wrapper.
 * ------------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-bg-header);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body2);
  text-decoration: none;
  border-radius: 0 0 var(--radius-input) 0;
}

.skip-link:focus {
  top: 0;
  outline: none;
  box-shadow: 0 0 0 3px var(--color-white);
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * Non-essential transitions/animations (accordion chevron rotate, hover
 * lifts, mobile-panel slide) only run when the user has not requested
 * reduced motion. Bootstrap's own reduced-motion guard stays separate;
 * this covers foundation-level and custom component animation.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Section background utility classes -- SHARED CONTRACT

   Single source of truth for these class names; do not deviate. Pattern:
   "section-bg--<name>". The enum lives on MyBaseElementExtension (backend
   agent) and values map 1:1 to these class names. Consumers (chrome/block
   agents) apply exactly one of these classes to a section wrapper.

   Names: white, cream, light-green, lighter-green-2, light-blue,
   lighter-blue, lighter-blue-2, dark-blue, forest-green, dark-green,
   rich-black, canopy-blue.

   Dark backgrounds (dark-blue, forest-green, dark-green, rich-black) also
   invert text to white via the same class, and adjust link color per the
   contrast table in frontend-build-spec.md Section 2 (pairings #1-5, #16,
   #19). Canopy Blue icons/accents on the dark-blue band specifically must
   use Light Blue instead (#ADCBD1) per the REQUIRED fix F3 -- Canopy on
   Dark Blue fails the 3.0 UI-graphics threshold (2.85:1). The
   --icon-accent-color custom property below carries that override; icon
   components consume it rather than hardcoding Canopy or Light Blue.
   ========================================================================== */

.section-bg--white {
  background-color: var(--color-white);
  color: var(--color-text-default);
}

.section-bg--cream {
  background-color: var(--color-cream);
  color: var(--color-text-default);
}

.section-bg--light-green {
  background-color: var(--color-green-light);
  color: var(--color-text-default);
}

.section-bg--lighter-green-2 {
  background-color: var(--color-green-lighter);
  color: var(--color-text-default);
}

.section-bg--light-blue {
  background-color: var(--color-blue-light);
  color: var(--color-text-default);
}

.section-bg--lighter-blue {
  background-color: var(--color-blue-lighter);
  color: var(--color-text-default);
}

.section-bg--lighter-blue-2 {
  background-color: var(--color-blue-lightest);
  color: var(--color-text-default);
}

.section-bg--canopy-blue {
  background-color: var(--color-blue-canopy);
  color: var(--color-text-default);
}

/* Dark backgrounds: invert text to white, adjust link/icon-accent color. */

.section-bg--dark-blue {
  background-color: var(--color-blue-dark);
  color: var(--color-text-on-dark);
  /* F3 (REQUIRED): icons/accents on Dark Blue must use Light Blue, not
     Canopy -- Canopy-on-Dark-Blue is 2.85:1 (fails 3.0 UI-graphics AA);
     Light Blue-on-Dark-Blue is 5.39:1 (comfortable pass). */
  --icon-accent-color: var(--color-blue-light);
}

.section-bg--forest-green {
  background-color: var(--color-green-forest);
  color: var(--color-text-on-dark);
  --icon-accent-color: var(--color-blue-canopy);
}

/* Section lead: the promoted first sentence of an intro band (design
   7115:313 -- Heading-5, SemiBold, Light Green over the forest-green
   band). Specificity beats `.typography p`; the Light-Green color is
   scoped to the dark band so the class is safe on any surface. */
.typography .section-lead {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  margin-bottom: var(--space-gap);
}

.section-bg--forest-green .section-lead {
  color: var(--color-green-light);
}

/* Homepage: the FAQ (cream) is the last band and the Callout (green)
   follows immediately, so the legacy #main bottom padding (site.css, 6rem)
   left a white sliver between the two full-width bands (Dave 2026-07-04,
   "remove gap"). Zero it -- the FAQ's own bottom padding + the callout's
   top padding carry the spacing. Scoped to HomePage; detail pages keep
   their .detail-main padding. */
body.HomePage #main {
  padding-bottom: 0;
}

.section-bg--dark-green {
  background-color: var(--color-green-dark);
  color: var(--color-text-on-dark);
  --icon-accent-color: var(--color-blue-canopy);
}

.section-bg--rich-black {
  background-color: var(--color-blue-rich-black);
  color: var(--color-text-on-dark);
  --icon-accent-color: var(--color-blue-canopy);
}