/* Saraland Church look for the saralandchurch.com pages (src/pages/saraland.html, saraland-give.html).
   Same layout classes as the Citylight site (site.css); only the brand changes: the old site's blue,
   black and yellow, Gibson (bold italic, uppercase) for headings and Minion Pro for text.
   Gibson and Minion Pro are Adobe Fonts; Gibson is in the Citylight web kit (osm0erv, added 2026-10-18); Minion Pro is not, so Crimson Pro stands in. */
:root{
  --bg:#FFFFFF; --soft:#F1F5F9; --warm:#F1F5F9; --ink:#111111; --ink-2:#2A2A2A; --muted:#66717B; --line:#DEE5EC;
  --brand:#111111; --green:#2B8BDB; --leaf:#FFD500; --mint:#D9ECFC;
  --blue:#349CF0; --blue-dk:#1F7FCC; --navy:#1D4F7A; --yellow:#FFD500;
  --display:"canada-type-gibson","Figtree",system-ui,sans-serif;
  --head:"canada-type-gibson","Figtree",system-ui,sans-serif;
  --sans:"minion-pro","Crimson Pro",Georgia,serif;
}
body.sl{font-size:20px}
.sl h1,.sl h2,.sl h3{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:0;line-height:.98}
.sl h1{font-size:clamp(44px,6.6vw,86px)}
.sl h2{font-size:clamp(34px,4.4vw,58px)}
.sl h3{font-size:clamp(24px,2.3vw,30px);line-height:1.05}
.sl .label{font-weight:700;letter-spacing:.14em;color:var(--blue-dk)}
.sl .btn{font-weight:700;font-size:14px;letter-spacing:.08em;background:var(--blue);border-color:var(--blue);color:#fff}
.sl .btn:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.sl .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.sl .btn.ghost:hover{background:var(--ink);color:#fff}
.sl .btn.light{background:#fff;color:var(--ink);border-color:#fff}
.sl .btn.light:hover{background:var(--yellow);border-color:var(--yellow)}
.sl .btn.line{background:transparent;color:#fff;border-color:#fff}
.sl .btn.line:hover{background:#fff;color:var(--ink)}
.sl .card a.more,.sl .card .more{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-dk);text-decoration:none}
.sl .acc summary{font-family:var(--head);font-weight:700}
.sl .acc summary::after{color:var(--blue)}
.sl .verse{font-family:var(--sans);font-weight:400;font-style:normal;text-transform:none}
.sl .verse cite{font-family:var(--head);font-weight:900;font-style:italic;font-size:clamp(18px,1.8vw,24px);letter-spacing:.02em;color:inherit}

/* Header: logo on white, like the old site */
.sl-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:18px}
.sl-top .logo{height:56px;width:auto}
.sl-top nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.sl-top nav a:not(.btn){font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.sl-top nav a:not(.btn):hover{color:var(--blue-dk)}
.sl-top .btn{padding:13px 20px;font-size:12px}

/* Notice strip */
.sl-note{display:block;background:var(--yellow);color:#111;text-align:center;text-decoration:none;font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:10px var(--gutter)}
.sl-note:hover{text-decoration:underline}

/* Photo hero */
.sl-hero{position:relative;color:#fff;background:#0b1a22 url(/assets/saraland/worship.jpg) center 30%/cover no-repeat;overflow:hidden}
.sl-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,12,18,.92) 0%,rgba(5,12,18,.78) 45%,rgba(5,12,18,.35) 100%)}
.sl-hero .wrap{position:relative;padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(64px,9vw,128px)}
.sl-hero h1{max-width:13ch}
.sl-hero h1 em{font-style:italic;color:var(--blue)}
.sl-hero p.body{font-size:clamp(20px,1.8vw,24px);max-width:40ch;margin:22px 0 32px;color:#E6EEF4}
.sl-hero .label{color:var(--yellow)}
.count{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}
.count div{min-width:84px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 14px;text-align:center}
.count b{display:block;font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(30px,3.4vw,42px);line-height:1;font-variant-numeric:tabular-nums}
.count span{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#BFD3E2}
.count[hidden],.count-label[hidden]{display:none}
.count-label{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 10px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.hero-facts b{display:block;font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.hero-facts span{font-size:19px;color:#E6EEF4}
.hero-facts a{color:#fff}

.sl h3.url{text-transform:none;font-size:clamp(20px,1.75vw,24px);overflow-wrap:normal}
html{scroll-behavior:auto}

/* Blue band, like the old site's giving section */
.bg-blue{background:var(--blue);color:#fff}
.bg-blue .label{color:#fff;opacity:.85}
.bg-blue p{color:#fff}
.bg-black{background:#111;color:#fff}
.bg-black .label{color:var(--yellow)}
.bg-black p{color:#D7DDE2}

/* Name change: Saraland -> Citylight */
.becoming{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px);background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,48px)}
.becoming img{width:100%;max-width:320px;height:auto;margin:0 auto}
.becoming .arrow{font-family:var(--head);font-weight:700;font-size:clamp(28px,4vw,48px);color:var(--blue)}

/* Service times */
.times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.time{background:#fff;color:var(--ink);border-radius:24px;padding:clamp(24px,3vw,36px)}
.time .day{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(30px,3vw,40px);line-height:1}
.time .hr{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(40px,4.6vw,60px);line-height:1;color:var(--blue);margin:6px 0 12px}
.time p{color:var(--ink-2)!important}
.time a{color:var(--blue-dk);font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}

/* Events */
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.ev-grid .card{text-decoration:none;color:inherit}
.ev-grid .card:hover{border-color:var(--blue)}
.ev-grid .photo{aspect-ratio:16/9;background:#111}
.ev-grid .photo img{object-fit:contain}
.ev-grid .noart{position:absolute;inset:0;display:grid;place-items:center;padding:20px;color:#fff;font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:24px;text-align:center}

/* Giving progress (month to date) */
.month{background:rgba(255,255,255,.12);border-radius:22px;padding:clamp(20px,2.6vw,30px)}
.month .amt{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(40px,4.6vw,60px);line-height:1}
.month .of{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:8px}
.month .bar{height:14px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:18px}
.month .bar i{display:block;height:100%;width:0;background:var(--yellow);border-radius:99px;transition:width .8s}
.month.on-light{background:var(--soft)}
.month.on-light .bar{background:#D9E3EC}
.month.on-light .bar i{background:var(--blue)}

/* Footer */
.sl-foot{background:#111;color:#C9D1D8;padding:clamp(48px,6vw,72px) 0 36px}
.sl-foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.sl-foot img{height:64px;width:auto}
.sl-foot h4{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.sl-foot p{margin:0 0 6px}
.sl-foot a{color:#fff}
.sl-foot .fine{display:block;margin-top:40px;padding-top:20px;border-top:1px solid #2a2a2a;font-size:15px;color:#8A949D}

@media (max-width:860px){
  .times,.ev-grid,.sl-foot .cols{grid-template-columns:minmax(0,1fr)}
  .becoming{grid-template-columns:minmax(0,1fr);text-align:center}
  .becoming .arrow{transform:rotate(90deg)}
  .sl-top nav a:not(.btn){display:none}
  .sl-top .logo{height:44px}
}
@media (max-width:420px){.sl-top .btn.ghost{display:none}}