/* ============================================================
   Central Church — shared polish layer
   Loaded last on every page, so it can correct the per-page
   styles without touching them: contrast, focus, touch targets,
   readable wrapping, layout stability, and reduced motion.
   Keep rules here low-risk and site-wide; page-specific design
   belongs in that page's own <style>.
   ============================================================ */

:root{
  /* Splashy, nudged ~6% deeper so white text on it passes WCAG AA (4.5:1). */
  --ocean: #018388;
  --focus-ring: #1E454D;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:fixed; top:12px; left:12px; z-index:10000;
  padding:.8em 1.2em; border-radius:6px;
  background:#fff; color:#1E454D !important;
  box-shadow:0 10px 30px -8px rgba(8,28,31,.45), 0 0 0 2px #1E454D;
  font:700 .9rem/1 "Figtree", system-ui, sans-serif; letter-spacing:.02em;
  transform:translateY(-200%); transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.skip-link:focus{ transform:none; }
[id="main"]{ scroll-margin-top:96px; }
[id="main"]:focus{ outline:none; }

/* ---------- Keyboard focus ----------
   Two-tone ring: the white halo shows on dark surfaces, the
   teal ring on light ones. Mouse clicks don't trigger it. */
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
}
a, button, summary, [role="button"]{ -webkit-tap-highlight-color:rgba(1,131,136,.18); }

/* ---------- Readable wrapping ---------- */
h1, h2, h3{ text-wrap:balance; overflow-wrap:break-word; }
p, li, blockquote{ text-wrap:pretty; }

/* ---------- Layout stability ----------
   Images now carry width/height attributes so the browser can
   reserve space before they load. :where() keeps this at zero
   specificity, so any page rule that sets a height still wins. */
:where(img[width][height]){ height:auto; }
video{ max-width:100%; }

/* ---------- Touch targets (44px minimum) ---------- */
.hamb{ min-width:44px; min-height:44px; justify-content:center; align-items:center; }
.mclose{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.socials a{ min-width:40px; min-height:40px; }
.foot-col a{ padding-block:4px; }

/* ---------- Mobile drawer: prevent the page behind from scrolling ---------- */
html.drawer-open, html.drawer-open body{ overflow:hidden; }

/* ---------- Footer: legible small print + visit info ---------- */
.foot-bottom, .foot-bottom span{ color:rgba(255,255,255,.74); }
.foot-bottom a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; }
.foot-bottom a:hover{ color:#fff; text-decoration-color:currentColor; }
.foot-visit{
  margin-top:18px;
  font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.86);
}
.foot-visit strong{ color:#fff; font-weight:700; }
.foot-visit a{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px; }
.foot-visit a:hover{ text-decoration-color:currentColor; }

/* ---------- Background video pause control (WCAG 2.2.2) ---------- */
.bgvid-toggle{
  position:absolute; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.45); background:rgba(10,30,34,.45); color:#fff;
  cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .2s ease, transform .15s ease;
}
.bgvid-toggle:hover{ background:rgba(10,30,34,.7); }
.bgvid-toggle:active{ transform:scale(.94); }
.bgvid-toggle svg{ width:16px; height:16px; fill:currentColor; }

/* ---------- A second, warmer voice ----------
   Source Serif 4 (loaded only on pages that use it) for scripture,
   the pastor's word, and the one accent word on the home hero. */
:root{ --ff-serif:"Source Serif 4", Georgia, "Times New Roman", serif; }
.verse-block p, .verse-block.readable p{ font-family:var(--ff-serif); font-weight:500; letter-spacing:0; }
.belief .ref{ font-family:var(--ff-serif); font-size:.86rem; letter-spacing:0; }

/* ---------- Calmer buttons ----------
   Title case at a readable size instead of small tracked capitals. */
.btn{ text-transform:none; letter-spacing:.005em; font-size:.95rem; }
.watchlive{ text-transform:none; letter-spacing:.01em; font-size:.9rem; }

/* ---------- Gold is for actions ----------
   Decorative accents move to Spa so gold keeps meaning "do this". */
.chip .dot{ background:var(--spa, #A7DCDC); }
.foot-brand > span{ color:var(--spa, #A7DCDC); }
.message .eyebrow,
.beliefs .band-head .eyebrow,
.belief .bn,
.verse-block.readable .vq,
.verse-block.readable cite{ color:var(--spa, #A7DCDC); }

/* ---------- Status dots are steady, not pulsing ---------- */
.reclight, .spot .eyebrow .live{ animation:none !important; }

/* ---------- Service times: one pattern everywhere ----------
   Label + time, thin dividers, directions as a link. Matches the
   home hero (.watchbar) and Next Steps (.timebar). */
.svc-times{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin:30px 0 34px; }
.svc-times .wtime{ display:inline-flex; align-items:baseline; gap:.65em; color:inherit; text-decoration:none; }
.svc-times .lbl{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--spa, #A7DCDC); }
.svc-times .val{ font-size:1.12rem; font-weight:600; color:#fff; }
.svc-times .wsep{ width:1px; height:20px; background:rgba(255,255,255,.28); }
.svc-times .wloc .val{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:5px; }
.svc-times .wloc:hover .val{ text-decoration-color:#fff; }

/* ---------- Hero time rows on phones ----------
   Stack the service times instead of wrapping them, so the thin
   dividers never dangle at the end of a line. */
@media (max-width:900px){
  .watchbar, .timebar, .svc-times{ flex-direction:column; align-items:flex-start; gap:10px; }
  .wsep, .tsep{ display:none !important; }
}

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Reduced motion ----------
   Honour the OS setting everywhere: no smooth scrolling, no
   looping or entrance animation. Final states stay visible. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}