/* ============================================================
   Christian Science Society of Kampala — design tokens
   Palette:
     --ink       #1B2A4A  deep indigo (dusk sky over Kampala)
     --teal      #2E6E68  healing / calm accent
     --gold      #C6952B  sunrise gold accent
     --wine      #6E2140  secondary accent (used sparingly)
     --paper     #F7F5EF  warm ivory background
     --paper-2   #FFFFFF  card background
   Type:
     Display: 'Fraunces' (serif, warm, has personality without being cliché)
     Body:    'Work Sans'
     Utility: 'IBM Plex Mono' (labels, eyebrows, data)
   Signature motif: a thin dawn "arc" — a horizon line with a rising sun path,
   used in the hero and as a recurring section divider. It reads as sunrise
   over the hills of Kampala and, doctrinally, as the daily "dawn" of spiritual
   understanding central to Christian Science.
   ============================================================ */

:root {
  --ink: #1b2a4a;
  --teal: #2e6e68;
  --gold: #c6952b;
  --wine: #6e2140;
  --paper: #f7f5ef;
  --paper-2: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
}

.font-display {
  font-family: 'Fraunces', serif;
}

.font-mono {
  font-family: 'IBM Plex Mono', monospace;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--teal);
}

/* Dawn arc — signature SVG divider / hero backdrop */
.dawn-arc {
  width: 100%;
  height: auto;
  display: block;
}

.card {
  background: var(--paper-2);
  border: 1px solid rgba(27, 42, 74, 0.08);
}

.btn-primary {
  background: var(--teal);
  color: #fff;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover {
  background: #24564f;
  transform: translateY(-1px);
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover {
  background: #b3841f;
}

.link-underline {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.25s ease;
}
.link-underline:hover {
  background-size: 100% 2px;
}

details > summary {
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] .chev {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile nav */
#mobileMenu {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}
#mobileMenu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}