/* =====================================================
   LOVE SHOWS UP™ — DARK MODE OVERRIDES
   Load AFTER styles.css to apply dark theme.
   ===================================================== */

:root {
  --bg-page: #141418;
  --bg-surface: #1F1B26;
  --bg-surface-elevated: #2A2438;
  --bg-input: #1F1B26;
  --text-primary: #F4EBD9;
  --text-muted: #B5B2C0;
  --text-soft: #9A86B5;
  --gold-on-dark: #E6B432;
  --crimson-on-dark: #E55B6E;
  --indigo-on-dark: #9A86B5;
  --border-dark: #3A3245;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
}

h1, h2, h3, h4 { color: var(--text-primary); }
h4 { color: var(--gold-on-dark); }
p { color: var(--text-primary); }
.lead { color: var(--text-muted); }
.eyebrow { color: var(--gold-on-dark); }

a { color: var(--crimson-on-dark); }
a:hover { color: var(--gold-on-dark); }

/* ---------- Header ---------- */
.site-header {
  background: rgba(20, 20, 24, 0.92);
  border-bottom: 1px solid var(--border-dark);
  backdrop-filter: blur(12px);
}
.nav-brand img { filter: brightness(1.35) contrast(1.1); }
.nav-brand .brand-tag { color: var(--cream); }
.nav-links a { color: var(--cream); }
.nav-links a:hover { color: var(--gold-on-dark); }
.nav-mobile-toggle { color: var(--gold-on-dark); }
.nav-mobile {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-dark);
}
.nav-mobile a { color: var(--cream); border-bottom-color: var(--border-dark); }

/* ---------- Hero ---------- */
.hero { background: var(--bg-page); }
.hero::after {
  background: linear-gradient(180deg, rgba(20,20,24,0.55) 0%, rgba(20,20,24,0.92) 100%);
}
.hero h1 .accent-crimson { color: var(--crimson-on-dark); }
.hero h1 .accent-gold { color: var(--gold-on-dark); }
.hero h1 .accent-indigo { color: var(--indigo-on-dark); }

/* ---------- Three doors ---------- */
.door {
  background: var(--bg-surface);
  border-color: var(--border-dark);
  color: var(--text-primary);
  box-shadow: 0 6px 28px rgba(0,0,0,0.45);
}
.door:hover {
  background: var(--bg-surface-elevated);
  box-shadow: 0 14px 48px rgba(0,0,0,0.6);
}
.door h3 { color: var(--gold-on-dark); }
.door p { color: var(--text-muted); }
.door .door-link { color: var(--crimson-on-dark); }
.door .door-link:hover { color: var(--gold-on-dark); }

/* ---------- Section heads ---------- */
.section-head h2 { color: var(--text-primary); }
.section-head p { color: var(--text-muted); }

/* ---------- Cream sections become dark surface sections ---------- */
.bg-cream, .bg-white {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* ---------- Scripture ---------- */
.scripture {
  background: var(--bg-surface-elevated);
  border-left-color: var(--gold-on-dark);
}
.scripture-text { color: var(--text-primary); }
.scripture-citation { color: var(--gold-on-dark); }

/* ---------- Tagline block ---------- */
.tagline-block { background: var(--bg-page); }
.tagline-block::before { opacity: 0.22; }
.tagline-block .tagline-line { color: var(--gold-on-dark); }
.tagline-block .tagline-source { color: var(--text-muted); }

/* ---------- Stats ---------- */
.stat {
  background: var(--bg-surface);
  border-bottom-color: var(--gold-on-dark);
  color: var(--text-primary);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.stat-number { color: var(--crimson-on-dark); }
.stat-label { color: var(--text-muted); }

/* ---------- Card grid ---------- */
.card {
  background: var(--bg-surface);
  border-color: var(--border-dark);
  color: var(--text-primary);
}
.card:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--gold-on-dark);
}
.card-state { color: var(--gold-on-dark); }
.card-meta { color: var(--text-muted); }
.card-link { color: var(--crimson-on-dark); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--bg-surface);
  border-top-color: var(--gold-on-dark);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.form-row label { color: var(--gold-on-dark); }
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--bg-page);
  border-color: var(--border-dark);
  color: var(--text-primary);
}
.form-row input::placeholder,
.form-row select::placeholder,
.form-row textarea::placeholder { color: var(--text-soft); opacity: 0.7; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  background: var(--bg-surface-elevated);
  border-color: var(--gold-on-dark);
}
.form-row select option { background: var(--bg-page); color: var(--text-primary); }
.form-help { color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn-primary { background: var(--crimson-on-dark); color: var(--bg-page); }
.btn-primary:hover { background: #FF7388; color: var(--bg-page); }
.btn-secondary { background: var(--gold-on-dark); color: var(--bg-page); }
.btn-secondary:hover { background: #F2C656; color: var(--bg-page); }
.btn-outline { color: var(--gold-on-dark); border-color: var(--gold-on-dark); }
.btn-outline:hover { background: var(--gold-on-dark); color: var(--bg-page); }

/* ---------- Page header (inner pages) ---------- */
.page-header { background: var(--bg-page); }
.page-header::before { opacity: 0.22; }

/* ---------- Hotline ---------- */
.hotline { background: var(--crimson-on-dark); color: var(--bg-page); }
.hotline-icon { background: var(--gold-on-dark); color: var(--bg-page); }
.hotline-text strong { color: var(--bg-page); }

/* ---------- Footer ---------- */
.site-footer {
  background: #0A0A0E;
  border-top: 1px solid var(--border-dark);
}
.footer-brand img { filter: brightness(1.45) contrast(1.1); }
.footer-tagline { color: var(--gold-on-dark); }
.footer-h4 { color: var(--gold-on-dark); }
.footer-links a { color: var(--text-primary); }
.footer-links a:hover { color: var(--gold-on-dark); }
.footer-bottom { border-top-color: var(--border-dark); color: var(--text-muted); }

/* ---------- Mode toggle pill ---------- */
.mode-toggle {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  background: var(--bg-surface-elevated);
  color: var(--gold-on-dark);
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--gold-on-dark);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 100;
}
.mode-toggle:hover {
  background: var(--gold-on-dark);
  color: var(--bg-page);
  text-decoration: none;
}