/* ============================================================
   BRAND SYSTEM — Dalton First United Methodist Church

   Everything reads from these tokens; no component hardcodes a colour.

   Where the palette comes from: this is the church's existing Canva brand
   kit, not a new one. The teal and the deep navy already carry every hero
   graphic, sermon title card and the logo lockup, so the site inherits an
   identity the congregation already recognises instead of arguing for a
   new one.

   Two colours moved, and only for legibility:
     - Brand yellow #FFDE5A scores 1.26:1 as label text on paper — far under
       WCAG AA. It survives here as --sun, for graphic fills and dark-section
       accents where it is never body text; --clay is its darkened twin,
       holding the same hue, for anywhere the colour has to be readable.
     - --ink-muted darkened a hair to clear 4.5:1 on cream.
   Verified with scripts/contrast_audit.py — all 14 pairs pass AA.

   The diagonal: the current site's signature is an angled edge between
   sections. It is the most identity-carrying element the church owns after
   the logo, so it is a system here (.slant-*), not a one-off.
   ============================================================ */

:root {
  /* --- core: brand navy --- */
  --ink:        #060644;   /* brand kit navy — headings, dark sections */
  --ink-2:      #1C2450;   /* body text on light */
  --ink-3:      #3A4470;
  --ink-muted:  #616B8F;

  /* --- core: brand teal, the signature colour --- */
  --teal:       #1695A0;   /* brand kit teal — buttons, rules, the angle */
  --teal-deep:  #0E6D75;   /* text and links on light, for AA */
  --teal-light: #5AC8D1;   /* on dark */
  --teal-wash:  #E4F4F5;

  /* --- neutrals, biased cool toward the teal --- */
  --paper:      #F7FAFA;
  --cream:      #E7F1F2;
  --white:      #FFFFFF;
  --line:       #CFE1E3;

  /* --- ministry accents, all drawn from the brand kit --- */
  --clay:       #8B6F00;   /* kids — brand yellow, darkened to be readable */
  --sun:        #FFDE5A;   /* brand yellow as-is: fills and dark sections only */
  --sage:       #BC1823;   /* missions & serve — brand red */
  --sky:        #2A3A8C;   /* students — brand navy, lifted to read as blue */

  /* --- type --- */
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui:      'Montserrat', system-ui, -apple-system, sans-serif;
  --serif:   'Bodoni Moda', 'Bodoni FLF', Didot, Georgia, 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: 900; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--teal-deep); text-underline-offset: 3px; }

/* visible focus everywhere — accessibility is not optional on a church site */
:focus-visible { outline: 3px solid var(--teal); 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(--teal-deep);
  display: block; margin-bottom: var(--sp-3);
}
:is(.bg-ink, .on-dark) .eyebrow { color: var(--teal-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 */
/* Pills, not rectangles. Dalton First's own site already sets every button as a
   full pill — Service Times, New Here?, Learn More, Download the App — so the
   starter's 4px radius was quietly off-brand. Wide horizontal padding and
   uppercase weight 700 to match. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--ui); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .06em; line-height: 1; text-transform: uppercase;
  padding: 1.15em 2.6em; border-radius: 999px;
  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); }

/* teal-deep, not teal: white on #1695A0 is only 3.60:1 and fails AA. This still
   reads as the brand accent and clears 6.06:1, brightening to full teal on hover. */
.btn-primary { background: var(--teal-deep); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal); 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-0); padding: 1.2em 3em; }

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