/* =====================================================
   PastorSite — Church Template
   Warm & Welcoming | Lora + Nunito
   WranglR / PastorSite Church Website Generator
   BEM: .ch- prefix for all template components
   ===================================================== */

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--ch-font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
ul { list-style: none; }

/* ---- DESIGN TOKENS ---- */
:root {
  /* Brand colors — overridable by generator */
  --primary:        #6B2737;
  --primary-dark:   #4E1927;
  --primary-light:  #8B3547;
  --accent:         #C9882A;
  --accent-light:   #E8A84A;

  /* Neutral palette — derived from brand via color-mix for universal harmony.
     Base grays are true neutral so ANY brand color tints correctly. */
  --bg:             color-mix(in srgb, var(--primary) 3%, #F7F7F7);
  --bg-dark:        color-mix(in srgb, var(--primary) 12%, #141414);
  --bg-section:     color-mix(in srgb, var(--primary) 4%, #EFEFEF);
  --bg-dark-section:color-mix(in srgb, var(--primary) 8%, #1E1E1E);
  --surface:        color-mix(in srgb, var(--primary) 2%, #FFFFFF);
  --text:           color-mix(in srgb, var(--primary) 15%, #1A1A1A);
  --text-muted:     color-mix(in srgb, var(--primary) 10%, #6A6A6A);
  --text-on-dark:   color-mix(in srgb, var(--primary) 5%, #F0F0F0);
  --text-on-dark-muted: color-mix(in srgb, var(--primary) 8%, #A0A0A0);
  --border:         color-mix(in srgb, var(--primary) 6%, #E0E0E0);
  --border-dark:    color-mix(in srgb, var(--primary) 8%, #333333);

  /* Typography — overridable by generator */
  --ch-font-heading: 'Lora', Georgia, serif;
  --ch-font-body:    'Nunito', system-ui, sans-serif;

  /* Aliases (keep --font-heading and --font-body working in editor) */
  --font-heading: var(--ch-font-heading);
  --font-body:    var(--ch-font-body);

  /* Spacing */
  --section-gap:  7rem;
  --container:    1200px;

  /* Radii */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);

  /* Transitions */
  --transition: 0.22s ease;
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bg:             color-mix(in srgb, var(--primary) 4%, #0C0C0C);
  --bg-dark:        color-mix(in srgb, var(--primary) 6%, #070707);
  --bg-section:     color-mix(in srgb, var(--primary) 3%, #111111);
  --bg-dark-section:color-mix(in srgb, var(--primary) 5%, #0E0E0E);
  --surface:        color-mix(in srgb, var(--primary) 3%, #161616);
  --text:           color-mix(in srgb, var(--primary) 5%, #EEEEEE);
  --text-muted:     color-mix(in srgb, var(--primary) 8%, #999999);
  --text-on-dark:   color-mix(in srgb, var(--primary) 5%, #EEEEEE);
  --text-on-dark-muted: color-mix(in srgb, var(--primary) 8%, #888888);
  --border:         color-mix(in srgb, var(--primary) 8%, #2A2A2A);
  --border-dark:    color-mix(in srgb, var(--primary) 10%, #222222);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.25);
}

/* Dark theme: hero overlay lighter since bg is already dark */
[data-theme="dark"] .ch-hero__overlay {
  background: rgba(0, 0, 0, 0.35);
}

/* Dark theme: give section uses subtle gradient instead of bold primary */
[data-theme="dark"] .ch-give {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 25%, #111) 0%,
    color-mix(in srgb, var(--primary) 15%, #0A0A0A) 100%);
}

/* Dark theme: contact form matches dark surface */
[data-theme="dark"] .ch-visitor-form {
  background: var(--bg-dark-section);
  border-color: var(--border-dark);
}
[data-theme="dark"] .ch-form-row input,
[data-theme="dark"] .ch-form-row textarea {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  color: var(--text);
}
[data-theme="dark"] .ch-form-row input:focus,
[data-theme="dark"] .ch-form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Dark theme: social card images */
[data-theme="dark"] .ch-social-card__image {
  background: var(--bg-dark-section);
  border-bottom-color: var(--border-dark);
}
[data-theme="dark"] .ch-social-card {
  background: var(--bg-dark-section);
  border-color: var(--border-dark);
}

/* Dark theme: ministry & value cards */
[data-theme="dark"] .ch-ministry-card,
[data-theme="dark"] .ch-value-card {
  background: var(--bg-dark-section);
  border-color: var(--border-dark);
}

/* Dark theme: service items */
[data-theme="dark"] .ch-service-item {
  background: var(--bg-dark-section);
  border-color: var(--border-dark);
}

/* Dark theme: map placeholder */
[data-theme="dark"] .ch-map-placeholder {
  background: var(--bg-dark-section);
  border-color: var(--border-dark);
}

/* Dark theme: scrolled header uses dark blur */
[data-theme="dark"] .site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* Dark theme: nav links stay light (no dark-to-light transition needed) */
[data-theme="dark"] .site-header.scrolled .site-logo { color: var(--text-on-dark); }
[data-theme="dark"] .site-header.scrolled .site-nav a { color: var(--text-on-dark-muted); }
[data-theme="dark"] .site-nav a:hover,
[data-theme="dark"] .site-nav a:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Dark theme: mobile nav overlay */
[data-theme="dark"] body.nav-open .site-nav {
  background: var(--bg);
}

/* ---- GRAIN OVERLAY ---- */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Animation removed — at 0.028 opacity nobody notices the shift, but the
     200%-sized fixed-position element animating every 0.8s caused constant
     full-screen repaints on Safari/WebKit and mobile Chrome (limited GPU
     compositing). Static grain has zero perf cost. */
}
/* ---- LAYOUT ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 2rem;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3 { font-family: var(--ch-font-heading); line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 600; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
p { color: var(--text-muted); }

.section-label {
  display: inline-block;
  font-family: var(--ch-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.section-heading {
  color: var(--text);
  margin-bottom: 1.2rem;
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-family: var(--ch-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 35%, transparent);
}
/* Ghost variant for dark backgrounds (hero) */
.btn-hero-ghost {
  background: transparent;
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.4);
}
.btn-hero-ghost:hover, .btn-hero-ghost:focus-visible {
  border-color: rgba(255,255,255,0.85);
  color: #fff;
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.btn-full { width: 100%; justify-content: center; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---- SYNC BADGE (generic, not Instagram-specific) ---- */
.ch-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  white-space: nowrap;
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: 1rem;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.site-header.scrolled {
  /* Was: backdrop-filter: blur(12px) — caused major scroll jank on
     Safari/WebKit and mobile Chrome (compositor recomputes blur every
     frame). Replaced with a solid 99% background that approximates the
     frosted look without the per-frame GPU cost. */
  background: color-mix(in srgb, var(--bg) 99%, transparent);
  box-shadow: var(--shadow-sm);
  padding-block: 0.65rem;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 2rem;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--ch-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-on-dark);
  z-index: 102;
  transition: color var(--transition);
}
.site-header.scrolled .site-logo {
  color: var(--text);
}
.logo-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-mark-sm {
  width: 30px;
  height: 30px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.site-nav a {
  padding: 0.45rem 0.85rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-on-dark-muted);
  transition: all var(--transition);
}
.site-header.scrolled .site-nav a {
  color: var(--text-muted);
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.site-nav .nav-cta {
  background: var(--primary);
  color: #fff;
  padding: 0.45rem 1.1rem;
}
.site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible {
  background: var(--primary-dark);
  color: #fff;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 102;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--transition);
}

/* =====================================================
   HERO — FULL-WIDTH CINEMATIC (LOCKED)
   ===================================================== */
.ch-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background gradient — blends primary into dark neutrals */
.ch-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--bg-dark) 45%, var(--bg-dark) 100%);
  background-size: cover;
  background-position: center;
}

.ch-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 1;
}

.ch-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  padding: 9rem 2rem 6rem;
  margin-inline: auto;
}

.ch-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 1rem;
}

.ch-hero__heading {
  font-family: var(--ch-font-heading);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.ch-hero__tagline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.82);
  margin-bottom: 2rem;
  line-height: 1.65;
}

.ch-hero__service-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2.25rem;
}

.ch-hero__pill-icon {
  color: var(--accent-light);
  display: flex;
  align-items: center;
}

.ch-hero__actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

.ch-hero__scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  animation: scrollBounce 2.2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

/* =====================================================
   SERVICE TIMES + LOCATION
   ===================================================== */
.ch-services {
  padding-block: var(--section-gap);
  background: var(--bg-section);
}
.ch-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}
.ch-service-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.ch-service-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.ch-service-day {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  width: 70px;
  flex-shrink: 0;
}
.ch-service-detail { display: flex; flex-direction: column; gap: 0.1rem; }
.ch-service-time {
  font-family: var(--ch-font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.ch-service-name { font-size: 0.85rem; color: var(--text-muted); }

.ch-address {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--text-muted);
  margin-block: 1rem;
  line-height: 1.6;
}
.ch-address svg { color: var(--primary); margin-top: 3px; flex-shrink: 0; }
.ch-location-note { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.ch-map-placeholder {
  aspect-ratio: 16/9;
  background: var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  border: 2px dashed var(--border);
}

/* =====================================================
   WELCOME / PASTOR
   ===================================================== */
.ch-welcome {
  padding-block: var(--section-gap);
  background: var(--bg-dark);
}
.ch-welcome__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5rem;
  align-items: center;
}
.ch-welcome__photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.ch-pastor-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--bg-dark-section);
  border: 3px solid var(--border-dark);
  display: grid;
  place-items: center;
  color: var(--text-on-dark-muted);
  overflow: hidden;
}
.ch-pastor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ch-pastor-nameplate { text-align: center; }
.ch-pastor-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ch-pastor-name {
  font-family: var(--ch-font-heading);
  font-size: 1.05rem;
  color: var(--text-on-dark);
  font-weight: 600;
  margin-top: 0.25rem;
}
.ch-welcome__text .section-label { color: var(--accent); }
.ch-welcome__text .section-heading { color: var(--text-on-dark); }
.ch-welcome__message {
  color: var(--text-on-dark-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  font-style: italic;
}
.ch-welcome__text .btn-outline {
  color: var(--accent);
  border-color: var(--accent);
}
.ch-welcome__text .btn-outline:hover {
  background: var(--accent);
  color: var(--bg-dark);
}

/* =====================================================
   WHAT WE BELIEVE
   ===================================================== */
.ch-believe {
  padding-block: var(--section-gap);
  background: var(--bg);
}
.ch-believe__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.ch-believe__heading { margin-bottom: 1rem; }
.ch-believe__body {
  font-size: 1.1rem;
  line-height: 1.85;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}
.ch-believe__values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ch-value-card {
  padding: 2rem 1.5rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ch-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.ch-value-icon {
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  color: var(--primary);
}
.ch-value-card h3 {
  font-family: var(--ch-font-heading);
  color: var(--text);
  margin-bottom: 0.5rem;
}
.ch-value-card p { font-size: 0.92rem; }

/* =====================================================
   SOCIAL FEED
   ===================================================== */
.ch-social {
  padding-block: var(--section-gap);
  background: var(--bg-section);
}
.ch-social__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.ch-social__header-row .section-heading { margin-bottom: 0; }
.ch-social__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ch-social-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ch-social-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.ch-social-card__image {
  aspect-ratio: 4/3;
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.ch-social-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ch-social-card__body { padding: 1.25rem; }
.ch-social-card__text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.ch-social-card__date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* =====================================================
   EVENTS
   ===================================================== */
.ch-events {
  padding-block: var(--section-gap);
  background: var(--bg-dark);
}
.ch-events__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.ch-events .section-heading,
.ch-events__header-row .section-heading { color: var(--text-on-dark); margin-bottom: 0; }
.ch-events .section-label { color: var(--accent); }
.ch-events__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ch-event-card {
  background: var(--bg-dark-section);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  transition: transform var(--transition), border-color var(--transition);
}
.ch-event-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.ch-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 48px;
  padding-top: 2px;
}
.ch-event-month {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.ch-event-day {
  font-family: var(--ch-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1;
}
.ch-event-title {
  font-family: var(--ch-font-heading);
  color: var(--text-on-dark);
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.ch-event-meta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.ch-event-desc { font-size: 0.88rem; color: var(--text-on-dark-muted); line-height: 1.6; }

/* =====================================================
   MINISTRIES
   ===================================================== */
.ch-ministries {
  padding-block: var(--section-gap);
  background: var(--bg);
}
.ch-ministries__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3.5rem;
}
.ch-ministries__sub {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 0.5rem;
}
.ch-ministries__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.ch-ministries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ch-ministry-card {
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ch-ministry-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}
.ch-ministry-icon {
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1.25rem;
  color: var(--primary);
}
.ch-ministry-name {
  font-family: var(--ch-font-heading);
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.65rem;
}
.ch-ministry-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.ch-ministry-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  transition: color var(--transition);
}
.ch-ministry-link:hover { color: var(--primary-dark); }

/* =====================================================
   GIVE
   ===================================================== */
.ch-give {
  padding-block: 5rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.ch-give__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.ch-give__icon {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
}
.ch-give__text { flex: 1; min-width: 240px; }
.ch-give__text .section-label { color: rgba(255,255,255,0.65); }
.ch-give__heading { color: #fff; margin-bottom: 0.5rem; }
.ch-give__text p { color: rgba(255,255,255,0.75); }
.ch-give__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; flex-shrink: 0; }
.btn-give {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-dark);
  font-size: 1rem;
  padding: 0.9rem 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 50px;
  font-family: var(--ch-font-body);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid var(--accent);
  line-height: 1;
  text-decoration: none;
}
.btn-give:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.ch-give__note { font-size: 0.75rem; color: rgba(255,255,255,0.55); }

/* ---- Zelle giving variant ---- */
.ch-give--zelle { flex-direction: column; align-items: stretch; gap: 2rem; }
.ch-give__zelle-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 2.5rem;
  align-items: center;
  width: 100%;
}
.ch-give__qr {
  width: 100%;
  max-width: 320px;
  height: auto;
  background: #fff;
  border-radius: 18px;
  padding: 0.75rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  display: block;
}
.ch-give__steps {
  color: rgba(255,255,255,0.85);
  margin: 0 0 1rem 1.1rem;
  padding: 0;
  line-height: 1.7;
}
.ch-give__steps li { margin-bottom: 0.35rem; }
.ch-give__zelle-note {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  border-left: 3px solid var(--accent);
  padding-left: 0.85rem;
  margin-top: 1rem;
}
@media (max-width: 720px) {
  .ch-give__zelle-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ch-give__qr { max-width: 260px; margin: 0 auto; }
}

/* =====================================================
   CONTACT / NEW HERE
   ===================================================== */
.ch-contact {
  padding-block: var(--section-gap);
  background: var(--bg-section);
}
.ch-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.ch-contact__text p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.ch-contact__perks { display: flex; flex-direction: column; gap: 0.75rem; }
.ch-contact__perks li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.ch-contact__perks li svg { color: var(--primary); flex-shrink: 0; }

.ch-visitor-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ch-form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.ch-form-row label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.03em;
}
.ch-form-row input,
.ch-form-row textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--ch-font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.ch-form-row input:focus,
.ch-form-row textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.ch-form-row textarea { resize: vertical; min-height: 80px; }
.ch-form-note { font-size: 0.78rem; text-align: center; color: var(--text-muted); margin-top: -0.5rem; }

/* =====================================================
   FOOTER
   ===================================================== */
.ch-footer {
  background: var(--bg-dark);
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.ch-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: 2rem;
}
.ch-footer__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ch-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 0.75rem;
}
.ch-footer__tagline { font-size: 0.88rem; color: var(--text-on-dark-muted); }
.ch-footer__grid h3 {
  font-family: var(--ch-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.ch-footer__info p, .ch-footer__schedule p {
  font-size: 0.9rem;
  color: var(--text-on-dark-muted);
  line-height: 1.7;
}
.ch-footer__info a:hover { color: var(--accent); }
.ch-social-links { display: flex; gap: 0.75rem; }
.ch-social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  display: grid;
  place-items: center;
  color: var(--text-on-dark-muted);
  transition: all var(--transition);
}
.ch-social-link:hover, .ch-social-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ch-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-on-dark-muted);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ch-footer__powered a { color: var(--accent); font-weight: 600; }
.ch-footer__powered a:hover { text-decoration: underline; }

/* =====================================================
   SCROLL REVEAL ANIMATIONS
   ===================================================== */
.reveal-ready {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-ready.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Active nav link */
.site-nav a.active { color: var(--primary); }

/* =====================================================
   MOBILE NAV OPEN STATE
   ===================================================== */
body.nav-open .site-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: var(--bg);
  padding: 6rem 2rem 3rem;
  gap: 0.5rem;
  z-index: 99;
  align-items: flex-start;
}
body.nav-open .site-nav a {
  font-size: 1.3rem;
  padding: 0.75rem 1rem;
  width: 100%;
  color: var(--text);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) {
  .ch-ministries__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .ch-services__grid { grid-template-columns: 1fr; gap: 3rem; }
  .ch-welcome__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ch-welcome__photo-wrap { flex-direction: row; align-items: center; gap: 1.5rem; }
  .ch-pastor-nameplate { text-align: left; }
  .ch-believe__values { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .ch-social__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .ch-events__grid { grid-template-columns: 1fr; }
  .ch-contact__grid { grid-template-columns: 1fr; gap: 3rem; }
  .ch-give__inner { flex-direction: column; text-align: center; }
  .ch-give__actions { align-items: center; }
  .ch-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  :root { --section-gap: 5rem; }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .ch-footer__grid { grid-template-columns: 1fr; }
  .ch-visitor-form { padding: 1.75rem; }
  .ch-ministries__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .ch-hero__content { padding: 8rem 1.5rem 5rem; }
}

@media (max-width: 480px) {
  .container { padding-inline: 1.25rem; }
  .ch-hero__actions { flex-direction: column; align-items: stretch; }
  .ch-hero__actions .btn { justify-content: center; }
  .ch-social__header-row { flex-direction: column; align-items: flex-start; }
  .ch-events__header-row { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   Hero motto (typing-effect tagline) — replaces static .ch-hero__tagline
   =================================================================== */
.ch-hero__motto {
  font-family: var(--ch-font-heading);
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  letter-spacing: 0.02em;
  color: var(--accent-light);
  margin-bottom: 2rem;
  min-height: 1.7em;
  /* Reserve enough horizontal space for the longest motto phrase
     ("Become what God has for you") so per-character typing doesn't
     reflow the hero on every keystroke. `contain: layout` keeps the
     reflow contained even if it does occur. */
  min-width: min(28ch, 90vw);
  contain: layout;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.ch-hero__motto-text { display: inline; }
.ch-hero__cursor {
  display: inline-block;
  margin-left: 0.08em;
  animation: ch-motto-blink 1s steps(1, end) infinite;
}
@keyframes ch-motto-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-hero__cursor { animation: none; opacity: 0; }
}

/* ===================================================================
   Launch banner — opt-in. Sites add markup with data-expires for the
   date detection system to retire it automatically.
   =================================================================== */
.ch-launch-banner {
  font-family: var(--ch-font-heading);
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 22px color-mix(in srgb, var(--accent) 50%, transparent);
  display: inline-block;
  padding: 0.4rem 1.4rem;
  margin: 0 auto 1.25rem;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* ===================================================================
   Bilingual content — small Spanish line under the English equivalent.
   Used in service times and ministry cards on bilingual church sites.
   =================================================================== */
.ch-service-bilingual {
  display: block;
  font-size: 0.78em;
  color: var(--text-muted);
  margin-top: 0.15rem;
  font-style: italic;
  font-weight: 400;
}
.ch-hero__lang-tag {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}
.ch-hero__service-pill--stacked { padding-block: 0.5rem; }
.ch-hero__pill-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.35;
}
.ch-hero__pill-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  letter-spacing: 0.04em;
  font-weight: 500;
}


/* =====================================================
   ON-DARK ACCENT — contrast fix (2026-08-19)
   The church accent #36095d measures 13.6:1 on the light
   sections but only 1.2:1 on the dark ones, so labels and
   buttons there were effectively invisible. Gold is sampled
   from the flame in the church's own logo and measures
   8.83:1 on --bg-dark (WCAG AAA). Light sections keep the
   purple — do not "simplify" this to one accent.
   ===================================================== */
:root {
  --accent-on-dark: #d4af37;
  --accent-on-dark-strong: #e4c25a;
}

/* Hero */
.ch-hero__eyebrow { color: var(--accent-on-dark); }
.ch-hero__tagline { color: rgba(255, 255, 255, 0.9); }

/* Pastor / welcome block (dark) */
.ch-welcome .section-label,
.ch-welcome__text .section-label,
.ch-pastor-label { color: var(--accent-on-dark); }
.ch-welcome__text .btn-outline {
  color: var(--accent-on-dark);
  border-color: var(--accent-on-dark);
}
.ch-welcome__text .btn-outline:hover,
.ch-welcome__text .btn-outline:focus-visible {
  background: var(--accent-on-dark);
  color: #14121a;
}

/* NOTE: the social-feed section is on a LIGHT background, so it keeps the
   purple accent (13.6:1). Do not "fix" it to gold — gold on light is 1.68:1. */

/* Events (dark section) */
.ch-events .section-label,
.ch-event-month,
.ch-event-meta { color: var(--accent-on-dark); }
.ch-event-card:hover { border-color: var(--accent-on-dark); }

/* Give — primary CTA was dark-on-dark at 1.3:1 */
.ch-give .section-label { color: var(--accent-on-dark); }
.btn-give {
  background: var(--accent-on-dark);
  border-color: var(--accent-on-dark);
  color: #14121a;
}
.btn-give:hover,
.btn-give:focus-visible {
  background: var(--accent-on-dark-strong);
  border-color: var(--accent-on-dark-strong);
  color: #14121a;
}

/* Footer */
.ch-footer__grid h3 { color: var(--accent-on-dark); }
.ch-footer__info a:hover { color: var(--accent-on-dark); }
.ch-footer__powered a { color: var(--accent-on-dark); }

/* Footer social links.
   The email-to-edit pipeline inserts bare <a> tags into
   .ch-social-links, which only styled .ch-social-link (the
   38px icon circles). Unclassed links fell through to the
   light-theme body colour on a dark footer — 1.04:1.
   Style the bare anchors directly so any future insert is safe. */
.ch-social-links { flex-wrap: wrap; gap: 0.5rem 1rem; }
.ch-social-links a {
  color: var(--text-on-dark);
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.ch-social-links a:hover,
.ch-social-links a:focus-visible {
  color: var(--accent-on-dark);
  border-bottom-color: var(--accent-on-dark);
}

/* =====================================================
   FEATURED EVENT — morph card
   Compact bar that expands into the full flyer when it
   scrolls into view. Ported from the events-calendar
   template (Juan Gonzalez, MEN's Discipleship, Jun 2026).

   Deviation from that build: Albert's flyer is square
   (1080x1080) with type running edge to edge, so the hero
   uses object-fit: contain over a blurred copy of itself
   instead of cover. Cropping to 16:9 would cut the dates
   off the poster. Renders to the open state without JS and
   under prefers-reduced-motion.
   ===================================================== */
:root {
  --morph-compact-h: 96px;
  --morph-hero-h: 620px;
}
@media (max-width: 900px) { :root { --morph-hero-h: calc(100vw - 4rem); } }
@media (max-width: 480px) { :root { --morph-hero-h: calc(100vw - 2rem); } }

.ch-event-morph {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  height: var(--morph-hero-h);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-on-dark) 30%, var(--border-dark));
  background: var(--bg-dark);
  box-shadow: var(--shadow-lg);
}
body.has-js.allow-motion .ch-event-morph {
  height: var(--morph-compact-h);
  border-radius: 12px;
  border-color: var(--border-dark);
  background: var(--bg-dark-section);
  box-shadow: none;
  transition:
    height 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.55s ease 0.15s,
    border-color 0.6s ease 0.2s,
    background 0.6s ease 0.2s,
    box-shadow 0.6s ease 0.3s;
}
body.has-js.allow-motion .ch-event-morph.is-revealed {
  height: var(--morph-hero-h);
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--accent-on-dark) 30%, var(--border-dark));
  background: var(--bg-dark);
  box-shadow: var(--shadow-lg);
}

/* Compact state */
.ch-event-morph__compact {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  z-index: 3;
  opacity: 0; pointer-events: none;
}
body.has-js.allow-motion .ch-event-morph .ch-event-morph__compact {
  opacity: 1; pointer-events: auto; transition: opacity 0.35s ease;
}
body.has-js.allow-motion .ch-event-morph.is-revealed .ch-event-morph__compact {
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.ch-event-morph__badge {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 54px; line-height: 1;
}
.ch-event-morph__badge-month {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-on-dark);
}
.ch-event-morph__badge-day {
  font-family: var(--ch-font-heading); font-size: 1.6rem;
  font-weight: 700; color: var(--text-on-dark);
}
.ch-event-morph__compact-title {
  font-family: var(--ch-font-heading); font-size: 1.05rem;
  color: var(--text-on-dark); margin: 0;
}
.ch-event-morph__compact-time {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent-on-dark);
}

/* Revealed flyer */
.ch-event-morph__hero { position: absolute; inset: 0; z-index: 1; opacity: 1; }
body.has-js.allow-motion .ch-event-morph .ch-event-morph__hero {
  opacity: 0; transition: opacity 0.5s ease 0.45s;
}
body.has-js.allow-motion .ch-event-morph.is-revealed .ch-event-morph__hero { opacity: 1; }
.ch-event-morph__img-wrap {
  position: relative; width: 100%; height: 100%;
  background: var(--bg-dark); overflow: hidden;
}
/* Blurred copy fills the letterbox so "contain" looks deliberate */
.ch-event-morph__backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(34px) saturate(1.25) brightness(0.55);
  transform: scale(1.18);
}
.ch-event-morph__img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.ch-event-morph__glow { position: absolute; inset: -40px; z-index: 0; pointer-events: none; }
.ch-event-morph__glow::before {
  content: ""; position: absolute; left: 50%; top: -40px;
  transform: translateX(-50%); width: 90%; height: 60%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent-on-dark) 30%, transparent) 0%, transparent 65%);
  filter: blur(50px);
}
body.has-js.allow-motion .ch-event-morph .ch-event-morph__glow {
  opacity: 0; transition: opacity 0.7s ease 0.35s;
}
body.has-js.allow-motion .ch-event-morph.is-revealed .ch-event-morph__glow { opacity: 1; }

/* Caption under the flyer for anyone who can't read the image */
.ch-event-morph__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 45%, transparent 100%);
  text-align: center;
}
.ch-event-morph__caption-title {
  font-family: var(--ch-font-heading); font-size: 1.05rem;
  color: #fff; margin: 0 0 0.15rem;
}
.ch-event-morph__caption-meta {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent-on-dark-strong); margin: 0;
}
body.has-js.allow-motion .ch-event-morph .ch-event-morph__caption {
  opacity: 0; transition: opacity 0.5s ease 0.5s;
}
body.has-js.allow-motion .ch-event-morph.is-revealed .ch-event-morph__caption { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ch-event-morph, .ch-event-morph__compact, .ch-event-morph__hero,
  .ch-event-morph__glow, .ch-event-morph__caption { transition: none !important; }
}

/* Events grid: auto-fit so a short list still balances */
.ch-events__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ch-event-date { width: auto; min-width: 48px; }
.ch-event-card--rhythm .ch-event-day {
  font-size: 1.15rem; letter-spacing: 0.03em; padding-top: 0.15rem;
}

/* Footer small print was 2.98:1 on the dark footer */
.ch-footer__bottom,
.ch-footer__bottom p { color: #a5a3aa; }

/* Prayer time shown under the service it precedes */
.ch-service-note {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Venue line on an event card */
.ch-event-addr {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin-top: 0.6rem; font-size: 0.8rem; line-height: 1.5;
  color: var(--text-on-dark-muted);
}
.ch-event-addr svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--accent-on-dark); }
.ch-event-addr a { border-bottom: 1px solid transparent; transition: color var(--transition), border-color var(--transition); }
.ch-event-addr a:hover, .ch-event-addr a:focus-visible {
  color: var(--accent-on-dark); border-bottom-color: var(--accent-on-dark);
}

/* Hero typewriter motto — was --accent-light (#54277b) on the dark hero */
.ch-hero__motto { color: var(--accent-on-dark); }
.ch-hero__cursor { color: var(--accent-on-dark-strong); }

/* One-off announcement attached to a recurring event card */
.ch-event-flag {
  margin-top: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--accent-on-dark);
  background: color-mix(in srgb, var(--accent-on-dark) 9%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-on-dark);
}
.ch-event-flag strong { color: var(--accent-on-dark); }

/* Keep a lone card from stretching the full grid width */
.ch-events__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 460px)); justify-content: start; }

/* Ministries: centre the row rather than left-aligning a short list in a 3-col grid */
.ch-ministries__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
}

/* ---- Social "follow us" empty state (2026-08-20) ----
   Shown until a real synced post exists. js/main.js loadSocialFeed() bails out and leaves this
   markup alone when feed.json is missing or empty, and replaces the whole grid once there are
   genuine posts, so this is purely the empty state and needs no coordination with the sync.
   Colours come from --primary, not --accent: this section sits on a LIGHT background, and the
   brand accent is gold (#C9882A ~2.9:1 on white) which is unreadable as text here. --primary
   stays dark in both the old purple and the new maroon themes, so this survives a recolor. */
.ch-social__grid--follow {
  display: block;
  max-width: 520px;
  margin: 0 auto;
}
.ch-social-card--follow {
  text-align: center;
  padding: 28px 24px;
}
.ch-social-card--follow .ch-social-card__body { padding: 0; }
.ch-social-card--follow .ch-social-card__text {
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.ch-social-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ch-social-follow__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background .18s ease, color .18s ease;
}
.ch-social-follow__link:hover,
.ch-social-follow__link:focus-visible {
  background: var(--primary);
  color: #fff;
}