/* ============================================================
   REDEEMER STAFF RETREAT — theme tokens
   Swap these to match Redeemer Bible Church's real brand kit.
   Everything below reads from these variables, so changing the
   values here re-themes the whole app.
   ============================================================ */
:root{
  /* --- Color ---
     Matched from an actual screenshot of redeemerbible.church: a dark
     slate-teal (their footer/nav color) paired with black and white —
     no serif, no warm accent. Swap these if staff hands you exact hex. */
  --pine:   #17181B;   /* near-black — body text on light backgrounds (matches their logo) */
  --teal:   #42585A;   /* dark slate-teal — sampled directly from the real logo file */
  --paper:  #FFFFFF;   /* clean white — page background */
  --moss:   #6B7573;   /* teal-tinted gray — secondary text, dividers */
  --gold:   #5E7873;   /* lighter teal — the one accent, used sparingly (highlights, 1st place) */
  --card:   #FFFFFF;   /* card surfaces */
  --line:   #E2E5E3;   /* hairline borders */
  --ink-soft: #5C6462; /* secondary text on paper */

  /* --- Type ---
     Their wordmark is a bold, geometric all-caps sans (no serif anywhere
     on the site) — Poppins is the closest clean match for that display
     role; Inter stays for body copy since it reads better at length. */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 14px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--pine);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 48px;
}
h1,h2,h3{ font-family: var(--font-display); margin: 0; }
a{ color: inherit; }

/* ---------- Top bar & hamburger ---------- */
.topbar{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px;
  background: var(--teal);
}
.topbar__logo{
  height: 26px; width:auto; display:block;
}
.menu-btn{
  width:34px; height:34px;
  border:none; background:transparent;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  cursor:pointer; padding:0;
}
.menu-btn span{
  display:block; height:2px; width:100%;
  background: #fff; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.navsheet{
  position: fixed; top:0; right:-260px; height:100%; width:240px;
  background: var(--teal); color:#fff; z-index: 30;
  padding: 90px 28px 28px;
  transition: right .28s ease;
}
.navsheet.open{ right:0; }
.navsheet ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px; }
.navsheet a{
  font-family: var(--font-display); font-size:22px; text-decoration:none; color:#fff;
}
.navsheet a.active{ color: var(--gold); }
.scrim{
  position:fixed; inset:0; background: rgba(20,26,20,.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:25;
}
.scrim.open{ opacity:1; pointer-events:auto; }

/* ---------- Layout ---------- */
main{ max-width: 560px; margin: 0 auto; padding: 0 20px; }
.view[hidden]{ display:none; }

/* ---------- Hero ---------- */
body{ overflow-x: hidden; }
.hero{
  position:relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--teal);
  padding: 36px 20px 32px;
  border-radius: 0 0 28px 28px;
}
.hero__text{ max-width:520px; margin:0 auto; }
.hero__title{
  font-size: 32px; line-height:1.15; font-weight:700; color:#fff;
}
.hero__meta{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top: 16px; padding: 7px 16px; border-radius:999px;
  background: rgba(255,255,255,0.14); color:#fff; font-size:13px; font-weight:500;
}
.hero__meta-dot{ opacity:0.55; }

/* ---------- Section titles ---------- */
.section-title{
  font-size: 22px; margin: 30px 0 14px; color: var(--pine);
}
.section-title--top{ margin-top: 22px; }
.section-subtitle{
  font-family: var(--font-display); font-size:18px; margin: 30px 0 12px; color: var(--pine);
}
.section-hint{ margin: -6px 0 18px; font-size:14px; color: var(--ink-soft); }

/* ---------- Day tabs ---------- */
.daytabs{ display:flex; gap:8px; margin-bottom: 16px; }
.daytabs button{
  flex:1; padding:9px 0; border-radius: 999px; border:1px solid var(--line);
  background: var(--card); color: var(--ink-soft); font-family: var(--font-body);
  font-weight:600; font-size:14px; cursor:pointer;
}
.daytabs button.active{ background: var(--pine); color:#fff; border-color: var(--pine); }

/* ---------- Timeline (agenda) ---------- */
.timeline{ position:relative; padding-left: 22px; margin-bottom: 8px; }
.timeline::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background: var(--line);
}
.timeline__item{ position:relative; padding-bottom: 20px; }
.timeline__item::before{
  content:""; position:absolute; left:-22px; top:4px; width:10px; height:10px;
  border-radius:50%; background: var(--gold); border:2px solid var(--paper);
}
.timeline__time{ font-size:13px; font-weight:600; color: var(--moss); }
.timeline__title{ font-size:16px; font-weight:600; margin-top:2px; }
.timeline__note{ font-size:14px; color: var(--ink-soft); margin-top:2px; }

/* ---------- Speakers ---------- */
.speakers{ margin: 4px 0 18px; }
.speakers__line{ font-size:15px; margin: 4px 0; color: var(--pine); }
.speakers__role{ font-weight:600; color: var(--moss); margin-right: 6px; }

/* ---------- Accordion (shared: packing + worship) ---------- */
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: 14px 4px; margin-top: 10px;
  background:none; border:none; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size:18px; color: var(--pine);
  cursor:pointer; text-align:left;
}
.accordion-trigger__icon{ font-size:20px; color: var(--moss); transition: transform .2s ease; }
.accordion-trigger[aria-expanded="true"] .accordion-trigger__icon{ transform: rotate(45deg); }
.accordion-body{ padding: 4px 4px 20px; }
.accordion-body h4{
  font-family: var(--font-body); font-size:13px; text-transform: none;
  color: var(--moss); font-weight:600; margin: 14px 0 6px;
}
.accordion-body ul{ margin:0; padding-left: 18px; }
.accordion-body li{ margin-bottom:6px; font-size:15px; }
.weather-note{
  margin-top:14px; padding:12px 14px; border-radius:10px;
  background: rgba(181,137,43,0.12); font-size:14px; color: var(--pine);
}

/* ---------- Worship ---------- */
.song{ border-top: 1px solid var(--line); }
.song:last-child{ border-bottom: 1px solid var(--line); }
.song__head{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: 16px 4px; background:none; border:none; text-align:left; cursor:pointer;
}
.song__title{ font-family: var(--font-display); font-size:18px; color: var(--pine); }
.song__icon{ font-size:20px; color: var(--moss); transition: transform .2s ease; }
.song__head[aria-expanded="true"] .song__icon{ transform: rotate(45deg); }
.song__lyrics{ padding: 0 4px 20px; font-size:16px; line-height:1.7; white-space: pre-line; color: var(--pine); }
.roster-grid{
  grid-template-columns: 1fr 1fr; gap: 8px 12px;
  font-size:15px; color: var(--pine);
}
.event-card__body.roster-grid.open{ display:grid; }

/* ---------- Redeemer Cup ---------- */
.form-link{
  display:block; text-align:center; padding: 13px 16px; margin-bottom: 16px;
  border-radius: var(--radius); font-size:15px; font-weight:600;
  text-decoration:none;
}
.form-link--open{
  background: var(--teal); color:#fff; cursor:pointer;
}
.form-link--locked{
  background: var(--card); border: 1px dashed var(--line);
  color: var(--ink-soft); font-weight:500;
}
.cup-board{
  border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--card);
}
.tiebreak-note{
  font-size:13px; line-height:1.5; color: var(--ink-soft);
  margin: 10px 2px 0; font-style: italic;
}
.cup-row{
  display:flex; align-items:center; gap:12px; padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.cup-row:last-child{ border-bottom:none; }
.cup-rank{
  font-family: var(--font-display); font-size:18px; font-weight:600;
  width: 24px; color: var(--ink-soft);
}
.cup-row--1 .cup-rank{ color: var(--gold); }
.cup-team{ flex:1; font-weight:600; font-size:16px; }
.cup-points{ font-size:15px; color: var(--moss); font-weight:600; }

.event-card{
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  margin-bottom: 14px; overflow:hidden;
}
.event-card__head{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: 14px 16px; background:none; border:none; cursor:pointer; text-align:left;
}
.event-card__title{ font-family: var(--font-display); font-size:17px; color: var(--pine); }
.event-card__icon{ font-size:18px; color: var(--moss); transition: transform .2s ease; }
.event-card__head[aria-expanded="true"] .event-card__icon{ transform: rotate(45deg); }
.event-card__body{ padding: 0 16px 14px; display:none; }
.event-card__body.open{ display:block; }
.event-row{
  display:flex; align-items:center; gap:10px;
  padding:6px 0; font-size:15px; border-top:1px solid var(--line);
}
.event-row:first-child{ border-top:none; }
.event-row__team{ flex:1; }
.event-row__place{ width:38px; color: var(--ink-soft); }
.event-row__pts{ width:52px; text-align:right; color: var(--moss); font-weight:600; }

.empty-note{ font-size:14px; color: var(--ink-soft); padding: 10px 2px 20px; }

/* ---------- Past Winners (history) ---------- */
.history-card{
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  margin-bottom: 16px; overflow:hidden;
}
.history-card__year{
  font-family: var(--font-display); font-size:16px; font-weight:600; color:#fff;
  background: var(--teal); padding: 10px 16px;
}
.history-card__img{
  display:block; width:100%; height:auto; background: var(--line);
}
.history-card__caption{
  padding: 10px 16px; font-size:14px; color: var(--ink-soft);
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--teal);
  margin-top: 44px;
  padding: 32px 20px 34px;
  border-radius: 28px 28px 0 0;
}
.footer-inner{ max-width:520px; margin:0 auto; }
.footer-word{
  font-family: var(--font-display); font-size:24px; font-weight:700;
  color:#fff; margin:0;
}
.footer-pos{
  font-family: var(--font-body); font-style: italic; font-weight:400;
  font-size:13px; color: rgba(255,255,255,0.55); margin-left:8px;
}
.footer-def{
  font-size:15px; line-height:1.6; color: rgba(255,255,255,0.85); margin:10px 0 0;
}
.footer-divider{
  border:none; border-top:1px solid rgba(255,255,255,0.18); margin:20px 0;
}
.footer-verse-ref{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  color: rgba(255,255,255,0.55); margin:0 0 8px;
}
.footer-verse-text{
  font-family: var(--font-display); font-style:italic; font-size:15px; line-height:1.55;
  color:#fff; margin:0;
}
.footer-copyright{
  font-size:11px; color: rgba(255,255,255,0.4); margin: 14px 0 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}