/* ============================================================
   Sanctuary at Gilead Baptist Church — Design System
   Brand: Royal Blue #0018A8 · Gold #FFD700 · White
   Type: Cinzel (serif display) · Montserrat (sans body)
   ============================================================ */

:root {
  /* Brand palette (from current logo) */
  --blue-900: #050E5C;      /* deep shadow */
  --blue-800: #0018A8;      /* primary royal blue */
  --blue-700: #1E3AFA;      /* accent blue */
  --blue-600: #2B46E0;      /* mid blue */
  --blue-050: #EEF1FF;      /* light blue tint */

  --gold-500: #FFD700;      /* primary gold */
  --gold-400: #FFE35C;      /* light gold */
  --gold-700: #B8860B;      /* dark gold */

  --ink-900: #111827;
  --ink-600: #4B5563;
  --paper:  #FFFFFF;
  --cream:  #F8F7F2;        /* warm off-white */
  --line:   #E5E7EB;

  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, system-ui, sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 16px;
  --space-4: 24px; --space-5: 48px; --space-6: 96px;

  --shadow-sm: 0 1px 2px rgba(17,24,39,.06);
  --shadow-md: 0 8px 24px rgba(17,24,39,.10);
  --shadow-lg: 0 20px 50px rgba(5,14,92,.18);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-800, var(--blue-700)); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 600; }
.wrap { width: min(1120px, 92%); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-2);
}
.nav-logo { display: flex; align-items: center; gap: var(--space-3); }
.nav-logo img { height: 52px; width: auto; }
.nav-logo .wordmark { font-family: var(--font-display); font-size: 1.05rem; color: var(--blue-900); line-height: 1.05; }
.nav-logo .wordmark span { display: block; font-size: .62rem; letter-spacing: .18em; color: var(--gold-700); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: var(--space-4); font-size: .92rem; font-weight: 600; }
.nav-links a { color: var(--ink-900); }
.nav-links a:hover { color: var(--blue-700); }
.nav-cta { margin-left: var(--space-2); }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--blue-900); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.6rem; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 700; font-size: .95rem;
  border: 2px solid transparent; cursor: pointer; transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--blue-800, var(--blue-700)); color: #fff; }
.btn-primary:hover { background: var(--blue-900); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold-500); color: var(--blue-900); }
.btn-gold:hover { background: var(--gold-400); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { border-color: var(--blue-700); color: var(--blue-700); background: transparent; }
.btn-outline:hover { background: var(--blue-050); }
.btn-outline-white { border-color: #fff; color: #fff; background: transparent; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-6); }
.section-alt { background: var(--cream); }
.section-blue { background: linear-gradient(160deg, var(--blue-900), var(--blue-700)); color: #fff; }
.kicker {
  font-family: var(--font-sans); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: .72rem; color: var(--gold-700);
}
.section-blue .kicker { color: var(--gold-400); }
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--blue-900); margin-top: var(--space-2); }
.section-blue .section-title { color: #fff; }
.lead { font-size: 1.1rem; color: var(--ink-600); margin-top: var(--space-3); max-width: 60ch; }
.section-blue .lead { color: rgba(255,255,255,.85); }
.section-head { max-width: 720px; margin-bottom: var(--space-5); }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; align-items: center; min-height: 72vh;
  background:
    linear-gradient(105deg, rgba(5,14,92,.92) 0%, rgba(5,14,92,.78) 45%, rgba(30,58,250,.55) 100%),
    var(--hero-bg, center/cover);
  color: #fff; overflow: hidden;
}
.hero-inner { padding-block: var(--space-6); }
.hero .logo-mark { max-width: 180px; margin-bottom: var(--space-4); }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); max-width: 18ch; }
.hero p { font-size: 1.2rem; margin-top: var(--space-3); max-width: 52ch; opacity: .95; }
.hero .scripture { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; color: var(--gold-400); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3); margin-top: var(--space-6); max-width: 780px;
}
.hero-card {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: var(--space-3); backdrop-filter: blur(4px);
}
.hero-card .label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; font-weight: 700; }
.hero-card .val { font-family: var(--font-display); font-size: 1.15rem; margin-top: 2px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--space-4); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--space-4); box-shadow: var(--radius-sm);
}
.card h3 { color: var(--blue-900); font-size: 1.2rem; margin-bottom: var(--space-2); }
.card p { color: var(--ink-600); font-size: .96rem; }

/* ---------- Service times / info strips ---------- */
.info-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: var(--space-4);
}
.info-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--space-4); text-align: center;
}
.info-card .ico { font-size: 1.6rem; }
.info-card .label { font-weight: 700; color: var(--blue-900); font-size: 1.05rem; margin-top: var(--space-2); }
.info-card .sub { color: var(--ink-600); font-size: .9rem; margin-top: 2px; }

/* ---------- Give ---------- */
.give-band { border: 2px solid var(--gold-700); border-radius: 18px; padding: var(--space-5);
  background: linear-gradient(180deg, var(--cream), var(--paper)); text-align: center; }
.give-band h3 { font-size: 1.6rem; color: var(--blue-900); }
.give-methods { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: var(--space-3); margin-top: var(--space-5); text-align: left; }
.give-method { border: 1px solid var(--line); border-radius: 12px; padding: var(--space-4); background: var(--paper); }
.give-method .mt { font-weight: 700; color: var(--blue-900); }
.give-method p { color: var(--ink-600); font-size: .9rem; margin-top: var(--space-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-900); color: rgba(255,255,255,.85); padding-top: var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--space-5); padding-bottom: var(--space-5); }
.footer-grid h4 { color: #fff; font-size: 1rem; margin-bottom: var(--space-3); }
.footer-grid a { color: rgba(255,255,255,.8); display: block; padding: 3px 0; font-size: .92rem; }
.footer-grid a:hover { color: var(--gold-400); }
.footer-logo img { height: 64px; width: auto; margin-bottom: var(--space-3); }
.footer-logo p { font-size: .9rem; max-width: 30ch; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-block: var(--space-3); font-size: .82rem; color: rgba(255,255,255,.6); text-align: center; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .88rem; color: var(--ink-900); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem;
  font-family: var(--font-sans); font-size: .96rem; background: var(--paper);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue-500); border-color: transparent; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(150deg, var(--blue-900), var(--blue-700)); color: #fff;
  padding-block: var(--space-5); text-align: center;
}
.page-hero .kicker { color: var(--gold-400); }
.page-hero h1 { font-size: clamp(2rem,4.5vw,2.9rem); margin-top: var(--space-2); }
.page-hero p { max-width: 60ch; margin: var(--space-3) auto 0; opacity: .9; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: var(--space-3); gap: var(--space-3); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 80vh; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-5); }
}

/* ---------- "I'm New" highlighted nav link ---------- */
.nav-new {
  font-weight: 700; color: var(--blue-800) !important;
  padding: .4rem .9rem; border-radius: 999px; border: 2px solid var(--gold-500);
  background: var(--gold-500); color: var(--blue-900) !important; white-space: nowrap;
  transition: all .2s ease;
}
.nav-new:hover { background: var(--gold-400); transform: translateY(-1px); }
@media (max-width: 860px) { .nav-new { border-color: var(--gold-500); } }

/* ---------- Sticky mobile bottom nav ---------- */
.mobile-dock {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--blue-900); border-top: 2px solid var(--gold-500);
  padding: 6px env(safe-area-inset-right) 8px env(safe-area-inset-left);
}
.mobile-dock .dock-row { display: flex; justify-content: space-around; }
.mobile-dock a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: rgba(255,255,255,.85); font-size: .62rem; font-weight: 600;
  padding: 4px 6px; border-radius: 8px; text-align: center;
}
.mobile-dock a .dock-ico { font-size: 1.15rem; line-height: 1; }
.mobile-dock a.give { color: var(--gold-400); font-weight: 700; }
.mobile-dock a.active { color: var(--gold-400); }
@media (max-width: 860px) {
  .mobile-dock { display: block; }
  body { padding-bottom: 62px; }
}

/* ---------- Visit page: first-time info grid ---------- */
.visit-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--space-4); }
.visit-item { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: var(--space-4); }
.visit-item .vico { font-size: 1.6rem; }
.visit-item h3 { color: var(--blue-900); font-size: 1.15rem; margin: var(--space-2) 0 var(--space-1); }
.visit-item p { color: var(--ink-600); font-size: .93rem; }
.visit-item ul { list-style: none; margin-top: var(--space-2); }
.visit-item ul li { color: var(--ink-600); font-size: .9rem; padding: 3px 0; padding-left: 1.2em; position: relative; }
.visit-item ul li::before { content: "✔"; position: absolute; left: 0; color: var(--gold-700); font-weight: 700; }
.map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); line-height: 0; }

/* ---------- Beliefs ---------- */
.beliefs-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: var(--space-4); }
.belief { background: var(--paper); border-left: 4px solid var(--gold-500); border-radius: 0 12px 12px 0; padding: var(--space-4); box-shadow: var(--shadow-sm); }
.belief h3 { color: var(--blue-900); font-size: 1.1rem; margin-bottom: var(--space-2); }
.belief p { color: var(--ink-600); font-size: .95rem; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--space-4); }
.testi { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: var(--space-5) var(--space-4); box-shadow: var(--shadow-sm); }
.testi .quote { font-family: var(--font-display); font-size: 2rem; color: var(--gold-500); line-height: 1; }
.testi p { color: var(--ink-900); font-size: 1rem; margin-top: var(--space-2); font-style: italic; }
.testi .who { margin-top: var(--space-4); font-weight: 700; color: var(--blue-800); font-style: normal; font-size: .9rem; }

/* ---------- Events ---------- */
.event-list { display: flex; flex-direction: column; gap: var(--space-4); }
.event-row {
  display: flex; gap: var(--space-4); align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.event-date { flex: 0 0 auto; text-align: center; background: var(--blue-900); color: #fff; border-radius: 12px; padding: .6rem 1rem; min-width: 68px; }
.event-date .mon { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); font-weight: 700; }
.event-date .day { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.event-info { flex: 1; }
.event-info h3 { color: var(--blue-900); font-size: 1.1rem; }
.event-info .meta { color: var(--ink-600); font-size: .9rem; margin-top: 2px; }
.event-info p { color: var(--ink-600); font-size: .93rem; margin-top: var(--space-1); }
@media (max-width: 560px) { .event-row { flex-direction: column; align-items: flex-start; } }

/* ---------- Sermon filters ---------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.pill {
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-600);
  padding: .45rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all .2s ease; font-family: var(--font-sans);
}
.pill:hover { border-color: var(--blue-700); color: var(--blue-700); }
.pill.active { background: var(--blue-800); border-color: var(--blue-800); color: #fff; }
.sermon-card .scover {
  aspect-ratio: 16/9; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: var(--space-3); color: #fff;
}

/* ---------- Newsletter ---------- */
.newsletter { background: linear-gradient(160deg, var(--blue-900), var(--blue-700)); color: #fff; border-radius: 20px; padding: var(--space-5); text-align: center; }
.newsletter h3 { color: #fff; font-size: 1.6rem; }
.newsletter p { color: rgba(255,255,255,.85); max-width: 52ch; margin: var(--space-2) auto 0; }
.newsletter-form { display: flex; gap: var(--space-2); max-width: 480px; margin: var(--space-4) auto 0; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 200px; border-radius: 999px; border: 0; padding: .85rem 1.2rem; font-family: var(--font-sans); font-size: .95rem; }
.newsletter-form .btn { flex: 0 0 auto; }
.news-note { margin-top: var(--space-3); font-size: .9rem; color: var(--gold-400); font-weight: 600; }

/* ---------- Connect / connection card ---------- */
.conn-card { border: 2px solid var(--gold-500); border-radius: 18px; padding: var(--space-5); background: linear-gradient(180deg, var(--cream), var(--paper)); text-align: center; }
.conn-card h3 { color: var(--blue-900); font-size: 1.5rem; }
.conn-card p { color: var(--ink-600); max-width: 56ch; margin: var(--space-2) auto 0; }

/* ---------- Small groups ---------- */
.groups-list { display: flex; flex-direction: column; gap: var(--space-3); }
.group-row { display: flex; align-items: center; gap: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.group-row .gmeta { flex: 1; }
.group-row .gmeta h3 { color: var(--blue-900); font-size: 1.05rem; }
.group-row .gmeta p { color: var(--ink-600); font-size: .9rem; }
.group-row .gtag { background: var(--blue-050); color: var(--blue-800); font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }