/* ============================================================
   BRAND SYSTEM

   Replace the six core colours and the two typefaces per church, and the
   whole site re-skins. Everything below reads from these tokens — no
   component hardcodes a colour.

   Choosing the palette:
   - Pull the primary from something the church already owns: their logo,
     their building, their windows. A colour with a reason behind it beats
     one picked from a swatch, and it survives the "why that blue?" question
     at a committee meeting.
   - The accent is where the warmth comes from. Church sites fail cold far
     more often than they fail gaudy.
   - Neutrals should carry a slight hue bias toward the accent. A pure grey
     reads as unconsidered.
   - Ministry accents (clay / sage / sky) let Kids, Youth and Recovery feel
     distinct without anyone inventing a sub-brand.

   Then run scripts/contrast_audit.py — several of these pairs land just
   under WCAG AA if chosen by eye, and the script will darken them for you.

   GRACE UMC PRATTVILLE
   Palette derived from the church's own cross-and-flame logo: a black cross,
   a red flame, script wordmark. The accent slots below (--gold*) therefore
   hold the FLAME RED, not gold. The token names are kept because site.css
   references them everywhere and renaming buys nothing; read --gold as
   "the church's accent colour".
     ink   <- the logo's cross, warmed toward navy so it doesn't read as pure black
     gold  <- the logo's flame, darkened to hold WCAG AA on paper
     paper <- warm off-white, matching the cream in their photography
   ============================================================ */

:root {
  /* --- core --- */
  --ink:        #151E2B;
  --ink-2:      #243348;
  --ink-3:      #3C4E67;
  --ink-muted:  #5C6A7C;

  --gold:       #B21F26;
  --gold-deep:  #8A161C;
  --gold-light: #E0555C;
  --gold-wash:  #FBF0EF;

  --paper:      #FAF8F5;
  --cream:      #F1E9E2;
  --white:      #FFFFFF;
  --line:       #E4D9D2;

  /* --- ministry accents --- */
  --clay:       #B4553F;   /* kids */
  --sage:       #4F6B58;   /* recovery / missions */
  --sky:        #3A6B8A;   /* youth */

  /* --- type --- */
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ui:      'Montserrat', system-ui, -apple-system, sans-serif;

  /* --- scale (fluid) --- */
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.44vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.74vw, 1.84rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.18vw, 2.36rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.81vw, 3.01rem);
  --step-5:  clamp(2.49rem, 1.94rem + 2.72vw, 3.85rem);
  --step-6:  clamp(2.99rem, 2.18rem + 4.02vw, 4.92rem);

  /* --- space --- */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;    --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4rem;    --sp-8: 6rem;
  --sp-9: 8rem;

  --wrap: 1180px;
  --wrap-narrow: 720px;

  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(22,32,46,.06), 0 2px 8px rgba(22,32,46,.05);
  --shadow-md: 0 4px 12px rgba(22,32,46,.08), 0 12px 32px rgba(22,32,46,.07);
  --shadow-lg: 0 8px 24px rgba(22,32,46,.10), 0 24px 64px rgba(22,32,46,.10);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5 { font-family: var(--display); color: var(--ink); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--gold-deep); text-underline-offset: 3px; }

/* visible focus everywhere — accessibility is not optional on a church site */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--white); padding: var(--sp-3) var(--sp-4);
  font-family: var(--ui); font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

/* ============================================================ LAYOUT */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.bg-paper { background: var(--paper); }
.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }
.bg-ink   { background: var(--ink); }
:is(.bg-ink, .on-dark) { color: #C9D2DE; }   /* .on-dark = context only, paints no background */
:is(.bg-ink, .on-dark) h1, :is(.bg-ink, .on-dark) h2, :is(.bg-ink, .on-dark) h3, :is(.bg-ink, .on-dark) h4 { color: var(--white); }

/* ============================================================ TYPE HELPERS */
.eyebrow {
  font-family: var(--ui); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  display: block; margin-bottom: var(--sp-3);
}
:is(.bg-ink, .on-dark) .eyebrow { color: var(--gold-light); }
.lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink-3); }
:is(.bg-ink, .on-dark) .lede { color: #B7C2D2; }
.measure { max-width: 62ch; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--ui); font-weight: 700; font-size: var(--step-0);
  letter-spacing: .01em; line-height: 1;
  padding: 1.05em 1.9em; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--gold); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-deep); box-shadow: var(--shadow-md); }

.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--ink-2); }

.btn-outline { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

:is(.bg-ink, .on-dark) .btn-outline { color: var(--white); }
:is(.bg-ink, .on-dark) .btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn-lg { font-size: var(--step-1); padding: 1.1em 2.2em; }

/* ============================================================ UTIL */
.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.center { text-align: center; }
.center .measure, .center.measure { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}