/* css/typography.css
   ============================================================
   All typographic styles. Google Fonts loaded via page.html.twig.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  font-weight: 400;
}

h1 { font-size: var(--font-size-h1); margin-bottom: var(--space-md); }
h2 { font-size: var(--font-size-h2); margin-bottom: var(--space-sm); }
h3 { font-size: var(--font-size-h3); margin-bottom: var(--space-sm); }
h4 { font-size: 1.2rem; margin-bottom: var(--space-xs); }

p { margin-bottom: var(--space-sm); max-width: 72ch; }

/* On dark backgrounds headings go white */
.section--primary h1,
.section--primary h2,
.section--primary h3,
.site-hero h1,
.site-hero h2 {
  color: var(--color-white);
}

/* ── Section titles with accent underline ──────────────────── */
.section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-sm);
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* ── Lead paragraph ─────────────────────────────────────────── */
.text-lead {
  font-size: var(--font-size-lg);
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

/* ── Utility classes ────────────────────────────────────────── */
.text-accent  { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-muted); font-size: var(--font-size-sm); }
.text-white   { color: var(--color-white); }
.text-center  { text-align: center; }
.text-upper   { text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--font-size-sm); }

/* ── Drupal body text fields ────────────────────────────────── */
.field--type-text-long p,
.field--type-text-with-summary p {
  margin-bottom: var(--space-sm);
}
.field--type-text-long ul,
.field--type-text-long ol {
  margin: 0 0 var(--space-sm) var(--space-md);
}