@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --navy:#173B7A;
  --navy-deep:#0C1B3D;
  --navy-mid:#24448F;
  --red:#8F1B1F;
  --red-bright:#C8272C;
  --gold:#C8272C;
  --gold-pale:#F8E4E4;
  /* True gold accent (2026 facelift) - the existing --gold variable above is
     actually mapped to the red brand color and drives every CTA button, so
     it's left exactly as-is everywhere it's already used (buttons, nav CTA
     pulse, etc.) rather than risk re-coloring every call-on-action site
     ricochet. This is a SEPARATE, genuinely gold tone for the warmer,
     Parish-Church-style trim the facelift asked for - thin rules, icon
     accents, the hero eyebrow, spotlight/footer touches - layered in
     alongside the navy/red identity rather than replacing it. */
  --gold-true:#C9A227;
  --gold-true-bright:#E4C25A;
  --cream:#F3F6FC;
  --paper:#FFFFFF;
  --ink:#161B2B;
  --ink-soft:#545B6E;
  --line:#DCE3F0;
  --radius:4px;
  --container:1180px;
  --shadow-sm: 0 1px 3px rgba(12,27,61,0.06), 0 8px 20px -12px rgba(12,27,61,0.18);
  --shadow-md: 0 4px 10px rgba(12,27,61,0.08), 0 20px 40px -20px rgba(12,27,61,0.28);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Source Sans 3', -apple-system, "Segoe UI", Arial, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
}
h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, serif;
  color:var(--navy-deep);
  margin:0 0 0.5em;
  line-height:1.2;
}
h1{ font-size:clamp(32px,5vw,54px); font-weight:800; }
h2{ font-size:clamp(26px,3.4vw,36px); font-weight:700; }
h3{ font-size:20px; font-weight:700; }
p{ margin:0 0 1em; color:var(--ink-soft); }
ul, ol{ margin:0 0 1em; padding-left:1.3em; color:var(--ink-soft); }
ul li, ol li{ margin-bottom:8px; }
a{ color:var(--navy); text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius); font-weight:700; font-size:15px;
  border:none; cursor:pointer; text-decoration:none; transition:all .15s;
  position:relative; background-image:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 55%);
  background-blend-mode:overlay;
}
.btn:active{ transform:translateY(1px) !important; box-shadow:0 2px 6px -2px rgba(0,0,0,0.4) !important; }
.btn-primary{ background-color:var(--red-bright); color:#fff; box-shadow:0 6px 16px -6px rgba(200,39,44,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-primary:hover{ background-color:var(--red); box-shadow:0 8px 20px -6px rgba(200,39,44,0.65), inset 0 1px 0 rgba(255,255,255,0.25); transform:translateY(-1px); }
.btn-gold{ background-color:var(--gold); color:#fff; box-shadow:0 6px 16px -6px rgba(200,39,44,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-gold:hover{ background-color:var(--red); box-shadow:0 8px 20px -6px rgba(200,39,44,0.65), inset 0 1px 0 rgba(255,255,255,0.25); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.6); }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.btn-outline-navy{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }
.btn-cms{
  background:var(--red-bright); color:#fff; padding:9px 12px; border-radius:20px;
  font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  box-shadow:0 4px 12px -4px rgba(200,39,44,0.5);
}
.btn-cms:hover{ background:var(--red); }

/* ---------- Announcement bar ---------- */
.announce{
  background:#FFFFFF; color:var(--navy-deep); text-align:center;
  font-size:13.5px; font-weight:700; padding:9px 16px;
  border-bottom:1px solid var(--line);
}
.announce a{ color:var(--red-bright); text-decoration:underline; }

/* ---------- Header ---------- */
header.site-header{
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 20px -8px rgba(12,27,61,0.12);
}
/* Header width is intentionally decoupled from --container (1180px, used
   for page content sections) - a header needs more lateral room than a
   paragraph does, and widening just this row is what lets the nav sit on
   a single line instead of wrapping. */
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:14px; max-width:1360px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:13px; color:var(--navy-deep); flex-shrink:0; }
.brand img{
  width:54px; height:54px; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(12,27,61,0.18));
}
.brand .lockup{ display:flex; flex-direction:column; line-height:1.18; }
/* Wordmark weight (2026): Playfair Display at 700 still reads thin at this
   size because of the typeface's high-contrast strokes - bumping to the
   800 cut (already loaded above) and tightening tracking slightly gives
   the name real presence instead of looking like default body text. */
.brand .lockup .n1{ font-family:'Playfair Display',serif; font-weight:800; font-size:20.5px; letter-spacing:-0.01em; color:var(--navy-deep); }
.brand .lockup .n2{ font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--red-bright); font-weight:800; margin-top:3px; }

/* Nav consolidation (2026): the old menu had 11-12 top-level items and
   always wrapped into 2-3 rows no matter how the labels were sized,
   burying the brand lockup under a wall of nav text. Regrouped into six
   top-level entries (Home / About Us / Ministries / 40th Anniv. /
   Resources / Become a Member) with the smaller, situational links folded
   into dropdowns (Give Online and Diaspora now live under Resources -
   Diaspora's own hub page still has its full sub-nav), so the whole menu
   reliably fits on one row and the crest + church name can actually stand
   out instead of competing with a dense multi-row list beside them. */
nav.main-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
nav.main-nav > .nav-item{ position:relative; }
/* On a wrapped multi-row menu, every nav-item is itself position:relative
   (needed so its own dropdown can anchor to it), which makes them all
   equally "positioned" elements - with no z-index set, later items in the
   DOM (e.g. the "Watch Live"/"Media" row) paint OVER an earlier item's open
   dropdown (e.g. "40th Anniversary", one row up) instead of the dropdown
   sitting on top of them, because they come after it in source order. Lift
   an item above its siblings only while its dropdown is actually open, so
   the popup - and the text inside it - is never hidden behind later rows. */
nav.main-nav > .nav-item:hover, nav.main-nav > .nav-item:focus-within{ z-index:20; }
nav.main-nav > .nav-item > a, nav.main-nav > .nav-item > button{
  background:none; border:none; color:var(--navy-deep); font-family:inherit;
  font-size:14.5px; font-weight:700; padding:11px 7px; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap; position:relative;
}
nav.main-nav > .nav-item:not(.nav-cta) > a::after, nav.main-nav > .nav-item > button::after{
  content:""; position:absolute; left:8px; right:8px; bottom:4px; height:2px;
  background:var(--gold-true); transform:scaleX(0); transform-origin:center; transition:transform .18s;
}
nav.main-nav > .nav-item > a:hover, nav.main-nav > .nav-item > button:hover{ color:var(--red-bright); }
nav.main-nav > .nav-item:not(.nav-cta) > a:hover::after, nav.main-nav > .nav-item > button:hover::after,
nav.main-nav > .nav-item.active:not(.nav-cta) > a::after{ transform:scaleX(1); }
nav.main-nav > .nav-item.active > a{ color:var(--red-bright); }
/* Lighter weight + reduced opacity than the label next to it, so the caret
   reads as a secondary "this opens a menu" hint instead of competing with
   the item's own text for attention. */
.caret{ font-size:11px; margin-top:1px; font-weight:400; opacity:0.55; }
.dropdown{
  position:absolute; top:100%; left:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); min-width:210px; padding:8px; box-shadow:0 14px 30px -10px rgba(0,0,0,0.35);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:all .15s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:10px 14px; border-radius:3px; color:var(--ink); font-size:15px; font-weight:600; }
.dropdown a:hover{ background:var(--cream); color:var(--navy); }

.header-actions{ display:flex; align-items:center; gap:8px; }
.search-form{ display:flex; align-items:center; background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:6px 6px 6px 12px; }
.search-form input{ background:none; border:none; color:var(--ink); font-size:13px; width:64px; }
.search-form input::placeholder{ color:var(--ink-soft); }
.search-form button{ background:var(--red-bright); border:none; color:#fff; border-radius:50%; width:26px; height:26px; cursor:pointer; font-size:13px; }
.nav-toggle{ display:none; background:none; border:none; color:var(--navy-deep); font-size:22px; cursor:pointer; }

/* On medium desktop widths the six-item nav + Become a Member + search +
   staff login no longer all fit on one row; the search box is the most
   dispensable of the four (a visitor can still reach it via the mobile
   menu below 980px, or Google directly), so drop it first to keep the
   nav itself on a single line longer before falling back to the
   hamburger menu. */
@media (max-width: 1320px){
  .search-form{ display:none; }
}

@media (max-width: 980px){
  nav.main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:10px; border-top:1px solid var(--line); box-shadow:0 12px 24px -8px rgba(12,27,61,0.15); }
  nav.main-nav.open{ display:flex; }
  nav.main-nav > .nav-item{ width:100%; }
  nav.main-nav > .nav-item > a, nav.main-nav > .nav-item > button{ width:100%; justify-content:space-between; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; border:none; background:var(--cream); }
  .nav-item.open .dropdown{ display:block; }
  .search-form{ display:none; }
  .nav-toggle{ display:block; }
  .header-actions .btn-cms{ display:none; }
  /* The brand lockup was sized for the roomy single-row desktop nav and
     never scaled back down for phones, where it's the ONLY thing sharing
     the row with the hamburger button - at anything under ~380px wide it
     was wider than the viewport itself and forced the whole page to
     scroll sideways. Scale it down whenever the hamburger menu is in
     play, with a further step down for the smallest phones. */
  .header-inner{ padding:12px 14px; gap:10px; }
  .brand{ gap:9px; }
  .brand img{ width:38px; height:38px; }
  .brand .lockup .n1{ font-size:16px; letter-spacing:-0.005em; }
  .brand .lockup .n2{ font-size:9px; letter-spacing:1px; }
}

@media (max-width: 380px){
  .brand img{ width:32px; height:32px; }
  .brand .lockup .n1{ font-size:13.5px; }
  .brand .lockup .n2{ font-size:8px; letter-spacing:0.7px; }
}

/* ---------- Hero ----------
   2026 facelift: taller, more cinematic treatment (closer to a full-bleed
   "stage" hero) - near-viewport-height with the content vertically
   centered, a radial vignette layered under the existing top-to-bottom
   wash for more depth. The countdown card
   moves OUT of the vertical center (it used to sit stacked above the
   headline, competing with it) into the already-defined corner badge
   position (see .countdown-card-corner) so the headline has the hero's
   full visual weight, the way a large stage photo with simple centered
   type does. */
.hero{
  color:#fff; padding:150px 24px 110px; text-align:center; position:relative; overflow:hidden;
  min-height:86vh; display:flex; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:-2%; z-index:0;
  background-image:url('/assets/hero-crusade.jpg');
  background-size:cover; background-position:center 38%;
  animation:heroKenBurns 16s ease-in-out infinite alternate;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(12,27,61,0.38) 0%, rgba(12,27,61,0.72) 68%, rgba(12,27,61,0.92) 100%),
    linear-gradient(180deg, rgba(12,27,61,0.82) 0%, rgba(12,27,61,0.62) 40%, rgba(12,27,61,0.9) 100%);
}
.hero .container{ position:relative; z-index:2; width:100%; padding-top:150px; }
@keyframes heroKenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1%,-1%); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; }
}
@media (max-width:640px){
  .hero{ padding:128px 20px 90px; min-height:auto; }
}

/* Reusable slow zoom/pan effect for photos elsewhere on the site */
.photo-kenburns-wrap{ overflow:hidden; display:block; }
.photo-kenburns{ display:block; width:100%; height:100%; object-fit:cover; animation:kenBurnsImg 11s ease-in-out infinite alternate; }
@keyframes kenBurnsImg{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.14) translate(-2%,-1%); }
}
@media (prefers-reduced-motion: reduce){
  .photo-kenburns{ animation:none; }
}
.hero .eyebrow{ color:var(--gold-true-bright); text-transform:uppercase; letter-spacing:3px; font-size:13px; font-weight:700; margin-bottom:14px; opacity:0.95; }
.hero h1{ color:#fff; max-width:900px; margin:0 auto 20px; font-size:clamp(38px,6.4vw,68px); }
.hero p.lead{ color:rgba(255,255,255,0.82); max-width:600px; margin:0 auto 36px; font-size:18px; }
.hero .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Countdown card ---------- */
.countdown-card{
  background:linear-gradient(160deg, #142B5C 0%, var(--navy-deep) 100%);
  border-radius:16px; padding:22px 30px; display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  box-shadow:0 24px 48px -16px rgba(12,27,61,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
}
.countdown-card-corner{
  position:absolute; top:28px; left:28px; z-index:3;
  flex-direction:row; align-items:center; gap:22px;
  padding:18px 26px; max-width:none;
  border-top:2px solid var(--gold-true);
}
.countdown-card-corner .countdown-timer{ gap:16px; }
.countdown-card-corner .cd-num{ font-size:24px; }
.countdown-card-corner .countdown-label{ max-width:130px; }
@media (max-width:860px){
  .hero .container{ padding-top:0; }
  .countdown-card-corner{
    position:static; margin:0 auto 32px; max-width:460px;
    flex-direction:row; align-items:center; text-align:left;
  }
}
.countdown-label{ color:#fff; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.6px; max-width:170px; line-height:1.4; }
.countdown-timer{ display:flex; gap:18px; }
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:44px; }
.cd-num{ font-family:'Playfair Display',serif; font-size:28px; font-weight:800; color:#fff; line-height:1; }
.cd-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.55); margin-top:4px; }
.cd-arrow{
  width:40px; height:40px; border-radius:50%; background:var(--red-bright); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
  box-shadow:0 6px 14px -4px rgba(200,39,44,0.6); transition:transform .15s;
}
.cd-arrow:hover{ transform:translateX(3px); background:var(--red); }
@media (max-width:640px){
  .countdown-card-corner{ flex-direction:column; text-align:center; align-items:center; padding:22px; }
  .countdown-label{ max-width:none; }
}

/* Jubilee seal signature element */
.jubilee-seal{
  margin:0 auto 28px; display:block; object-fit:contain; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #f4f4f4 75%);
  padding:6px;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,0.5)) drop-shadow(0 0 0 1px rgba(255,255,255,0.08));
}
.jubilee-mini{ width:34px; height:34px; flex-shrink:0; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }

/* ---------- Sections ---------- */
section{ padding:64px 24px; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head .eyebrow{ color:var(--red-bright); text-transform:uppercase; letter-spacing:2px; font-size:12px; font-weight:700; margin-bottom:10px; }
.band-navy{ background:var(--navy-deep); color:#fff; }
.band-navy h2, .band-navy h3{ color:#fff; }
.band-navy p{ color:rgba(255,255,255,0.75); }
.band-cream{ background:var(--cream); }
.band-paper{ background:var(--paper); }

/* Service info strip */
.service-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:16px; background:transparent; padding:20px 24px; max-width:var(--container); margin:0 auto; }
.service-strip .item{
  background:linear-gradient(160deg, #142B5C 0%, var(--navy-deep) 100%);
  padding:28px 24px; text-align:center; border-radius:10px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.06); border-top:2px solid rgba(201,162,39,0.55);
  transition:border-top-color .2s;
}
.service-strip .item:hover{ border-top-color:var(--gold-true-bright); }
.service-strip .item .k{ color:#FFFFFF; opacity:0.75; text-transform:uppercase; letter-spacing:1.4px; font-size:11.5px; font-weight:700; margin-bottom:6px; }
.service-strip .item .v{ font-family:'Playfair Display',serif; font-size:19px; font-weight:700; color:#fff; }

/* Cards */
.grid{ display:grid; gap:24px; }
/* minmax(Npx,1fr) with auto-fit does not shrink below Npx even when the
   grid's own container is narrower than that - on a 320px-wide phone,
   once the page container's side padding and the grid gap are
   subtracted, less than 320px (or even 260px) is left, and the column
   still demands its full minimum, pushing the grid wider than the
   screen and forcing the whole page to scroll sideways. Wrapping the
   minimum in min(Npx,100%) caps it at whatever room actually exists. */
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s, border-color .18s; position:relative; overflow:hidden; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--gold-true) 0%, var(--red-bright) 100%); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card:hover::before{ transform:scaleX(1); }
.card .icon{ width:44px; height:44px; margin-bottom:16px; color:var(--red-bright); }
.card h3{ margin-bottom:8px; }
.card a.more{ font-weight:700; color:var(--red-bright); font-size:14px; }

/* Anniversary spotlight banner */
.spotlight{
  border:1.5px solid var(--gold); border-radius:10px; padding:44px 40px; text-align:center;
  background:linear-gradient(135deg, var(--gold-pale) 0%, var(--paper) 65%);
  box-shadow:0 16px 40px -18px rgba(200,39,44,0.35), 0 2px 6px rgba(12,27,61,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  position:relative; overflow:hidden;
}
.spotlight::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gold-true) 0%, var(--gold-true-bright) 50%, var(--gold-true) 100%);
}
.spotlight .years{ font-family:'Playfair Display',serif; font-size:56px; font-weight:800; color:var(--navy-deep); line-height:1; }
.spotlight .years small{ display:block; font-size:14px; font-weight:700; color:var(--red-bright); letter-spacing:2px; text-transform:uppercase; margin-top:8px; }

/* Placeholder content notice */
.needs-content{
  border:1.5px dashed var(--red-bright); background:#FBEFEF; border-radius:var(--radius);
  padding:14px 18px; font-size:13.5px; color:var(--red); margin-bottom:24px;
}
.needs-content strong{ color:var(--red); }

/* Breadcrumb / page header */
.page-hero{ background:var(--navy-deep); color:#fff; padding:56px 24px; text-align:center; }
.page-hero.anniversary-hero{
  background:
    linear-gradient(180deg, rgba(12,27,61,0.85) 0%, rgba(12,27,61,0.90) 100%),
    url('/assets/anniversary-launch.jpg');
  background-size:cover; background-position:center 30%; padding:72px 24px;
}
.page-hero h1{ color:#fff; margin-bottom:6px; }
.page-hero .crumb{ color:rgba(255,255,255,0.6); font-size:13px; }
.page-hero .crumb a{ color:rgba(255,255,255,0.85); }

/* Sub-page nav pills (anniversary/diaspora sub-sections) */
.subnav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.subnav a{ background:rgba(255,255,255,0.1); color:#fff; padding:8px 16px; border-radius:20px; font-size:13.5px; font-weight:600; border:1px solid rgba(255,255,255,0.2); }
.subnav a.current{ background:var(--gold); color:var(--navy-deep); border-color:var(--gold); }
.subnav a:hover{ border-color:#fff; }

/* Contact / list layout */
/* Grid and flex items default to min-width:auto, which refuses to shrink
   a cell below its content's own intrinsic width (its longest unbroken
   run of text) even when the track itself is narrower - on a narrow
   phone that's exactly backwards from what's wanted here, and was
   pushing this column past the edge of the screen. min-width:0 lets the
   text wrap normally at the grid's actual width instead. */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-grid > *{ min-width:0; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.info-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.info-row .lbl{ width:120px; flex-shrink:0; font-weight:700; color:var(--navy); font-size:13.5px; text-transform:uppercase; letter-spacing:0.5px; }
.info-row > div:not(.lbl){ min-width:0; overflow-wrap:break-word; }

table.simple{ width:100%; border-collapse:collapse; }
/* Date/event/venue style tables have long, unbreakable cell content
   (full dates, long event names) that a phone-width column just can't
   fit without either truncating it or wrapping every word onto its own
   line. Letting the table scroll horizontally within its own row - while
   the rest of the page stays put - is the standard, readable fix: the
   table keeps its normal row/column layout and widens past the screen
   edge, but only the table itself scrolls, not the whole page. */
@media (max-width:700px){
  table.simple{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Committee accordion */
.committee-list{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.committee-details{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.committee-details summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
}
.committee-details summary::-webkit-details-marker{ display:none; }
.committee-details summary::after{
  content:"+"; font-size:20px; font-weight:700; color:var(--red-bright); margin-left:auto; flex-shrink:0;
}
.committee-details[open] summary::after{ content:"\2212"; }
.committee-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:17px; color:var(--navy-deep); }
.committee-chair{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.committee-body{ padding:0 22px 22px; border-top:1px solid var(--line); padding-top:16px; }
.committee-body h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--red-bright); margin:16px 0 8px; }
.committee-body h4:first-child{ margin-top:0; }
.committee-body ul{ margin-bottom:0; }
.committee-body li{ font-size:14.5px; }
table.simple th{ text-align:left; padding:10px 12px; background:var(--navy-deep); color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:0.6px; }
table.simple td{ padding:12px; border-bottom:1px solid var(--line); }

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--navy-deep); color:rgba(255,255,255,0.75); padding:56px 24px 24px;
  position:relative;
}
footer.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold-true) 0%, var(--gold-true-bright) 50%, var(--gold-true) 100%);
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; max-width:var(--container); margin:0 auto; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer-grid h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; font-family:'Source Sans 3'; font-weight:700; }
.footer-grid a{ display:block; color:rgba(255,255,255,0.7); font-size:14px; padding:5px 0; }
.footer-grid a:hover{ color:var(--gold); }
.footer-brand{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.footer-brand img{
  width:48px; height:48px; padding:6px;
  background:radial-gradient(circle at 35% 30%, #ffffff, #eef2fa 70%);
  border-radius:50%; box-shadow:0 3px 8px rgba(0,0,0,0.35), inset 0 1px 2px rgba(255,255,255,0.9);
}
.footer-bottom{ max-width:var(--container); margin:40px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,0.12); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:rgba(255,255,255,0.55); }

/* ---------- Become a Member form ---------- */
.jform-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); max-width:760px; margin:0 auto; }
.jfield{ margin-bottom:16px; }
.jfield label{ display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:0.6px; color:var(--navy); font-weight:700; margin-bottom:6px; }
.jfield input, .jfield select, .jfield textarea{
  width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:6px;
  font-family:inherit; font-size:14.5px; color:var(--navy-deep); background:#fff;
}
.jfield input:focus, .jfield select:focus, .jfield textarea:focus{ outline:none; border-color:var(--navy-mid); }
.jgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.jgrid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 18px; }
@media (max-width:680px){ .jgrid2, .jgrid3{ grid-template-columns:1fr; } }
.jsection-label{ font-family:'Playfair Display',serif; font-weight:700; color:var(--navy-deep); font-size:16px; margin:22px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.jsection-label:first-child{ margin-top:0; }
.jmsg{ padding:12px 16px; border-radius:6px; font-size:13.5px; margin-bottom:16px; }
.jmsg.err{ background:#FBEAEA; color:#9A2A2A; border:1px solid #E6C9C1; }
.jmsg.ok{ background:#EAF7EE; color:#256B42; border:1px solid #BFE3CB; }

/* Modal used to show the temporary ID after submission */
.jmodal-overlay{
  position:fixed; inset:0; background:rgba(12,27,61,0.72); z-index:999;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.jmodal-box{
  background:#fff; border-radius:10px; max-width:460px; width:100%; padding:36px 32px;
  text-align:center; box-shadow:0 20px 60px -12px rgba(0,0,0,0.5);
}
.jmodal-box h2{ font-family:'Playfair Display',serif; color:var(--navy-deep); margin-bottom:10px; }
.jtemp-id{
  font-family:'Source Sans 3',sans-serif; font-weight:800; font-size:28px; letter-spacing:1.5px;
  color:var(--navy-deep); background:var(--gold-pale); border:1.5px dashed var(--gold);
  border-radius:8px; padding:14px 10px; margin:18px 0;
}
.jmodal-box p{ font-size:14px; color:var(--navy-deep); margin-bottom:10px; }
.jmodal-box .btn{ margin-top:14px; }

/* ---------- "Become a Member" nav highlight ---------- */
nav.main-nav > .nav-item.nav-cta > a{
  background:var(--gold);
  color:#fff;
  border-radius:20px;
  padding:9px 14px;
  font-size:14.5px;
  font-weight:700;
  animation:navCtaPulse 2.4s ease-in-out infinite;
}
nav.main-nav > .nav-item.nav-cta > a:hover{ background:var(--red); color:#fff; }
nav.main-nav > .nav-item.nav-cta.active > a{ background:var(--red); color:#fff; }
@keyframes navCtaPulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(200,39,44,0.55); }
  50% { box-shadow:0 0 0 6px rgba(200,39,44,0); }
}
@media (prefers-reduced-motion: reduce){
  nav.main-nav > .nav-item.nav-cta > a{ animation:none; }
}

/* ---------- Check-In page ---------- */
.checkin-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); max-width:520px; margin:0 auto; text-align:center; }
.checkin-welcome{ font-family:'Playfair Display',serif; font-size:26px; color:var(--navy-deep); margin:14px 0 8px; }
.checkin-status{ font-size:14px; color:var(--navy-mid); margin-bottom:20px; }
.checkin-btn-big{ width:100%; padding:16px; font-size:17px; }
.checkin-note{ font-size:12.5px; color:var(--navy-mid); margin-top:14px; }
.checkin-spinner{ display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:checkinSpin 0.7s linear infinite; vertical-align:-3px; margin-right:8px; }
@keyframes checkinSpin{ to{ transform:rotate(360deg); } }
.checkin-success-icon{ font-size:44px; margin-bottom:6px; }

/* ---------- Sermons directory ---------- */
.sermon-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm); margin-bottom:26px;
}
.sermon-toolbar .jfield{ margin-bottom:0; flex:1 1 170px; min-width:150px; }
.sermon-toolbar .jfield.search{ flex:2 1 220px; }
.sermon-toolbar .sermon-reset{ flex:0 0 auto; }
.sermon-count{ font-size:13px; color:var(--ink-soft); margin:-10px 0 18px; }
.sermon-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px,100%), 1fr)); gap:22px; }
.sermon-card{
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-sm); padding:22px; display:flex; flex-direction:column; gap:12px;
}
.sermon-card h3{ margin:0; font-size:19px; }
.sermon-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.sermon-pill{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
  padding:3px 10px; border-radius:12px; background:var(--cream); color:var(--navy-mid); border:1px solid var(--line);
}
.sermon-pill.theme{ background:var(--gold-pale); color:var(--red-bright); border-color:transparent; }
.sermon-desc{ font-size:14px; color:var(--ink-soft); margin:0; }
.sermon-player{ width:100%; border-radius:6px; background:var(--navy-deep); }
.sermon-player-wrap{ position:relative; }
.sermon-player-placeholder{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--cream); border:1px dashed var(--line); border-radius:6px;
  padding:16px; font-size:13px; color:var(--ink-soft); cursor:pointer;
}
.sermon-player-placeholder:hover{ border-color:var(--navy-mid); }
.sermon-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:6px; border-top:1px dashed var(--line); }
.sermon-price{ font-size:13px; color:var(--ink-soft); }
.sermon-price strong{ color:var(--navy-deep); font-size:15px; }
.sermon-dl-btn{ padding:9px 18px; font-size:13.5px; }
.sermon-dl-btn.owned{ background-color:#2E7D4F; box-shadow:none; }
.sermon-dl-btn.owned:hover{ background-color:#256B42; }
.sermon-recover{ text-align:center; margin:34px 0 4px; font-size:13.5px; color:var(--ink-soft); }
.sermon-recover a{ font-weight:700; }

/* Payment/download modal — reuses .jmodal-overlay/.jmodal-box, left-aligned form variant */
.jmodal-box.form-box{ text-align:left; max-width:440px; }
.jmodal-box.form-box h2{ text-align:center; }
.jmodal-box.form-box .jfield{ margin-bottom:14px; }
.jmodal-close-x{
  position:absolute; top:10px; right:14px; background:none; border:none; font-size:22px;
  color:var(--ink-soft); cursor:pointer; line-height:1;
}
.jmodal-box{ position:relative; }
.sermon-modal-summary{
  background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:12px 14px;
  font-size:13.5px; color:var(--navy-deep); margin-bottom:16px; text-align:left;
}
.sermon-modal-summary strong{ display:block; font-size:15px; margin-bottom:2px; }

@media (max-width:560px){
  .sermon-toolbar{ flex-direction:column; align-items:stretch; }
  .sermon-toolbar .jfield{ flex:1 1 auto; }
  /* .jfield.search's own flex:2 1 220px (above, for the desktop ROW layout,
     where flex-basis:220px sets its WIDTH) is more specific than the
     .jfield rule just above, so it survives the switch to flex-direction:
     column on this breakpoint - and in a column layout, flex-basis instead
     sets HEIGHT, ballooning the search box to a 220px-tall field while
     every other filter sits at its natural ~70px. Needs its own explicit
     reset here, at matching specificity, to actually take effect. */
  .sermon-toolbar .jfield.search{ flex:1 1 auto; }
}

/* ---------- Admin: Sermons tab ---------- */
.admin-sermon-row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:14px 16px; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; background:#fff;
}
.admin-sermon-row .t{ font-weight:700; color:var(--navy-deep); font-size:14.5px; }
.admin-sermon-row .meta{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.admin-sermon-row .price{ font-size:13px; color:var(--navy-mid); font-weight:700; white-space:nowrap; }
.admin-sermon-row .row-actions{ display:flex; gap:8px; }
.admin-upload-progress{
  height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:10px; display:none;
}
.admin-upload-progress .bar{ height:100%; width:0%; background:var(--red-bright); transition:width .2s; }
.admin-upload-filename{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.admin-purchase-row{ display:grid; grid-template-columns:1fr 1fr auto auto; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; }
.admin-purchase-row.head{ font-weight:700; color:var(--ink-soft); text-transform:uppercase; font-size:11px; letter-spacing:0.4px; }
@media (max-width:700px){
  .admin-sermon-row{ grid-template-columns:1fr; }
  .admin-purchase-row{ grid-template-columns:1fr 1fr; }
}

/* ---------- Admin login/setup screens + shared .vbc-btn buttons ----------
   These classes were already referenced throughout admin.html (login form,
   first-time setup form, sign-out/edit/delete buttons) but had no matching
   rules anywhere in this stylesheet, so the admin dashboard's login screen
   and buttons were rendering unstyled. Adding them here fixes that across
   the whole dashboard, not just the new Sermons tab. */
.vbc-login{ min-height:74vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; background:var(--cream); }
.vbc-login-card{ background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:38px 34px; max-width:420px; width:100%; box-shadow:var(--shadow-md); text-align:center; }
.vbc-seal{ width:64px; height:64px; margin:0 auto 16px; }
.vbc-seal img{ width:100%; height:100%; object-fit:contain; }
.vbc-eyebrow{ color:var(--red-bright); text-transform:uppercase; letter-spacing:2px; font-size:11.5px; font-weight:700; margin-bottom:8px; }
.vbc-login-title{ font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:var(--navy-deep); margin:0 0 6px; }
.vbc-login-sub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 22px; }
.vbc-field{ margin-bottom:16px; text-align:left; }
.vbc-field label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:var(--navy); font-weight:700; margin-bottom:6px; }
.vbc-field input{ width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:6px; font-family:inherit; font-size:14.5px; color:var(--navy-deep); background:#fff; }
.vbc-field input:focus{ outline:none; border-color:var(--navy-mid); }
.vbc-msg{ padding:11px 14px; border-radius:6px; font-size:13.5px; margin-bottom:16px; text-align:left; }
.vbc-msg.err{ background:#FBEAEA; color:#9A2A2A; border:1px solid #E6C9C1; }
.vbc-msg.ok{ background:#EAF7EE; color:#256B42; border:1px solid #BFE3CB; }

.vbc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 22px; border-radius:6px; font-weight:700; font-size:14px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:all .15s;
  font-family:inherit; background:var(--cream); color:var(--navy-deep);
}
.vbc-btn:disabled{ opacity:0.65; cursor:default; }
.vbc-btn.gold{ background-color:var(--gold); color:#fff; box-shadow:0 6px 16px -6px rgba(200,39,44,0.45); }
.vbc-btn.gold:hover:not(:disabled){ background-color:var(--red); }
.vbc-btn.outline-navy{ background:transparent; color:var(--navy); border-color:var(--navy); }
.vbc-btn.outline-navy:hover:not(:disabled){ background:var(--navy); color:#fff; }
.vbc-btn.small{ padding:7px 14px; font-size:12.5px; }
.vbc-btn.vbc-btn-block{ width:100%; }