/* =========================================================
   Lakeland Seventh-day Adventist Church — site theme
   Warm, modern, conservative, seeker-focused, professional.
   Palette drawn from the "Belong & Believe" harvest banner:
   golden wheat, sunlit cream, deep bronze, warm ink.
   Shared across Home / About / What We Offer / Visit.
   ========================================================= */

:root{
  --paper:      #ffffff;
  --cream:      #faf6ec;
  --cream-2:    #f4ecdb;
  --sand:       #efe4cd;
  --ink:        #2b2721;
  --ink-soft:   #4b443a;
  --muted:      #7a7063;
  --gold:       #c0892c;
  --gold-deep:  #9a6a16;
  --gold-soft:  #e4c979;
  --honey:      #f0b03f;   /* warm honey — solid buttons */
  --honey-deep: #d68f22;
  --bronze:     #4a3820;
  --line:       #e8ddc6;
  --line-soft:  #f0e8d6;
  --green:      #4b6a3f;   /* subtle "growth" accent */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Dancing Script", cursive;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1160px;
  --radius: 16px;
  --shadow-sm: 0 6px 20px rgba(74,56,32,.08);
  --shadow: 0 18px 50px rgba(74,56,32,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--cream); line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--gold-deep); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.15; color:var(--bronze); margin:0 0 .4em; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.container--narrow{ max-width:800px; }
.center{ text-align:center; }

/* ---------- Type helpers ---------- */
.overline{ text-transform:uppercase; letter-spacing:.26em; font-size:.74rem;
  font-weight:700; color:var(--gold-deep); margin:0 0 .7rem; }
.script{ font-family:var(--script); font-weight:700; color:var(--gold-deep); }
.h1{ font-size:clamp(2.1rem,5vw,3.4rem); }
.h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
.h3{ font-size:clamp(1.2rem,2vw,1.45rem); }
.lead{ font-size:clamp(1.1rem,2.1vw,1.35rem); color:var(--ink-soft); }
.muted{ color:var(--muted); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:700; font-size:1rem; line-height:1;
  padding:.9em 1.6em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s;
  text-align:center;
}
.btn--sm{ padding:.62em 1.15em; font-size:.9rem; }
.btn--lg{ padding:1.05em 2em; font-size:1.06rem; }
.btn--block{ display:flex; width:100%; }
.btn--gold{ background:linear-gradient(135deg,var(--honey) 0%, var(--honey-deep) 100%); color:#fff;
  box-shadow:0 10px 26px rgba(214,143,34,.32); }
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(214,143,34,.44); }
.btn--outline{ background:transparent; color:var(--bronze); border-color:var(--honey-deep); }
.btn--outline:hover{ background:linear-gradient(135deg,var(--honey) 0%, var(--honey-deep) 100%); color:#fff; border-color:transparent; transform:translateY(-2px); }
.btn--ghost-light{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.6); backdrop-filter:blur(4px); }
.btn--ghost-light:hover{ background:#fff; color:var(--bronze); transform:translateY(-2px); }

/* ---------- Header / Nav ---------- */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  transition:box-shadow .3s; }
.site-header.is-stuck{ box-shadow:0 8px 24px rgba(74,56,32,.1); }
.site-header__inner{ max-width:var(--maxw); margin:0 auto; padding:.75rem 24px;
  display:flex; align-items:center; gap:1.2rem; }
.brand{ display:flex; align-items:center; gap:.55rem; margin-right:auto; color:var(--ink); }
.brand__mark{ color:var(--gold); font-size:1.15rem; }
.brand__text{ font-family:var(--serif); font-size:1.02rem; line-height:1.1; color:var(--bronze); }
.brand__text strong{ font-weight:700; }
.brand__text small{ display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:2px; }

.site-nav{ display:flex; align-items:center; gap:1.5rem; }
.site-nav a{ color:var(--ink-soft); font-weight:500; font-size:.96rem; transition:color .2s; }
.site-nav a:hover{ color:var(--gold-deep); }
.site-nav a[aria-current="page"]{ color:var(--gold-deep); font-weight:700; }
/* Buttons in the nav keep their own colors, not the link colors */
.site-nav a.btn--gold, .site-nav a.btn--gold:hover{ color:#fff; font-weight:700; }
.site-nav a.btn--outline{ color:var(--bronze); }
.site-nav a.btn--outline:hover{ color:#fff; }
.site-nav__feature{ color:var(--gold-deep) !important; font-weight:600 !important; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:.4rem; }
.nav-toggle span{ width:24px; height:2px; background:var(--bronze); border-radius:2px; transition:.25s; }

/* ---------- Hero (Home) ---------- */
.hero{ position:relative; background:var(--bronze); }
.hero__banner{ position:relative; width:100%; background:#3a2c17; }
.hero__banner img{ width:100%; height:auto; display:block; margin:0 auto; max-width:1920px;
  opacity:0; animation:fade 1s var(--ease) forwards; }
@keyframes fade{ to{ opacity:1; } }
.hero__fallback{ display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:5rem 1rem; color:#fff; }
.hero--noimg .hero__banner{ min-height:48vh; display:flex; align-items:center;
  background:linear-gradient(135deg,#caa24e,#8a5f1a); }
.hero--noimg .hero__fallback{ display:flex; }
.hero__fallhead{ font-size:clamp(2.4rem,7vw,4.5rem); color:#fff; margin:0; }
.hero__falltag{ font-family:var(--script); font-size:clamp(1.4rem,3vw,2.2rem); color:#fff8e6; }

.hero__welcome{ background:linear-gradient(180deg,var(--paper),var(--cream)); text-align:center;
  padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(2.6rem,5vw,3.4rem); border-bottom:1px solid var(--line); }
.hero__welcome .lead{ max-width:60ch; margin:0 auto; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.6rem; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ background:
    radial-gradient(1000px 400px at 80% -20%, rgba(228,201,121,.5), transparent 60%),
    linear-gradient(180deg,var(--cream-2),var(--cream));
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.2rem,5vw,3rem); border-bottom:1px solid var(--line); text-align:center; }
.page-hero .h1{ margin:0; }
.page-hero p{ max-width:60ch; margin:.6rem auto 0; color:var(--ink-soft); }

/* ---------- Sections ---------- */
.section{ padding:clamp(3rem,7vw,5.5rem) 0; }
.section--paper{ background:var(--paper); }
.section--cream{ background:var(--cream); }
.section--sand{ background:
    radial-gradient(900px 500px at 0% 0%, rgba(228,201,121,.25), transparent 60%),
    var(--cream-2); }
.section__head{ text-align:center; max-width:720px; margin:0 auto clamp(2rem,4vw,3rem); }
.section__head p{ color:var(--muted); margin:.3rem auto 0; }

.divider{ width:64px; height:3px; margin:0 auto 1.4rem; border-radius:3px;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold)); }

/* ---------- Grid + cards ---------- */
.grid{ display:grid; gap:1.5rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.7rem; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--gold-soft); }
/* Image "peek" strip at the top of a card. Set the photo per card with an
   inline --peek variable, e.g. style="--peek:url(../img/photo-worship.jpg)".
   NOTE: the url() is resolved relative to THIS stylesheet (assets/css/), so
   photo paths use ../img/ — not assets/img/. Falls back to a warm gradient
   when no photo is provided. */
.card__icon{ position:relative; width:calc(100% + 3.4rem); height:104px;
  margin:-2rem -1.7rem 1.4rem; border:0; border-bottom:1px solid var(--line);
  border-radius:0; font-size:0; overflow:hidden;
  background-image:var(--peek, linear-gradient(135deg,var(--cream-2),var(--sand)));
  background-size:cover; background-position:center 35%;
  transition:background-position .5s var(--ease); }
.card:hover .card__icon{ background-position:center 45%; }
.card h3{ font-size:1.25rem; margin-bottom:.4rem; }
.card p{ color:var(--ink-soft); margin:0; font-size:.98rem; }
.card__link{ display:inline-block; margin-top:1rem; font-weight:700; color:var(--gold-deep); }

/* ---------- Split (image/text alternating) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split__media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--sand),var(--cream-2)); aspect-ratio:4/3; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__media--placeholder{ display:grid; place-items:center; color:var(--gold-deep);
  text-align:center; padding:2rem; }
.split__media--placeholder span{ font-family:var(--script); font-size:1.6rem; }
.split h2{ margin-top:0; }
.split p{ color:var(--ink-soft); }

/* ---------- Info / quick facts strip ---------- */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.fact{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; text-align:center; box-shadow:var(--shadow-sm); }
.fact__label{ text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700;
  color:var(--gold-deep); margin:0 0 .4rem; }
.fact strong{ display:block; font-family:var(--serif); font-size:1.15rem; color:var(--bronze); }
.fact span{ color:var(--muted); font-size:.95rem; }

/* ---------- Times list ---------- */
.times{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.times li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.9rem 1.1rem; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.times .t-name{ font-weight:600; color:var(--ink); }
.times .t-when{ color:var(--gold-deep); font-weight:700; white-space:nowrap; }
.times .t-sub{ display:block; font-size:.85rem; color:var(--muted); font-weight:400; }

/* ---------- Scripture / quote band ---------- */
.verse{ text-align:center; background:
    linear-gradient(180deg,var(--bronze),#3a2c17); color:#f7edd6;
  padding:clamp(3rem,6vw,5rem) 0; }
.verse p{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.1rem); font-style:italic;
  max-width:22ch; margin:0 auto; line-height:1.35; }
.verse cite{ display:block; margin-top:1rem; font-family:var(--sans); font-style:normal;
  letter-spacing:.15em; text-transform:uppercase; font-size:.8rem; color:var(--gold-soft); }
/* Casual hand-drawn underline accent */
.u-mark{ color:#f4c445; text-decoration:underline; text-decoration-color:#f4c445;
  text-decoration-thickness:2px; text-decoration-skip-ink:none; text-underline-offset:7px; }

/* ---------- Daily devotional ---------- */
.devo{ max-width:760px; margin:0 auto; }
.devo-item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.1rem); box-shadow:var(--shadow-sm);
  position:relative; }
.devo-item::before{ content:"\201C"; position:absolute; top:.1em; right:.35em;
  font-family:var(--serif); font-size:4rem; line-height:1; color:var(--gold-soft); opacity:.5; }
.devo-item + .devo-item{ margin-top:1.3rem; }
.devo-item h3{ font-size:clamp(1.25rem,2.3vw,1.5rem); margin:0 0 .8rem; color:var(--bronze); }
.devo-item p{ color:var(--ink-soft); margin:0 0 1rem; }
.devo-item p:last-of-type{ margin-bottom:1.2rem; }
.devo-item__verse{ font-family:var(--serif); font-style:italic; font-size:1.12rem;
  color:var(--ink); border-left:3px solid var(--gold-soft); padding-left:1rem; }
.devo-item__link{ display:inline-block; font-weight:700; color:var(--gold-deep); }
.devo-item__link:hover{ color:var(--gold); }
.devo__credit{ text-align:center; color:var(--muted); font-size:.85rem; margin:1.4rem 0 0; }
.devo-share{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line-soft); }
.devo-share__label{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--muted); margin-right:.15rem; }
.devo-share__btn{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans);
  font-size:.85rem; font-weight:600; color:var(--gold-deep); background:var(--cream);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s; }
.devo-share__btn:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--bronze); }
.devo-share__btn svg{ display:block; }
.devo-share__copy.is-copied{ color:#2f7d32; background:#eef7ee; border-color:#bcd9bd; }

/* ---------- Feature strip (NSL callout) ---------- */
.feature{ background:linear-gradient(135deg,#141a2b,#0f1524); color:#fff; border-radius:var(--radius);
  overflow:hidden; display:grid; grid-template-columns:1.3fr 1fr; box-shadow:var(--shadow); }
.feature__body{ padding:clamp(1.8rem,4vw,2.8rem); }
.feature__body .overline{ color:var(--gold-soft); }
.feature__body h2{ color:#fff; }
.feature__body p{ color:#cdd4e2; }
.feature__media{ background:#0b1120; position:relative; min-height:220px; }
.feature__media img{ width:100%; height:100%; object-fit:cover; opacity:.92; }

/* ---------- CTA band ---------- */
.cta{ text-align:center; background:
    radial-gradient(900px 400px at 50% 120%, rgba(228,201,121,.35), transparent 60%),
    linear-gradient(180deg,var(--cream),var(--cream-2)); }
.cta .h2{ margin-bottom:.4rem; }
.cta p{ color:var(--ink-soft); max-width:52ch; margin:0 auto 1.6rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* ---------- Simple contact form ---------- */
.field{ margin-bottom:1.05rem; text-align:left; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:var(--ink); }
.field input, .field textarea, .field select{ width:100%; padding:.85em 1em; border-radius:10px;
  border:1.5px solid var(--line); background:var(--paper); font-family:inherit; font-size:1rem; color:var(--ink);
  transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(192,137,44,.16); }
.field input.invalid, .field textarea.invalid{ border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.15); }
.form__status{ margin-top:.9rem; font-weight:600; }
.form__status.ok{ color:var(--green); }
.form__status.err{ color:#c0392b; }
.form__fine{ font-size:.82rem; color:var(--muted); margin-top:.8rem; }

/* ---------- Footer ---------- */
.site-footer{ background:linear-gradient(180deg,#241b0f,#1a1409); color:#e9ddc4; padding:3.2rem 0 2rem; }
.site-footer a{ color:var(--gold-soft); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.site-footer h4{ color:#fff; font-size:1.05rem; margin-bottom:.7rem; }
.site-footer p, .site-footer li{ color:#cdbfa3; font-size:.95rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--serif);
  font-size:1.15rem; color:#fff; margin-bottom:.6rem; }
.footer-brand .brand__mark{ color:var(--gold-soft); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center;
  font-size:.85rem; color:#a99a7d; }
.footer-verse{ font-family:var(--script); font-size:1.3rem; color:var(--gold-soft); }
.social-link{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold-soft);
  font-weight:600; margin-top:.9rem; transition:color .2s; }
.social-link:hover{ color:#fff; }
.social-link svg{ flex:none; }

/* ---------- 28 Beliefs ---------- */
.belief-group{ margin-bottom:clamp(2rem,4vw,3rem); }
.belief-group__head{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.1rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.belief-group__head h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0; }
.belief-group__head span{ font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.belief-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; list-style:none; margin:0; padding:0; }
.belief{ display:flex; gap:1rem; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:1.15rem 1.3rem; box-shadow:var(--shadow-sm);
  transition:border-color .2s, transform .2s var(--ease); }
.belief:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.belief__no{ font-family:var(--serif); font-weight:800; color:var(--gold);
  font-size:1.5rem; line-height:1; min-width:1.6ch; }
.belief h3{ font-size:1.02rem; margin:0 0 .2rem; color:var(--bronze); }
.belief p{ margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.55; }
.belief__ref{ margin:.6rem 0 0 !important; padding-top:.5rem; border-top:1px dashed var(--line);
  font-size:.78rem !important; color:var(--gold-deep) !important; font-weight:600; letter-spacing:.01em; }
.belief__ref b{ font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.9em;
  color:var(--muted); margin-right:.4em; }
@media (max-width:720px){ .belief-list{ grid-template-columns:1fr; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__banner img{ animation:none; opacity:1; }
  *{ scroll-behavior:auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .feature{ grid-template-columns:1fr; }
  .feature__media{ min-height:180px; order:-1; }
  .footer-grid{ grid-template-columns:1fr; gap:1.6rem; }

  .nav-toggle{ display:flex; }
  .site-nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column;
    align-items:flex-start; gap:1.2rem; background:var(--paper); padding:5rem 1.8rem 2rem;
    box-shadow:-10px 0 40px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .3s var(--ease); }
  .site-nav.open{ transform:translateX(0); }
  body.nav-open{ overflow:hidden; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px){
  .grid--4, .grid--2{ grid-template-columns:1fr; }
}