/* Noonday theme stylesheet — build 1.0.23 */
:root{--navy:#063D6D;--navy-deep:#042A4A;--gold:#C49B3A;--gold-ink:#8C6A18;--gold-soft:#E8D49A;--cream:#F2F5F9;--ink:#1A2238;--ink-soft:#4B5266;--line:#DCE3EA;--paper:#FFFFFF;--bg:#F7F9FC;--serif:"Cormorant Garamond","Garamond","Georgia",serif;--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--radius:4px;--container:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--gold-ink)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.skip{position:absolute;top:-40px;left:8px;background:var(--navy);color:#fff;padding:8px 14px;text-decoration:none;border-radius:var(--radius);z-index:1000}
.skip:focus{top:8px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);margin:0 0 .5em;line-height:1.2;font-weight:600}
h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.4rem);margin-top:0}
h3{font-size:1.25rem}
.eyebrow{font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:.6rem}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.topbar{background:var(--navy-deep);color:#C9D2DF;font-size:.85rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;flex-wrap:wrap;gap:8px}
.topbar a{color:#E5EAF2;text-decoration:none}
.topbar a:hover{color:var(--gold-soft)}
.topbar .info span{margin-right:18px;white-space:nowrap}
.topbar .info svg{vertical-align:-3px;margin-right:6px}
header.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:24px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;flex-shrink:0;line-height:1}
.brand img{height:56px;width:auto;max-width:220px}
.brand .tagline{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;padding-left:2px}
nav.primary ul{display:flex;gap:24px;margin:0;padding:0;list-style:none;flex-wrap:nowrap}
nav.primary li{white-space:nowrap}
nav.primary a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;padding:6px 2px;border-bottom:2px solid transparent}
nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--navy);border-color:var(--gold)}
.btn{display:inline-block;background:var(--gold);color:var(--navy-deep);padding:12px 22px;border-radius:var(--radius);font-weight:600;text-decoration:none;border:2px solid var(--gold);transition:background .15s,color .15s;font-size:.95rem;letter-spacing:.02em}
.btn:hover{background:var(--navy-deep);color:var(--gold)}
.btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn.outline:hover{background:#fff;color:var(--navy)}
.btn.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.dark:hover{background:var(--navy-deep);color:var(--gold)}
.menu-btn{display:none;background:none;border:2px solid var(--navy);color:var(--navy);padding:8px 12px;border-radius:var(--radius);font-weight:600;cursor:pointer}
.hero{position:relative;color:#fff;background-color:var(--navy-deep);isolation:isolate;padding:110px 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("../images/hero.jpg") center 50%/cover no-repeat}
/* The scrim over the hero photograph. Measured against the actual
   composited pixels, the old ramp (.78 -> .50 -> .35) left the eyebrow at
   2.73:1 where the sky is brightest — a real WCAG failure, not the
   page-background artefact WAVE reported. Darkened until every piece of
   hero text clears AA against the worst pixel it actually sits on. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(4,42,74,.92) 0%,rgba(4,42,74,.80) 55%,rgba(4,42,74,.62) 100%)}
.hero .container{max-width:900px}
.hero h1{color:#fff;margin-bottom:.4em}
.hero h1 em{font-style:italic;color:var(--gold-soft);font-weight:500}
.hero p.lede{font-size:1.18rem;line-height:1.55;max-width:640px;color:#F0EFEA;margin-bottom:2rem}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .meta-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.25)}
.hero .meta-strip .item .label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:4px}
.hero .meta-strip .item .value{font-family:var(--serif);font-size:1.4rem;color:#fff;line-height:1.15}
section{padding:88px 0}
section.alt{background:var(--paper)}
section.cream{background:var(--cream)}
section.dark{background:var(--navy-deep);color:#E8EDF4;position:relative}
section.dark h2,section.dark h3{color:#fff}
section.dark .eyebrow{color:var(--gold-soft)}
section .head{text-align:center;max-width:720px;margin:0 auto 56px}
#sermons{background:linear-gradient(180deg,rgba(4,42,74,.55) 0%,rgba(4,42,74,.72) 100%),url("../images/bg-worship-hands.jpg") center 30%/cover no-repeat;background-color:var(--navy-deep)}
section.cream.with-bg-bible{background:linear-gradient(180deg,rgba(242,245,249,.55) 0%,rgba(242,245,249,.72) 100%),url("../images/bg-bible-glasses.jpg") center 40%/cover no-repeat;background-color:var(--cream)}
.donate-cta.with-bg-bible{background:linear-gradient(135deg,rgba(4,42,74,.68) 0%,rgba(4,42,74,.55) 60%,rgba(4,42,74,.68) 100%),url("../images/bg-holy-bible.jpg") center center/cover no-repeat;background-color:var(--navy-deep)}
.values-section{background:linear-gradient(180deg,var(--bg) 0%,var(--cream) 100%);text-align:center;padding:96px 0;background-color:var(--bg)}
.values-section .head h2{font-size:clamp(2rem,4vw,2.8rem)}
.values-section .lead{max-width:760px;margin:0 auto 64px;font-family:var(--serif);font-size:1.35rem;line-height:1.5;color:var(--navy);font-style:italic}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1100px;margin:0 auto;text-align:left}
.value-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--radius);padding:40px 32px;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.value-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(6,61,109,.18)}
.value-card .glyph{width:56px;height:56px;margin-bottom:24px;background:var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--gold-soft)}
.value-card .glyph svg{width:26px;height:26px;stroke:var(--navy);fill:none;stroke-width:1.6}
.value-card .word{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--navy);font-weight:600;letter-spacing:.02em;margin-bottom:6px}
.value-card .word::after{content:"";display:block;width:36px;height:2px;background:var(--gold);margin-top:16px;margin-bottom:18px}
.value-card p{margin:0;color:var(--ink);font-size:1rem;line-height:1.6}
.value-card p strong{color:var(--navy);font-weight:600}
.values-tag{margin-top:72px;padding-top:48px;border-top:1px solid var(--gold-soft);max-width:920px;margin-left:auto;margin-right:auto;font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.35;color:var(--navy)}
.values-tag strong{display:block;margin-bottom:18px;color:var(--gold-ink);font-weight:700;font-style:normal;letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;font-family:var(--sans)}
.pastor{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center}
.pastor .photo{background-color:var(--cream);position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,var(--gold-soft),#c1bba6);box-shadow:0 12px 32px -8px rgba(6,61,109,.18)}
.pastor .photo::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.6);border-radius:2px;pointer-events:none}
.pastor .photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.pastor blockquote{margin:0 0 24px;font-family:var(--serif);font-size:1.45rem;line-height:1.4;color:var(--navy);font-style:italic;padding-left:24px;border-left:3px solid var(--gold)}
.pastor .signature{font-family:var(--serif);font-size:1.1rem;color:var(--ink-soft);margin-top:28px}
.pastor .signature strong{display:block;color:var(--navy);font-size:1.15rem;margin-bottom:2px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;text-align:center;transition:transform .2s,box-shadow .2s}
.service-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(6,61,109,.08)}
.service-card .day{font-family:var(--serif);font-size:1.5rem;color:var(--navy);font-weight:600;margin-bottom:6px}
.service-card .time{font-size:2.1rem;font-weight:600;color:var(--gold-ink);font-family:var(--serif);margin-bottom:10px;line-height:1}
.service-card .desc{color:var(--ink-soft);font-size:.95rem}
.sermons{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:stretch}
.sermon-feature{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.sermon-placeholder{background-color:var(--navy-deep);position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(135deg,#042A4A 0%,#063D6D 60%,#1B5689 100%);color:#fff;padding:32px;text-align:center}
.play-icon{width:80px;height:80px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(196,155,58,.45)}
.play-icon svg{width:32px;height:32px;fill:var(--navy-deep);margin-left:4px}
.sermon-placeholder h3{color:#fff;margin:0}
.sermon-placeholder p{color:#C9D2DF;margin:0;max-width:320px;font-size:.95rem}
.sermon-list{display:flex;flex-direction:column;gap:14px}
.sermon-list .head{text-align:left;margin-bottom:8px}
.sermon-item{display:grid;grid-template-columns:110px 1fr;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;align-items:center;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.sermon-item:hover{border-color:var(--gold);box-shadow:0 4px 14px rgba(6,61,109,.08)}
.sermon-item .thumb{background-color:var(--navy-deep);aspect-ratio:16/9;border-radius:2px;background:linear-gradient(135deg,#C9D2DF,#6F7E97);position:relative;overflow:hidden}
.sermon-item .thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
.sermon-item .thumb svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;z-index:2;fill:#fff}
.sermon-item .meta .date{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.sermon-item .meta .title{font-family:var(--serif);font-size:1.05rem;color:var(--navy);font-weight:600;line-height:1.25;margin-top:2px}
.sermon-item .meta .by{font-size:.82rem;color:var(--ink-soft);margin-top:2px}
.sermon-archive-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;color:var(--navy)}
.sermon-archive-link svg{width:14px;height:14px}
.events-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.events-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.event-row{display:grid;grid-template-columns:100px 1fr auto;gap:20px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s}
.event-row:last-child{border-bottom:0}
.event-row:hover{background:var(--cream)}
.event-date{text-align:center;font-family:var(--serif);border-right:1px solid var(--line);padding-right:20px}
.event-date .month{display:block;font-size:.72rem;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.event-date .day{display:block;font-size:2.1rem;line-height:1;color:var(--navy);font-weight:600}
.event-date .dow{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px;font-family:var(--sans)}
.event-info .title{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--navy);margin-bottom:2px}
.event-info .time{font-size:.92rem;color:var(--ink-soft)}
.event-info .tag{display:inline-block;margin-left:8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:999px;background:var(--cream);color:var(--navy);font-weight:600}
.event-info .tag.gold{background:var(--gold-soft)}
.event-cta{font-size:.85rem;color:var(--gold-ink);font-weight:600;white-space:nowrap}
.events-aside{padding:32px;background:var(--navy);color:#E8EDF4;border-radius:var(--radius)}
.events-aside h3{color:#fff;margin-bottom:12px}
.events-aside p{color:#C9D2DF;margin:0 0 14px;font-size:.95rem}
.events-aside .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);margin-top:18px}
.events-aside .stat .num{font-family:var(--serif);font-size:2rem;color:var(--gold-soft);line-height:1}
.events-aside .stat .lbl{font-size:.8rem;color:#B8C0D2;margin-top:4px}
.ministries-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ministry{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center}
.ministry .icon{width:56px;height:56px;margin:0 auto 14px;background:var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center}
.ministry .icon svg{width:26px;height:26px;stroke:var(--navy);fill:none;stroke-width:1.6}
.ministry h3{font-size:1.1rem;margin-bottom:6px}
.ministry p{color:var(--ink-soft);font-size:.92rem;margin:0}
section.dark .ministry h3{color:var(--navy)}
section.dark .ministry p{color:var(--ink-soft)}
.visit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.visit .img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.visit .img img{width:100%;height:100%;object-fit:cover}
.visit ul.facts{list-style:none;padding:0;margin:24px 0}
.visit ul.facts li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.visit ul.facts li:last-child{border-bottom:0}
.visit ul.facts svg{flex:0 0 22px;width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.8;margin-top:2px}
.visit ul.facts strong{display:block;color:var(--navy)}
.gmc-section{background:var(--cream);position:relative}
.gmc-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 90% 10%,rgba(196,155,58,.08) 0%,transparent 40%)}
.gmc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative;z-index:1}
.gmc-text .lockup{display:inline-flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;background:#fff;border:1px solid var(--line);border-radius:999px;margin-bottom:20px}
.gmc-text .lockup img{height:32px;width:auto}
.gmc-text .lockup span{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.gmc-text h2{margin-bottom:.35em}
.gmc-text .lead{font-family:var(--serif);font-size:1.4rem;line-height:1.45;color:var(--navy);margin:0 0 1em;font-weight:500}
.gmc-text p{color:var(--ink);margin:0 0 1.1em}
.gmc-text .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.gmc-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 24px 48px -16px rgba(6,61,109,.3)}
.gmc-video video{width:100%;height:100%;object-fit:cover;display:block}
.gmc-video .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,42,74,.25);cursor:pointer;transition:opacity .2s,background .2s;border:0;padding:0}
.gmc-video .play-overlay:hover{background:rgba(4,42,74,.4)}
.gmc-video .play-overlay.hidden{opacity:0;pointer-events:none}
.gmc-video .play-overlay .ring{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 36px rgba(0,0,0,.35)}
.gmc-video .play-overlay svg{width:36px;height:36px;fill:var(--navy-deep);margin-left:4px}
.donate-cta{background:var(--navy-deep);background-image:radial-gradient(circle at 12% 30%,rgba(196,155,58,.18) 0%,transparent 35%),radial-gradient(circle at 88% 70%,rgba(196,155,58,.12) 0%,transparent 38%);color:#fff;text-align:center;padding:88px 24px}
.donate-cta h2{color:#fff}
.donate-cta p{color:#C9D2DF;max-width:600px;margin:0 auto 28px}
.donate-cta .btn{background:var(--gold);border-color:var(--gold)}
.donate-cta .btn:hover{background:#fff;color:var(--navy-deep);border-color:#fff}
footer.site-footer{background:var(--ink);color:#C9D2DF;padding:64px 0 28px;font-size:.92rem}
footer.site-footer h2,
footer.site-footer h4{color:#fff;font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
footer.site-footer a{color:#E1E5EE;text-decoration:none}
footer.site-footer a:hover{color:var(--gold-soft)}
footer.site-footer .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
footer.site-footer ul{list-style:none;padding:0;margin:0}
footer.site-footer ul li{margin-bottom:8px}
footer.site-footer .brand-block .wm{color:#fff;font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:8px}
footer.site-footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid #2D3550;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;color:#8893AB;font-size:.82rem}
footer.site-footer .legal a{color:#B0BACE;text-decoration:underline;text-underline-offset:2px}
@media(max-width:1080px){nav.primary ul{gap:16px}nav.primary a{font-size:.9rem}.brand img{height:48px}.brand .tagline{font-size:.62rem}}
@media(max-width:960px){.pastor,.sermons,.visit,.gmc-grid,.events-grid{grid-template-columns:1fr;gap:32px}.ministries-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:1fr}.values-grid{grid-template-columns:1fr;gap:18px}footer.site-footer .grid{grid-template-columns:1fr 1fr}.hero{padding:64px 0}.hero .meta-strip{grid-template-columns:1fr;gap:18px;margin-top:36px;padding-top:22px}.event-row{grid-template-columns:80px 1fr}.event-cta{display:none}}
@media(max-width:700px){nav.primary ul{display:none}nav.primary.open ul{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:12px 0;box-shadow:0 8px 18px rgba(0,0,0,.05)}nav.primary.open ul li{padding:10px 24px}.menu-btn{display:inline-flex;align-items:center;gap:8px}header.site-header{position:relative}.topbar .info span:nth-child(2){display:none}footer.site-footer .grid{grid-template-columns:1fr}.ministries-grid{grid-template-columns:1fr}section{padding:64px 0}.values-section{padding:64px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sub-page additions */
.page-hero{position:relative;color:#fff;isolation:isolate;padding:90px 0 70px;overflow:hidden;background:var(--navy-deep)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-bg, url("../images/hero.jpg")) var(--hero-pos, center 60%)/cover no-repeat}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,42,74,.55) 0%,rgba(4,42,74,.78) 100%)}
.page-hero .container{position:relative}
.page-hero h1{color:#fff;margin-bottom:.3em;font-size:clamp(2rem,4.2vw,3rem)}
.page-hero p.lede{font-size:1.1rem;color:#E8EDF4;max-width:680px;margin:0}
.page-hero .eyebrow{color:var(--gold-soft)}
.breadcrumbs{font-size:.85rem;margin-bottom:14px;color:#C9D2DF}
.breadcrumbs a{color:#E8EDF4;text-decoration:none}
.breadcrumbs a:hover{color:var(--gold-soft)}
.breadcrumbs span.sep{margin:0 8px;color:rgba(255,255,255,.5)}
.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:2em;margin-bottom:.5em}
.prose h3{margin-top:1.6em;margin-bottom:.4em}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:24px}
.prose ul li,.prose ol li{margin-bottom:.4em}
.prose blockquote{margin:1.5em 0;padding:14px 22px;border-left:3px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--navy);background:var(--cream)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.split.image-right{grid-template-columns:1.05fr 1fr}
.split img{border-radius:var(--radius);width:100%}
.split.center{align-items:center}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.contact-card h3{margin-bottom:18px}
.contact-card .row{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.contact-card .row:last-child{border-bottom:0}
.contact-card .row svg{flex:0 0 22px;width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.8;margin-top:2px}
.contact-card strong{display:block;color:var(--navy);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.form-card h3{margin-bottom:6px}
.form-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-card label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin:14px 0 6px}
.form-card input,.form-card textarea,.form-card select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);font-family:inherit;font-size:1rem;background:#fff}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,155,58,.15)}
.form-card textarea{min-height:140px;resize:vertical}
.form-card .check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.92rem}
.form-card .check input{width:auto;margin-top:4px}
.form-card .submit-row{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.form-card small{color:var(--ink-soft);font-size:.82rem}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-grid figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--cream)}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.archive-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.archive-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(6,61,109,.1)}
.archive-card .thumb{background-color:var(--cream);aspect-ratio:16/9;background:linear-gradient(135deg,#042A4A,#1B5689);position:relative}
.archive-card .thumb svg{position:absolute;inset:0;margin:auto;width:48px;height:48px;fill:rgba(255,255,255,.85)}
.archive-card .body{padding:20px}
.archive-card .body .meta{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:6px}
.archive-card .body h3{font-size:1.15rem;margin-bottom:6px;line-height:1.3}
.archive-card .body p{margin:0;color:var(--ink-soft);font-size:.92rem}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.filter-bar a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:#fff;font-size:.9rem}
.filter-bar a.active,.filter-bar a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagination{margin-top:48px;display:flex;gap:8px;justify-content:center}
.pagination a,.pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);background:#fff}
.pagination a.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.video-wrap{aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;margin:0 0 24px}
.video-wrap iframe,.video-wrap video{width:100%;height:100%;border:0}
.sermon-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--ink-soft);font-size:.92rem;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.sermon-meta strong{color:var(--navy);font-weight:600;margin-right:6px}
.event-detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.event-fact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:sticky;top:90px}
.event-fact-card .row{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.event-fact-card .row:last-child{border-bottom:0}
.event-fact-card svg{stroke:var(--gold);fill:none;stroke-width:1.8;width:22px;height:22px;margin-top:2px}
.event-fact-card strong{display:block;color:var(--navy);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.news-list{max-width:780px;margin:0 auto}
.news-item{padding:32px 0;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:0}
.news-item .date{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:6px}
.news-item h2,
.news-item h3{font-size:1.4rem;margin-bottom:10px}
.news-item p{margin:0 0 .8em}
@media(max-width:960px){.split,.contact-grid,.event-detail-grid{grid-template-columns:1fr;gap:32px}.archive-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}.form-card .form-row{grid-template-columns:1fr}.event-fact-card{position:static}}
@media(max-width:700px){.archive-grid,.gallery-grid{grid-template-columns:1fr}}

/* Ministry cards — photo-led */
.ministry-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease, box-shadow .2s ease;display:block}
.ministry-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(6,61,109,.18)}
.ministry-card .photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.ministry-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ministry-card:hover .photo img{transform:scale(1.04)}
.ministry-card .body{padding:24px 26px}
.ministry-card .meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:8px}
.ministry-card h2,
.ministry-card h3{font-size:1.25rem;margin-bottom:10px;line-height:1.3}
.ministry-card p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.ministry-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:960px){.ministry-card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.ministry-card-grid{grid-template-columns:1fr}}

/* Ministry cards — photo-led */
.ministry-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease, box-shadow .2s ease;display:block}
.ministry-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(6,61,109,.18)}
.ministry-card .photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.ministry-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ministry-card:hover .photo img{transform:scale(1.04)}
.ministry-card .body{padding:24px 26px}
.ministry-card .meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:8px}
.ministry-card h2,
.ministry-card h3{font-size:1.25rem;margin-bottom:10px;line-height:1.3}
.ministry-card p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.ministry-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:960px){.ministry-card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.ministry-card-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Theme additions
   Classes introduced when the static mockup became WordPress templates:
   card grids for archives, the WP custom-logo markup, accessible utilities,
   pagination, and the responsive video wrapper.
   ========================================================================== */

/* --- Accessibility utilities ---------------------------------------------- */

/* Visible to screen readers, invisible on screen. Used for the "read more"
   post titles and for headings that structure a region without being shown. */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.screen-reader-text:focus{background:var(--navy);color:#fff;clip-path:none;height:auto;width:auto;padding:12px 18px;position:fixed;top:8px;left:8px;z-index:1000;border-radius:var(--radius)}

/* Respect a reduced-motion preference: the smooth-scroll and every transition
   in this stylesheet become instant. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* --- Branding (WordPress custom logo) ------------------------------------- */

.brand-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex-shrink:0;line-height:1}
.brand-wrap .custom-logo-link{display:block;text-decoration:none}
.brand-wrap .custom-logo{height:56px;width:auto;max-width:220px;object-fit:contain}
.brand-wrap .tagline{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;padding-left:2px}
.brand .brand-text{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--navy);line-height:1.1}

/* --- Card grid (news, sermons, ministries, search) ------------------------ */

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 14px 34px -10px rgba(6,61,109,.22);transform:translateY(-2px)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h2{font-size:1.3rem;margin:0}
.card-body h2 a{text-decoration:none;color:var(--navy)}
.card-body h2 a:hover{color:var(--gold-ink)}
.card-body p{margin:0;color:var(--ink-soft)}
.card-body .date,.card-body .by,.card-body .scripture{font-family:var(--sans);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin:0}
.card-body .scripture,.card-body .by{text-transform:none;letter-spacing:0;color:var(--ink-soft);font-weight:400;font-size:.92rem}
.card-body .more{margin-top:auto;padding-top:8px;font-weight:600;text-decoration:none;color:var(--navy)}
.card-body .more:hover{color:var(--gold-ink)}

/* Play badge over a sermon card thumbnail. */
.card-thumb{position:relative;display:block}
.play-badge{position:absolute;inset:0;display:grid;place-items:center}
.play-badge svg{width:56px;height:56px;fill:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));opacity:.92}
.card:hover .play-badge svg{opacity:1}

/* --- Responsive video ----------------------------------------------------- */

.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Sermon single -------------------------------------------------------- */

.sermon-player .container{max-width:900px}
.sermon-feature-title{margin:20px 0 4px;font-size:1.5rem}
.sermon-feature-title a{color:#fff;text-decoration:none}
.sermon-feature-title a:hover{color:var(--gold-soft)}
.sermon-feature-meta{color:#C9D2DF;margin:0;font-size:.92rem}
.sermon-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin:32px 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.2)}
.sermon-meta div{margin:0}
.sermon-meta dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px}
.sermon-meta dd{margin:0;font-family:var(--serif);font-size:1.15rem;color:#fff}
.sermon-external{margin:24px 0 0}
.sermon-external a{color:var(--gold-soft)}

/* --- Event single --------------------------------------------------------- */

.event-facts{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.event-facts .row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.event-facts .row:last-child{border-bottom:0;padding-bottom:0}
.event-facts .row:first-of-type{padding-top:0}
.event-facts svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--gold);stroke-width:1.8;margin-top:2px}
.event-facts strong{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:3px}

.notice-past{background:#FDF3D8;border:1px solid var(--gold);border-left-width:4px;border-radius:var(--radius);padding:14px 18px;margin:32px 0 0;color:var(--ink)}

/* --- Archive filters ------------------------------------------------------ */

.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.filter-row a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink-soft);font-size:.9rem;font-weight:500;background:var(--paper)}
.filter-row a:hover{border-color:var(--gold);color:var(--navy)}
.filter-row a.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* --- Pagination & post navigation ----------------------------------------- */

.pagination,.page-links{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:56px;flex-wrap:wrap}
.pagination .page-numbers,.page-links a,.page-links > span{display:inline-block;min-width:42px;text-align:center;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);background:var(--paper);font-weight:500}
.pagination .page-numbers:hover,.page-links a:hover{border-color:var(--gold);color:var(--navy)}
.pagination .page-numbers.current,.page-links > span{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination .screen-reader-text{display:none}

.post-nav{display:flex;justify-content:space-between;gap:24px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line);flex-wrap:wrap}
.post-nav a{text-decoration:none;font-weight:600;color:var(--navy)}
.post-nav a:hover{color:var(--gold-ink)}

/* --- Search form ---------------------------------------------------------- */

.search-form{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.search-form input[type="search"]{flex:1;min-width:220px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;background:var(--paper);color:var(--ink)}
.search-form input[type="search"]:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.search-form button{cursor:pointer}

/* --- Block editor alignment ----------------------------------------------- */

.prose .alignwide{max-width:min(1100px,92vw);margin-left:auto;margin-right:auto}
.prose .alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.prose .alignleft{float:left;margin:.4em 1.6em 1em 0}
.prose .alignright{float:right;margin:.4em 0 1em 1.6em}
.prose .aligncenter{margin-left:auto;margin-right:auto;display:block}
.prose figure{margin:2em 0}
.prose figcaption{font-size:.88rem;color:var(--ink-soft);text-align:center;margin-top:.6em}

/* --- Print ---------------------------------------------------------------- */
/* Closes a low-severity finding from the May audit: printing a sermon or an
   event page used to carry the whole navigation chrome with it. */

@media print{
  .topbar,.site-header,.site-footer,.skip,.menu-btn,.filter-row,.pagination,.post-nav,.search-form,.video-frame,.donate-cta{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .hero,.page-hero{color:#000;padding:0 0 24px;background:none !important}
  .hero::before,.hero::after{display:none}
  h1,h2,h3,h4{color:#000}
  section{padding:16px 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
}

/* --- Imported page content ------------------------------------------------ */
/* Starter content comes in as clean semantic HTML with no inline styles, so
   these rules are what give it back its typographic character. */

.prose blockquote{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);font-style:italic;line-height:1.45;color:var(--navy);border-left:3px solid var(--gold);margin:2em 0;padding:.2em 0 .2em 1.4em}
.prose blockquote p{margin:0 0 .5em}
.prose blockquote cite,.prose blockquote strong{font-style:normal}
.prose .eyebrow{text-align:left}
.prose img{border-radius:var(--radius);box-shadow:0 12px 32px -8px rgba(6,61,109,.18);margin:1.6em 0}
.prose .split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:2.4em 0}
.prose .split img{margin:0}
@media (max-width:780px){.prose .split{grid-template-columns:1fr}}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose h2{margin-top:1.8em}
.prose h2:first-child{margin-top:0}
.prose iframe{width:100%;border:0;border-radius:var(--radius)}

/* ==========================================================================
   Contact Form 7 integration + form/layout fixes
   --------------------------------------------------------------------------
   The mockup's form CSS assumed bare <input> elements. Contact Form 7 wraps
   every field in <span class="wpcf7-form-control-wrap">, and a span is inline,
   so width:100% on the input resolved against a shrink-to-fit box and every
   field rendered as a small stub. These rules teach the existing design about
   CF7's real markup rather than restyling it from scratch.
   ========================================================================== */

/* --- Layout pages escape the reading measure ------------------------------ */

/* .prose-wide was the v1.0.1 approach: page.php sniffed the post content and
   added this class. It is superseded by the descendant breakout further down,
   which needs no cooperation from PHP. Kept as a no-op so any page still
   carrying the class renders identically. */

/* Cards sit at the top of their column instead of stretching to match the
   tallest sibling — the contact card was drawing an empty box half a screen
   tall next to the form. */
.contact-grid{align-items:start}

/* --- CF7 field wrappers --------------------------------------------------- */

.form-card .wpcf7-form-control-wrap{display:block;width:100%}

/* CF7 runs the form through wpautop, which sprinkles <p> around loose markup.
   Neutralise the stray margins; spacing comes from the labels and fields. */
.form-card form p{margin:0}
.form-card .wpcf7-form > p:empty{display:none}

.form-card label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin:16px 0 6px;letter-spacing:.02em}
.form-card .form-row > div > label:first-child,
.form-card > form > label:first-of-type{margin-top:0}

/* Buttons, checkboxes and radios must not inherit the full-width field rule. */
.form-card input[type="submit"],
.form-card input[type="button"],
.form-card input[type="checkbox"],
.form-card input[type="radio"]{width:auto}

.form-card input[type="submit"]{cursor:pointer;-webkit-appearance:none;appearance:none}

/* --- Checkbox and radio lists --------------------------------------------- */
/* CF7 nests a <label> inside each list item, which was inheriting the bold
   navy field-label style and rendering the consent sentence as shouty blue. */

.form-card .wpcf7-list-item{display:block;margin:0 0 10px}
.form-card .wpcf7-list-item:last-child{margin-bottom:0}
.form-card .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.92rem;font-weight:400;color:var(--ink-soft);text-transform:none;letter-spacing:0;line-height:1.5;cursor:pointer}
.form-card .wpcf7-list-item input{flex:0 0 auto;margin-top:.25em}
.form-card .wpcf7-list-item-label{flex:1}

/* Consent block reads as a distinct, quieter agreement rather than a field. */
.form-card .wpcf7-acceptance{display:block;margin-top:18px;padding:14px 16px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius)}

/* Radio groups (prayer request visibility) become selectable rows — this is a
   sensitive choice and deserves to be easy to read and easy to hit. */
.form-card .wpcf7-radio{display:block;margin-top:6px}
.form-card .wpcf7-radio .wpcf7-list-item{margin:0 0 8px}
.form-card .wpcf7-radio .wpcf7-list-item label{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .15s,background .15s}
.form-card .wpcf7-radio .wpcf7-list-item label:hover{border-color:var(--gold)}
.form-card .wpcf7-radio .wpcf7-list-item label:has(input:checked){border-color:var(--gold);background:var(--cream)}
.form-card .wpcf7-radio .wpcf7-list-item label:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}

/* --- Submit row ----------------------------------------------------------- */

.form-card .submit-row{margin-top:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.form-card .wpcf7-spinner{margin:0}

/* --- Validation ----------------------------------------------------------- */
/* CF7's default response box is an unstyled bordered rectangle. */

.form-card .wpcf7-not-valid{border-color:#B32D2E;box-shadow:0 0 0 3px rgba(179,45,46,.12)}
.form-card .wpcf7-not-valid-tip{display:block;margin-top:6px;color:#B32D2E;font-size:.85rem;font-weight:500}

.form-card .wpcf7-response-output{margin:20px 0 0;padding:14px 16px;border-width:1px;border-style:solid;border-radius:var(--radius);font-size:.92rem;line-height:1.5}
.form-card form.invalid .wpcf7-response-output,
.form-card form.unaccepted .wpcf7-response-output,
.form-card form.payment-required .wpcf7-response-output{border-color:#B32D2E;background:#FDF2F2;color:#7A1F20}
.form-card form.sent .wpcf7-response-output{border-color:#1F6F3F;background:#F0F7F2;color:#14532D}
.form-card form.failed .wpcf7-response-output,
.form-card form.aborted .wpcf7-response-output{border-color:#B45309;background:#FEF6E7;color:#7A3D06}

/* --- Honeypot ------------------------------------------------------------- */
/* Hidden either way: if the Honeypot plugin is installed this hides its field;
   if it is NOT installed, CF7 prints the raw [honeypot …] shortcode as visible
   text, and this keeps that off the page until the plugin is added. */

.nmc-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* --- Map ------------------------------------------------------------------ */

.map-embed{aspect-ratio:16/8;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:24px}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

@media (max-width:700px){
  .form-card,.contact-card{padding:24px}
}

/* A section .head inside .prose must stay centred — the .prose .eyebrow
   left-align rule was pulling "FIND US" out of alignment with its heading. */
.prose .head{text-align:center}
.prose .head .eyebrow{text-align:center}

/* --- Ministry cards with photographs --------------------------------------
   The homepage ministry cards were designed around a small centred glyph.
   Now that each ministry carries a real photograph, the card needs to hold
   an image edge-to-edge above the text without the 28px padding cutting in. */

.ministry{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ministry > a:first-child{display:block;line-height:0}
.ministry img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ministry .icon{margin-top:22px}
.ministry h3{margin:20px 22px 6px}
.ministry img + h3,
.ministry a + h3{margin-top:18px}
.ministry p{margin:0 22px 24px}
.ministry h3 a{color:inherit;text-decoration:none}
.ministry h3 a:hover{color:var(--gold-soft)}
.ministry:not(:has(img)){padding:28px 22px}
.ministry:not(:has(img)) h3{margin-left:0;margin-right:0}
.ministry:not(:has(img)) p{margin-left:0;margin-right:0;margin-bottom:0}

/* ==========================================================================
   Layout blocks break out of the reading measure — v1.0.2
   --------------------------------------------------------------------------
   v1.0.1 freed these by adding a .prose-wide class from page.php, decided by
   sniffing the post content. That works only if the sniff matches what is
   actually stored, and on the live Contact page it does not — the page was
   still rendering at the 760px measure with the theme correctly installed.

   Rather than debug the sniff, this removes the dependency on it: the layout
   blocks now break out on their own, as descendants, whether or not any class
   was added upstream. A CSS rule that needs no PHP to agree with it cannot
   fall out of sync with the PHP.
   ========================================================================== */

.prose .contact-grid,
.prose .gallery-grid,
.prose .give-grid,
.prose .card-grid,
.prose .service-grid,
.prose .events-list,
.prose .map-embed{
  width:min(1100px, calc(100vw - 48px));
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
}

/* minmax(0,…) so a column can actually shrink.
   A bare `1fr` is `minmax(auto,1fr)`, and `auto` floors at min-content — so a
   single unbreakable token (NoondayMethodistChurch@gmail.com is 31 characters
   with nowhere to wrap) can force its column wide and starve the other one.
   That is how the contact card ended up twice the width of the form. */
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}
.contact-grid > *{min-width:0}

/* And let the long address actually wrap rather than demanding the space. */
.contact-card a,
.contact-card .row div{overflow-wrap:anywhere}

@media (max-width:960px){
  .prose .contact-grid,
  .prose .gallery-grid,
  .prose .give-grid,
  .prose .card-grid,
  .prose .service-grid,
  .prose .events-list,
  .prose .map-embed{width:100%;margin-left:0;transform:none}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}

/* Ministry category/cadence label above the card title. */
.card-body .meta{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin:0}

/* ==========================================================================
   Image framing — v1.0.3
   Most of the ministry and event photographs are portrait originals. The
   mockup framed them at 4:3, which crops them gently; the generic card was
   16:9, which cut the faces off the top. Match the design, and bias the crop
   upward, because in almost every one of these photos the people are in the
   upper half of the frame.
   ========================================================================== */

.card img{aspect-ratio:4/3;object-position:center 30%}
.ministry img{aspect-ratio:4/3;object-position:center 30%}
.ministry-card .photo img{object-position:center 30%}
.archive-card img{object-position:center 30%}

/* ==========================================================================
   Dropdown menus
   --------------------------------------------------------------------------
   The mockup navigation was a flat single-level list, so the theme shipped
   with no submenu styling at all — a nested menu built in Appearance → Menus
   rendered its children as an unstyled list. This adds the panel, and the
   keyboard and touch behaviour that a hover-only dropdown would miss.
   ========================================================================== */

nav.primary li{position:relative}

nav.primary .sub-menu{
  position:absolute;top:100%;left:-14px;z-index:60;
  min-width:230px;margin:0;padding:8px 0;
  list-style:none;display:block;
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 18px 40px -16px rgba(6,61,109,.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}

nav.primary li:hover > .sub-menu,
nav.primary li:focus-within > .sub-menu,
nav.primary li.is-open > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}

nav.primary .sub-menu li{white-space:normal}
nav.primary .sub-menu a{
  display:block;padding:9px 18px;font-size:.92rem;font-weight:400;
  border-bottom:0;color:var(--ink);line-height:1.35;
}
nav.primary .sub-menu a:hover,
nav.primary .sub-menu a:focus-visible,
nav.primary .sub-menu a[aria-current="page"]{background:var(--cream);color:var(--navy)}

/* Chevron marking a parent item. The button is injected by theme.js; without
   JavaScript the caret still renders and hover/focus still opens the panel. */
nav.primary .menu-item-has-children > a::after{
  content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.65;
}

nav.primary .submenu-toggle{
  position:absolute;top:50%;right:-4px;transform:translateY(-50%);
  width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;
  color:inherit;display:none;
}
nav.primary .submenu-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}

/* Third level, if the church ever nests that deep. */
nav.primary .sub-menu .sub-menu{top:-9px;left:100%;border-top:1px solid var(--line);border-left:2px solid var(--gold)}

@media (max-width:980px){
  /* In the mobile panel a hover dropdown is meaningless — nest inline and let
     the toggle button do the work. */
  nav.primary .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    display:none;border:0;box-shadow:none;padding:2px 0 8px;
    min-width:0;background:transparent;
  }
  nav.primary li.is-open > .sub-menu{display:block}
  nav.primary li:hover > .sub-menu,
  nav.primary li:focus-within > .sub-menu{display:none}
  nav.primary li.is-open > .sub-menu{display:block}
  nav.primary .sub-menu a{padding:8px 0 8px 18px;color:var(--ink-soft)}
  nav.primary .submenu-toggle{display:block;right:0}
  nav.primary .menu-item-has-children > a::after{display:none}
  nav.primary .menu-item-has-children{padding-right:36px}
  nav.primary .submenu-toggle::after{
    content:"";position:absolute;top:50%;left:50%;width:.5em;height:.5em;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translate(-50%,-70%) rotate(45deg);transition:transform .15s ease;
  }
  nav.primary li.is-open > .submenu-toggle::after{transform:translate(-50%,-30%) rotate(-135deg)}
}

/* The mobile panel rule `nav.primary.open ul` (0,2,2) outranks
   `nav.primary .sub-menu` (0,2,1), so opening the panel was force-showing
   every submenu expanded. Match its weight and put the toggle back in charge. */
@media (max-width:980px){
  nav.primary.open .sub-menu{display:none}
  nav.primary.open li.is-open > .sub-menu{display:block}
}

/* ==========================================================================
   Page bands — v1.0.5
   Imported pages keep the mockup's full-bleed <section> structure, so these
   are the pieces that structure depends on.
   ========================================================================== */

.band-tight{padding:64px 0}
.band-centered{max-width:920px;margin:0 auto;text-align:center}

/* The scripture band is a dark section; the generic .prose blockquote styling
   added earlier would otherwise paint it navy-on-navy. */
section.dark blockquote,
section.dark .prose blockquote{
  font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(1.4rem,2.8vw,1.95rem);line-height:1.45;
  border:0;background:none;padding:0;margin:24px 0;
}
/* Child combinator, not descendant: the_content() runs wpautop, which wraps
   the blockquote's text in its own <p>. That <p> is a last-child too, so a
   descendant selector styled the scripture itself as a small uppercase
   attribution line. */
section.dark .band-centered > p:last-child{
  color:var(--gold-soft);font-family:var(--sans);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;margin:0;
}
section.dark p,section.dark li{color:#E8EDF4}
section.dark a{color:var(--gold-soft)}
section.dark .prose h2,section.dark .prose h3{color:#fff}

/* Inside a band the reading measure applies to prose only; splits and grids
   span the container as the mockup intended. */
section > .container > .prose{max-width:760px;margin:0 auto}
section > .container > .split,
section > .container > .contact-grid,
section > .container > .gallery-grid,
section > .container > .card-grid{max-width:none;margin-left:0;transform:none;width:auto}

/* The image-and-text rows are the backbone of the interior pages. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin:0}
/* No order swap: in the mockup's markup, .split.image-right already lists the
   text cell first and the image second. Reordering inverted it. */
.split img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 12px 32px -8px rgba(6,61,109,.18);margin:0}
.split .prose{max-width:none}
.split .prose h2:first-child{margin-top:0}

/* Buttons sitting together at the end of a block should sit side by side. */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.prose .btn + .btn{margin-left:12px}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:32px}
  .band-tight{padding:48px 0}
}

/* The scripture itself is pure white; section.dark p (a more specific match on
   the wpautop-inserted <p>) was greying it to #E8EDF4. */
section.dark blockquote,
section.dark blockquote p{color:#fff}

/* WordPress's admin bar is position:fixed, so a sticky header pinned to top:0
   sits underneath it and covers the top of the page hero — which is where the
   breadcrumb and eyebrow live. Only affects logged-in users, which is exactly
   who was seeing it. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}


/* ==========================================================================
   Contrast — WCAG 2.2 AA — v1.0.9
   --------------------------------------------------------------------------
   Two failures, measured rather than eyeballed:

     ministry card title   #E8EDF4 on #FFFFFF   1.18:1   (needs 4.5:1)
     gold eyebrow / meta   #C49B3A on #FFFFFF   2.59:1
     gold eyebrow / meta   #C49B3A on #F2F5F9   2.40:1

   The titles inherited the dark section's light ink onto a white card, which
   made them all but invisible. The gold is the brand colour and reads well as
   a rule or a button fill, but as 11px text on a light background it has never
   been legible enough. --gold-ink (#8C6A18) is the same hue carried down to
   5.01:1 on white and 4.64:1 on cream, so the small gold labels keep their
   character and pass.
   ========================================================================== */

.ministry h3,
.ministry h3 a,
.ministry-card h3,
.ministry-card h3 a{color:var(--navy)}
.ministry h3 a:hover,
.ministry h3 a:focus-visible,
.ministry-card:hover h3{color:var(--navy-deep);text-decoration:underline}

/* Small gold text on light backgrounds. */
.eyebrow,
.card-body .meta,
.card-body .date,
.ministry-card .meta,
.news-item .date,
.values-tag strong,
.sermon-card .date{color:var(--gold-ink)}

/* On dark backgrounds the soft gold already passes comfortably — keep it.
   Note what is NOT in this list: `section.dark .card-body .meta`. It used to
   be, and it was wrong. A card keeps its white background inside a dark band,
   so that rule painted #E8D49A on #FFFFFF — 1.39:1, the worst ratio on the
   site, introduced by the very edit that was meant to fix contrast. The
   colour a band sets is not the colour the card behind the text is painted;
   only the element's own painted background decides. */
section.dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.donate-cta .eyebrow,
.gmc-section .eyebrow{color:var(--gold-soft)}

/* Links inside body copy that were set in brand gold. */
.prose a:not(.btn){color:var(--navy)}
.prose a:not(.btn):hover{color:var(--gold-ink)}

/* ==========================================================================
   Gallery — working filters and lightbox — v1.0.9
   ========================================================================== */

.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px;padding:0}
.filter-bar button{
  font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink-soft);
  transition:border-color .15s,color .15s,background .15s;
}
.filter-bar button:hover{border-color:var(--gold);color:var(--navy)}
.filter-bar button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.filter-bar button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.gallery-status{margin:0 0 28px;font-size:.88rem;color:var(--ink-soft);min-height:1.2em}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.gallery-grid figure{margin:0;position:relative}
.gallery-grid figure[hidden]{display:none}
.gallery-grid button.gallery-open{
  display:block;padding:0;border:0;background:none;cursor:zoom-in;width:100%;line-height:0;
  border-radius:var(--radius);overflow:hidden;
}
.gallery-grid button.gallery-open:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--radius);transition:transform .3s ease}
.gallery-grid button.gallery-open:hover img{transform:scale(1.04)}

/* Lightbox. <dialog> gives focus trapping, Escape-to-close and inertness for
   free — worth more than any script I would write to imitate them. */
dialog.nmc-lightbox{
  border:0;padding:0;background:transparent;max-width:min(1100px,92vw);max-height:92vh;
}
dialog.nmc-lightbox::backdrop{background:rgba(4,42,74,.88)}
dialog.nmc-lightbox img{max-width:100%;max-height:80vh;width:auto;height:auto;
  display:block;margin:0 auto;border-radius:var(--radius)}
dialog.nmc-lightbox figcaption{color:#fff;text-align:center;margin-top:14px;font-size:.95rem}
dialog.nmc-lightbox .close{
  position:absolute;top:-44px;right:0;background:none;border:0;color:#fff;
  font-size:1rem;cursor:pointer;padding:8px 12px;
}
dialog.nmc-lightbox .close:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
dialog.nmc-lightbox .inner{position:relative}

@media (max-width:600px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}

/* ------------------------------------------------------------------ *
 * News — homepage strip and the /news/ listing
 *
 * The mockup's news page is a single reading column of dated entries.
 * Posts on the live site do have featured images, so a photograph, when
 * one exists, sits beside the entry rather than replacing the layout.
 * ------------------------------------------------------------------ */

/* Homepage: three across, and only three, so it reads as a strip. */
.card-grid.news-3up{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.card-grid.news-3up{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.card-grid.news-3up{grid-template-columns:minmax(0,1fr)}}
.news-3up .card-body h3{font-size:1.3rem;margin:0;font-family:var(--serif);line-height:1.3}
.news-3up .card-body h3 a{text-decoration:none;color:var(--navy)}
.news-3up .card-body h3 a:hover{color:var(--gold-ink)}

/* Listing */
.news-item h2 a,
.news-item h3 a{text-decoration:none;color:var(--navy)}
.news-item h2 a:hover,
.news-item h3 a:hover{color:var(--gold-ink)}
.news-item .news-more{margin:.4em 0 0}
.news-item .news-more a{font-weight:600;text-decoration:none;color:var(--navy)}
.news-item .news-more a:hover{color:var(--gold-ink)}
.news-item.has-photo{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start}
.news-item .news-photo{display:block;border-radius:var(--radius);overflow:hidden;background:var(--cream)}
.news-item .news-photo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media (max-width:700px){
  .news-item.has-photo{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* ------------------------------------------------------------------ *
 * Card links — one link per card
 *
 * Cards used to wrap their photograph in a second <a> to the same page,
 * carrying alt="" and aria-hidden. WAVE reports that as "Linked image
 * missing alternative text", and it is right: a link whose only content is
 * a decorative image has no accessible name at all. It was also a second
 * link to the same destination, so a screen-reader user heard the card
 * announced twice.
 *
 * The heading is now the card's only link, stretched over the whole card
 * with a pseudo-element. The photo stays clickable, the alt stays empty
 * (correct — the heading already names it), and there is one link with one
 * accessible name.
 * ------------------------------------------------------------------ */

.card,
.ministry,
.ministry-card,
.news-item{position:relative}

.card .card-body h2 a::after,
.card .card-body h3 a::after,
.ministry h3 a::after,
.ministry-card h3 a::after,
.news-item h2 a::after,
.news-item h3 a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

/* Anything genuinely interactive inside a card must sit above the overlay. */
.card .card-body a:not(:where(h2 a, h3 a)),
.news-item .news-body a{position:relative;z-index:2}

/* "Read more" is now a span, not a link — keep it looking the same. */
.card-body span.more,
.news-item .news-more span{
  margin-top:auto;padding-top:8px;font-weight:600;color:var(--navy);display:inline-block;
}
.card:hover .card-body span.more,
.news-item:hover .news-more span{color:var(--gold-ink)}

/* The whole card should feel clickable now that it is. */
.card:has(h2 a):hover,
.card:has(h3 a):hover,
.ministry-card:hover{cursor:pointer}

/* Keyboard focus must be visible on the card, not just the heading text. */
.card:focus-within,
.ministry-card:focus-within,
.news-item:focus-within{outline:3px solid var(--gold-ink);outline-offset:3px}
.card .card-body h2 a:focus-visible,
.card .card-body h3 a:focus-visible,
.news-item h3 a:focus-visible{outline:none}

/* Links inside prose on dark bands were distinguishable by colour alone —
   1.29:1 against the text around them, well under the 3:1 WCAG asks for.
   Underlining them is the fix that does not depend on colour at all. */
section.dark p a:not(.btn),
footer.site-footer p a:not(.btn),
.donate-cta p a:not(.btn){text-decoration:underline;text-underline-offset:2px}

/* On a dark band, `section.dark a` (specificity 0-0-1-1) was beating `.btn`
   (0-0-1-0), so a gold button rendered pale-gold text on a gold background —
   1.76:1. Buttons are not body links; state their colour at matching weight. */
section.dark a.btn,
.donate-cta a.btn,
footer.site-footer a.btn{color:var(--navy-deep)}
section.dark a.btn:hover,
.donate-cta a.btn:hover,
footer.site-footer a.btn:hover{color:var(--gold-soft)}
section.dark a.btn.outline,
.donate-cta a.btn.outline{color:#fff}
section.dark a.btn.outline:hover{color:var(--navy)}
section.dark a.btn.dark,
.donate-cta a.btn.dark{color:#fff}

/* Topbar links sat at 1.29:1 against the text beside them — distinguishable
   by colour alone, and barely that. Underline them. */
.topbar a{text-decoration:underline;text-underline-offset:2px}

/* Link-in-text-block, the last two cases.
   Footer columns are lists where every item is a link, so there is no
   surrounding prose to be confused with — matching the list colour to the
   link colour removes the difference the rule measures. Breadcrumbs do mix
   links with the current page, so those get an underline instead. */
footer.site-footer .grid li,
footer.site-footer .grid ul{color:#E1E5EE}
.breadcrumbs a{text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Contrast — light surfaces inside dark bands — v1.0.23
   --------------------------------------------------------------------------
   The rule that keeps being got wrong on this site is that a band's colour is
   not the colour behind the text. `section.dark` sets pale ink for text that
   sits on the band itself, but a card inside that band keeps its own white
   background, and pale ink on white is the worst contrast the site has ever
   shipped — 1.39:1, from a rule added in the pass that was supposed to fix
   contrast.

   `section.dark a` (0-1-1) also outranks `.sermon-item`/`.event-row`/
   `.archive-card`'s own `color:inherit` (0-1-0), so a whole white card that
   happens to be a link took the band's pale gold.

   So: name the light surfaces once, and put the ink back on them. Anything
   added to a dark band later that has its own light background belongs on
   this list.
   ========================================================================== */

section.dark .card,
section.dark .sermon-item,
section.dark .events-list,
section.dark .event-row,
section.dark .archive-card,
section.dark .ministry-card,
section.dark .value-card,
section.dark .service-card,
section.dark .form-card,
section.dark .contact-card,
section.dark .news-item,
.donate-cta .card,
.donate-cta .form-card{color:var(--ink)}

section.dark .card p,
section.dark .card li,
section.dark .sermon-item p,
section.dark .event-row p,
section.dark .archive-card p,
section.dark .ministry-card p,
section.dark .value-card p,
section.dark .service-card p,
section.dark .form-card p,
section.dark .form-card label,
section.dark .contact-card p,
section.dark .news-item p{color:var(--ink-soft)}

section.dark .card a:not(.btn),
section.dark .sermon-item a:not(.btn),
section.dark .event-row a:not(.btn),
section.dark .archive-card a:not(.btn),
section.dark .ministry-card a:not(.btn),
section.dark .value-card a:not(.btn),
section.dark .news-item a:not(.btn){color:var(--navy)}
section.dark .card a:not(.btn):hover,
section.dark .news-item a:not(.btn):hover{color:var(--gold-ink)}

/* Headings inside a white card follow the card, not the band. */
section.dark .card h2,
section.dark .card h3,
section.dark .archive-card h2,
section.dark .archive-card h3,
section.dark .ministry-card h2,
section.dark .ministry-card h3,
section.dark .value-card h3,
section.dark .service-card h3{color:var(--navy)}

/* The small gold label keeps its gold — the readable one. */
section.dark .card .meta,
section.dark .card .date,
section.dark .archive-card .meta,
section.dark .ministry-card .meta,
section.dark .sermon-item .meta .date{color:var(--gold-ink)}
