/* =========================================================
   01. Design Tokens
   - Global color palette, radius, shadows
   ========================================================= */
:root {
  --bg: #f6f1e8;
  --surface: #fff9ef;
  --surface-strong: #fffdf8;
  --alt-surface: #f2eadc;
  --ink: #2f2418;
  --ink-soft: #685844;
  --line: #e0d1ba;
  --accent: #c4692d;
  --accent-deep: #8f3f0f;
  --accent-2: #226c63;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(63, 40, 20, 0.08);
}

/* =========================================================
   02. Base Reset + Global Element Defaults
   - Box model, typography, body background, basic tags
   ========================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% -10%, rgba(196, 105, 45, 0.18), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(34, 108, 99, 0.18), transparent 38%),
    var(--bg);
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.18;
  margin: 0 0 0.6rem;
}

h1 {
  font-size: clamp(2rem, 3vw, 3.4rem);
}

h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
}

p {
  margin: 0 0 1rem;
}

a {
  color: inherit;
}

/* =========================================================
   03. Accessibility Utilities
   - Skip link for keyboard/screen-reader navigation
   ========================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #000;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  z-index: 999;
}

/* =========================================================
   04. Layout Primitives
   - Shared container, section spacing, alternate surfaces
   ========================================================= */
.container {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.section-pad {
  padding: 5rem 0;
}

.alt-surface {
  background: linear-gradient(120deg, rgba(255, 252, 246, 0.76), rgba(242, 234, 220, 0.78));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

main section[id],
footer[id] {
  scroll-margin-top: 88px;
}

/* =========================================================
   05. Background Decoration
   - Ambient blurred gradient shapes
   ========================================================= */
.shape {
  position: fixed;
  border-radius: 999px;
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
}

.shape-a {
  top: -120px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: rgba(196, 105, 45, 0.22);
}

.shape-b {
  top: 120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: rgba(34, 108, 99, 0.2);
}

/* =========================================================
   06. Header + Primary Navigation
   - Sticky top bar, brand, desktop nav
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 241, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(224, 209, 186, 0.8);
}

.header-row {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(44, 23, 13, 0.25);
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.menu-toggle {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  outline: none;
}

/* =========================================================
   07. Language Switcher
   - Header language toggle controls and active state
   ========================================================= */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.lang-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.34rem 0.58rem;
  cursor: pointer;
}

.lang-btn:hover,
.lang-btn:focus-visible {
  color: var(--ink);
  background: #fff;
  outline: none;
}

.lang-btn.is-active {
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
}
/* =========================================================
   08. Hero Section
   - Eyebrow text, lead paragraph, hero grid/panel/actions
   ========================================================= */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 0.8rem;
}

.lead {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  max-width: 62ch;
  color: var(--ink-soft);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "hero-copy hero-image"
    "hero-panel hero-image";
  gap: 1.1rem 1.5rem;
  align-items: stretch;
}

.hero-copy {
  grid-area: hero-copy;
  align-self: center;
}

.hero-panel {
  grid-area: hero-panel;
  max-width: 620px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
}

.hero-image-card {
  grid-area: hero-image;
  margin: 0;
  min-height: clamp(430px, 58vh, 620px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #1f1713;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.hero-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

.hero-image-credit {
  margin: 0;
  padding: 0.65rem 0.8rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: rgba(255, 253, 248, 0.96);
  border-top: 1px solid var(--line);
}

.hero-image-credit a {
  color: var(--accent-deep);
}
.quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.quick-list li {
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.quick-list span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.86rem;
  margin-bottom: 0.2rem;
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

/* =========================================================
   09. Shared Components
   - Buttons, section heads, cards, links, meta text
   ========================================================= */
.btn {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  padding: 0.72rem 1.2rem;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

.btn-secondary {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.section-head {
  margin-bottom: 1.5rem;
}

.section-head p {
  max-width: 68ch;
  color: var(--ink-soft);
}

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

.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card,
.event-card,
.form-card,
.gallery-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card {
  padding: 1.2rem;
}

/* Accordion cards ("Who We Are"): each tile is a button; clicking one
   opens a single shared full-width panel below the row instead of each
   tile expanding on its own, so only one detail view is ever open and it
   visually reads as one unified panel connected to the active tile. */
.accordion-card {
  position: relative;
  display: block;
  width: 100%;
  padding-right: 2.8rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.accordion-card.is-active {
  background: var(--alt-surface);
  border-color: var(--accent-deep);
}

.accordion-toggle {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-deep);
}

.accordion-toggle::before,
.accordion-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}

.accordion-toggle::before {
  width: 1rem;
  height: 2px;
}

.accordion-toggle::after {
  width: 2px;
  height: 1rem;
}

.accordion-card.is-active .accordion-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion-panel {
  position: relative;
  grid-column: 1 / -1;
  padding: 1.2rem 1.4rem;
  background: var(--surface-strong);
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.accordion-panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--accordion-arrow-left, 50%);
  width: 15px;
  height: 15px;
  background: var(--surface-strong);
  border-left: 1px solid var(--accent-deep);
  border-top: 1px solid var(--accent-deep);
  transform: translateX(-50%) rotate(45deg);
}

.accordion-panel-text {
  margin: 0;
}

.meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.text-link {
  font-weight: 700;
  color: var(--accent-deep);
  text-decoration: none;
}

.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
}

/* =========================================================
   10. Forms + Visit/Prayer Layout
   - Two-column section grids, checklist styling, inputs
   ========================================================= */
.visit-grid,
.prayer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.check-list li {
  position: relative;
  padding-left: 1.6rem;
}

.check-list li::before {
  content: "v";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-2);
  font-weight: 700;
}

.form-card {
  padding: 1.2rem;
  display: grid;
  gap: 0.55rem;
}

.form-card label {
  font-size: 0.9rem;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  font: inherit;
  background: #fff;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(143, 63, 15, 0.2);
  border-color: var(--accent-deep);
}

/* =========================================================
   11. Sermons + Events Specific UI
   - Filter controls and event list presentation
   ========================================================= */
.filter-row {
  display: grid;
  grid-template-columns: auto 1fr auto minmax(180px, 220px);
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
}

.filter-row label {
  font-weight: 700;
  font-size: 0.9rem;
}

.event-list {
  display: grid;
  gap: 0.85rem;
}

.event-card {
  padding: 1rem;
}

.event-date {
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 0.35rem;
}

/* =========================================================
   12. Gallery Media Section
   - Mixed photo and short-video gallery cards
   ========================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gallery-photo,
.gallery-video {
  overflow: hidden;
}

.gallery-photo img,
.gallery-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.gallery-video video {
  aspect-ratio: 16 / 9;
  background: #120c08;
}

.gallery-photo figcaption,
.gallery-video-meta {
  padding: 0.8rem 0.95rem;
}

.gallery-photo figcaption {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.gallery-video-meta h3 {
  margin: 0 0 0.3rem;
}
/* =========================================================
   13. Form Feedback + Footer
   - Helper text, submission status, footer structure
   ========================================================= */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 500;
}

.checkbox input {
  width: auto;
  margin-top: 0.25rem;
}

.form-note,
.form-status {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.form-status {
  color: var(--accent-2);
  font-weight: 700;
}

.site-footer {
  padding: 3rem 0 1.8rem;
  background: #22180f;
  color: #e8d7c0;
}

.site-footer a {
  color: #f7c491;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.site-footer h2 {
  font-size: 1.15rem;
}

.footer-note {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(232, 215, 192, 0.2);
  padding-top: 1rem;
  font-size: 0.9rem;
}

/* =========================================================
   14. Scroll Reveal Motion
   - Default hidden state + in-view transition
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
  transition-delay: calc(var(--reveal-order, 0) * 70ms);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   15. Responsive Breakpoints
   - Tablet and mobile layout adjustments
   ========================================================= */
@media (max-width: 980px) {
  .card-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero-copy"
      "hero-image"
      "hero-panel";
    gap: 1rem;
  }

  .hero-image-card {
    min-height: clamp(320px, 52vh, 460px);
  }

  .visit-grid,
  .prayer-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-photo,
  .gallery-video {
    grid-column: auto;
  }

  .filter-row {
    grid-template-columns: 1fr;
  }

  /* The full nav (9 links + lang switch) doesn't fit below 980px --
     collapses to the hamburger menu for the whole tablet range, not just
     phones, otherwise it overflows the header at tablet widths. */
  .menu-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0.5rem 0.75rem;
    font-weight: 700;
  }

  .site-nav {
    position: absolute;
    top: 74px;
    right: 1rem;
    left: 1rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 251, 244, 0.98);
    transform: scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }

  .site-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}

@media (max-width: 760px) {
  .section-pad {
    padding: 4rem 0;
  }

  .hero-image-card {
    min-height: 290px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .lang-btn {
    padding: 0.34rem 0.52rem;
  }

  .card-grid.three,
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   16. Reduced Motion Preference
   - Honor OS accessibility motion settings
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}