/* Sought Through Prayer — PUBLIC website styles.
   A calm, spacious "front porch" for newcomers and the general public —
   deliberately distinct from the member app (no dashboard, no tile grid, no
   member nav). Shares the slate/blue brand palette for continuity, used in a
   roomy, single-column, mobile-first website style. System fonts only. */

:root {
  --accent:        #2563EB;   /* brand blue */
  --accent-hover:  #1D4ED8;
  --ink:           #1E293B;   /* slate, primary text */
  --ink-soft:      #64748B;   /* muted slate */
  --surface:       #FFFFFF;
  --bg:            #F8FAFC;   /* slate-50 page canvas */
  --band:          #EEF2F7;   /* soft slate hero band */
  --line:          #E2E8F0;   /* slate-200 hairline */
  --radius:        14px;
  --tap:           48px;      /* minimum tap target */
  --measure:      40rem;      /* comfortable reading width (mobile/tablet content) */
  --measure-wide: 77.5rem;    /* ~1240px: desktop content width, hero stays at --measure */

  /* Full-bleed section bands (alternating tints behind the centered content —
     see .band below): quiet separation on wide screens, never text color. */
  --band-tint:    #F5F7FB;    /* faint blue-grey tint, e.g. behind Notices */
  --footer-bg:    var(--line); /* deeper than --bg/--surface, anchors the footer */
  --footer-muted: #475569;    /* darker than --ink-soft — keeps footer links/labels
                                  AA-contrast (4.5:1+) against --footer-bg */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 1.0625rem;       /* ~17px */
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* ---- Minimal public header (NOT the member nav) ---------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.site-brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.1rem;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.97rem;
  padding: 0.35rem 0;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { font-weight: 600; }
.site-nav__login {
  color: var(--accent) !important;
  font-weight: 600;
}

/* Hamburger toggle — hidden on desktop (see the 64rem breakpoint below); only
   collapses the nav when JS has run (the .js class), so no-JS visitors keep a
   usable inline/wrapped nav instead of a dead button. Mirrors the member app's
   accounts/base.html + pwa/js/app.js nav-toggle pattern. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover,
.nav-toggle:focus { border-color: var(--accent); color: var(--accent); }

@media (max-width: 63.9375rem) {
  .js .site-nav { display: none; flex-basis: 100%; }
  .js .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
  }
  .js .site-nav.is-open a { padding: 0.85rem 0; font-size: 1.05rem; }
}

/* ---- Layout ---------------------------------------------------------- */
/* Don't stretch main to fill the viewport: on a short page that pushes the
   footer down and opens an awkward gap above it. Let the footer follow the
   content naturally — any leftover space falls below the footer instead. */
.site-main {}

.section,
.page-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}
.section__title {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}
.section__more { margin-top: 1rem; }
.muted { color: var(--ink-soft); }

/* ---- Full-bleed section bands (landing) ------------------------------
   The standard "band + container" split: .band is a plain full-width
   wrapper that only ever carries a background; the .section (or other
   max-width container) nested inside it still centers and caps the actual
   content. This is how large empty side margins on wide screens read as
   intentional horizontal bands instead of blank space, without stretching
   the reading measure itself. Mirrors the same pattern .site-header already
   uses (full-width bar + a max-width __inner). */
.band { background: var(--bg); }
.band--white { background: var(--surface); }
.band--tint { background: var(--band-tint); }

/* ---- Hero band ------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Sky + sun painted on the band itself, so neither ever crops at any width
     (the mountains are a separate SVG strip anchored to the bottom). A soft
     warm-white sun glow in the upper area sits over a top-to-bottom sky that
     darkens to meet the ridge crests cleanly. Hardcoded hex — a physical scene
     that must not invert in dark mode. */
  background:
    radial-gradient(circle 220px at 76% 28%,
      rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%),
    linear-gradient(to bottom, #F4F8FC 0%, #C9D9EA 100%);
  border-bottom: 1px solid var(--line);
  min-height: 300px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Decorative Blue Ridge ridges — a full-width strip anchored to the bottom.
   preserveAspectRatio="none" (set inline) lets the soft ridges fill any width
   with their crests intact; the transparent area above the back crest reveals
   the CSS sky behind it. */
.hero__art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 160px;
  display: block;
  z-index: 1;
}
/* Very subtle light scrim over the upper band: a no-op over the already-light
   sky, but lifts contrast where a ridge rises high into the text zone on very
   wide screens — keeping the dark hero text legible. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(244, 248, 252, 0.85) 0%,
    rgba(244, 248, 252, 0.55) 30%,
    rgba(244, 248, 252, 0) 62%
  );
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2.25rem;
  text-align: center;
}
.hero__eyebrow,
.hero__title,
.hero__subline,
.hero__welcome {
  /* Gentle light halo so text edges stay crisp against the sky/misty crests. */
  text-shadow: 0 1px 2px rgba(244, 248, 252, 0.9);
}
.hero__eyebrow {
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}
.hero__title {
  margin: 0 0 0.5rem;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero__subline {
  margin: 0 auto 1.25rem;
  max-width: 30rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.hero__welcome {
  margin: 0 auto 1.75rem;
  max-width: 32rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---- Hotline strip (landing, high on the page, tap-to-call) ---------- */
.hotline-strip {
  background: var(--accent);
  text-align: center;
  padding: 0.6rem 1.25rem;
}
.hotline-strip a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--tap);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.hotline-strip a:hover { color: #fff; text-decoration: underline; }
.hotline-strip__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
.hotline-strip__number { font-size: 1.05rem; }

/* ---- Next-meeting highlight (landing, high on the page) -------------- */
.next-meeting {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}
.next-meeting__card {
  max-width: 26rem;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.next-meeting__eyebrow {
  margin: 0 0 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}
.next-meeting__when { margin: 0; font-size: 1.25rem; font-weight: 700; }
.next-meeting__kind { margin: 0.2rem 0 0; color: var(--ink-soft); }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--ghost {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--accent); }

/* ---- Page heads (Meetings / Help) ------------------------------------ */
.page-head { padding-bottom: 0.5rem; text-align: center; }
.page-head__title { margin: 0 0 0.35rem; font-size: 1.9rem; }
.page-head__sub { margin: 0; color: var(--ink-soft); }

/* ---- Schedule -------------------------------------------------------- */
.schedule {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.schedule__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding: 1rem 1.25rem;
}
.schedule__row + .schedule__row { border-top: 1px solid var(--line); }
.schedule__day { font-weight: 600; font-size: 1.05rem; }
.schedule__time { color: var(--ink); text-align: right; white-space: nowrap; }
.schedule__format {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.schedule__format.is-open { color: var(--accent); font-weight: 600; }
.schedule__note {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.venue { font-size: 1.05rem; }

/* ---- Notices & link lists ------------------------------------------- */
/* 1 column on mobile, 2 at tablet, 3 at desktop (widths below); grid rows
   stretch to equal height by default, so cards in the same row line up. */
.notices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.25rem;
}
.notice__title { margin: 0 0 0.35rem; font-size: 1.1rem; }
.links { padding-left: 1.1rem; }
.links li { margin: 0.4rem 0; }

/* ---- Quick links (landing balancing section) ------------------------ */
.quick-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.quick-link {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.quick-link:hover { border-color: var(--accent); }
.quick-link__label { display: block; font-weight: 600; }
.quick-link__sub { display: block; font-size: 0.92rem; color: var(--ink-soft); }

/* ---- Optional slim ridgeline (other public pages, for cohesion) ------ */
.ridge-foot { line-height: 0; margin-top: 2.5rem; }
.ridge-foot svg { display: block; width: 100%; height: 56px; }

/* ---- Footer ---------------------------------------------------------- */
/* Deeper than the page/section bands so it anchors the bottom. --footer-muted
   (not --ink-soft) is used for its secondary text/links, since --ink-soft's
   contrast ratio against --surface (white) doesn't hold up against a darker
   background — --footer-muted keeps it at AA (4.5:1+). */
.site-footer {
  background: var(--footer-bg);
  padding: 2rem 1.25rem 1.75rem;
}
.site-footer__inner {
  max-width: var(--measure);
  margin: 0 auto 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
.site-footer__heading {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--footer-muted);
}
.site-footer__col p { margin: 0.15rem 0; }
.site-footer__hotline { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.site-footer__col nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.site-footer a { color: var(--footer-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer__note { margin: 0; font-size: 0.85rem; color: var(--footer-muted); text-align: center; }

@media (min-width: 40rem) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .site-footer__col nav { align-items: flex-start; }
}

@media (min-width: 64rem) {
  .site-footer__inner { max-width: var(--measure-wide); }
}

/* ---- A little more room on larger screens ---------------------------- */
@media (min-width: 40rem) {
  .hero { min-height: 340px; }
  .hero__inner { padding-top: 3rem; padding-bottom: 2.5rem; }
  .hero__art { height: 190px; }
  .hero__title { font-size: 2.75rem; }
  .quick-links { grid-template-columns: repeat(3, 1fr); }
  .notices-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Desktop: widen content below the hero, hero itself is unchanged -- */
@media (min-width: 64rem) {
  .site-header__inner {
    max-width: var(--measure-wide);
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .nav-toggle { display: none; }
  .section,
  .page-head {
    max-width: var(--measure-wide);
    padding-left: 2rem;
    padding-right: 2rem;
  }
  /* Bare paragraphs (not grids/cards) keep a comfortable reading measure
     even though their .section container is now much wider. */
  .section > p { max-width: 65ch; }
  .notices-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  a, .btn { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
}