/* ===== Ruach Church: shared styles ===== */
:root{
  --bg:#f6efdf;--card:#fffcf4;--ink:#1b2236;--mute:#5a6275;--line:#e0d5bb;
  --navy:#16213e;--gold:#c8902b;--goldink:#1b1405;--flame:#d9480f;--ok:#2b8a3e;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1424;--card:#171e35;--ink:#f3efe6;--mute:#a7adbf;--line:#2a3354;--navy:#0a0f1e;--gold:#e0a843}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:0}
a{color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}
.note{font-size:13px;color:var(--mute)}

/* ---- navigation ---- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--navy);color:#f3efe6}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-weight:700;font-size:20px;text-decoration:none}
.links{display:flex;gap:20px}
.links a{text-decoration:none;font-size:15px;opacity:.85;padding:4px 0;border-bottom:2px solid transparent}
.links a:hover{color:var(--gold);opacity:1}
.links a.active{opacity:1;border-bottom-color:var(--gold)}
.burger{display:none;background:none;border:1px solid #ffffff44;color:inherit;border-radius:8px;padding:6px 10px;font-size:18px;cursor:pointer}
@media(max-width:1000px){
  .burger{display:block}
  .links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--navy);flex-direction:column;padding:12px 20px 18px;gap:14px}
  .links.open{display:flex}
}

/* ---- hero + page headers ---- */
.hero{background:linear-gradient(160deg,var(--navy),#2b2f63);color:#f3efe6;text-align:center;padding:72px 0 80px}
.hero svg{width:64px;height:64px;margin-bottom:12px}
.hero h1{font-size:clamp(34px,8vw,56px)}
.hero .tag{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:13px;font-weight:700;margin-bottom:8px}
.hero p{max-width:520px;margin:14px auto 26px;opacity:.92}
.page-head{background:linear-gradient(160deg,var(--navy),#2b2f63);color:#f3efe6;padding:44px 0 40px}
.page-head h1{font-size:clamp(30px,6vw,42px)}
.page-head p{margin:8px 0 0;opacity:.88;max-width:620px}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--gold);color:var(--goldink);font:inherit;font-weight:700;padding:12px 24px;border-radius:99px;border:0;text-decoration:none;cursor:pointer}
.btn.ghost{background:none;color:inherit;border:1px solid #ffffff66;margin-left:8px}
.btn.quiet{background:none;color:var(--mute);border:1px solid var(--line)}
.link-btn{border:0;background:none;color:var(--mute);font:inherit;font-size:13px;cursor:pointer;padding:0}
.link-btn:hover{color:var(--ink)}

/* ---- sections + cards ---- */
main{padding-bottom:24px}
section{padding:48px 0 4px}
section h2{font-size:30px;margin-bottom:8px}
.lead{color:var(--mute);max-width:640px;margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h3{font-size:20px;margin-bottom:6px}
.card p{margin:0;color:var(--mute);font-size:15px}
.card p+p{margin-top:10px}
.stack>*+*{margin-top:12px}

/* ---- next-service card ---- */
.next{margin:-36px auto 0;position:relative;max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;box-shadow:0 10px 30px #0002}
.next small{color:var(--mute);display:block}
.count{display:flex;gap:10px}
.count div{text-align:center;min-width:52px}
.count b{display:block;font:700 26px Georgia,serif;color:var(--gold)}
.count span{font-size:12px;color:var(--mute)}

/* ---- ministries ---- */
.min{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.min .ic{font-size:26px}
a.min{display:block;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
a.min:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 20px #0002}
a.min:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.min .go{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink)}
.min .go .min-count{color:var(--mute);font-weight:500}
.min .go .min-count:empty{display:none}
.min-ic{font-size:40px;line-height:1;margin-bottom:8px}
.min-about{margin-bottom:24px}
.min-about p{color:var(--ink)}
.min-slot{margin-top:12px}

/* ---- events ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chips button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 14px;border-radius:99px;font:inherit;font-size:14px;cursor:pointer}
.chips button.on{background:var(--ink);color:var(--bg)}
.ev{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.date{min-width:62px;text-align:center;border-right:1px solid var(--line);padding-right:16px}
.date b{display:block;font:700 26px Georgia,serif;color:var(--gold);line-height:1}
.date span{font-size:12px;color:var(--mute);text-transform:uppercase}
.ev h3{font-size:18px}
.ev p{font-size:14px}

/* ---- announcements ---- */
.slot{margin-bottom:12px}
.slot:empty{display:none}
.ann{margin-bottom:12px}
.ann.pin{border-color:var(--gold)}
.ann.urgent{border-left:4px solid var(--flame)}
.annmeta{font-size:12px;color:var(--mute);margin-bottom:4px}
.acts{display:flex;gap:14px;margin-top:10px;align-items:center;flex-wrap:wrap}
.admin{border:2px dashed var(--gold);margin-top:16px}

/* ---- forms ---- */
form{display:grid;gap:12px}
label{font-size:13px;color:var(--mute);display:block;margin-bottom:4px}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
textarea{min-height:100px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.chk{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);margin:0}
.chk input{width:auto}
.onrow{display:flex;gap:6px 16px;flex-wrap:wrap}
.msg{background:#2b8a3e22;border:1px solid var(--ok);border-radius:10px;padding:10px 12px;font-size:15px}

/* ---- service times list ---- */
.times{list-style:none;margin:0;padding:0}
.times li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.times li:last-child{border-bottom:0}

/* ---- footer ---- */
.footer{margin-top:56px;background:var(--navy);color:#f3efe6;text-align:center;padding:36px 20px}
.footer p{margin:4px 0;opacity:.85;font-size:15px}
.footer strong{font:700 20px Georgia,serif;opacity:1}
.footer a{opacity:.8}
.footer a.tel{opacity:1;color:#f3efe6;font-weight:600;text-decoration:none;display:inline-block;padding:6px 2px}
a.tel{white-space:nowrap;font-weight:600}
.more-link{margin-top:16px}

/* ===== Biblical theme: parchment, dawn over the hills, olive branches ===== */
body{background:var(--bg) url(../img/parchment-light.svg)}
@media (prefers-color-scheme:dark){body{background:var(--bg) url(../img/parchment-dark.svg)}}
.hero{background:url(../img/hero.svg) center bottom/cover no-repeat,#16213e;padding:84px 0 128px;text-shadow:0 2px 14px #0009}
.hero .btn{text-shadow:none}
.hero .btn.ghost{background:#0a10268c}
/* the three hero buttons stay on one line on every screen size */
.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;margin-top:6px}
.hero-actions .btn{margin:0;white-space:nowrap;flex:0 0 auto;text-align:center;border:1px solid transparent;line-height:1.2}
.hero-actions .btn.ghost{border-color:#ffffff66}
@media (max-width:820px){
  .hero-actions{gap:clamp(5px,1.6vw,10px)}
  .hero-actions .btn{font-size:clamp(11px,3.4vw,16px);padding:clamp(9px,2.6vw,12px) clamp(9px,2.8vw,22px)}
}
.page-head{background:url(../img/olive.svg) center/160px,linear-gradient(160deg,#16213e,#2b2f63);text-shadow:0 1px 8px #0006}
section h2::after{content:"";display:block;width:64px;height:3px;margin-top:10px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.card{box-shadow:0 1px 0 #ffffff80 inset,0 2px 10px #5a3d1a14}
.footer{border-top:3px solid var(--gold)}

/* ===== Logo ===== */
.brand-logo{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--gold);object-fit:cover}
.hero-logo{width:112px;height:112px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 6px 24px #0007;margin-bottom:14px;object-fit:cover}
.footer-logo{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--gold);margin-bottom:8px;object-fit:cover}

/* ===== Logo watermark behind every page ===== */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(../img/logo.png) center/min(82vmin,660px) no-repeat;
  opacity:.17;mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  body::before{filter:invert(1);mix-blend-mode:screen;opacity:.11}
}

/* ===== Live stream ===== */
.player{position:relative;aspect-ratio:16/9;background:#0a1026;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px #0003}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;color:#f3efe6}
.player-empty span{opacity:.8;font-size:15px}
.live-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:#e03131;margin-right:12px;vertical-align:middle;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #e0313188}70%{box-shadow:0 0 0 12px #e0313100}100%{box-shadow:0 0 0 0 #e0313100}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.player.tall{aspect-ratio:auto;height:640px;max-width:520px;margin:0 auto}

/* ===== Give page ===== */
.verse{text-align:center;font-family:Georgia,serif}
.verse p{font-size:18px;color:var(--ink)}
.verse .note{font-family:system-ui,sans-serif}
.how{max-width:640px;margin:0 0 22px;padding-left:20px;color:var(--mute)}
.give-card{text-align:center}
.qr{width:200px;max-width:100%;aspect-ratio:1;margin:12px auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.qr svg,.qr img{display:block;width:100%;height:100%;object-fit:contain}
.qr.empty{display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:#555}
.acts.center{justify-content:center}
.print-row{margin-top:18px}
@media print{
  .nav,.footer,.page-head,.print-row,.slot,.verse,.how,.acts{display:none!important}
  body{background:#fff!important}
  body::before{display:none}
  .card{box-shadow:none;break-inside:avoid}
}

/* ===== Language switch ===== */
.lang-btn{background:none;border:1px solid var(--gold);color:var(--gold);border-radius:99px;padding:4px 14px;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.lang-btn:hover{background:var(--gold);color:var(--goldink)}
.lang-note{background:#f3e3b8;color:#3b2a08;text-align:center;font-size:13px;padding:6px 12px}

/* ===== Zelle card ===== */
.zelle-steps{text-align:left;margin:10px 0 4px;padding-left:20px;color:var(--mute);font-size:15px}
.to-line{font-weight:700;font-size:18px;color:var(--ink)!important;word-break:break-all;margin:6px 0}

/* ===== Pastor link in the menu ===== */
.links{gap:12px}
.links a{font-size:14px}
.pastor-link{opacity:.9;border-bottom:0!important}
.pastor-link .pl-text{display:none}
@media(max-width:1000px){.pastor-link .pl-text{display:inline}}

/* ===== Sliding photos ===== */
.gallery{padding-top:28px}
.slider{position:relative;overflow:hidden;border-radius:16px;background:#0a1026;border:1px solid var(--line);box-shadow:0 10px 30px #0003;aspect-ratio:16/9;max-height:78vh}
.slider:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.slides{display:flex;height:100%;transition:transform .6s ease}
@media (prefers-reduced-motion:reduce){.slides{transition:none}}
.slide{margin:0;min-width:100%;height:100%;position:relative}
.slide img{display:block;width:100%;height:100%;object-fit:cover}
.slide.fit img.main{position:relative;object-fit:contain}
.slide.fit img.bg{position:absolute;inset:0;filter:blur(22px) brightness(.55);transform:scale(1.15)}
.slide{overflow:hidden}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 34px;color:#fff;font:600 clamp(16px,3.2vw,22px) Georgia,serif;background:linear-gradient(transparent,#000b);text-shadow:0 1px 6px #000a}

/* ===== Short videos ===== */
.video-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.vid h3{margin-top:10px;font-size:17px}
.vid-frame{display:block;width:100%;aspect-ratio:16/9;background:#0a1026;border:0;border-radius:10px;overflow:hidden;cursor:pointer;object-fit:cover}
.vid-frame.tall{aspect-ratio:9/16;max-height:520px}
video.vid-frame{object-fit:contain;cursor:auto}
.vid.vertical{max-width:340px;margin:0 auto}
.vid-frame.yt{background:linear-gradient(160deg,#16213e,#2b2f63);position:relative}
.vid-frame .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--goldink);display:flex;align-items:center;justify-content:center;font-size:24px;padding-left:4px}
iframe.vid-frame{cursor:auto}

/* ===== Logo banner ===== */
.banner{position:relative;overflow:hidden;background:linear-gradient(160deg,#16213e,#2b2f63);color:#f3efe6;border-bottom:3px solid var(--gold)}
.banner::before{content:"";position:absolute;inset:0;background:url(../img/logo.png) 0 0/120px repeat;filter:invert(1);opacity:.07;pointer-events:none}
.banner-in{position:relative;display:flex;align-items:center;justify-content:center;gap:20px;padding:18px 20px}
.banner-logo{width:104px;height:104px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 6px 24px #0007;object-fit:cover;flex:none}
.banner-name{font:700 clamp(28px,6vw,46px) Georgia,serif;line-height:1.1;text-shadow:0 2px 12px #0008}
.banner-tag{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:clamp(11px,2.4vw,14px);font-weight:700;margin-top:6px}
@media(max-width:520px){.banner-logo{width:72px;height:72px}.banner-in{gap:14px;padding:14px 16px}}
.hero-logo{display:none}


/* ===== Readability touches ===== */
.hero p{text-shadow:0 1px 10px #000d;font-weight:500}
.hero .tag{text-shadow:0 1px 8px #000c}
.footer .note,.footer .note a{color:#d6d9e6;opacity:1}

/* ===== Community + messages ===== */
@media(min-width:1001px){.brand-text{display:none}.links{gap:10px}}
.msg-link{position:relative;opacity:.9;border-bottom:0!important}
.msg-link .pl-text{display:none}
@media(max-width:1000px){.msg-link .pl-text{display:inline}}
.dot{position:absolute;top:-2px;right:-6px;width:10px;height:10px;border-radius:50%;background:#e03131;border:2px solid var(--navy)}
.btn.small{padding:7px 16px;font-size:14px}
.acct-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#community .card{margin-bottom:12px}
#community details{margin-top:10px}
#community details form{margin-top:12px}
.post .ptext{margin:8px 0;color:var(--ink);font-size:16px;overflow-wrap:anywhere}
.post .comments{margin-top:6px}
.cmt{padding:8px 0;border-top:1px solid var(--line);font-size:14px;overflow-wrap:anywhere}
.cmt .acts{margin-top:2px}
.cform{display:flex;gap:8px;margin-top:10px}
.cform input{flex:1;min-width:0}
a.link-btn{text-decoration:none}
.mrow{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.rrow{background:var(--bg)}
.admin h4{margin:16px 0 6px;font-size:15px}
.msg-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.side .btn{width:100%;margin-bottom:10px}
.convo{display:block;position:relative;padding:10px 40px 10px 10px;border-radius:10px;text-decoration:none;border:1px solid transparent}
.convo:hover,.convo.on{background:var(--bg);border-color:var(--line)}
.convo .note{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{position:absolute;right:10px;top:12px;min-width:22px;height:22px;border-radius:99px;background:#e03131;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px}
.pane{min-height:340px}
.thread-head{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.thread-head .acts{margin:0 0 0 auto}
.back{display:none}
.msgs{display:flex;flex-direction:column;gap:8px;max-height:52vh;min-height:200px;overflow:auto;padding:4px}
.bub{max-width:82%;padding:8px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);align-self:flex-start;overflow-wrap:anywhere}
.bub.mine{align-self:flex-end;background:var(--gold);color:var(--goldink);border-color:transparent}
.bub .annmeta{display:block;margin:2px 0 0;color:inherit;opacity:.7}
.pick input{margin-bottom:8px}
@media(max-width:760px){
  .msg-layout{grid-template-columns:1fr}
  .msg-layout.thread-open .side{display:none}
  .msg-layout:not(.thread-open) .pane{display:none}
  .back{display:inline-block}
}

/* ===== Uploads: photos, videos, documents ===== */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.attach{display:flex;align-items:center;gap:12px;margin:10px 0 4px}
.attach .btn{cursor:pointer}
.chosen{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.chip-file{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:99px;background:var(--bg);font-size:13px}
.chip-file.bad{border-color:#e03131;color:#c92a2a}
.files{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin:8px 0}
.files img,.files video{width:100%;max-height:340px;object-fit:cover;border-radius:10px;background:#0a1026;display:block}
.files video{grid-column:1/-1;max-height:420px;object-fit:contain}
.docchip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);text-decoration:none;grid-column:1/-1}
.doc{display:flex;gap:12px;align-items:center;text-decoration:none}
.doc .note{display:block}
.doc-ic{font-size:28px}
.mform{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* ===== Live chat and likes ===== */
.reacts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.react{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.react.on{background:var(--gold);color:var(--goldink);border-color:var(--gold)}
.react:disabled{opacity:.65;cursor:default}
.chat-list{max-height:340px;min-height:120px;overflow:auto;padding-right:4px}
.chat-item{padding:6px 0;border-bottom:1px solid var(--line);font-size:15px;overflow-wrap:anywhere}
.chat-item.by-pastor{background:#c8902b1f;margin:0 -8px;padding:6px 8px;border-radius:8px}
.chat-item .tag{display:inline-block;padding:0 8px;border-radius:99px;background:var(--gold);color:var(--goldink);font-size:11px;font-weight:700}
.acts.inline{display:inline-flex;margin:0;gap:8px}
.chat .cform{margin-top:12px}
#liveRoom h2 .live-dot{margin-right:10px;vertical-align:middle}

/* ===== Gift notices ===== */
.msg.bad{background:#e0313122;border-color:#e03131}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;border:1px solid var(--line);font-size:12px;font-weight:700}
.tag.ok{background:#2b8a3e22;border-color:var(--ok);color:var(--ok)}

/* ===== Home page background: our church family photo (replace img/family.jpg to change it) ===== */
.hero{
  background:
    linear-gradient(180deg,rgba(10,16,38,.78) 0%,rgba(10,16,38,.60) 55%,rgba(10,16,38,.80) 100%),
    url(../img/family.jpg) center 38%/cover no-repeat,
    url(../img/hero.svg) center bottom/cover no-repeat,
    #16213e;
}

/* ===== Banner + menu stay on screen while scrolling (shrinks to a slim bar) ===== */
:root{padding-top:0}
html{scroll-padding-top:116px}
.top{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--navy);box-shadow:0 2px 14px #0005}
.top .nav{position:relative;top:auto}
.top .banner{border-bottom-width:2px}
.top .links{top:100%}
.top .burger,.top .links{margin-left:auto}
.banner-in,.banner-logo,.banner-name,.top .nav .wrap{transition:padding .2s,width .2s,height .2s,font-size .2s,gap .2s}
.top.no-anim *{transition:none!important}
.top.compact .banner-in{padding:6px 16px;gap:10px}
.top.compact .banner-logo{width:40px;height:40px;border-width:2px;box-shadow:none}
.top.compact .banner-name{font-size:20px;text-shadow:none}
.top.compact .banner-tag{display:none}
.top.compact .nav .wrap{height:46px}
.top.compact .nav .brand{display:none}
.top.compact .links{top:100%}
@media(prefers-reduced-motion:reduce){.banner-in,.banner-logo,.banner-name,.top .nav .wrap{transition:none}}
@media print{.top{position:static;box-shadow:none}#top-spacer{display:none}}

/* On phones the slim bar holds the menu button too, so it takes less room */
.top.compact .banner-in{padding:5px 16px}
.top.compact .banner-logo{width:36px;height:36px}
@media(max-width:1000px){
  .top.compact .nav{position:static}
  .top.compact .nav .wrap{height:0;min-height:0;padding:0}
  .top.compact .burger{position:absolute;top:calc(env(safe-area-inset-top,0px) + 6px);right:14px;padding:3px 10px;font-size:16px;z-index:2}
  .top.compact .banner-in{padding-right:64px}
}

/* Phones and tablets: the full banner (logo, name, tagline) always stays on screen, with the menu button inside it */
@media(max-width:1000px){
  .top .nav{position:static}
  .top .nav .wrap{height:0;min-height:0;padding:0}
  .top .nav .brand{display:none}
  .top .burger{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;padding:4px 11px;font-size:18px;z-index:2;background:#16213ecc}
  .top .banner-in{padding-right:70px;padding-top:12px;padding-bottom:12px}
}

/* ===== Bigger message icon (envelope) and lock ===== */
.links a.msg-link,.links a.pastor-link{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;opacity:1}
.msg-link .msg-ic{width:26px;height:26px;display:block}
.pastor-link span[aria-hidden]{font-size:20px;line-height:1}
.links a.msg-link:hover,.links a.pastor-link:hover{background:#ffffff1a}
.msg-link .dot{top:3px;right:3px;width:12px;height:12px}
@media(max-width:1000px){
  .links a.msg-link,.links a.pastor-link{padding:10px 0;font-size:16px}
  .msg-link .msg-ic{width:24px;height:24px}
}
@media(max-width:1000px){
  .links a.msg-link,.links a.pastor-link{align-self:flex-start}
  .msg-link .dot{position:static;margin-left:2px;border-color:transparent}
}

#giveList.give-single{grid-template-columns:minmax(0,480px);justify-content:center}
.lead strong{color:var(--ink);font-weight:700}

/* Messages: who you are talking to */
.avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--navy,#1b2340);color:#f3efe6;font:700 14px/1 system-ui,sans-serif;letter-spacing:.5px}
.avatar.big{width:48px;height:48px;font-size:17px}
.convo{display:flex;align-items:center;gap:10px}
.convo-text{min-width:0;flex:1}
.convo-text strong{display:block}
.thread-head .who{min-width:0}
.thread-head .who .note{display:block;font-size:12px}
.thread-head h3{margin:0;font-size:20px;overflow-wrap:anywhere}
.msg-layout .back{margin-bottom:8px}
.bub .from{display:block;font-size:12px;font-weight:700;opacity:.8;margin-bottom:2px}

/* Forgot password */
.forgot{margin-top:12px;max-width:420px}
.forgot summary{cursor:pointer;color:var(--ink);text-decoration:underline;font-size:15px}
.forgot-body{margin-top:8px}
.forgot-body .note a.tel{font-weight:600}

/* Second website manager */
.mgr-tools .temp-pw{display:block;margin:8px 0;font:700 20px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;user-select:all;overflow-wrap:anywhere}
.forgot .pick{display:flex;gap:8px;margin-bottom:10px}
.forgot .code-in{font-size:22px;letter-spacing:6px;max-width:200px}
.phone-box .acts{margin-top:6px}
.msg.err{background:#c92a2a1a;border-color:#c92a2a}

/* Show / Hide password */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:72px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-width:56px;min-height:36px;padding:4px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:600 14px system-ui,sans-serif;cursor:pointer}
.pw-eye:hover{background:#0000000f}
.pw-eye:focus-visible{outline:2px solid var(--gold);outline-offset:1px}


/* ================= Ruach animations (breath, wind, Spirit) — see js/anim.js ================= */
/* the logo: a ring of golden light goes around once, then the logo breathes slowly */
.logo-halo{position:relative;display:inline-block;flex:none;border-radius:50%;line-height:0}
.logo-halo::before{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 62%,#c8962e 80%,#fff6d8 90%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.logo-halo::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none}
.logo-halo.lit::before{animation:ruachHalo 2.6s cubic-bezier(.5,0,.3,1) .25s both}
.logo-halo.lit::after{animation:ruachBreath 7s ease-in-out 2.9s infinite}
.logo-halo.lit img{animation:ruachLogoIn 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes ruachHalo{0%{opacity:0;transform:rotate(-90deg)}15%,80%{opacity:1}100%{opacity:0;transform:rotate(630deg)}}
@keyframes ruachBreath{0%,100%{box-shadow:0 0 0 0 rgba(226,183,90,0)}50%{box-shadow:0 0 24px 7px rgba(226,183,90,.42)}}
@keyframes ruachLogoIn{from{transform:scale(.82) rotate(-14deg);opacity:.15}to{transform:none;opacity:1}}
.brand-logo{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-logo{transform:rotate(360deg)}

/* home: the Spirit moving over the waters (Genesis 1:2) */
.ruach-hero{position:relative;overflow:hidden}
.ruach-hero .wrap{position:relative;z-index:2}
.ruach-hero.ocean{background:radial-gradient(120% 80% at 50% 110%,rgba(18,80,106,.82) 0%,rgba(14,59,79,.9) 35%,rgba(6,32,46,.96) 75%),url(../img/family.jpg) center/cover no-repeat,#06202e;
  padding-top:clamp(250px,38vh,390px);padding-bottom:110px}
.ocean-sky{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.send-wind{position:absolute;z-index:3;right:max(14px,env(safe-area-inset-right,0px));top:14px;background:rgba(238,244,242,.08);color:#eef4f2;
  border:1px solid rgba(238,244,242,.3);font:600 14px system-ui,sans-serif;padding:9px 16px;border-radius:999px;cursor:pointer;text-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.send-wind:hover{background:rgba(238,244,242,.18)}
.send-wind:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ocean .rv-text cite{color:#8fc1d4}

/* home: the welcome breathes in, one part after another */
.breathe-in h1{animation:ruachBreathIn 1.7s cubic-bezier(.2,.7,.2,1) .35s both}
.breathe-in .tag,.breathe-in .wrap > p,.breathe-in .hero-actions,.breathe-in .ruach-verse,.breathe-in .logo-halo{animation:ruachRise 1s ease-out both}
.breathe-in .logo-halo{animation-delay:0s}.breathe-in .tag{animation-delay:.2s}.breathe-in .wrap > p{animation-delay:1.1s}
.breathe-in .hero-actions{animation-delay:1.35s}.breathe-in .ruach-verse{animation-delay:0s}
@keyframes ruachBreathIn{from{opacity:0;letter-spacing:.12em;filter:blur(7px)}to{opacity:1;letter-spacing:normal;filter:none}}
@keyframes ruachRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* home: Ruach verses under the welcome */
.ruach-verse{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 18px;max-width:640px;min-height:3.4em}
.hero .rv-text{margin:0;max-width:none;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(15px,3.9vw,18px);line-height:1.5;color:#f3efe6;transition:opacity .7s ease,transform .7s ease}
.hero .rv-text.out{opacity:0;transform:translateY(-6px)}
.rv-text cite{font-style:normal;font-family:system-ui,sans-serif;font-size:13px;font-weight:600;color:#e2c27a;margin-left:6px;white-space:nowrap}

/* Watch Live: a small flame instead of the red dot (Acts 2:3) */
.live-dot.flame{width:auto;height:auto;background:none;border-radius:0;animation:none;vertical-align:-3px;margin-right:10px}
.live-dot.flame svg{display:block;transform-origin:50% 100%;animation:ruachFlicker 1.3s ease-in-out infinite alternate}
.live-dot.flame .fl-out{fill:#e8590c}.live-dot.flame .fl-in{fill:#ffd43b}
@keyframes ruachFlicker{0%{transform:scale(1,1) rotate(-2deg)}35%{transform:scale(.94,1.06) rotate(2deg)}70%{transform:scale(1.04,.95) rotate(-1deg)}100%{transform:scale(.97,1.04) rotate(1.5deg)}}

@media (prefers-reduced-motion:reduce){
  .logo-halo::before,.logo-halo::after,.logo-halo img,.breathe-in *,.live-dot.flame svg,.brand-logo{animation:none!important;transition:none!important}}

/* every other page: the title banner gets the same scene (smaller cross on the right) */
.ruach-band{position:relative;overflow:hidden;cursor:default}
.ruach-band .wrap{position:relative;z-index:2}
.ruach-band.ocean{background:radial-gradient(120% 140% at 70% 120%,#12506a 0%,#0e3b4f 40%,#06202e 85%);padding:52px 0 58px;min-height:200px}
.ruach-band.ocean p{color:#cfe2e6}


/* ===== The church logo shows through on every page =====
   - the boxes (cards, forms) are slightly see-through so the logo behind the page shows
   - the ocean welcome and the ocean title banners carry a soft logo of their own */
.card,.next{background:var(--card);background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.ruach-hero::before,.ruach-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/logo.png) center/contain no-repeat;filter:invert(1);mix-blend-mode:screen;opacity:.13}
.ruach-hero::before{background-size:min(78vmin,620px);background-position:center 42%}
.ruach-band::before{inset:10px 0;opacity:.12}
@media print{.ruach-hero::before,.ruach-band::before{display:none}}

/* ===== Home: the verses ride the wind (see js/anim.js) ===== */
.ruach-verse{position:relative}
.rv-w{display:inline-block;will-change:transform,opacity}
.rv-text.blow-in .rv-w{animation:rvIn .9s cubic-bezier(.2,.75,.25,1) var(--in) both,rvSway 3.2s ease-in-out calc(var(--in) + .9s) infinite alternate}
.rv-text.blow-in .rv-w{animation-delay:var(--in),calc(var(--in) + .9s + var(--sway))}
.rv-text.blow-out .rv-w{animation:rvOut .85s cubic-bezier(.55,0,.8,.4) var(--out) both}
@keyframes rvIn{0%{opacity:0;transform:translate(-46px,var(--dy)) rotate(calc(var(--rot) * -1));filter:blur(5px)}
  60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes rvSway{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(1.5px,-2px) rotate(.6deg)}100%{transform:translate(-1px,1.5px) rotate(-.5deg)}}
@keyframes rvOut{0%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translate(70px,calc(var(--dy) - 10px)) rotate(var(--rot));filter:blur(5px)}}
/* a soft streak of air passes over the verse each time it changes */
.ruach-verse::after{content:"";position:absolute;left:-10%;top:50%;width:40%;height:2px;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(238,244,242,.7),rgba(242,193,78,.6),transparent)}
.ruach-verse.gust::after{animation:rvGust 1.1s ease-out both}
@keyframes rvGust{0%{opacity:0;transform:translateX(0) translateY(4px)}30%{opacity:1}100%{opacity:0;transform:translateX(320%) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.rv-text .rv-w,.ruach-verse::after{animation:none!important}}

/* ===== Footer (every page): a night sky over the ocean (see js/anim.js) ===== */
.ruach-foot{position:relative;overflow:hidden;background:radial-gradient(130% 120% at 50% 120%,#12506a 0%,#0e3b4f 38%,#06202e 78%,#050f22 100%);padding-bottom:56px}
.foot-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.foot-inner{position:relative;z-index:1}
.ruach-foot .logo-halo{margin-bottom:8px}
.ruach-foot .footer-logo{margin-bottom:0;display:block}
.foot-bless{margin:6px 0 10px!important;font:italic 16px/1.5 Georgia,"Times New Roman",serif;color:#eef4f2;opacity:1!important}
.foot-bless .fb-w{display:inline-block;animation:rvSway 3.4s ease-in-out var(--d,0s) infinite alternate}
.foot-bless cite{font:600 12px system-ui,sans-serif;font-style:normal;color:#8fc1d4;margin-left:6px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.foot-bless .fb-w{animation:none}}

/* ===== Home: each verse gathers into a dove that flies away ===== */
.rv-text.gather .rv-w{animation:rvGather .55s cubic-bezier(.55,0,.6,1) var(--out) both}
@keyframes rvGather{0%{opacity:1;transform:none;filter:none}
  70%{opacity:.9;filter:brightness(1.6)}
  100%{opacity:0;transform:translate(var(--gx),var(--gy)) scale(.15);filter:blur(2px) brightness(2)}}
.rv-dove{position:absolute;left:50%;top:50%;width:80px;margin:-28px 0 0 -40px;pointer-events:none;opacity:0;
  filter:drop-shadow(0 0 7px rgba(255,246,216,.7))}
.rv-dove svg{display:block;width:100%;height:auto;overflow:visible}
.rv-dove .ol{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.rv-dove .dw-far{opacity:.72}
.rv-dove .dw-near,.rv-dove .dw-far{transform-box:view-box}
.rv-dove .dw-near{transform-origin:58px 40px}
.rv-dove .dw-far{transform-origin:66px 38px}
/* a real wing beat: up (wing raised behind the head), sweep down past the body, back up; the far wing a moment later */
.rv-dove.fly .dw-near{animation:dwFlapNear .34s ease-in-out infinite}
.rv-dove.fly .dw-far{animation:dwFlapFar .34s ease-in-out -.04s infinite}
.rv-dove.fly .dw-bob{animation:dwBob .34s ease-in-out infinite}
@keyframes dwFlapNear{0%,100%{transform:rotate(-10deg)}45%{transform:rotate(108deg) scale(1,.78)}60%{transform:rotate(96deg) scale(1,.84)}}
@keyframes dwFlapFar{0%,100%{transform:rotate(-8deg)}45%{transform:rotate(104deg) scale(1,.66)}60%{transform:rotate(92deg) scale(1,.72)}}
@keyframes dwBob{0%,100%{transform:translateY(1.5px)}55%{transform:translateY(-3.5px)}}
/* the flight: lifts off from the gathered words, then climbs away to the right in a gentle curve, getting smaller */
.rv-dove.fly{animation:rvDoveFly 2.1s cubic-bezier(.35,.05,.45,1) both}
@keyframes rvDoveFly{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.25)}
  12%{opacity:1;transform:translate(4px,-2px) rotate(-4deg) scale(1)}
  30%{transform:translate(34px,-14px) rotate(-10deg) scale(1)}
  48%{transform:translate(84px,-40px) rotate(-16deg) scale(.96)}
  66%{opacity:1;transform:translate(150px,-72px) rotate(-14deg) scale(.86)}
  84%{opacity:.8;transform:translate(226px,-104px) rotate(-10deg) scale(.72)}
  100%{opacity:0;transform:translate(300px,-134px) rotate(-8deg) scale(.58)}}
@media (prefers-reduced-motion:reduce){.rv-dove{display:none}}

/* ===== Give by card (Stripe) ===== */
.stripe-give form{display:grid;gap:12px;text-align:left}
.sg-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sg-amt{padding:12px 6px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:700 17px system-ui,sans-serif;cursor:pointer}
.sg-amt.on{background:var(--gold);border-color:var(--gold);color:#1b1b1b}
.sg-amt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sg-go{width:100%}
.sg-lock{text-align:center;margin:0}
.thanks-card{max-width:620px;text-align:center}
.thanks-card .verse{font-family:Georgia,serif;font-style:italic;margin:18px 0}
.thanks-card .verse cite{font-style:normal;font-size:13px;color:var(--mute);margin-left:6px}

/* Footer: the senior pastor's photo */
.footer-pastor{margin:16px auto 14px;text-align:center}
.footer-pastor img{display:block;width:130px;max-width:100%;margin:0 auto;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 30%;border-radius:50%;
  border:3px solid #c8962e;box-shadow:0 10px 26px #0007}
.footer-pastor figcaption{margin-top:8px;font:700 15px/1.3 Georgia,"Times New Roman",serif;color:#f3efe6;letter-spacing:.2px}

/* Announcement cards: not too wide on computer screens (phones keep the full width) */
@media (min-width:900px){
  .card.ann{max-width:760px;margin-left:auto;margin-right:auto}
}