/* =====================================================================
   Calvary Road Baptist Church  |  shared styles for every page
   Design brief: deep spruce green + antique brass + warm ivory,
   Playfair Display + Inter, three-crosses ornament + underline motif,
   brand-panel hero, banded rhythm, squared cards.
   ===================================================================== */

:root {
  color-scheme: light only;              /* light-mode lock (see @media dark below) */

  --primary:       #26413a;   /* deep spruce green: header, footer, headings */
  --primary-dark:  #1b2f2a;   /* footer, hovers */
  --primary-light: #35564c;   /* lighter green for accents on dark */
  --accent:        #b0863c;   /* antique brass: rules, icons, ornaments */
  --accent-deep:   #8a6631;   /* brass darkened enough for text on white (AA) */
  --base-tint:     #f5f2ea;   /* warm ivory: alternating sections */
  --warm:          #ece5d6;   /* deeper warm for borders/bands */
  --text:          #2a2a27;
  --text-light:    #5c574e;
  --white:         #ffffff;
  --line:          #e4ddce;   /* hairline dividers on light */

  --radius: 4px;              /* squared/traditional */
  --maxw: 1120px;
  --shadow: 0 1px 3px rgba(27,47,42,0.06), 0 6px 24px rgba(27,47,42,0.06);
  --shadow-lg: 0 10px 40px rgba(27,47,42,0.14);
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--primary); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- sections & rhythm (banded) ---------- */
.section { padding: 64px 0; }
.section-alt { background: var(--base-tint); }
.section-dark { background: var(--primary); color: #eef1ee; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
@media (max-width: 700px){ .section { padding: 44px 0; } }

/* section header: three-cross ornament + heading + brass underline rule */
.section-header { text-align: center; margin-bottom: 40px; }
.section-header .ornament { width: 58px; height: auto; margin: 0 auto 12px; display: block; fill: var(--accent); }
.section-dark .section-header .ornament { fill: var(--accent); }
.section-header h2 { margin-bottom: 14px; }
.section-header .rule { width: 66px; height: 3px; background: var(--accent); margin: 0 auto; border: 0; }
.section-header p { max-width: 640px; margin: 16px auto 0; color: var(--text-light); }
.section-dark .section-header p { color: #cdd6d1; }
.eyebrow { display:none; } /* intentionally unused: motif is ornament+rule, not an eyebrow label */

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius); font-family: var(--font-body);
  font-weight: 600; font-size: .98rem; letter-spacing: .01em; cursor: pointer;
  border: 2px solid transparent; transition: background .18s, color .18s, border-color .18s; min-width: 172px; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #23200f; border-color: var(--accent); }
.btn-accent:hover { background: #c79a4c; border-color: #c79a4c; }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn-outline-light:hover { background: #fff; color: var(--primary); }

/* ---------- header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--primary);
  box-shadow: 0 2px 14px rgba(0,0,0,.18); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 46px; width: auto; }
.brand .brand-txt { display: none; } /* wordmark is in the logo image */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a { color: #eaeee9; font-weight: 500; font-size: .96rem; padding: 9px 13px; border-radius: var(--radius);
  letter-spacing: .01em; }
.main-nav a:hover { background: rgba(255,255,255,.10); text-decoration: none; color: #fff; }
.main-nav a.active { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.main-nav .btn { min-width: 0; padding: 9px 18px; margin-left: 8px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2.5px; background: #fff; margin: 5px 0; transition: .2s; border-radius: 2px; }

/* mobile nav overlay */
.mobile-nav { position: fixed; inset: 0; background: var(--primary); z-index: 200;
  transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column;
  padding: 24px; overflow-y: auto; }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav .mn-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.mobile-nav .mn-top img { height: 42px; }
.mobile-nav .mn-close { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.mobile-nav a { color: #eaeee9; font-size: 1.25rem; font-family: var(--font-head); padding: 14px 6px;
  border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-nav a:hover { color: #fff; text-decoration: none; }
.mobile-nav .btn { margin-top: 22px; width: 100%; color: #23200f !important; }

@media (max-width: 940px){
  .main-nav { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- hero (brand panel) ---------- */
.hero { position: relative; background:
    linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; text-align: center; overflow: hidden; }
.hero::after { /* faint emblem watermark */
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 420px; height: 420px;
  background: url('img/emblem-white.png') no-repeat center/contain; opacity: .05; pointer-events: none; }
.hero .container { position: relative; z-index: 1; padding-top: 84px; padding-bottom: 84px; }
.hero .kicker { color: var(--accent); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-size: .82rem; margin-bottom: 18px; }
.hero h1 { color: #fff; max-width: 15ch; margin: 0 auto .5rem; }
.hero .lead { font-size: 1.2rem; color: #d9e0db; max-width: 620px; margin: 12px auto 30px; }
.hero .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 700px){ .hero .container { padding-top: 56px; padding-bottom: 56px; } .hero::after{ width:280px;height:280px; } }

/* ---------- service strip ---------- */
.service-strip { background: var(--accent); color: #241f10; }
.service-strip .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; padding: 16px 24px; }
.service-strip .svc { display: flex; align-items: baseline; gap: 8px; font-size: .96rem; }
.service-strip .svc b { font-family: var(--font-head); font-size: 1.05rem; }
.service-strip .svc .t { font-weight: 700; }

/* verse banner with the world map behind it (Great Commission section).
   Subtle treatment: map clearly visible under a 45% brand-green scrim. */
.verse-map {
  position: relative;
  background-image: url('img/world-map.jpg');
  background-size: cover;
  background-position: center;
}
.verse-map::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(27,47,42,0.45);
}
.verse-map > .container { position: relative; z-index: 1; }

/* ---------- generic layout helpers ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two-col.narrow-gap { gap: 32px; }
@media (max-width: 860px){ .two-col { grid-template-columns: 1fr; gap: 28px; } }
.media-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
/* opt-in: let the photo overhang the container on the right so it grows in both
   directions at its true aspect ratio. No cropping. It stops short of the screen
   edge, keeping the frame's border and radius intact on all four sides.

   Two constraints govern this, and both are measured rather than guessed:

   1. The text column is what sets the row height, since it is always the taller
      of the two. Squeeze the copy below 445px and it rewraps to an extra line,
      and THAT is what would lengthen the page. Measured at 1280px wide, 445px
      holds the paragraph at 483px tall while 440px pushes it to 511px. The
      460px here is that boundary plus margin for font-rendering differences.
   2. The 850px cap keeps the photo shorter than the 460px text column
      (850 / 1.7768 = 478, against a 483px column). 860px was tried first and
      made the photo 484px, one pixel taller than the text, which handed it the
      row height and grew the page by 2px at 1920. The few px of headroom also
      absorbs font-rendering differences. On very wide screens it stops growing.

   The container's max-width and padding are overridden here so the row can span
   the full width, then a first column reproduces the container's left gutter so
   the copy still lines up with every other section. The gutter is derived from
   `100%` of a full-width block, deliberately NOT 100vw: vw includes the
   scrollbar, which would push a few pixels of horizontal overflow onto Windows.

   Gated at the container's own max-width. Below it there is no slack to
   redistribute and the layout falls back to the plain two-column split. */
@media (min-width: 1120px) {
  .two-col.media-fill {
    max-width: none;
    padding: 0;
    gap: 0;
    /* the 24px floor is the container's own padding: right at the breakpoint the
       scrollbar makes the layout narrower than the media query's viewport width,
       so the derived gutter comes up ~7px short and the copy visibly loses its
       alignment with every other section. */
    --gutter: max(24px, calc((100% - 1072px) / 2));
    /* gutter | text | gap | photo | breathing room.
       The photo overhangs the container by half the gutter and keeps the other
       half as space, so it reads as deliberate at every screen size rather than
       running off the edge. 32px gap rather than the usual 48px pulls it nearer
       the copy. */
    grid-template-columns: var(--gutter) 460px 32px 1fr max(24px, calc(var(--gutter) / 2));
  }
  .two-col.media-fill > :first-child { grid-column: 2; }
  .two-col.media-fill > .media-frame {
    grid-column: 4;
    justify-self: end;
    width: 100%;
    max-width: 850px;
  }
}
.lead-text { font-size: 1.12rem; }
.text-center { text-align: center; }
.mt-btn { margin-top: 18px; }

/* ---------- cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card h3 { color: var(--primary); margin-bottom: .4rem; }

/* Illustration band at the top of a card. Bleeds to the card's edges by cancelling
   the .card padding (26px), so it must stay in step with that value. Used by the
   six Ministries cards on about.html. The heading stays in the HTML as real text;
   the band carries no wording of its own, so its alt is empty by design. */
.card > .card-media { display: block; width: calc(100% + 52px); max-width: none; height: auto;
  margin: -26px -26px 18px; border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; }
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 860px){ .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* schedule / events */
.event-item { display: flex; gap: 16px; align-items: flex-start; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.day-badge { flex: 0 0 auto; background: var(--primary); color:#fff; border-radius: var(--radius);
  text-align:center; padding: 8px 12px; min-width: 64px; }
.day-badge .d { font-family: var(--font-head); font-size: 1.05rem; font-weight:700; display:block; }
.day-badge .t { font-size: .72rem; opacity:.85; }
.event-item h4 { margin: 0 0 3px; font-family: var(--font-body); font-weight: 700; color: var(--primary); font-size: 1.02rem; }
.event-item p { margin: 0; color: var(--text-light); font-size: .93rem; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.gallery img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius); border:1px solid var(--line); }
@media (max-width: 860px){ .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .gallery { grid-template-columns: 1fr; } .gallery img { height: 220px; } }

/* ---------- pastor ---------- */
.pastor-photo { max-width: 340px; width: 100%; margin: 0 auto; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); }

/* ---------- verse pills (beliefs / gospel) ---------- */
.scripture { display: inline-block; background: var(--base-tint); border: 1px solid var(--warm);
  color: var(--accent-deep); font-weight: 600; font-size: .84rem; padding: 3px 10px; border-radius: 999px;
  margin: 3px 5px 3px 0; cursor: pointer; transition: background .15s; }
.scripture:hover, .scripture.verse-active { background: var(--accent); color: #241f10; border-color: var(--accent); }
.verse-expanded { background: var(--base-tint); border-left: 3px solid var(--accent); padding: 12px 16px;
  margin: 8px 0 12px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; color: var(--text); }
.verse-expanded strong { color: var(--accent-deep); }

/* ---------- beliefs accordion ---------- */
.doctrine { background:#fff; border:1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; box-shadow: var(--shadow); overflow:hidden; }
.doctrine > button { width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:14px; padding: 18px 20px; font-family: var(--font-head);
  font-size: 1.15rem; color: var(--primary); font-weight:700; }
.doctrine > button .ico { flex:0 0 auto; width:40px;height:40px; background: var(--primary); border-radius: var(--radius);
  display:grid; place-items:center; }
.doctrine > button .ico svg { width:22px;height:22px; stroke:#fff; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.doctrine > button .chev { margin-left:auto; transition: transform .2s; color: var(--accent-deep); font-size:1.3rem; }
.doctrine.open > button .chev { transform: rotate(180deg); }
.doctrine .body { display:none; padding: 0 20px 20px 74px; }
.doctrine.open .body { display:block; }
.doctrine .body p { color: var(--text); }
.doctrine .body .refs { margin-top: 6px; }

/* ---------- gospel steps ---------- */
.gstep { background:#fff; border:1px solid var(--line); border-left: 5px solid var(--primary); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow); margin-bottom: 18px; }
.gstep .sub { text-transform: uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700; color: var(--accent-deep); }
.gstep h3 { margin: 4px 0 8px; font-size: 1.5rem; }
.gstep.step-sin { border-left-color: #a83b2f; }
.gstep.step-penalty { border-left-color: #6b6f72; }
.gstep.step-payment { border-left-color: var(--primary); }
.gstep.step-decision { border-left-color: #2f7d55; }

/* callout / CTA card (protected against dark override) */
.cta-card { background: var(--primary); color:#fff; border-radius: var(--radius); padding: 40px; text-align:center; }
.cta-card h2, .cta-card h3 { color:#fff; }
.cta-card p { color:#d9e0db; max-width: 560px; margin: 0 auto 22px; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* info list (contact / visit) */
.info-list { list-style:none; padding:0; margin:0; }
.info-list li { display:flex; gap:14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list .ic { flex:0 0 auto; width:22px; color: var(--accent-deep); }
.info-list a { color: var(--primary); font-weight:600; }

/* map */
.map-frame { width:100%; aspect-ratio: 16/9; border:0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* video / boxcast */
.video-wrap { width:100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); background:#000; border:1px solid var(--line); }
.video-wrap iframe { width:100%; height:100%; border:0; }

/* forms (static: mailto-based; see note in visit.html) */
.form-note { background: var(--base-tint); border:1px solid var(--warm); border-radius: var(--radius); padding: 14px 18px; font-size:.9rem; color: var(--text-light); }
label { display:block; font-weight:600; font-size:.9rem; margin: 12px 0 5px; color: var(--primary); }
input[type=text], input[type=email], textarea { width:100%; padding: 11px 13px; border:1px solid var(--line);
  border-radius: var(--radius); font-family: var(--font-body); font-size:1rem; background:#fff; color: var(--text); }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* ---------- footer ---------- */
.site-footer { background: var(--primary-dark); color: #c4ccc6; padding: 52px 0 26px; }
.site-footer .cols { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer img.f-logo { height: 60px; margin-bottom: 14px; }
.site-footer h4 { color:#fff; font-family: var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; }
.site-footer a { color:#c4ccc6; }
.site-footer a:hover { color:#fff; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom: 9px; font-size:.94rem; }
.site-footer .socials { display:flex; gap:12px; margin-top:14px; }
.site-footer .socials a { width:38px;height:38px; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius);
  display:grid; place-items:center; }
.site-footer .socials svg { width:18px;height:18px; fill:#c4ccc6; }
.site-footer .socials a:hover { background: rgba(255,255,255,.1); }
.footer-base { border-top:1px solid rgba(255,255,255,.14); margin-top: 36px; padding-top: 20px; font-size:.84rem; color:#9aa39c; text-align:center; }
@media (max-width: 780px){ .site-footer .cols { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- fade-up ---------- */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Light-mode lock: force backgrounds back to light where a phone browser
   would auto-invert. Extend selectors if new bg classes are added.
   ===================================================================== */
@media (prefers-color-scheme: dark){
  html, body { background: #ffffff !important; color: #2a2a27 !important; }
  .section-alt { background: var(--base-tint) !important; }
  .card, .event-item, .doctrine, .gstep, .form-note { background:#fff !important; }
  .section, .gallery img { background: #fff; }
  /* elements meant to stay dark keep their green explicitly */
  .site-header { background: var(--primary) !important; }
  .hero { background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color:#fff !important; }
  .section-dark, .cta-card, .day-badge, .doctrine > button .ico { background: var(--primary) !important; }
  .section-dark { color:#eef1ee !important; }
  /* the shorthand above would strip the map; re-assert it so the verse banner keeps its image */
  .verse-map { background-image: url('img/world-map.jpg') !important;
               background-size: cover !important; background-position: center !important; }
  .service-strip { background: var(--accent) !important; color:#241f10 !important; }
  .site-footer { background: var(--primary-dark) !important; }
  .mobile-nav { background: var(--primary) !important; }
  input, textarea { background:#fff !important; color:#2a2a27 !important; }
}


/* --------------------------------------------------------------------------
   Footer link tap targets (added 2026-08-06 after a rendered audit).
   Footer links measured 17-36px tall against the 44px minimum that both Apple
   and Google publish, so a fingertip overlapped the neighbouring link. Padding
   only: the text size is unchanged, and this is scoped to phones so desktop
   footer density stays exactly as it was.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  footer .cols a, footer .info-list a { padding-top: 11px; padding-bottom: 11px; }
}