/* ==========================================================================
   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;
  hyphens: auto;
}

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;
  hyphens: auto;
}

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;
  hyphens: auto;
}

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;
  hyphens: auto;
}

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;
  hyphens: auto;
}

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

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