/* ---------------------------------------------------------------------
   Sioux Falls SD Stake site -- "Evergreen" theme.

   A quiet deep green on warm white. Nothing here imitates Church
   branding, uses its logo or symbols, or borrows its photography.

   Colours live in these tokens and nowhere else, so changing the theme
   is this block and the hero gradient below -- which is why they are
   named --brand rather than after any one colour.

   Mobile first on purpose: nearly everyone opens this on a phone, often
   minutes before a meeting starts, sometimes on ward-building wifi. Big
   tap targets, no layout that needs a mouse, nothing that blocks paint.
   --------------------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --sink: #eef3ef;
  --ink: #1c2620;
  --muted: #5a6b60;
  --rule: #dbe3dd;

  --brand: #2b5f46;         /* deep evergreen; 7.4:1 with white text */
  --brand-ink: #ffffff;
  --brand-soft: #e6efe9;
  --sky: #45705a;           /* secondary buttons; 5.9:1 */
  --sky-soft: #e9f0e9;

  --live: #8a5e15;          /* amber, NOT green: a green "Live now" pill on
                               green buttons stops being a signal. 5.7:1 */
  --focus: #1a5fa8;         /* distinct from both brand and live */

  --radius: 12px;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "EB Garamond", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141a16; --sink: #0e120f; --ink: #e8efe9; --muted: #9aa89f;
    --rule: #2a352e; --brand: #7db894; --brand-ink: #10180f; --brand-soft: #1d2a22;
    --sky: #8fb59c; --sky-soft: #1b2620; --live: #e0a95c; --focus: #7fb0e8;
  }
}
:root[data-theme="dark"] {
  --paper: #141a16; --sink: #0e120f; --ink: #e8efe9; --muted: #9aa89f;
  --rule: #2a352e; --brand: #7db894; --brand-ink: #10180f; --brand-soft: #1d2a22;
  --sky: #8fb59c; --sky-soft: #1b2620; --live: #e0a95c; --focus: #7fb0e8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 4rem; }
body {
  margin: 0; background: var(--sink); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--brand); }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Masthead ---------- */
.masthead { background: var(--ink); color: #fdfbf9; padding: env(safe-area-inset-top, 0px) 0 0; }
.masthead-inner {
  max-width: 62rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1rem;
}
.masthead a { color: inherit; text-decoration: none; }
.brandmark { font-family: var(--display); font-size: 1.12rem; font-weight: 500; margin-right: auto; letter-spacing: .01em; }
.nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.nav a { padding: .35rem .7rem; border-radius: 999px; font-size: .9rem; opacity: .8; }
.nav a[aria-current="page"] { background: rgba(255,255,255,.15); opacity: 1; }
.nav a:hover { opacity: 1; }

/* ---------- Now / next banner ---------- */
.banner { background: var(--sky-soft); border-bottom: 1px solid var(--rule); }
.banner[data-state="live"] { background: var(--brand-soft); }
.banner-inner {
  max-width: 42rem; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .95rem;
}
.banner .dot {
  width: .6rem; height: .6rem; border-radius: 50%; flex: none;
  background: var(--sky);
}
.banner[data-state="live"] .dot { background: var(--live); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .banner .dot { animation: none; } }
.banner-text { margin-right: auto; }
.banner-go {
  background: var(--brand); color: var(--brand-ink); text-decoration: none;
  padding: .4rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  min-height: 2.2rem; display: grid; place-items: center;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; display: grid; place-items: center; text-align: center;
  min-height: clamp(12rem, 32vw, 19rem);
  padding: 2.5rem 1.25rem; color: #fdfbf9;
  background:
    linear-gradient(180deg, rgba(14,24,18,.32), rgba(14,24,18,.58)),
    linear-gradient(160deg, #4e7f62 0%, #2b5f46 42%, #24443a 72%, #1b3529 100%);
  background-size: cover; background-position: center;
}
.hero h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.1;
  margin: 0; max-width: 16ch; letter-spacing: .005em;
  text-shadow: 0 1px 16px rgba(10,20,14,.45);
}

/* ---------- Page body ---------- */
/* Named rather than `main` so the editor's preview can reuse it. */
.site-body { max-width: 42rem; margin: 0 auto; padding: 0 1rem 4rem; }
.card-surface {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.5rem 1.25rem;
  margin: -2rem 0 0; position: relative; box-shadow: 0 8px 30px rgba(20, 45, 32, .10);
}
@media (min-width: 40rem) { .card-surface { padding: 2rem 2.25rem; } }

h2.block-heading {
  font-family: var(--display); font-weight: 500; text-align: center;
  font-size: clamp(1.45rem, 4.6vw, 1.85rem); line-height: 1.2;
  margin: 2.4rem 0 1rem; padding-bottom: .5rem; position: relative;
}
h2.block-heading::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 3rem; height: 2px; background: var(--brand); opacity: .5;
}
.card-surface > :first-child { margin-top: 0; }
h3.block-subheading { font-weight: 600; text-align: center; color: var(--muted); font-size: 1.02rem; margin: .1rem 0 1.1rem; }
p.block-text { margin: 0 0 1rem; }

/* ---------- Event ---------- */
.event { text-align: center; margin: 0 0 1.6rem; }
.event.is-live { }
.event-title { font-family: var(--display); font-weight: 500; font-size: 1.3rem; margin: 0 0 .15rem; }
.event-when { color: var(--muted); font-size: 1rem; margin: 0 0 1rem; }
.event-note { color: var(--muted); font-size: .92rem; margin: -.6rem 0 1rem; }
.live-pill {
  display: inline-block; vertical-align: middle; margin-left: .35rem;
  background: var(--live); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px;
}

/* ---------- Buttons ---------- */
.btn-stack { display: flex; flex-direction: column; gap: .65rem; margin: 0 0 1.5rem; }
.btn-link {
  display: grid; place-items: center; gap: .1rem;
  text-align: center; text-decoration: none;
  padding: .8rem 1rem; border-radius: var(--radius);
  min-height: 3rem; /* comfortable thumb target */
  border: 1px solid transparent;
}
.btn-label { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.btn-helper { font-size: .82rem; opacity: .85; font-weight: 400; line-height: 1.3; }
.btn-link.primary { background: var(--brand); color: var(--brand-ink); }
.btn-link.secondary { background: var(--sky-soft); color: var(--sky); border-color: var(--rule); }
.btn-link:hover { filter: brightness(1.06); }
.btn-link:active { transform: translateY(1px); }

/* ---------- Meeting cards ---------- */
.cards { display: grid; gap: .75rem; margin: 0 0 1rem; }
@media (min-width: 34rem) { .cards { grid-template-columns: 1fr 1fr; } }
.ward-card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1rem; background: var(--paper);
  display: flex; flex-direction: column; gap: .35rem;
}
.ward-card.is-live { border-color: var(--live); box-shadow: 0 0 0 2px rgba(31,111,74,.14); }
.ward-card .name { font-family: var(--display); font-size: 1.16rem; font-weight: 500; }
.ward-card .time { color: var(--muted); font-size: .92rem; }
.ward-card .passcode { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.ward-card .btn-link { margin-top: .5rem; padding: .65rem .8rem; min-height: 2.6rem; }
.ward-card .btn-label { font-size: .92rem; }

/* ---------- Wide screens: a stake event sits beside the meetings ----------
   Keyed off :has() rather than a class somebody has to remember to set.
   The event block removes itself once it is over, so the page falls back
   to a single column on its own the moment the devotional has passed.
   Browsers without :has() keep the stacked layout, which is the same
   thing everyone gets on a phone -- nothing is lost, it is just taller. */
@media (min-width: 64rem) {
  .site-body:has(.card-surface > .event) { max-width: 66rem; }

  .card-surface:has(> .event) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    align-items: start;
  }
  /* The event SPANS the rows rather than occupying one. Sharing row 1 with
     the "Sacrament Meetings" heading made that row as tall as the whole
     event block, leaving ~200px of dead space above the first ward card.
     A spanning item distributes its height instead of forcing one row.
     The span is deliberately larger than any plausible number of blocks;
     the extra rows collapse to zero. Note `column-gap`, not `gap` -- a row
     gap here would multiply across every one of those empty rows. */
  .card-surface:has(> .event) > .event { grid-column: 1; grid-row: 1 / span 50; margin-bottom: 0; }
  .card-surface:has(> .event) > :not(.event) { grid-column: 2; }

  /* Start both columns level with each other. */
  .card-surface:has(> .event) > .event .block-heading,
  .card-surface:has(> .event) > .event + * { margin-top: 0; }

  /* One ward per row here: the column is half the width, and the button
     labels need the room more than the page needs to be compact. */
  .card-surface:has(> .event) .cards { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
footer { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; color: var(--muted); font-size: .85rem; text-align: center; }
footer .updated { font-style: italic; }

/* ---------- States ---------- */
.notice { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.notice.bad { color: #a3312a; }

@media print {
  .masthead, .nav, .banner, footer { display: none; }
  body { background: #fff; }
  .hero { min-height: auto; color: #000; background: none; padding: 1rem 0; }
  .hero h1 { text-shadow: none; }
  .card-surface { margin: 0; box-shadow: none; border: 0; }
  .btn-link { border: 1px solid #999; color: #000 !important; background: none !important; }
  .btn-link::after { content: " (" attr(href) ")"; font-weight: 400; font-size: .8em; word-break: break-all; }
}