@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;
  --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:10px 18px; border-radius:20px;
  font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:7px;
  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-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px; max-width:var(--container); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--navy-deep); flex-shrink:0; }
.brand img{
  width:48px; height:48px; 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.15; }
.brand .lockup .n1{ font-family:'Playfair Display',serif; font-weight:700; font-size:16px; color:var(--navy-deep); }
.brand .lockup .n2{ font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--red-bright); font-weight:600; }

/* Readability pass (member feedback): the old 14px/weight-600 nav wrapped
   into 2-3 tightly-stacked rows on most screens (this menu has 11 top-level
   items) with almost no gap between those rows, so it read as a dense block
   of same-weight text rather than a scannable list. Bigger, bolder labels
   plus real row spacing fix that without changing the menu structure. */
nav.main-nav{ display:flex; align-items:center; gap:8px 6px; 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:15.5px; font-weight:700; padding:11px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
nav.main-nav > .nav-item > a:hover, nav.main-nav > .nav-item > button:hover{ color:var(--red-bright); }
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:12px; }
.search-form{ display:flex; align-items:center; background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:6px 6px 6px 14px; }
.search-form input{ background:none; border:none; color:var(--ink); font-size:13px; width:120px; }
.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; }

@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; }
}

/* ---------- Hero ---------- */
.hero{
  color:#fff; padding:110px 24px 80px; text-align:center; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-2%; z-index:0;
  background-image:url('/assets/hero-crusade.jpg');
  background-size:cover; background-position:center 35%;
  animation:heroKenBurns 12s ease-in-out infinite alternate;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,27,61,0.88) 0%, rgba(12,27,61,0.80) 45%, rgba(12,27,61,0.94) 100%);
}
.hero .container{ position:relative; z-index:2; }
@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; }
}

/* 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:#FFFFFF; text-transform:uppercase; letter-spacing:2.5px; font-size:12.5px; font-weight:700; margin-bottom:16px; opacity:0.85; }
.hero h1{ color:#fff; max-width:820px; margin:0 auto 18px; }
.hero p.lead{ color:rgba(255,255,255,0.78); max-width:600px; margin:0 auto 32px; font-size:17px; }
.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;
}
.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){
  .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(220px,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);
}
.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; }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,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; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.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);
}
.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 */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@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; }

table.simple{ width:100%; border-collapse:collapse; }

/* 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; }
.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; } }
.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 18px;
  font-size:15px;
  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(320px, 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%; }