/* custom.css — per-site design layer.
 *
 * Ships EMPTY. This is where a site gets a bespoke look WITHOUT forking the
 * template: it loads after site.css and theme.css, so anything here wins.
 * `sites update-template` PRESERVES this file (it's treated like config.json),
 * so template updates never clobber a site's custom design.
 *
 * Two sites built on this same template can look completely different — one
 * clean and light, another dark and technical — by living here. Use CSS
 * variables from theme.css (--color-primary, etc.) plus plain overrides of
 * the component classes in site.css (.hero, .card, .btn-primary, header,
 * footer, section bands…).
 */

/* ── Hope In Christ Ministry design layer ────────────────────────────── */

/* The Figma design is set entirely in a classic serif. */
body {
  font-family: "Times New Roman", Times, Georgia, serif;
}

/* Dark mode: the brand maroon (#4b1c2a) is too dark to read on dark
 * surfaces, so lift it. Everything keyed to --color-primary (buttons,
 * card link labels, the scripture quote, testimonial band) follows. */
:root[data-theme="dark"] {
  --color-primary: #a85570;
}
/* …but keep the full-width testimonial band deep maroon in dark mode. */
:root[data-theme="dark"] .zk-testimonials {
  background: var(--color-dark);
}

/* Theme-aware logo: navy wordmark on light chrome, white wordmark on dark. */
.zk-logo-dark { display: none; }
:root[data-theme="dark"] .zk-logo-light { display: none; }
:root[data-theme="dark"] .zk-logo-dark { display: block; }

/* Gold accent button — used on dark bands (e.g. "Help Others"). */
.btn-accent {
  display: inline-block;
  background: var(--color-accent);
  color: #2a0f18;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  transition: filter 120ms ease, transform 120ms ease;
}
.btn-accent:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Gold underline bar beneath section headings (the 64×2 rule in the design). */
.zk-heading-bar {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--color-accent);
  margin-top: 0.9rem;
}
.zk-heading-bar-center { margin-left: auto; margin-right: auto; }