/* ============================================================
   New Beginning Church of the Nazarene
   Shared stylesheet — Phase 2, mobile-first
   ============================================================

   ONE file for the whole site. Every page links this and has
   no <style> block of its own any more.

   HOW IT IS ORGANISED
     1. Tokens
     2. Base + typography
     3. Header and navigation
     4. Easy View
     5. Shared components
     6. Page-specific blocks, scoped by a body class
        (<body class="page-teens"> etc.)
     7. Footer, action bar, forms
     8. Wider screens

   MOBILE-FIRST: the plain rules are the phone layout. The two
   @media (min-width: ...) blocks at the bottom ADD to it for
   larger screens. Nothing uses max-width.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Deep navy and brass on parchment — the palette of a hymn
     board and a printed bulletin, rather than a default blue.
     Every pair here is checked against WCAG AA. */
  --navy:        #12293f;
  --navy-deep:   #0b1a29;
  --navy-mid:    #1e4664;
  --brass:       #7d5a1a;   /* brass on LIGHT grounds  */
  --brass-lt:    #d9b56a;   /* brass on NAVY grounds   */
  --parchment:   #f5f2ec;
  --paper:       #ffffff;
  --ink:         #16202b;
  --ink-soft:    #4a5763;
  --on-navy:     #c9d5e0;
  --rule:        #ddd6ca;
  --rule-soft:   #ebe6dd;

  /* Older names kept so nothing breaks while the HTML catches up */
  --primary:      var(--navy-mid);
  --primary-dark: var(--navy);
  --accent:       var(--brass);
  --bg:           var(--parchment);
  --text:         var(--ink);
  --light:        var(--paper);
  --muted:        var(--ink-soft);

  --max-width: 1140px;
  --radius:    6px;
  --radius-lg: 10px;
  --shadow:    0 1px 2px rgba(18, 41, 63, 0.05);
  --shadow-lift: 0 10px 30px rgba(18, 41, 63, 0.13);
  --arch:      50% 50% var(--radius) var(--radius) / 15% 15% var(--radius) var(--radius);

  --nb-blue: var(--navy);
  --nb-gold: var(--brass);
  --nb-ink:  var(--navy-deep);
  --nb-line: var(--rule);
  --nb-sunk: #eae5db;
  --nb-bar-h: 4.25rem;
}

/* ---------- 2. Base + typography ----------
   Body text is 18px. The old site ran 16px with 13-15px inside
   cards, which is what made an "Easy View" mode necessary in
   the first place. Nothing here goes below 16px.              */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  /* No single word should be able to widen the page. Belt and braces
     for long addresses and URLs in copy. */
  overflow-wrap: break-word;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  background: var(--parchment);
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.7;
  padding-bottom: var(--nb-bar-h);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Links inside page content must be tellable from the text around
   them. The base rule above strips that away, which is right for
   nav items and buttons but leaves a plain content link looking
   exactly like a sentence. Anything carrying its own class opts
   out and keeps its own styling. */
main a:not([class]) {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-color: var(--brass-lt);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
main a:not([class]):hover { color: var(--navy); text-decoration-color: var(--brass); }

/* Catch-all focus ring, so nothing interactive can be tabbed to
   invisibly. Components with their own ring override this. */
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

h1, h2, h3 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2rem, 8vw, 2.9rem);
  margin-bottom: 0.9rem;
  text-align: center;
}
h2 { font-size: clamp(1.45rem, 4.5vw, 1.9rem); margin-bottom: 0.9rem; }
h3 { font-size: 1.2rem; }

/* A brass hairline under page titles — the rule that runs across
   the top of a printed bulletin. */
main > .container > h1::after,
main > .container > h2.centered::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--brass);
  margin: 0.9rem auto 0;
}

/* Small caps labels, set in the UI face */
.eyebrow, .foot-h, .foot-day, .day-heading, .meeting-day, .feature-day,
.section-label, .event-date, .mission-tag, .pastor-label, .placeholder-tag,
.nav-links, .nav-cta, .sa-btn, .btn-primary, .btn-outline, .btn-secondary,
.nav-easy-toggle, .step-indicator .step, .field-label, .amount-button,
.frequency-pill, .ministry-link-label {
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
}

main { padding: 2.5rem 0 3rem; }
/* Only the homepage's full-bleed bands are direct children of <main>.
   Scoping it here stops the padding compounding on inner pages, where
   sections sit inside .container and main already provides the space —
   and, unlike a blanket reset, it does not out-specify components that
   are themselves a <section> and set their own padding. */
main > section { padding: 2.5rem 0; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section-intro {
  text-align: center;
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 0 auto 2.5rem;
  font-size: 1.15rem;
  line-height: 1.65;
}

/* Skip link — first stop for a keyboard user */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--nb-blue);
  color: #fff;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; outline: 3px solid var(--nb-gold); outline-offset: 2px; }

/* ---------- 3. Header and navigation ----------
   Base = stacked, wrapping, full-width. The horizontal bar is
   an enhancement added at 64rem, not the other way round.     */
header {
  background: var(--navy);
  border-bottom: 1px solid rgba(217, 181, 106, 0.45);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1.1rem;
  /* padding-block only — a shorthand here would wipe out the
     horizontal padding .container sets, which is what used to
     push the logo and nav flush against the screen edge. */
  padding-block: 0.8rem;
}
/* On a phone the wordmark shares its line with the Easy View
   control, wrapping to two lines to make room, rather than
   leaving the toggle stranded on a row of its own. */
/* A basis under 100% keeps the wordmark and the Easy View control
   on one line — with `auto` they each claim their content width,
   overflow the row, and wrap apart. */
/* The Easy View control is a utility, not navigation — it shares the
   identity row rather than competing with the links for space. */
/* A basis under 100% is what keeps the toggle on this row — with `auto`
   the wordmark claims the full width and pushes it to a line of its own. */
.nav-left  { flex: 1 1 78%; min-width: 0; }
.nav-links { flex: 1 1 100%; }

a.nav-left { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 0.65rem; }
a.nav-left:focus-visible { outline: 3px solid var(--brass-lt); outline-offset: 4px; }

/* An arched mark instead of a circle — the shape of a church
   window, and the one piece of the identity that is not type. */
.logo-mark {
  width: 34px;
  height: 41px;
  flex: none;
  border-radius: 19px 19px 3px 3px;
  background: transparent;
  border: 1px solid var(--brass-lt);
  box-shadow: inset 0 0 0 3px rgba(11, 26, 41, 1), inset 0 0 0 4px rgba(217, 181, 106, 0.4);
  color: var(--brass-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding-top: 0.15rem;
  transition: background 0.2s ease, color 0.2s ease;
}
a.nav-left:hover .logo-mark { background: var(--brass-lt); color: var(--navy); }

.nav-church-name {
  display: block;
  font-family: "Spectral", Georgia, serif;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.nav-church-location {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(217, 181, 106, 0.9);
  margin-top: 0.32rem;
}
a.nav-left:hover .nav-church-name { color: var(--brass-lt); }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.15rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-navy);
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  color: var(--on-navy);
  transition: color 0.18s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.55rem;
  height: 1px;
  background: var(--brass-lt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-links a:hover { color: #ffffff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--brass-lt); }
.nav-links a.active::after { transform: scaleX(1); height: 2px; }
.nav-links a.nav-cta::after { display: none; }

.nav-cta {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: transparent;
  color: var(--brass-lt);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(217, 181, 106, 0.55);
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.nav-cta:hover {
  background: var(--brass-lt);
  border-color: var(--brass-lt);
  color: var(--navy);
  transform: none;
}
.nav-links a.nav-cta.active {
  box-shadow: none;
  background: var(--brass-lt);
  border-color: var(--brass-lt);
  color: var(--navy);
}

/* ---------- 4. Easy View ----------
   One definition for the whole site. These rules used to live
   in nine files and had drifted: the homepage scaled headings
   to 1.08em while every other page used 1.35em.               */
.easy-view-strip {
  background: var(--navy);
  border-bottom: 3px solid var(--brass-lt);
  padding: 0 1.25rem 0.55rem;
}
.easy-view-strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
.nav-easy-toggle {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 1px solid rgba(217, 181, 106, 0.4);
  border-radius: 999px;
  background: none;
  color: var(--brass-lt);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.nav-easy-toggle:hover {
  background: var(--brass-lt);
  border-color: var(--brass-lt);
  color: var(--navy);
}
/* "Aa" on a phone, the full words once there is room for them */
.ev-mark {
  font-family: "Spectral", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}
.ev-label {
  display: none;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-easy-toggle:focus-visible {
  outline: 2px solid var(--brass-lt);
  outline-offset: 4px;
}
.nav-easy-toggle:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

/* ---------- Easy View ----------
   Scales the ROOT, not the body. Every font-size in this file is in
   rem, and rem resolves against <html> — so setting it on body moved
   only the handful of elements that inherit, and left 121 of the 126
   declarations untouched. That is why the mode barely did anything.

   Scaling the root carries all of them at once, and takes padding,
   gaps and radii with it, so the layout breathes instead of the text
   just getting fatter inside the same boxes. Using a percentage
   rather than a px value keeps a reader's own browser font setting
   intact — this multiplies their preference instead of replacing it.

   Breakpoints do not move: rem in a media query resolves against the
   INITIAL root size, not the current one. Verified, not assumed. */
html.easy-view {
  font-size: 125%;
  /* Ink goes darker too — larger text at low contrast still strains. */
  --ink: #0d1620;
  --ink-soft: #333f4a;
  --on-navy: #e4ecf3;
}
html.easy-view body { line-height: 1.95; }

/* Two that genuinely should not scale with everything else: the display
   heading would tower, and the wordmark has a horizontal budget before
   the header wraps. The subline is deliberately NOT capped — it is the
   smallest text on the page, so holding it back in the mode meant for
   people who cannot read small text was exactly backwards. It wraps to
   a second line on a narrow phone instead. */
html.easy-view h1 { font-size: 2.1rem; }
html.easy-view .nav-church-name { font-size: 1.15rem; }

/* Contact links get a real tap target here. WCAG exempts links inside a
   sentence from the 44px rule, but someone using a larger-text mode on a
   phone is precisely who benefits from not having to hit a 30px line of
   text — and these are the links that matter most on this site. */
html.easy-view .foot-tel a,
html.easy-view .foot-email a,
html.easy-view a[href^="tel:"],
html.easy-view a[href^="mailto:"] {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.35rem;
  /* inline-block sizes to its content, so without this the long email
     address escapes its container instead of wrapping at the <wbr>. */
  max-width: 100%;
}

/* ---------- 5. Shared components ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  font-size: 1.05rem;
}
.card h2 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.card p { color: var(--ink-soft); margin-bottom: 0.6rem; }
.card p:last-child { margin-bottom: 0; }
.card small {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.5rem;
}

.three-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.two-column {
  display: grid;
  /* minmax(0,...) not 1fr: a bare 1fr keeps a min-content floor, so one
     long unbreakable string (an email address, say) widens the column
     past the viewport. Easy View makes that far more likely, since
     every min-content width grows with the root. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: flex-start;
}

.btn-primary, .btn-outline, .btn-secondary {
  border-radius: 999px;
  padding: 0.85rem 1.8rem;
  min-height: 48px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--navy); color: #ffffff; }
.btn-primary:hover { background: var(--navy-mid); transform: translateY(-1px); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #ffffff; }
.btn-secondary { background: var(--brass-lt); color: var(--navy); }
.btn-secondary:hover { background: #e8c883; }
.btn-primary:focus-visible, .btn-outline:focus-visible, .btn-secondary:focus-visible {
  outline: 3px solid var(--brass); outline-offset: 3px;
}

/* On a navy ground the primary button inverts to brass */
.hero .btn-primary, .site-footer .btn-primary {
  background: var(--brass-lt); color: var(--navy);
}
.hero .btn-primary:hover, .site-footer .btn-primary:hover { background: #e8c883; }
.hero .btn-outline { border-color: var(--brass-lt); color: var(--brass-lt); }
.hero .btn-outline:hover { background: var(--brass-lt); color: var(--navy); }

.subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 2.5rem;
}

.times-list { list-style: none; color: var(--muted); font-size: 1rem; }
.times-list li { margin-bottom: 0.5rem; }

.sermon-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.3rem; }
.sermon-link,
.card-link,
.visit-cta a,
.foot-col > p > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.sermon-link { color: var(--primary); font-size: 1rem; font-weight: 600; }
.sermon-link:hover { text-decoration: underline; }

.event-date {
  font-size: 0.74rem; font-weight: 700; color: var(--brass);
  margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.13em;
}

.map-placeholder {
  background: var(--rule-soft); border-radius: var(--radius); min-height: 230px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--ink-soft); text-align: center; padding: 1rem;
}

.bullet-list { list-style: disc; padding-left: 1.2rem; color: var(--muted); font-size: 1rem; }
.bullet-list li { margin-bottom: 0.3rem; }

.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { opacity: 0; animation: fadeInUp 0.9s ease-out forwards; }
.fade-in.delay-1 { animation-delay: 0.15s; }
.fade-in.delay-2 { animation-delay: 0.3s; }
.fade-in.delay-3 { animation-delay: 0.45s; }

/* ============================================================
   6. PAGE-SPECIFIC
   Scoped by the body class so pages cannot affect each other.
   These blocks previously conflicted between files.
   ============================================================ */

/* ---------- Home ---------- */
.page-index .hero {
  padding: 2.25rem 0 2.5rem;
  /* A photograph of the room a visitor will actually walk into,
     under a navy scrim heavy enough to keep the type legible.
     Small file first; the larger one only above 40rem. */
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg, rgba(18, 41, 63, 0.74) 0%, rgba(18, 41, 63, 0.88) 58%, rgba(11, 26, 41, 0.96) 100%),
    url("images/church-800.jpg");
  background-size: cover;
  background-position: center 40%;
  border-bottom: 3px solid var(--brass-lt);
  color: #ffffff;
}
.page-index .hero h1 { color: #ffffff; }
.page-index .hero h1::after { display: none; }
.page-index .hero p { color: var(--on-navy); }
.page-index .hero-inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.page-index .hero-lede { order: 1; }
.page-index .hero-card { order: 2; }
.page-index .hero-rest { order: 3; }
.page-index .hero-kicker {
  font-family: "Archivo", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem;
  color: var(--brass-lt); font-weight: 600; margin-bottom: 0.9rem;
}
.page-index .hero-kicker::after {
  content: ""; display: block; width: 2.5rem; height: 1px;
  background: var(--brass-lt); margin-top: 0.7rem; opacity: 0.6;
}
.page-index .hero h1 { font-size: clamp(1.9rem, 8vw, 3.3rem); margin-bottom: 0.8rem; text-align: left; }
.page-index .hero p { color: var(--on-navy); max-width: 32rem; margin-bottom: 1.5rem; }

/* Content links inside the navy hero need the light treatment; the
   default content-link colour is meant for a parchment ground and
   disappears here. */
.page-index .hero a:not([class]) {
  color: var(--brass-lt);
  text-decoration-color: rgba(217, 181, 106, 0.55);
}
.page-index .hero a:not([class]):hover { color: #ffffff; text-decoration-color: #ffffff; }

/* The card is a white panel sitting inside the navy hero, so the
   hero's light-text rule must not reach into it — it was turning
   the address into near-invisible pale grey on white. */
.page-index .hero-card p { color: var(--ink-soft); max-width: none; }
.page-index .hero-card .location-snippet { color: var(--ink); }
.page-index .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1rem; }
.page-index .hero-meta { font-size: 1rem; color: var(--on-navy); }
.page-index .hero-meta strong { color: var(--brass-lt); font-weight: 600; }
.page-index .hero-card {
  background: var(--paper);
  border-radius: 130px 130px var(--radius) var(--radius);
  padding: 3.25rem 1.6rem 1.75rem;
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: 1rem;
  color: var(--ink);
}
.page-index .hero-card h2 { text-align: center; }
.page-index .hero-card h2::after {
  content: ""; display: block; width: 2.5rem; height: 2px;
  background: var(--brass); margin: 0.7rem auto 0;
}
.page-index .hero-card h2 { font-size: 1.25rem; margin-bottom: 0.2rem; }
.page-index .service-times { font-size: 1rem; }
.page-index .service-times div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
.page-index .service-times span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-index .service-times .day-label {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.7rem; font-weight: 700; color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.14em;
  margin: 1rem 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.page-index .service-times .day-label:first-child { margin-top: 0; }
.page-index .location-snippet { font-size: 1rem; color: var(--ink); margin-top: 0.35rem; }
.page-index .pill {
  display: inline-block; padding: 0.35rem 0.7rem; border-radius: 4px;
  font-size: 0.9rem; background: var(--parchment); color: var(--ink-soft);
  border-left: 2px solid var(--brass-lt); margin-top: 0.5rem;
}
.page-index .welcome h2 { font-size: 1.8rem; margin-bottom: 1rem; text-align: center; }
.page-index .about-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.page-index .about-text p { color: var(--muted); margin-bottom: 0.9rem; }
.page-index .values-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0.5rem; }
.page-index .value-card {
  background: var(--light); border-radius: var(--radius); padding: 1.1rem;
  box-shadow: var(--shadow); font-size: 1rem;
}
.page-index .value-card h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.page-index .highlights .card p { margin-bottom: 0.6rem; color: var(--muted); }
.page-index h2 { text-align: center; }
.page-index main { padding: 0; }

/* Alternating grounds give the page architecture instead of one
   uniform wash with cards floating on it. */
.page-index #about {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.page-index .value-card {
  background: transparent;
  border: none;
  border-left: 2px solid var(--brass-lt);
  border-radius: 0;
  box-shadow: none;
  padding: 0.2rem 0 0.2rem 1.1rem;
}

/* ---------- Service Times ---------- */
.day-heading {
  font-size: 0.74rem; font-weight: 700; color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.13em; margin: 1.1rem 0 0.5rem;
}
.day-heading:first-of-type { margin-top: 0.6rem; }
.same-time-note { font-size: 1rem; color: var(--muted); font-style: italic; margin-top: 0.4rem; }

/* ---------- Ministries ---------- */
.page-ministries .card-link {
  display: inline-block; margin-top: 0.6rem; font-size: 1rem;
  font-weight: 600; color: var(--primary);
}
.page-ministries .card-link:hover { text-decoration: underline; color: var(--primary-dark); }
.page-ministries .feature-block {
  background: var(--light); border-radius: var(--radius); box-shadow: var(--shadow);
  border-top: 3px solid var(--brass-lt); padding: 1.5rem; margin-bottom: 2.5rem;
  display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start;
}
.page-ministries .feature-time {
  text-align: left; border-bottom: 1px solid var(--rule-soft); padding-bottom: 0.75rem;
}
.page-ministries .feature-day {
  font-size: 0.74rem; font-weight: 700; color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.13em;
}
.page-ministries .feature-clock {
  font-family: "Spectral", Georgia, serif;
  font-size: 2.6rem; font-weight: 300; color: var(--navy);
  line-height: 1.1; font-variant-numeric: lining-nums;
}
.page-ministries .feature-body h2 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.page-ministries .feature-body p { color: var(--muted); margin-bottom: 0.7rem; }
.page-ministries .feature-body p:last-child { margin-bottom: 0; }
.page-ministries .section-label {
  font-size: 0.74rem; font-weight: 700; color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 0.75rem;
}

/* ---------- Teens ---------- */
.page-teens .times-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.page-teens .time-card {
  background: var(--light); border-radius: var(--radius); padding: 1.4rem;
  box-shadow: var(--shadow); border-top: 3px solid var(--brass-lt);
}
.page-teens .meeting-day {
  font-size: 0.74rem; font-weight: 700; color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 0.25rem;
}
.page-teens .meeting-time {
  font-family: "Spectral", Georgia, serif;
  font-size: 2.6rem; font-weight: 300; color: var(--navy);
  line-height: 1.1; margin-bottom: 0.5rem;
}
.page-teens .time-card p { color: var(--muted); font-size: 1rem; }
.page-teens .two-up { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.page-teens .parents-box {
  background: var(--light); border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow); border-left: 3px solid var(--brass-lt); max-width: 46rem; margin: 0 auto;
}
.page-teens .parents-box h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.page-teens .parents-box p { color: var(--muted); margin-bottom: 0.6rem; }
.page-teens .parents-box p:last-child { margin-bottom: 0; }

/* ---------- Missions ---------- */
.page-missions .missions-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.page-missions .mission-card {
  background: var(--light); border-radius: var(--radius); padding: 1.4rem;
  box-shadow: var(--shadow); font-size: 1rem;
}
.page-missions .mission-tag {
  font-size: 0.74rem; font-weight: 700; color: var(--brass);
  margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.13em;
}
.page-missions .mission-card h2 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.page-missions .mission-card p { color: var(--muted); }
.page-missions .involved-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.page-missions .involved-card {
  background: var(--light); border-radius: var(--radius); padding: 1.4rem;
  box-shadow: var(--shadow); font-size: 1rem;
}
.page-missions .involved-card h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }

/* ---------- Sermons ---------- */
.page-sermons .card h2 { font-size: 1.2rem; }

/* ---------- Events ---------- */
.page-events .block-heading { font-size: 1.5rem; margin: 3rem 0 0.5rem; text-align: center; }
.page-events .block-sub { text-align: center; color: var(--muted); max-width: 38rem; margin: 0 auto 1.5rem; font-size: 1rem; }
.page-events .calendar-wrapper {
  max-width: 900px; margin: 2rem auto; background: var(--light);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.75rem;
}
.page-events .announcement-list { max-width: 46rem; margin: 0 auto 1rem; }
.content-empty {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  padding: 1.5rem 0;
}
.page-events .announcement {
  background: var(--light); border-radius: var(--radius); box-shadow: var(--shadow);
  border-left: 3px solid var(--brass-lt); padding: 1.2rem 1.3rem; margin-bottom: 1rem; font-size: 1rem;
}
.page-events .announcement h3 { font-size: 1.15rem; margin-bottom: 0.2rem; }
.page-events .announcement p { color: var(--muted); }
.page-events .revival-block {
  background: var(--light); border-radius: var(--radius); box-shadow: var(--shadow);
  border-top: 4px solid var(--accent); padding: 1.5rem; max-width: 46rem; margin: 0 auto; font-size: 1rem;
}
.page-events .revival-block h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.page-events .revival-block p { color: var(--muted); margin-bottom: 0.7rem; }
.page-events .revival-block p:last-child { margin-bottom: 0; }
.revival-next {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
}
/* the dashed "still needed" chip also reads on a light ground */
.revival-next .foot-needed,
.announcement .foot-needed {
  border-color: var(--rule);
  color: var(--ink-soft);
}

/* Content Ken has not supplied yet. Deliberately obvious so it
   cannot be mistaken for finished copy. */
.placeholder {
  border: 2px dashed var(--rule) !important;
  background: #faf8f4 !important;
  box-shadow: none !important;
  color: var(--muted);
}
.placeholder .placeholder-tag {
  display: inline-block; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--rule-soft); color: var(--ink-soft);
  padding: 0.15rem 0.5rem; border-radius: 999px; margin-bottom: 0.5rem;
}

/* ---------- Prayer ---------- */
.page-prayer .info-card {
  background: var(--light); border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow); font-size: 1rem;
}
.page-prayer .info-card h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.page-prayer .info-card p { color: var(--muted); margin-bottom: 0.8rem; }
.page-prayer .info-card ul { padding-left: 1.3rem; color: var(--muted); margin-bottom: 0.8rem; }
.page-prayer .info-card li { margin-bottom: 0.3rem; }
.page-prayer .note {
  background: var(--parchment); border-left: 3px solid var(--brass-lt);
  padding: 0.9rem 1rem; border-radius: 6px; font-size: 1rem; color: var(--muted);
}
.page-prayer .prayer-form {
  background: var(--light); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.page-prayer .prayer-form h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.page-prayer .prayer-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.page-prayer .field { margin-bottom: 1rem; }
.page-prayer .field label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem; }
.page-prayer .checkbox-field label { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.page-prayer .checkbox-field input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--navy-mid);
}
.page-prayer .checkbox-field label {
  min-height: 44px;
  padding: 0.35rem 0;
  cursor: pointer;
}
.page-prayer .checkbox-field small { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.3rem; }

/* ---------- Give ---------- */
.give-ways {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.give-way h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.give-times,
.give-address {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.give-address { font-style: normal; line-height: 1.7; }

.give-funds { margin-bottom: 2.5rem; }
.fund-list {
  list-style: none;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.fund-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.fund-list strong { color: var(--navy); font-size: 1.05rem; }
.fund-list span { color: var(--ink-soft); font-size: 1rem; }

.give-online { margin-bottom: 0; }



/* ---------- Photographs ----------
   Width and height are on the <img> so the browser reserves the right
   space before the file arrives and the text below does not jump. */
.photo-figure { margin: 0 0 2.2rem; }
.photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(11, 26, 41, 0.16);
}
.photo-figure figcaption {
  margin-top: 0.8rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 3px solid var(--brass-lt);
  padding-left: 0.9rem;
}

/* ---------- Footer ----------
   A brand band, four short columns, then a quiet legal line.
   Splitting the service times into Sunday and Wednesday columns
   is what balances the row — as one column it ran twice the
   height of its neighbours and left the others looking empty. */
.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid rgba(217, 181, 106, 0.45);
  color: var(--on-navy);
  padding: 3rem 1.25rem 1.75rem;
  font-size: 1rem;
  text-align: left;
  line-height: 1.7;
}

.foot-brand {
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(217, 181, 106, 0.18);
}
.foot-mark { flex: none; }
.foot-brand-name {
  font-family: "Spectral", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.2rem;
  line-height: 1.25;
}
.foot-brand-line {
  margin: 0;
  font-size: 1rem;
  color: rgba(201, 213, 224, 0.8);
  max-width: 38rem;
}

.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 2.25rem;
}
.foot-col > *:last-child { margin-bottom: 0; }

.foot-h {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-lt);
  margin: 0 0 1rem;
}
.site-footer p { margin: 0 0 0.6rem; color: var(--on-navy); }
.site-footer a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.site-footer a:hover { color: var(--brass-lt); text-decoration-color: var(--brass-lt); }
/* the glyph should not be underlined along with the label */
.site-footer .fb-link { text-decoration: none; }
.site-footer .fb-link span { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 0.25em; }
.site-footer .fb-link:hover span { text-decoration-color: var(--brass-lt); }
.site-footer a:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; }

.foot-addr { color: #ffffff; }
.foot-fine {
  font-size: 1rem;
  color: rgba(201, 213, 224, 0.68);
  line-height: 1.55;
}
.foot-tel a {
  font-family: "Spectral", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration-color: rgba(217, 181, 106, 0.6);
}
.foot-contact a { display: inline-flex; align-items: center; min-height: 40px; }
.foot-tel a { min-height: 44px; }

/* The address is 34 characters and the footer column is narrow on a
   phone, so it has to be allowed to break mid-word or it pushes the
   layout wide. Kept below the phone in size: calling is still the
   thing most visitors want. */
.foot-email a {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.95rem;
  overflow-wrap: break-word;
  text-decoration-color: rgba(217, 181, 106, 0.6);
  display: inline-block;
  min-height: 44px;
}

.foot-times { font-variant-numeric: tabular-nums; }
.foot-times div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 1rem;
}
.foot-times div:last-child { border-bottom: none; }
.foot-times span:first-child { color: rgba(201, 213, 224, 0.85); }
.foot-times span:last-child { color: #ffffff; white-space: nowrap; }
.foot-col .foot-fine { margin-top: 0.75rem; }

.site-footer-legal {
  max-width: var(--max-width);
  margin: 2.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(217, 181, 106, 0.18);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(201, 213, 224, 0.62);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.foot-legal-sep { color: rgba(217, 181, 106, 0.5); }

/* Still owed by Ken. Marked, but quiet enough not to dominate. */
.foot-needed {
  display: inline-block;
  border-bottom: 1px dashed rgba(217, 181, 106, 0.45);
  padding-bottom: 0.15rem;
  font-size: 1rem;
  color: rgba(201, 213, 224, 0.62);
  font-style: italic;
}

/* Content Ken has not supplied yet. Deliberately obvious so it
   cannot be mistaken for finished copy. */
.placeholder {
  border: 2px dashed var(--rule) !important;
  background: #faf8f4 !important;
  box-shadow: none !important;
  color: var(--muted);
}
.placeholder .placeholder-tag {
  display: inline-block; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--rule-soft); color: var(--ink-soft);
  padding: 0.15rem 0.5rem; border-radius: 999px; margin-bottom: 0.5rem;
}

/* ---------- Prayer ---------- */
.page-prayer .info-card {
  background: var(--light); border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow); font-size: 1rem;
}
.page-prayer .info-card h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.page-prayer .info-card p { color: var(--muted); margin-bottom: 0.8rem; }
.page-prayer .info-card ul { padding-left: 1.3rem; color: var(--muted); margin-bottom: 0.8rem; }
.page-prayer .info-card li { margin-bottom: 0.3rem; }
.page-prayer .note {
  background: var(--parchment); border-left: 3px solid var(--brass-lt);
  padding: 0.9rem 1rem; border-radius: 6px; font-size: 1rem; color: var(--muted);
}
.page-prayer .prayer-form {
  background: var(--light); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.page-prayer .prayer-form h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.page-prayer .prayer-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.page-prayer .field { margin-bottom: 1rem; }
.page-prayer .field label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem; }
.page-prayer .checkbox-field label { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.page-prayer .checkbox-field input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--navy-mid);
}
.page-prayer .checkbox-field label {
  min-height: 44px;
  padding: 0.35rem 0;
  cursor: pointer;
}
.page-prayer .checkbox-field small { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.3rem; }

/* ---------- Give ---------- */
.page-give .giving-wrapper { max-width: 44rem; margin: 0 auto; }
.page-give .step-indicator { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; }
.page-give .step-indicator .step {
  font-size: 1rem;
  color: var(--muted);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.page-give .step-indicator .step.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.page-give .giving-card {
  background: var(--light); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.page-give .giving-step { display: none; }
.page-give .giving-step.active { display: block; }
.page-give .step-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.4rem; }
.page-give .step-description { color: var(--muted); margin-bottom: 1.2rem; }
.page-give .amount-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 1.2rem; }
.page-give .amount-button {
  min-height: 48px; border-radius: 8px; border: 2px solid var(--rule); background: var(--light);
  font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--primary-dark); cursor: pointer;
}
.page-give .amount-button:hover { border-color: var(--primary); }
.page-give .amount-button.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-give .field-group { margin-bottom: 1.2rem; }
.page-give .field-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.page-give .field-note { font-size: 1rem; color: var(--muted); margin-top: 0.4rem; }
.page-give .frequency-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-give .frequency-pill {
  min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px; border: 2px solid var(--rule);
  background: var(--light); font-family: inherit; font-size: 1rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
}
.page-give .frequency-pill.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-give .summary-box { background: var(--parchment); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.page-give .summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.page-give .summary-label { color: var(--muted); }
.page-give .summary-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.page-give .secure-note { font-size: 1rem; color: var(--muted); margin-bottom: 1rem; }
.page-give .step-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.page-give .highlight-box {
  background: var(--parchment); border-left: 3px solid var(--brass-lt);
  padding: 1rem 1.2rem; border-radius: 6px; margin-bottom: 1.2rem;
}
.page-give .method-title { font-weight: 700; margin-bottom: 0.3rem; }

/* ============================================================
   7. Footer, action bar, forms
   ============================================================ */

/* ---------- Bottom action bar (phones) ----------
   The two things a visitor on a phone most needs, kept in
   thumb reach and never scrolling away. Hidden at 48rem.

   Glass, but weighted toward the navy. At half opacity the
   parchment behind desaturates straight through it and the bar goes
   grey and muddy, so the tint sits at 0.78-0.88 — the blur still
   shows the page moving underneath, but the navy stays rich.
   Each button also carries its own capsule rather than leaning on
   the bar, which is what keeps the labels safe: worst case, over a
   white card, the brass reads 7.1:1 and the navy 6.6:1. */
.site-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  padding-bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));

  background: linear-gradient(to bottom,
    rgba(20, 48, 74, 0.78),
    rgba(11, 26, 41, 0.88));
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 -14px 44px rgba(11, 26, 41, 0.28);
}

/* A brass hairline that fades out at both ends rather than ruling a
   hard line across the screen. */
.site-actions::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(to right,
    rgba(217, 181, 106, 0),
    rgba(217, 181, 106, 0.62) 22%,
    rgba(217, 181, 106, 0.62) 78%,
    rgba(217, 181, 106, 0));
}

/* Anything that cannot blur gets a solid bar rather than a
   washed-out translucent one, and the outline button gets a
   lighter fill so it still reads as a button. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-actions { background: var(--navy-deep); }
  .sa-secondary { background: rgba(217, 181, 106, 0.14); }
}

.sa-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0.5rem 0.5rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; line-height: 1.2; text-align: center;
  transition: transform 0.16s ease;
}
.sa-btn:active { transform: scale(0.975); }
@media (prefers-reduced-motion: reduce) {
  .sa-btn { transition: none; }
  .sa-btn:active { transform: none; }
}
.sa-btn:focus-visible { outline: 3px solid var(--brass-lt); outline-offset: 3px; }

/* Lit from above like a physical lozenge: a bright top edge, a
   warm shadow that sits close, and a wider soft one underneath. */
.sa-primary {
  background: linear-gradient(to bottom, #e6c98a, #cfa74f);
  color: var(--navy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(90, 62, 12, 0.2),
    0 1px 2px rgba(11, 26, 41, 0.18),
    0 6px 18px rgba(120, 86, 22, 0.26);
}
.sa-secondary {
  background: rgba(11, 26, 41, 0.7);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  color: var(--brass-lt);
  border: 1px solid rgba(217, 181, 106, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(11, 26, 41, 0.2);
}
.sa-ico { flex: none; display: block; opacity: 0.92; }

/* ---------- Forms ----------
   Nothing below 16px: anything smaller makes iOS Safari zoom
   the page when the field is tapped. */
input, textarea, select, .giving-input, .giving-select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--light);
  color: var(--text);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, textarea:focus, select:focus,
.giving-input:focus, .giving-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(125, 90, 26, 0.28);
}
input[type="checkbox"] { width: auto; min-height: 0; }

button { font-family: inherit; }
button[disabled], .btn-primary[disabled] {
  opacity: 0.55; cursor: not-allowed; filter: grayscale(35%);
  transform: none; box-shadow: none;
}

/* A feature that cannot do what it appears to do, said up front
   rather than discovered after filling it in. */
.not-live-notice {
  background: #f7efdc; border: 1px solid #e0cea1; border-left: 3px solid var(--brass);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; margin: 0 auto 1.75rem;
  max-width: 46rem; font-size: 1.02rem; line-height: 1.65; color: #4a3c1d;
}
.not-live-notice strong { color: #3a2f14; }
.not-live-notice p { margin: 0 0 0.5rem; }
.not-live-notice p:last-child { margin: 0; }


/* ---------- Header logo is the way home ----------
   Making it a link freed a whole nav slot. */
a.nav-left { text-decoration: none; color: inherit; }
a.nav-left:focus-visible { outline: 3px solid var(--nb-gold); outline-offset: 3px; border-radius: 6px; }
.nav-church-name, .nav-church-location { display: block; }

/* ---------- Visit ---------- */
.visit-subhead { margin-top: 2rem; }
.visit-subhead.centered, h2.centered { text-align: center; }
.visit-address { color: var(--muted); }
.map-frame { border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.map-frame iframe { display: block; }
.visit-directions { margin-top: 1rem; width: 100%; }
.expect-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.expect-card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; color: var(--navy); }
.expect-card p:last-child { margin-bottom: 0; }
/* The one answer we do not have. Marked, but written as an invitation to
   call rather than as a gap in the page. */
.expect-unknown {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rule);
  font-size: 1rem;
  color: var(--ink-soft);
}
.visit-cta {
  text-align: center;
  max-width: 40rem;
  margin: 2.5rem auto 0;
  color: var(--muted);
}
.visit-cta a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }

.visit-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  margin-bottom: 2rem;
}
.visit-photo img { width: 100%; height: auto; display: block; }
.visit-photo figcaption {
  background: var(--navy);
  color: var(--on-navy);
  font-size: 0.95rem;
  padding: 0.85rem 1.1rem;
  text-align: center;
}

/* ---------- About ---------- */
.pastor-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
.pastor-photo {
  border-radius: var(--radius);
  padding: 2rem 1.25rem;
  text-align: center;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.pastor-text { background: var(--light); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.pastor-label {
  font-size: 0.74rem; font-weight: 700; color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 0.2rem;
}
.pastor-text h2 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.pastor-text p { color: var(--muted); margin-bottom: 0.7rem; }
.pastor-todo {
  border-left: 3px dashed var(--rule);
  padding-left: 0.9rem;
  font-style: italic;
}
.about-body { max-width: 42rem; margin: 0 auto 2.5rem; }
.about-body h2 { margin-bottom: 0.9rem; text-align: center; }
.about-body h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--brass);
  margin: 0.9rem auto 1.4rem;
}
.about-body p { color: var(--muted); margin-bottom: 0.9rem; }

/* ---------- Ministries hub ---------- */
.ministry-links { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.ministry-link {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--brass-lt);
  padding: 1.2rem 1.4rem;
  min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ministry-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-left-color: var(--brass); }
.ministry-link:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.ministry-link-label {
  display: block; font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy);
}
.ministry-link-label::after { content: " \2192"; }
.ministry-link-sub { display: block; font-size: 1rem; color: var(--ink-soft); margin-top: 0.25rem; }

/* ---------- Sermons / Watch ---------- */
.sermon-note { text-align: left; margin: 0 0 0.75rem; }
.sermon-archive { margin-top: 4rem; }
.sermon-archive > h2 { text-align: center; margin-bottom: 1rem; }
.video-frame {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.video-frame iframe { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; }
.embed-slot {
  background: var(--parchment);
  border: 2px dashed var(--rule);
  border-radius: 8px;
  padding: 0.9rem;
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.embed-slot:last-child { margin-bottom: 0; }
.archive-footnote { margin-top: 2rem; }

/* ---------- Small utilities that were inline attributes ---------- */
.note-small { font-size: 1rem; color: var(--muted); margin-top: 0.6rem; }
.link-strong { color: var(--primary); font-weight: 600; }
.unit-suffix { font-size: 1rem; }
.redirect-main { padding: 4rem 1.25rem; text-align: center; }

/* ---------- "We're live" banner ----------
   Injected by site.js only while a service is actually on. */
.live-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding: 0.85rem 1.25rem;
  background: #7a1f1f;
  color: #ffe9e5;
  font-size: 1rem;
  line-height: 1.4;
}
.live-banner strong { color: #ffffff; font-weight: 600; }
.live-text { flex: 1 1 12rem; }
.live-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: #ff6b57; flex: none;
  box-shadow: 0 0 0 0 rgba(255, 107, 87, 0.75);
  animation: livePulse 2s ease-out infinite;
}
@keyframes livePulse {
  70%  { box-shadow: 0 0 0 0.65rem rgba(255, 107, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 87, 0); }
}
.live-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  background: #ffffff;
  color: #7a1f1f;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.live-cta:hover { background: #ffe9e5; color: #5e1616; }
.live-cta:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

@media (min-width: 40rem) {
  .live-banner { justify-content: center; padding: 0.9rem 2rem; }
  .live-text { flex: 0 1 auto; }
}
/* a pulsing dot is decoration, not information */
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- Facebook ---------- */
.fb-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
}
.fb-glyph { flex: none; }
.site-footer .fb-link { color: #ffffff; }
.site-footer .fb-link:hover { color: var(--brass-lt); }

.fb-feed {
  max-width: 46rem;
  margin: 0 auto 1rem;
  text-align: center;
}
.fb-feed-frame {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 8rem;
  display: flex;
  justify-content: center;
}
.fb-feed-frame iframe { display: block; border: none; }
.fb-feed-fallback {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}

/* A live stream is the one thing worth interrupting the page for */
.watch-live {
  display: grid;
  gap: 1rem;
  align-items: center;
  background: var(--navy);
  border-radius: var(--radius);
  border-left: 3px solid var(--brass-lt);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  color: var(--on-navy);
}
.watch-live h2 { color: #ffffff; margin-bottom: 0.3rem; }
.watch-live p { color: var(--on-navy); margin: 0; }
.watch-live .btn-primary { background: var(--brass-lt); color: var(--navy); justify-self: start; }
.watch-live .btn-primary:hover { background: #e8c883; }

/* ---------- Calendar ---------- */
.fc { font-size: 1rem; }
.fc .fc-toolbar { flex-wrap: wrap; gap: 0.5rem; }
.fc .fc-toolbar-title { font-size: 1.15rem; }
.fc .fc-button { font-size: 0.9rem; padding: 0.4rem 0.7rem; min-height: 44px; }

/* ============================================================
   8. WIDER SCREENS
   Everything above is the phone layout. These blocks add to it.
   ============================================================ */

@media (min-width: 40rem) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  main { padding: 3rem 0 4rem; }

  .three-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .site-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .site-footer { padding: 2.75rem 2rem 1.75rem; }

  .page-index .values-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .page-teens .times-grid,
  .page-teens .two-up,
  .page-missions .missions-grid,
  .page-missions .involved-layout { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  .page-ministries .feature-block { grid-template-columns: auto 1fr; gap: 1.75rem; padding: 1.75rem; }
  .page-ministries .feature-time {
    text-align: center; padding-right: 1.5rem; padding-bottom: 0;
    border-right: 1px solid var(--rule-soft); border-bottom: none; min-width: 9rem;
  }

  .page-prayer .prayer-grid { grid-template-columns: 1fr 1fr; }
  .give-ways { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .expect-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .fund-list li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 2rem; }
  .fund-list span { text-align: right; }
  .watch-live { grid-template-columns: 1fr auto; gap: 1.5rem; padding: 1.75rem 2rem; }
  .watch-live .btn-primary { justify-self: end; }
  .pastor-block:has(.pastor-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; }
  .ministry-links { grid-template-columns: 1fr 1fr; }
  .visit-directions { width: auto; }
  .page-give .step-indicator { flex-direction: row; }
  .page-give .step-indicator .step { flex: 1; text-align: center; }
  .page-give .amount-buttons { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 48rem) {
  /* Above phone width the same details sit in the header and
     footer, where there is room for them. */
  .site-actions { display: none; }
  body { padding-bottom: 0; }
}

@media (min-width: 64rem) {
  .nav { flex-wrap: nowrap; gap: 0 2rem; padding-block: 1.3rem; }
  .nav-left { flex: 0 0 auto; }
  .nav-church-name { font-size: 1.3rem; }
  .nav-church-location { font-size: 0.62rem; }
  .nav-links {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 0 1.6rem;
    font-size: 0.74rem;
    padding-left: 2rem;
    border-left: 1px solid rgba(217, 181, 106, 0.22);
  }
  .nav-easy-toggle { margin-left: 1.5rem; padding: 0 1rem; }
  .ev-label { display: inline; }

  .two-column { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

  .page-index .hero {
    padding: 4rem 0 3rem;
    background-image:
      linear-gradient(100deg, rgba(18, 41, 63, 0.93) 0%, rgba(18, 41, 63, 0.84) 42%, rgba(18, 41, 63, 0.52) 100%),
      url("images/church-1600.jpg");
    background-position: center 45%;
  }
  .page-index .hero-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "lede card" "rest card";
    gap: 0 3rem;
    align-items: start;
  }
  .page-index .hero-lede { grid-area: lede; align-self: end; }
  .page-index .hero-rest { grid-area: rest; align-self: start; }
  .page-index .hero-card { grid-area: card; align-self: center; margin-block: 1rem; }
  .page-index .hero-card { padding-top: 3.5rem; }
  .page-index .about-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; }
  .page-index .welcome h2 { font-size: 2rem; }

  .site-footer-inner { grid-template-columns: 1.4fr 1.1fr 1fr 1fr; gap: 3rem; }
}

/* ---------- Motion ----------
   The fade-ins start at opacity:0, so anything that stops the
   animation leaves a blank page. Force them visible. */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1 !important; animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
