/* =========================================================
   Clyde River UBC — styles-vNext (CLEAN)
   - Keeps your theme + cards + grids
   - Sticky header with anchor offset
   - Desktop nav + Mobile hamburger drawer
   - Responsive grids use auto-fit (no more “desktop becomes 1-col”)
   ========================================================= */

/* =========================
   Global Theme + Layout
   ========================= */

:root{
  /* Brand colors */
  --parchment: #F3E8D5;
  --green: #235836;
  --charcoal: #353635;
  --gold: #C9A24A;

  /* App tokens */
  --bg: var(--charcoal);
  --text: var(--parchment);
  --ink: #1f1f1f;
  --line: rgba(243,232,213,.18);
  --shadow: 0 10px 30px rgba(0,0,0,.25);

  --radius: 18px;
  --max: 1100px;

  /* Header */
  --header-pad-y: 14px;

 
}

/* Reset-ish */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Global media reset */
img, video, iframe{ max-width:100%; height:auto; display:block; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }

/* In-page anchor jumps land below sticky header */
section[id]{ scroll-margin-top: var(--header-offset); }

/* Containers + spacing */
.container{
  width: min(var(--max), 100% - 2rem);
  margin-inline: auto;
}

.page{ padding-bottom: 40px; }
.section{ padding: 26px 0; }

/* Fluid type */
h1{ font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin: 0 0 12px; }
h2{ font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; margin: 0 0 12px; }
h3{ font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2; margin: 0 0 12px; }
p, li{ font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }

.small{ font-size: 14px; }
.muted{ opacity: 0.82; }

/* =========================
   Sticky Header
   (NOTE: header markup is injected in #site-header)
   ========================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(53,54,53,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Constrain header content like the rest of the site */
.header-wrap{
  width: min(var(--max), 100% - 2rem);
  margin-inline: auto;
  padding: var(--header-pad-y) 0 10px;
  display: grid;
  gap: 10px;
}

/* Top row: logo left, title centered, hamburger/spacer right */
.header-top{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

/* Logo */
.logo{
  width: clamp(56px, 5vw, 78px);
  height: clamp(56px, 5vw, 78px);
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(243,232,213,.22);
  background: rgba(0,0,0,.12);
  overflow: hidden;
}
.logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

/* Title */
.header-title{ text-align: center; }

.church-name{
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
}

.church-subtitle{
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
}

/* Bottom row: desktop nav */
.header-bottom{
  display: flex;
  justify-content: center;
}

/* Desktop nav */
.nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nav a{
  padding: 8px 12px;
  border-radius: 999px;
  opacity: 0.92;
}
.nav a:hover{
  opacity: 1;
  background: rgba(243,232,213,.10);
}

/* Accent nav button */
.nav-btn{
  background: var(--gold);
  color: #1a1a1a;
  font-weight: 800;
}
.nav-btn:hover{ background: rgba(201,162,74,.92); }

/* Live banner */
.live-banner{
  display:none; /* JS turns it on */
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  background: var(--gold);
  color:#1a1a1a;
  border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  white-space:nowrap;
  justify-self: center;
}

.live-dot{
  width:10px; height:10px;
  border-radius:999px;
  background:#b30000;
  box-shadow:0 0 0 0 rgba(179,0,0,.55);
  animation: livePulse 1.1s infinite;
}
@keyframes livePulse{
  0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(179,0,0,.55); }
  70%  { transform:scale(1.1); box-shadow:0 0 0 10px rgba(179,0,0,0); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(179,0,0,0); }
}

/* =========================
   Mobile hamburger + drawer
   ========================= */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Hidden on desktop */
.nav-toggle{ display:none; }

/* Hamburger button */
@media (max-width: 600px){
  :root{
    --header-pad-y: 10px;
    --header-offset: 125px;
  }

  .header-wrap{
    width: min(var(--max), 100% - 1rem);
    padding: var(--header-pad-y) 0 8px;
    gap: 8px;
  }

  /* Top row becomes: logo | title | hamburger */
  .header-top{
    grid-template-columns: 52px 1fr 52px;
    gap: 10px;
  }

  .logo{
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .church-name{
    font-size: clamp(1.35rem, 5.3vw, 1.8rem);
    letter-spacing: 0.12em;
  }

  .church-subtitle{
    font-size: clamp(0.72rem, 2.6vw, 0.9rem);
    letter-spacing: 0.12em;
    margin-top: 2px;
  }

  /* Hide desktop nav row entirely on mobile */
  .header-bottom{ display:none; }

  /* Show hamburger */
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(243,232,213,.22);
    background: rgba(0,0,0,.12);
    color: var(--parchment);
    justify-self: end;
  }
  .nav-toggle:hover{ background: rgba(243,232,213,.10); }

  .nav-toggle-bars{
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
    display: block;
    border-radius: 2px;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    content:"";
    position:absolute;
    left:0;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .nav-toggle-bars::before{ top: -6px; }
  .nav-toggle-bars::after{ top: 6px; }

  /* Mobile drawer (requires <div id="mobileNav" class="mobile-nav" hidden> in header partial) */
  .mobile-nav{
    margin-top: 8px;
    background: rgba(0,0,0,.10);
    border: 1px solid rgba(243,232,213,.18);
    border-radius: 14px;
    overflow: hidden;
  }

  .mobile-nav-inner{
    display: grid;
    gap: 6px;
    padding: 10px;
  }

  .mobile-nav-inner a{
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(243,232,213,.08);
    color: var(--parchment);
  }

  .mobile-nav-inner a:hover{
    background: rgba(243,232,213,.14);
  }
}

/* =========================
   Cards (Parchment boxes)
   ========================= */

.card{
  background: var(--parchment);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.10);
}

.mini-card{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 16px;
}

/* Hero */
.hero{ padding: 26px 0 10px; }
.hero-card{ border-left: 6px solid var(--gold); }
.lead{ font-size: 18px; margin: 0 0 14px; }

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--green);
  color: var(--parchment);
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.15);
}
.btn:hover{ filter: brightness(0.98); }

.btn-outline{
  background: transparent;
  color: var(--green);
  border: 1px solid rgba(35,88,54,.45);
}
.btn-outline:hover{ background: rgba(35,88,54,.08); }

.cta{ display:flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }

/* =========================
   Info grid
   ========================= */

.info-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.info-box{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.35);
}
.label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  opacity: 0.75;
}
.value{
  font-weight: 900;
  font-size: 18px;
  margin-top: 6px;
}

/* =========================
   Grids (Auto-fit responsive)
   IMPORTANT: Use class="grid grid-2" or class="grid grid-3" in HTML
   ========================= */

.grid{
  display: grid;
  gap: 1rem;
}

/* Explicit one column */
.grid-1{
  grid-template-columns: 1fr;
}

/* Auto-fit "2 column style"
   - becomes 2-up when space allows
   - collapses naturally on smaller widths
*/
.grid-2{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Auto-fit "3 column style"
   - becomes 3-up on wider screens
   - 2-up on medium widths
   - 1-up on phones
*/
.grid-3{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* =========================
   Embeds
   ========================= */

.embed{
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.18);
  background:#000;
}
.embed iframe{
  width: 100%;
  height: 420px;
  border: 0;
  display:block;
}

.embed-responsive{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.08);
}
.embed-responsive iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lists */
.list{ margin: 12px 0 0; padding-left: 18px; }

/* Split helper */
.split{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Map placeholder */
.map-placeholder{
  margin-top: 14px;
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  border: 1px dashed rgba(0,0,0,.25);
  background: rgba(255,255,255,.22);
}

/* =========================
   Footer
   ========================= */

.footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  margin-top: 48px;
}

.footer-inner {
  text-align: left;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}

.footer-block {
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}


/* =========================
   Responsive (non-header)
   ========================= */

@media (max-width: 720px){
  .info-grid{ grid-template-columns: 1fr; }
  :root{ --header-offset: 150px; }
}

/* =========================
   Motion accessibility
   ========================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .live-dot{ animation: none; }
}