/* ==========================================================================
   Everlight Worship — donker thema, kleuren afgeleid van het logo
   ========================================================================== */

:root {
  --inkt:        #121110;   /* achtergrond, gelijk aan het logo-vierkant */
  --inkt-diep:   #0B0A09;
  --paneel:      #1A1816;
  --lijn:        rgba(240, 231, 216, 0.12);

  --room:        #F0E7D8;   /* de crème letters uit het logo */
  --room-zacht:  rgba(240, 231, 216, 0.66);
  --room-stil:   rgba(240, 231, 216, 0.42);

  --vlam-licht:  #F7B071;
  --vlam-diep:   #E8564A;
  --vlam: linear-gradient(180deg, var(--vlam-licht), var(--vlam-diep));

  --kop: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --tekst: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --marge: clamp(1.25rem, 5vw, 5rem);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--inkt);
  color: var(--room);
  font-family: var(--tekst);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip in plaats van hidden: hidden maakt van body een scroll-container,
     en dan werkt het scrollen naar een anker (#over, #beeld) niet meer */
  overflow-x: clip;
}

/* de vaste header is ~77px hoog; koppen mogen daar niet onder verdwijnen */
main > section[id] { scroll-margin-top: 5.5rem; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--kop); line-height: 1.1; margin: 0; }

a { color: inherit; }

::selection { background: var(--vlam-diep); color: #fff; }

:focus-visible {
  outline: 2px solid var(--vlam-licht);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--room); color: var(--inkt);
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ── Koptekst-labels ─────────────────────────────────────── */

.eyebrow {
  font-family: var(--kop);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vlam-licht);
  margin: 0 0 1rem;
}
.eyebrow::after {
  content: '';
  display: block;
  width: 2.5rem; height: 2px;
  margin-top: .75rem;
  background: var(--vlam);
  border-radius: 2px;
}

/* ── Header ──────────────────────────────────────────────── */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--marge);
  transition: padding .4s ease;
}

/* Het matglas zit op een laag áchter de header, niet op de header zelf.
   backdrop-filter maakt van een element het referentiekader voor alles wat
   position:fixed is — stond het op de header, dan kromp het schermvullende
   mobiele menu tot de hoogte van de headerbalk zodra je ging scrollen. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(18, 17, 16, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lijn);
  opacity: 0;
  transition: opacity .4s ease;
}
.site-header.is-vast::before { opacity: 1; }
.site-header.is-vast { padding-block: .7rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { width: auto; height: 1.9rem; }
.brand__word {
  font-family: var(--kop);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.05;
  display: flex; flex-direction: column;
}
.brand__word span {
  font-weight: 300;
  font-size: .62rem;
  letter-spacing: .42em;
  color: var(--room-zacht);
}

.nav { display: flex; gap: 2rem; }
.nav a {
  font-family: var(--kop);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--room-zacht);
  padding: .25rem 0;
  position: relative;
  transition: color .25s ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--vlam);
  transition: right .3s ease;
}
.nav a:hover { color: var(--room); }
.nav a:hover::after { right: 0; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 2.5rem; height: 2.5rem; padding: .5rem;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--room); border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 7rem var(--marge) 6rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: adem 26s ease-in-out infinite alternate;
}
@keyframes adem { to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .hero__bg { animation: none; } }

.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 35%, rgba(18,17,16,.25) 0%, rgba(18,17,16,.78) 62%, var(--inkt) 100%),
    linear-gradient(180deg, rgba(18,17,16,.65) 0%, transparent 28%, rgba(18,17,16,.92) 100%);
}

.hero__inner { text-align: center; max-width: 46rem; }

.hero__mark {
  width: auto;
  height: clamp(4rem, 11vw, 7.5rem);
  margin: 0 auto 1.75rem;
  filter: drop-shadow(0 0 40px rgba(232, 86, 74, .35));
}

.hero__title {
  font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 6.5rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
  gap: .35em;
}
.hero__title span {
  font-weight: 300;
  font-size: .29em;
  letter-spacing: .58em;
  text-indent: .58em;
  color: var(--room-zacht);
}

.hero__inner .btn { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

.btn {
  display: inline-block;
  font-family: var(--kop);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
  color: var(--room);
  padding: 1rem 2.25rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: color .3s ease, border-color .3s ease;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--vlam);
  transform: translateY(101%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.btn { isolation: isolate; }
.btn:hover { color: #1A0F0C; border-color: transparent; }
.btn:hover::before { transform: translateY(0); }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%;
  translate: -50% 0;
  width: 1px; height: 3.5rem;
  background: var(--lijn);
  overflow: hidden;
}
.hero__scroll span {
  position: absolute; inset: 0;
  background: var(--vlam);
  animation: druppel 2.4s ease-in-out infinite;
}
@keyframes druppel {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ── Secties ─────────────────────────────────────────────── */

.section {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(5rem, 12vw, 9rem) var(--marge);
}
.section h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  letter-spacing: -.01em;
  margin-bottom: 1.5rem;
}
.section__head { margin-bottom: 3rem; }

/* Over */
.over {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.over p { color: var(--room-zacht); max-width: 40ch; }

.facts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--lijn);
}
.facts li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--lijn);
  color: var(--room-zacht);
  font-size: .93rem;
}
.facts strong {
  font-family: var(--kop);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--room-stil);
  padding-top: .18em;
}

.over__foto { margin: 0; position: relative; }
/* geen vaste verhouding: de foto is hier helemaal te zien, niets bijgesneden */
.over__foto img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.over__foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18,17,16,.5));
  border-radius: 3px;
  pointer-events: none;
}

/* Brede bandstrook */
.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.band img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: brightness(.82) saturate(.95);
  transition: filter .5s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.band img:hover { filter: brightness(1) saturate(1.05); transform: scale(1.02); }

/* Galerij */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(.5rem, 1.4vw, 1rem);
}
.tegel {
  padding: 0; border: 0; margin: 0;
  background: var(--paneel);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 3px;
  position: relative;
  aspect-ratio: 3 / 4;
}
.tegel img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.86);
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.tegel::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--lijn);
  border-radius: 3px;
  pointer-events: none;
}
.tegel:hover img { transform: scale(1.06); filter: brightness(1.02); }

/* Contact */
.contact { text-align: center; }
.contact .eyebrow::after { margin-inline: auto; }
.contact__lead {
  color: var(--room-zacht);
  max-width: 44ch;
  margin: 0 auto 3rem;
}

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: 4px;
  overflow: hidden;
}
.kaart {
  background: var(--paneel);
  padding: 2.25rem 1.5rem;
  text-decoration: none;
  display: grid;
  gap: .6rem;
  transition: background .3s ease;
}
.kaart:hover { background: #221F1C; }
.kaart__label {
  font-family: var(--kop);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--vlam-licht);
}
.kaart__waarde {
  font-family: var(--kop);
  font-size: clamp(.85rem, 2vw, 1.02rem);
  font-weight: 400;
  color: var(--room);
  overflow-wrap: anywhere;
}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
  background: var(--inkt-diep);
  border-top: 1px solid var(--lijn);
  padding: 4rem var(--marge) 3rem;
  text-align: center;
}
.site-footer__mark { width: auto; height: 2.4rem; margin: 0 auto 1.25rem; opacity: .9; }
.site-footer__word {
  font-family: var(--kop);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0;
}
.site-footer__word span { font-weight: 300; color: var(--room-zacht); }
.site-footer__klein {
  font-size: .78rem;
  color: var(--room-stil);
  margin: 1.5rem 0 0;
}

/* ── Lightbox ────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11, 10, 9, .96);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  backdrop-filter: blur(6px);
  animation: opdoemen .25s ease;
}
.lightbox[hidden] { display: none; }
@keyframes opdoemen { from { opacity: 0; } }

.lightbox__img {
  grid-column: 2;
  max-width: 100%;
  max-height: 88svh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 3px;
}
.lightbox__nav, .lightbox__sluit {
  background: none; border: 1px solid var(--lijn);
  color: var(--room);
  cursor: pointer;
  border-radius: 999px;
  display: grid; place-items: center;
  transition: background .25s ease, border-color .25s ease;
}
.lightbox__nav { width: 3rem; height: 3rem; font-size: 1.9rem; line-height: 1; }
.lightbox__nav:hover, .lightbox__sluit:hover {
  background: rgba(240,231,216,.08);
  border-color: var(--room-stil);
}
.lightbox__sluit {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 2.75rem; height: 2.75rem; font-size: 1.6rem; line-height: 1;
}

/* ── Reveal-animatie ─────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll span { animation: none; }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 860px) {
  .over { grid-template-columns: 1fr; }
  .over__foto { order: -1; }
  .band { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed; inset: 0;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2.25rem;
    background: rgba(11, 10, 9, .97);
    backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav a { font-size: 1.1rem; letter-spacing: .22em; color: var(--room); }

  /* logo en knop blijven boven het open menu staan */
  .brand, .nav-toggle { position: relative; z-index: 110; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .facts li { grid-template-columns: 1fr; gap: .15rem; }
  .lightbox__nav { width: 2.5rem; height: 2.5rem; }

  /* twee naast elkaar, anders is de galerij op mobiel eindeloos scrollen */
  .grid { grid-template-columns: 1fr 1fr; }
}