/* River of Life Fellowship theme. Mobile first, no JavaScript needed. Colors and fonts come only from tokens-*.css.
   Built by WorkflowUnity LLC. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:89px} /* sticky header (73px) + 16px: anchors, the skip link and focused fields never land under it (a11y M2) */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--body-size);line-height:1.6;overflow-wrap:break-word}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none;text-underline-offset:.22em} /* Jim 10-28 pass 4: no underline by default; see "Link style" at the end */
:where(a):is(:hover,:focus-visible){color:var(--link-hover,var(--link))}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--head-weight);line-height:var(--head-leading);letter-spacing:var(--head-tracking);text-transform:var(--head-transform);font-stretch:var(--head-stretch);margin:0 0 .5em;color:inherit;text-wrap:balance}
h1{font-size:var(--h1-size)}
h2{font-size:clamp(1.9rem,5vw,2.9rem)}
h3{font-size:1.4rem}
h4{font-size:1.15rem}
p,ul,ol,dl{margin:0 0 1em}
b,strong,th{font-weight:600} /* Jim 10-28: lighter bold (Look B loads Inter 600, not 700) */
ul,ol{padding-left:1.3em}
li+li{margin-top:.35em}
hr{border:0;border-top:1px solid var(--rule,var(--line));margin:2.5rem 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.wrap-narrow{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media(min-width:760px){.wrap,.wrap-narrow{padding:0 32px}}
/* .wrap-narrow (Jim 10-29 change desk, /dfl/): it used to be a 780px box centred on the page, so card grids inside it
   were squeezed to ~160px a card while the hero title, header and footer ran the full --wrap. It is now the same box as
   .wrap (same left edge as the page title), and only running text keeps a reading width. Card grids and other blocks
   use the full content width; an FAQ keeps the .faq-wide width. A block written with style="text-align:center"
   keeps its text column centred. */
.wrap-narrow>:is(p,h2,h3,h4,ul,ol,dl,blockquote,.eyebrow,.section-intro){max-width:var(--measure,70ch)}
.wrap-narrow>.faq{max-width:900px}
.wrap-narrow>:not(.eyebrow)+h2{margin-top:clamp(32px,4vw,48px)} /* a new heading inside the block gets room above it */
.wrap-narrow[style*="text-align:center"]>*{margin-inline:auto}
.screen-reader-text,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:12px 16px;z-index:99;font-weight:600}
.skip:focus{left:8px}
.eyebrow{display:block;font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:.6em}
.lede{font-size:1.3rem;color:var(--muted);max-width:40ch}
.muted{color:var(--muted)}
.nowrap,a[href^="tel:"]{white-space:nowrap}
.note{font-size:1rem;color:var(--muted)}

/* buttons: 48px+ tap targets */
.btn,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:12px 26px;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:1.1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-primary,.wp-block-button__link{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover,.wp-block-button__link:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

section,.section{padding:64px 0}
@media(min-width:900px){section,.section{padding:96px 0}}
.band-soft{background:var(--surface-2);color:var(--ink)}
.band-dark{background:var(--dark);color:var(--dark-ink);--ink:var(--dark-ink);--muted:var(--dark-ink);--link:var(--dark-ink);--eyebrow:var(--highlight)}
.band-dark .btn-ghost{color:var(--dark-ink)}
.band-dark .btn-ghost:hover{background:var(--dark-ink);color:var(--dark)}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);font-size:var(--nav-size,var(--body-size))} /* the menu keeps its own size when body text changes (Jim 10-29) */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}
.logo{display:inline-flex;align-items:center;min-height:48px}
.logo img{height:42px;width:auto;filter:var(--logo-filter)}
.nav-main{display:none}
.nav-main>ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav-main li{margin:0;position:relative}
.nav-main a{display:inline-flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:none;font-weight:500;padding:0 12px;border-radius:8px}
.nav-main a[aria-current="page"]{color:var(--accent-text,var(--accent));background:color-mix(in srgb,currentColor 14%,transparent)} /* current page: gold text on a faint gold pill, not only a color change */
.nav-main a:is(:hover,:focus-visible){color:var(--link-hover,var(--accent-text,var(--accent)))}
.nav-main .sub{display:none;position:absolute;top:100%;left:0;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;list-style:none;margin:0;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.nav-main li:hover>.sub,.nav-main li:focus-within>.sub{display:block}
.nav-main li.sub-closed>.sub{display:none} /* Escape closed it (assets/js/menu.js) */
.nav-main .sub a{display:flex;width:100%;font-weight:400;font-size:.95rem;min-height:44px} /* Jim 10-28: dropdown items thinner, a bit smaller */
.bar-actions{display:flex;gap:10px;align-items:center}
.bar .btn{min-height:48px;padding:10px 20px;font-size:1rem}
.hide-sm{display:none!important}
details.menu{position:static}
details.menu summary{list-style:none;min-height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);border-radius:12px;font-weight:600;padding:0 14px;cursor:pointer}
details.menu summary::-webkit-details-marker{display:none}
.drop{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 24px;max-height:calc(100vh - 72px);overflow:auto;box-shadow:0 16px 30px rgba(0,0,0,.12)}
.drop ul{list-style:none;margin:0;padding:0}
.drop li{margin:0}
.drop a{display:flex;align-items:center;min-height:52px;color:var(--ink);text-decoration:none;font-weight:500;font-size:1.15rem;border-bottom:1px solid var(--line)}
.drop .sub a{padding-left:18px;font-weight:400;font-size:1.05rem}
.drop .btn{margin-top:16px;width:100%;border-bottom:0}
.drop a:not(.btn):is(:hover,:focus-visible){color:var(--link-hover,var(--link))}
.drop a.btn-primary{color:var(--accent-ink)} /* site review H1: the menu link color must not win over the gold button's dark ink */
@media(min-width:1040px){.nav-main{display:block}details.menu{display:none}.hide-sm{display:inline-flex!important}}

/* hero */
.hero{padding:36px 0 56px}
.hero-grid{display:grid;gap:32px;align-items:center}
.hero h1 em{font-style:italic;color:var(--link);font-weight:500}
.hero-photo{position:relative;margin:0}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:55% 30%;border-radius:var(--hero-shape)}
.hero-tag{position:absolute;left:12px;bottom:20px;background:var(--surface);color:var(--ink);padding:14px 18px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.16);font-weight:500;max-width:250px;line-height:1.35}
.hero-tag strong{display:block;font-family:var(--font-head);font-size:1.25rem}
@media(min-width:900px){.hero{padding:64px 0 96px}.hero-grid{grid-template-columns:1.1fr .9fr;gap:64px}.hero-tag{left:-12px}}

/* page head */
.page-head{padding:44px 0 40px;border-bottom:1px solid var(--line)}
.page-head .lede{margin-bottom:0}
.page-head.with-photo .hero-grid{gap:28px}
.page-head.with-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
@media(min-width:900px){.page-head{padding:72px 0 64px}.page-head.with-photo .hero-grid{grid-template-columns:1fr 1fr;gap:56px}}
.crumbs{font-size:1rem;margin-bottom:12px;color:var(--muted)}
.crumbs a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
.crumbs a:is(:hover,:focus-visible),.dir-b .page-head .crumbs a:is(:hover,:focus-visible){color:var(--link-hover,var(--link))}

/* service times band */
.times{background:var(--brand);color:var(--brand-ink);padding:0}
.times-grid{display:grid}
.times-grid>div{padding:26px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.times-grid>div:last-child{border-bottom:0}
.times h2,.times h3{color:var(--brand-ink);font-size:1.55rem;margin-bottom:.2em}
.times p{margin:0;font-size:1.15rem}
.times a{color:var(--brand-ink);font-weight:600}
@media(min-width:900px){.times-grid{grid-template-columns:repeat(3,1fr)}.times-grid>div{padding:38px 32px;border-bottom:0;border-right:1px solid rgba(255,255,255,.25)}.times-grid>div:first-child{padding-left:0}.times-grid>div:last-child{border-right:0}}
.times-list{list-style:none;padding:0;margin:0 0 1em}
.times-list li{padding:14px 0;border-bottom:1px solid var(--rule,var(--line));margin:0}
.times-list strong{display:block;font-family:var(--font-head);font-size:1.25rem}

/* grids + cards */
.split-head{display:grid;gap:12px;margin-bottom:28px}
@media(min-width:900px){.split-head{grid-template-columns:1fr 1fr;align-items:end}}
.grid{display:grid;gap:20px}
.grid>*,.feature>*,.hero-grid>*,.msg-grid>*,.split-head>*{min-width:0} /* a long link or word never widens a column past the screen (a11y M4, 320px reflow) */
.prose a,.grid a,.feature a{overflow-wrap:anywhere}
@media(min-width:700px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);color:var(--ink);border-radius:var(--radius);padding:26px;border:1px solid var(--line)}
.card h3{margin-bottom:.3em}
.card p:last-child{margin-bottom:0}
.card .num{font-family:var(--font-head);font-style:italic;color:var(--eyebrow);font-size:1.5rem;display:block;margin-bottom:6px}
a.tile{background:var(--surface);color:var(--ink);border-radius:var(--radius);overflow:hidden;text-decoration:none;border:1px solid var(--line);display:flex;flex-direction:column}
a.tile picture,a.tile img,a.tile .ph{width:100%;aspect-ratio:3/2;object-fit:cover}
a.tile .body{padding:18px 22px 22px}
a.tile h3{margin-bottom:.2em}
a.tile p{margin:0;color:var(--muted)}
a.tile:is(:hover,:focus-visible) h3{color:var(--link-hover,var(--accent-text,var(--accent)))}
.ph{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 12px,var(--line) 12px,var(--line) 24px);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600;text-align:center;padding:12px;border-radius:var(--radius)}
a.tile .ph{border-radius:0}

/* two-column feature */
.feature{display:grid;gap:32px;align-items:center}
.feature figure{margin:0}
.feature img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover}
@media(min-width:900px){.feature{grid-template-columns:1fr 1fr;gap:64px}.feature.flip>figure{order:2}}
@media(min-width:900px){.feature h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}} /* half-width column: from 900 to ~1290px the h2 grows slower, so one long word (CONVERSATIONS on /hothouse/ at 900px) never breaks; 1290px and up unchanged */
.checklist{list-style:none;padding:0;margin:0 0 24px}
.checklist li{padding:12px 0;border-bottom:1px solid var(--rule,var(--line));margin:0}
.checklist li strong{display:block}
.badge-logo{width:84px;height:auto;margin-bottom:12px}

/* prose (page content) */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em;font-size:clamp(1.6rem,4vw,2.2rem)}
.prose h3{margin-top:1.4em}
.table-wrap{overflow-x:auto;margin:1em 0}.prose table{border-collapse:collapse;width:100%;font-size:.95em}.prose th,.prose td{text-align:left;vertical-align:top;padding:.55em .7em;border-bottom:1px solid var(--line,rgba(127,127,127,.35))}.prose thead th{font-weight:600}.prose li>ul{margin-top:.4em}
.prose>*:first-child{margin-top:0}
.prose img{border-radius:var(--radius)}
.prose blockquote{margin:1.5em 0;padding:4px 0 4px 20px;border-left:4px solid var(--accent);font-style:italic}
.prose .scripture{font-size:1rem;color:var(--muted)}
.content-block{padding-block:56px} /* padding-block only: keeps .wrap's side gutter (a11y H1) */
.content-block+.content-block{padding-top:0}

/* FAQ: native details, no JS */
.faq{border-top:1px solid var(--rule,var(--line));margin:0 0 1.5em}
.faq details{border-bottom:1px solid var(--rule,var(--line))}
.faq summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;font-weight:600;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";font-size:1.6rem;line-height:1;color:var(--accent-text,var(--accent));flex:none}
.faq details[open] summary::after{content:"\2212";content:"\2212" / ""}
.faq .a{padding:0 0 18px}
.faq .a p:last-child{margin-bottom:0}

/* message / watch */
.msg-grid{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.msg-grid{grid-template-columns:1.3fr 1fr;gap:56px}}
.video-slot{aspect-ratio:16/9;border-radius:var(--radius);background:var(--dark-2);border:2px dashed var(--video-border,var(--muted));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--dark-ink);text-decoration:none}
.video-slot .play{width:76px;height:76px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
a.video-slot:is(:hover,:focus-visible) strong{color:var(--link-hover,currentColor)}

/* events strip (Unity events fill it at runtime) */
.events-strip{display:flex;gap:16px;overflow-x:auto;padding:8px 2px 20px;scroll-snap-type:x mandatory;list-style:none;margin:0}
.events-strip li{flex:0 0 260px;scroll-snap-align:start;background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);padding:22px;margin:0}
.events-strip .date{font-family:var(--font-head);font-size:1.25rem;color:var(--link);display:block;margin-bottom:4px}
.events-strip p{margin:.3em 0 0;color:var(--muted)}

/* give box */
.give-box{--focus:var(--accent-ink);background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-lg);padding:40px 26px;display:grid;gap:20px;align-items:center}
.give-box h2{color:var(--accent-ink);margin:0}
.give-box p{margin:0;font-size:1.2rem}
.give-box .btn{background:var(--accent-ink);color:var(--accent)}
.give-box .btn:hover{background:var(--bg);color:var(--accent-hover)}
@media(min-width:900px){.give-box{grid-template-columns:1.5fr 1fr auto;padding:56px}}
.give-ways .card h3{display:flex;gap:10px;align-items:center}

/* Unity widget slots (wfu-unity church widgets; dark until the stack is live) */
.unity-slot{margin:28px 0}
.unity-slot .uc-embed__fallback,.unity-fallback{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.uc-embed a{min-height:48px}

/* NEED markers: preview mode only (launch strips them) */
.need{display:inline-block;background:var(--need-bg);color:var(--need-ink);border:1px dashed var(--need-ink);border-radius:6px;padding:0 8px;font-size:.9rem;font-weight:600;font-family:var(--font-body);font-style:normal;text-transform:none;letter-spacing:0;vertical-align:middle}
.ph-need{aspect-ratio:3/2}
.ph-need span{background:var(--bg);color:var(--ink);padding:6px 12px;border-radius:8px}

/* footer */
.site-footer{background:var(--dark-2);color:var(--dark-ink);padding:60px 0 110px}
.site-footer a{color:var(--dark-ink)}
.foot-grid{display:grid;gap:32px}
.site-footer h2{color:var(--dark-ink);font-size:1.05rem;font-family:var(--font-body);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.site-footer a:is(:hover,:focus-visible){color:var(--link-hover,var(--dark-ink))}
.logo-w{height:54px;width:auto;margin-bottom:16px}
.foot-legal{border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:20px;font-size:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px}
.foot-bible{font-size:.85rem;opacity:.8;margin:12px 0 0;max-width:80ch}
@media(min-width:900px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* WordPress bits */
.alignwide{max-width:var(--wrap)}
.wp-block-image img{border-radius:var(--radius)}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
@media print{.site-header,.site-footer,.uc-embed,.unity-slot,.to-top,.jump-band{display:none}}
/* Back to top (Jim 10-28): bottom right, lifted above the chat bubble's corner so it never covers "Ask Jack". */
.to-top{position:fixed;right:20px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:30;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.to-top[hidden]{display:none}
html.wfu-ytc-docked .to-top{bottom:calc(var(--wfu-dock-b,0px) + var(--wfu-dock-h,0px) + 32px + env(safe-area-inset-bottom,0px))} /* above the corner video player (wfu-youtube-carousel 0.2.0) */
.to-top:hover{border-color:var(--accent-text,var(--accent));color:var(--accent-text,var(--accent))}
/* Corner stack (Kyle 10-29), only on pages with the chat bubble (.uc-embed--bubble): bubble at the bottom right
   (16px + its data-uc-offset, 56px tall: --river-chat-lift = that offset), the corner video player above it, back-to-top
   above both. Nothing sits on anything else at 390, 768 or 1440. assets/js/page.js adds .river-chat-wait while the
   bubble would cover a button on the first screen. */
:root{--river-chat-lift:0px}
:root:has(.uc-embed--bubble){--river-chat-top:calc(16px + 56px + var(--river-chat-lift) + env(safe-area-inset-bottom,0px));--river-dock-bottom:max(calc(var(--wfu-dock-b,0px) + 20px + env(safe-area-inset-bottom,0px)),calc(var(--river-chat-top) + 12px))}
:root:has(.uc-embed--bubble) .to-top{bottom:calc(var(--river-chat-top) + 12px)}
:root:has(.uc-embed--bubble) .wfu-ytc-dock:not([data-mode="pinned"]){bottom:var(--river-dock-bottom)}
:root:has(.uc-embed--bubble).wfu-ytc-docked .to-top{bottom:calc(var(--river-dock-bottom) + var(--wfu-dock-h,0px) + 12px)}
@media(max-width:599px){
  :root:has(.uc-embed--bubble){--river-dock-bottom:max(calc(var(--wfu-dock-b,0px) + 8px + env(safe-area-inset-bottom,0px)),calc(var(--river-chat-top) + 8px))}
  :root:has(.uc-embed--bubble).wfu-ytc-docked body{padding-bottom:calc(var(--river-dock-bottom) + var(--wfu-dock-h,0px) + 16px)!important}
}
html.river-chat-wait [data-unity-chat]{visibility:hidden}

/* visitor card form */
.visitor-card{display:grid;gap:18px;max-width:640px}
.vc-row{display:grid;gap:6px}
.vc-row label,.vc-radios legend{font-weight:600}
.visitor-card input[type=text],.visitor-card input[type=email],.visitor-card input[type=tel]{min-height:52px;padding:10px 14px;border:2px solid var(--muted);border-radius:12px;font:inherit;background:var(--bg);color:var(--ink);width:100%}
.vc-radios{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.vc-radios legend{width:100%;margin-bottom:6px;padding:0}
.vc-radios label{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.vc-radios input{width:22px;height:22px;accent-color:var(--accent)}
.visitor-card button[disabled]{opacity:.7;cursor:not-allowed}
/* River forms (plugin river-forms): same look as the visitor card, no JavaScript */
.rf-form{display:grid;gap:22px;max-width:760px}
.rf-row{display:grid;gap:6px;margin:0}
.rf-row>label,.rf-choices legend,.rf-group legend{font-weight:600}
.rf-req,.rf-if{font-weight:400;color:var(--muted);font-size:.95em}
.rf-form input[type=text],.rf-form input[type=email],.rf-form input[type=tel],.rf-form input[type=date],.rf-form select,.rf-form textarea{min-height:52px;padding:10px 14px;border:2px solid var(--muted);border-radius:12px;font:inherit;background:var(--bg);color:var(--ink);width:100%;max-width:100%}
.rf-form textarea{min-height:140px;resize:vertical}
.rf-form input[type=date]{color-scheme:var(--scheme,dark)}
.rf-form{grid-template-columns:minmax(0,1fr)}
.rf-form input[type=file]{font:inherit;min-height:52px;width:100%;min-width:0;max-width:100%} /* a11y H2: the native file input no longer sets the form's width */
.rf-choices,.rf-group{border:0;margin:0;padding:0;min-width:0}
.rf-choices legend,.rf-group legend{width:100%;margin-bottom:8px;padding:0}
.rf-choices label{display:flex;align-items:center;gap:10px;min-height:44px;min-width:0;overflow-wrap:anywhere}
.rf-choices input{width:22px;height:22px;flex:none;accent-color:var(--accent)}
.rf-pair{display:grid;gap:12px}
@media(min-width:640px){.rf-pair{grid-template-columns:1fr 1fr}}
.rf-sub{display:grid;gap:4px;margin-bottom:10px}
.rf-sub label{font-size:1rem;color:var(--muted)}
.rf-form .rf-section{margin:12px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:clamp(1.3rem,3.5vw,1.7rem)}
.rf-desc,.rf-intro,.rf-legend-note{color:var(--muted);margin:0}
.rf-desc p{margin:0 0 .6em}
.rf-error{color:var(--error,#FFB4A8);font-weight:600;margin:0}
.rf-form .rf-has-error input,.rf-form .rf-has-error select,.rf-form .rf-has-error textarea{border-color:var(--error,#FFB4A8)}
.rf-errors{border:2px solid var(--error,#FFB4A8);border-radius:12px;padding:14px 18px}
.rf-errors a{color:var(--error,#FFB4A8)}
.rf-errors ul{margin:.4em 0 0;padding-left:1.2em}
.rf-actions{margin-top:10px} /* Jim 10-28: room between the last field and the submit button */
.rf-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rf-thanks,.rf-off{max-width:760px;font-size:1.15rem}
.part-intro{max-width:70ch;font-size:1.15rem;margin:0 0 1.6em;color:var(--muted)}
.beliefs .refs,.faq .refs{color:var(--muted);font-size:1rem}
.draft-note{background:var(--need-bg);color:var(--need-ink);border:2px dashed var(--need-ink);border-radius:12px;padding:14px 18px;margin:0 0 1.6em}
.draft-note p{margin:0}
a.card{display:block;text-decoration:none}
a.card:is(:hover,:focus-visible) :is(h2,h3){color:var(--link-hover,var(--accent-text,var(--accent)))}
.card.staff{padding:0;overflow:hidden}
.card.staff .headshot{width:100%;aspect-ratio:1/1;object-fit:cover}
.card.staff h3,.card.staff p{padding:0 22px}
.card.staff h3{margin-top:18px}
.card.staff p:last-child{padding-bottom:22px}
.more-verses{margin:0 0 1.5em}
.more-verses summary{cursor:pointer;min-height:48px;display:inline-flex;align-items:center;font-weight:600;color:var(--link)}
.question-list{list-style:none;padding:0}
.question-list li{border-bottom:1px solid var(--rule,var(--line));margin:0}
.question-list a{display:flex;align-items:center;min-height:56px;font-weight:500;font-size:1.15rem}
.feature img.badge-logo,img.badge-logo{width:84px;height:auto;aspect-ratio:auto;border-radius:0;object-fit:contain}

/* What We Believe (/beliefs/): jump links, numbered belief rows, the FAQ uses .faq above */
.jump{display:flex;flex-wrap:nowrap;gap:10px;list-style:none;padding:2px 4px;margin:0 -4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jump::-webkit-scrollbar{display:none}
.jump li{margin:0;flex:0 0 auto}
.jump a{display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;padding:6px 18px;border:2px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}
.jump a:hover{border-color:var(--accent-text,var(--accent));color:var(--accent-text,var(--accent))}
/* Jim 10-28: the pill row stays under the sticky header (73px) while the page scrolls; assets/js/page.js marks the
   section on screen (aria-current). Phones: one row that scrolls sideways. Anchors land below header + pills. */
.jump-band{position:sticky;top:73px;z-index:15;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--line)}
.jump a[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.jump a[aria-current="true"]:hover{color:var(--accent-ink)}
html:has(.jump-band){scroll-padding-top:168px} /* header 73 + pills ~79 + 16 */
@media(min-width:900px){.jump-band{padding:14px 0}}
.beliefs{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule,var(--line));counter-reset:belief}
.beliefs>li{display:grid;gap:8px 48px;padding:30px 0;border-bottom:1px solid var(--rule,var(--line));margin:0;counter-increment:belief}
.beliefs>li>h3{margin:0;font-size:clamp(1.5rem,4vw,2rem)}
.beliefs>li>h3::before{content:counter(belief,decimal-leading-zero);display:block;font-family:var(--font-head);font-size:1rem;letter-spacing:.12em;color:var(--eyebrow);margin-bottom:6px}
.beliefs .stmt{font-weight:600;font-size:1.2rem}
.beliefs .body>*:last-child{margin-bottom:0}
.beliefs blockquote{margin:1em 0;padding:4px 0 4px 18px;border-left:4px solid var(--accent);font-style:italic}
.beliefs .scripture{font-size:1rem;color:var(--muted);font-style:normal}
@media(min-width:900px){.beliefs>li{grid-template-columns:300px minmax(0,1fr);padding:40px 0}}
.section-intro{max-width:60ch;color:var(--muted)}
.band-panel{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq-wide{max-width:900px}

/* "[Jim to provide]": a clearly marked placeholder for text only River's pastors can write. Never stripped (unlike
   [NEED]); parity --launch fails while any are left. */
.jim-tbd{display:block;background:var(--need-bg);color:var(--need-ink);border:2px dashed var(--need-ink);border-radius:10px;padding:12px 16px;font-weight:600;font-style:normal}
.jim-tbd small{display:block;font-weight:400;font-size:.95rem}

/* ---- 10-28 pass 2 (Jim): secondary accent hooks, home icon, small dropdown link, questions, what to expect, calendar, give ----
   --rule (divider lines), --bullet (list bullets), --hl (one highlighted headline phrase), --dot (eyebrow dot) and
   --video-border are the secondary accent; set per look in the token file (Look B gold, pass 3: only --hl and --dot, the strip-light blue #8DD3F0).
   Unset = the old line/text colors. */
.hl{color:var(--hl,inherit)}
.eyebrow-dot::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--dot,currentColor);margin-right:.55em;vertical-align:.05em}
.prose ul>li::marker,main section ul:not([class])>li::marker{color:var(--bullet,currentColor)}
.nav-main .nav-home a{padding:0 10px}
.nav-main .nav-home svg,.drop .nav-home svg{display:block}
.drop .nav-home a{gap:10px}
.nav-main .sub .sub-more{margin-top:6px;padding-top:6px;border-top:1px solid var(--rule,var(--line))}
.nav-main .sub .sub-more a{font-size:.85rem;min-height:40px;color:var(--muted)}
.drop .sub .sub-more a{font-size:.95rem;color:var(--muted)}
.q-groups{gap:28px}
.q-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px 8px}
.q-group h2{font-size:clamp(1.4rem,4vw,1.8rem);margin:0 0 6px;padding-bottom:12px;border-bottom:2px solid var(--rule,var(--line))}
.q-group .question-list{margin:0}
.q-group .question-list li:last-child{border-bottom:0}
.q-group .question-list a{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:14px 0;min-height:48px;text-decoration:none;color:var(--ink)}
.q-group .question-list .q{font-weight:600;font-size:1.1rem}
.q-group .question-list .qa{color:var(--muted);font-size:1rem}
.q-group .question-list a:hover .q,.q-group .question-list a:focus-visible .q{color:var(--link-hover,var(--accent-text,var(--accent)))}
.expect-grid .card h2{font-size:clamp(1.3rem,3.5vw,1.6rem);padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--rule,var(--line))}
.cal-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px;color:var(--ink);text-decoration:none}
.cal-card-text{display:flex;flex-direction:column;gap:4px}
.cal-card-text strong{font-size:1.25rem}
.cal-card-text span{color:var(--muted)}
.cal-card-go{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:1.4rem}
.cal-card:hover strong,.cal-card:focus-visible strong{color:var(--link-hover,var(--accent-text,var(--accent)))}
.give-note{font-size:.95rem;margin:12px 0 0}

/* ---- Who We Are (Jim 10-28): Mission & Vision, and a compact staff row ----
   Staff: one row of five on desktop, three per row on tablets (wraps), a sideways swipe row on phones. Photo, name,
   title, then the full bio, always shown (site review M1, 10-28: the hover/button overlay cut 3 of 5 bios off at
   desktop width; no scroll boxes). */
.mv-grid{gap:32px 56px}
.mv h2{margin-bottom:.4em}
.mv-quote{margin:1.2em 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent-2,var(--accent));font-style:italic}
.mv-quote p{margin:0 0 .3em}
.mv-quote .scripture{font-style:normal;color:var(--muted);font-size:1rem}
.mv-link{margin:0 0 28px;color:var(--muted)}
.staff-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card.staff{display:flex;flex-direction:column}
.card.staff .staff-photo{position:relative}
.card.staff .headshot{width:100%;aspect-ratio:1/1;object-fit:cover}
.card.staff h3{font-size:1.15rem;margin:14px 0 2px}
.card.staff .staff-role{font-size:.95rem;margin:0 0 10px;padding:0 16px}
.card.staff h3,.card.staff .staff-bio p{padding:0 16px}
.staff-bio{padding:0 0 6px}
.staff-bio p{font-size:.95rem;line-height:1.45;margin:0 0 12px}
@media(min-width:1040px){.staff-row{grid-template-columns:repeat(5,1fr)}}
@media(min-width:700px) and (max-width:1039px){.staff-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:699px){
  .staff-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 14px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:thin}
  .staff-row .card.staff{flex:0 0 72%;scroll-snap-align:start}
}

/* ---- The Hothouse podcast (Jim 10-28, pass 3): /hothouse/, plus a promo band on /live/ and /flourish/ ----
   River's own layout and colors; only the podcast art brings its neon pink and green. */
.feature .pod-art img{aspect-ratio:1/1;object-fit:cover}
.pod-feature{align-items:center}
.pod-promo{display:grid;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.pod-promo h2{font-size:clamp(1.6rem,4.5vw,2.4rem);margin-bottom:.3em}
.pod-promo p{color:var(--muted)}
.pod-promo .actions{margin-top:4px}
.pod-promo-art{display:block;width:160px}
.pod-promo-art img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);display:block}
@media(min-width:760px){.pod-promo{grid-template-columns:200px 1fr;gap:36px;padding:28px 32px}.pod-promo-art{width:200px}}

/* ---- Production booth band on /live/ (Jim 10-28, IMG_7239): the photo runs wider than the text column; no text sits
   on the photo. Both looks are dark pages, so the blue-lit photo sits on the page color with a hairline frame. ---- */
/* Jim 10-28 (mail 2947): Messages now sits above the booth band. The hairline only separates two dark bands, so it is skipped after the gold/accent band. */
:not(.band-soft)+.booth-band{border-top:1px solid var(--line)}
.feature.booth img{aspect-ratio:3/2;border:1px solid var(--line)}
@media(min-width:900px){.feature.booth{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}

/* ---- Give page helper (site re-check N1 + N3, 10-28): busy look on a Give link while Planning Center's script loads
   (give.js sets aria-busy), and our own dialog element that owns their backdrop + frame (it paints nothing). ---- */
a[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::after{content:"";width:1em;height:1em;flex:0 0 1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:river-spin .8s linear infinite}
@keyframes river-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn[aria-busy="true"]::after{animation:none;border-right-color:currentColor;opacity:.55}}
.give-dialog{position:fixed;inset:0;pointer-events:none;z-index:2147483645;outline:none}

/* ---- Link style (Jim 10-28, pass 4): "the underline style is a bit much ... maybe yellow links turn to that blue color?"
   - Every link: no underline by default. Hover and keyboard focus turn it --link-hover: the strip-light blue #8DD3F0 on
     the gold look (11.6:1 on the page, 10.4:1 on panels); the light slate tint #B9C8D3 on the blue look (tokens-b.css).
   - Links that are plainly links (menus, buttons, cards, tiles, breadcrumbs, pills, question lists, footer lists, the
     "Listen on" lists) never get an underline; they change color on hover and keep the 3px focus ring.
   - Links inside running text (a sentence in a paragraph or a plain list item) keep a faint 1px underline at 45%
     opacity. Gold next to white text is only about 2:1, so color alone would fail WCAG 1.4.1 (use of color); the faint
     line is the second cue. On hover/focus the line goes solid blue, 2px. Footer "Get directions" and the bare phone/email
     links in the /contact-us/ cards count as these too (axe link-in-text-block).
   - Keyboard focus: the global 3px :focus-visible ring is unchanged.
   Pass 5 (Jim 10-28 21:33, "links are still underlined"): the faint underline at rest is gone too. Running-text links
   are now semibold (600) instead, so they still differ from the words around them without color (WCAG 1.4.1, and on the
   gold band where link and text share a color). Hover/focus: the blue plus a solid 2px underline.
   The old look (underline on every link) is in git before this commit. ---- */
:is(:is(main,.site-footer) :is(p,li,dd,td,blockquote,figcaption) a,main .card>a):not([class]):not(:is(.crumbs,.question-list,.jump,.checklist,.actions,.foot-grid ul) a){text-decoration-line:none;font-weight:600}
:is(:is(main,.site-footer) :is(p,li,dd,td,blockquote,figcaption) a,main .card>a):not([class]):not(:is(.crumbs,.question-list,.jump,.checklist,.actions,.foot-grid ul) a):is(:hover,:focus-visible){color:var(--link-hover,var(--link));text-decoration-line:underline;text-decoration-color:currentColor;text-decoration-thickness:2px}
/* Cards on the gold band: the title stays dark (blue is 1.3:1 there), so the card edge shows hover instead. */
.dir-b .band-soft :is(a.card,a.tile):is(:hover,:focus-visible){border-color:var(--ink)}
/* river-sermons cards: the plugin underlines the title on hover; cards get the color change only. */
body .river-sermons .rs-card:is(:hover,:focus-visible) .rs-title{color:var(--link-hover,var(--rs-gold));text-decoration:none}
body .band-soft .river-sermons .rs-card:is(:hover,:focus-visible) .rs-title{color:inherit}

/* Site search (Jim 10-28): header button + the search dialog built by assets/js/search.js (loaded on first press) */
.search-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0;border:2px solid var(--ink);border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.search-toggle svg{display:block}
.search-toggle:hover{color:var(--link-hover,var(--link));border-color:currentColor}
.search-toggle[aria-busy="true"]{cursor:progress}
@media(min-width:1040px){.search-toggle{border-color:transparent;border-radius:8px;min-width:44px}.bar-actions{gap:6px}}
.search-dlg{width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:16px auto auto;padding:0;border:1px solid var(--muted);border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:auto;overscroll-behavior:contain}
@media(min-width:760px){.search-dlg{margin-top:72px;max-height:calc(100dvh - 120px)}}
.search-dlg::backdrop{background:rgba(5,6,9,.72)}
html.search-open{overflow:hidden}
.search-box{padding:18px 16px 8px}
@media(min-width:760px){.search-box{padding:24px 28px 12px}}
.search-form{margin:0}
.search-form label{display:block;font-weight:600;font-size:1rem;margin-bottom:8px;color:var(--ink)}
.search-row{display:flex;gap:10px;align-items:center}
.search-row input{flex:1;min-width:0;min-height:52px;padding:10px 14px;border:2px solid var(--muted);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:1.15rem}
.search-row input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-row input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.search-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:2px solid var(--ink);border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
.search-close:hover{color:var(--link-hover,var(--link));border-color:currentColor}
.search-status{margin:14px 0 6px;font-size:1rem;color:var(--muted)}
.search-status:empty{margin:6px 0 0}
.search-results{list-style:none;margin:0;padding:0}
.search-results li{margin:0;padding:14px 0;border-top:1px solid var(--line)}
/* Result titles follow the pass-4 link style: no underline at rest; hover/focus = --link-hover (gold look #8DD3F0, blue look
   #B9C8D3) plus a 2px underline. The 3px focus ring stays. Each title sits alone on its line, so no underline is needed at rest. */
.search-hit{display:inline-block;font-weight:600;font-size:1.15rem;color:var(--link);text-decoration:none}
.search-hit:is(:hover,:focus-visible){color:var(--link-hover,var(--link));text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.search-snip{margin:4px 0 0;font-size:1rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
/* Matched words: bold white on a faint tint of the link color, no underline (forced-colors mode keeps the bold). */
.search-snip mark{background:color-mix(in srgb,var(--link) 22%,transparent);color:var(--ink);font-weight:700;text-decoration:none;border-radius:3px;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- Add to calendar panel (go-live review F3, 10-29). The plugin colors its links with --link, which the dark
   band sets to white, and the theme's running-text rule above removed their underline: white bold links, told
   apart from the words only by weight (WCAG 1.4.1). Here: the gold link color (--accent-text on the other accents),
   8.6:1 on the panel (slate 5.6:1), plus the underline as the non-color cue (gold vs. the panel's grey text is
   only 1.3:1). The two Subscribe links each take their own line and the "·" between them is hidden, so no line
   starts with a stray dot at 390. ---- */
.wfu-atc{--link:var(--accent-text,var(--accent))}
.wfu-atc.wfu-atc.wfu-atc :is(.wfu-atc-links,.wfu-atc-subscribe,.wfu-atc-glist,.wfu-atc-privacy) a{text-decoration-line:underline;text-decoration-thickness:1px}
.wfu-atc.wfu-atc.wfu-atc :is(.wfu-atc-links,.wfu-atc-subscribe,.wfu-atc-glist,.wfu-atc-privacy) a:is(:hover,:focus-visible){text-decoration-thickness:2px}
.wfu-atc-subscribe p>a{display:flex;width:fit-content}
.wfu-atc-subscribe p>span[aria-hidden]{display:none}