/* =========================================================================
   27 MOMENTS — TEMPLATE 2 "BOTANIQUE"
   Romantisch & botanisch: tuinceremonie, zacht groen, handgetekende flora.
   =========================================================================

   THEMA — pas alleen deze variabelen aan per klant.
   -------------------------------------------------------------------------
   Dit :root-blok is het volledige thema van de site. Wie enkel deze
   variabelen aanpast (kleuren, fonts, spacing, afronding), herstijlt de
   hele site coherent — inclusief de florale SVG-illustraties, want die
   erven hun kleur via currentColor uit deze variabelen.
   ========================================================================= */

:root {
  /* --- KLEUREN ----------------------------------------------------------
     Het palet: saliegroen + eucalyptus voor het groen, blush en crème
     voor de warmte, terracotta als accent. */
  --kleur-creme: #faf6f0;        /* paginafond */
  --kleur-wit: #fffdf9;          /* kaarten, formulier */
  --kleur-salie: #8a9a7b;        /* hoofdgroen: knoppen, titelsaccenten */
  --kleur-salie-donker: #5d6d50; /* donker groen: koppen, hover */
  --kleur-eucalyptus: #aebfa5;   /* licht groen: illustraties, randen */
  --kleur-blush: #e8cfc4;        /* zachtroze: vlakken, highlights */
  --kleur-blush-licht: #f5eae4;  /* extra licht roze: sectiefonds */
  --kleur-terracotta: #bd7a5c;   /* accent: links, kleine details */
  --kleur-inkt: #46493e;         /* bodytekst, warm grijsgroen */
  --kleur-inkt-zacht: #75786a;   /* secundaire tekst */

  /* --- TYPOGRAFIE -------------------------------------------------------
     display = romantische serif voor koppen
     script  = handschrift voor namen & accenten
     body    = rustige sans voor lopende tekst */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-script: "Great Vibes", cursive;
  --font-body: "Karla", "Segoe UI", sans-serif;

  /* Basisgroottes (rem, schalen mee met browserinstelling) */
  --tekst-basis: 1.0625rem;      /* 17px bodytekst */
  --tekst-klein: 0.875rem;
  --titel-groot: clamp(2.2rem, 5vw, 3.4rem);   /* sectietitels */
  --titel-script: clamp(3rem, 9vw, 5.5rem);    /* namen in de hero */

  /* --- SPACING & VORM --------------------------------------------------- */
  --ruimte-sectie: clamp(4rem, 9vw, 7rem);     /* verticale sectiemarge */
  --ruimte-blok: 1.5rem;                       /* standaard tussenruimte */
  --breedte-inhoud: 68rem;                     /* max. breedte secties */
  --breedte-tekst: 42rem;                      /* max. breedte tekstkolom */
  --radius-zacht: 1.25rem;                     /* kaarten */
  --radius-rond: 999px;                        /* knoppen, badges */
  --schaduw-zacht: 0 14px 40px -18px rgba(93, 109, 80, 0.35);

  /* --- OVERGANGEN ------------------------------------------------------- */
  --overgang: 220ms ease;
}

/* =========================================================================
   BASIS
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--tekst-basis);
  line-height: 1.7;
  color: var(--kleur-inkt);
  background-color: var(--kleur-creme);
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--kleur-salie-donker);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

p {
  margin: 0 0 var(--ruimte-blok);
}

a {
  color: var(--kleur-terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--overgang);
}

a:hover {
  color: var(--kleur-salie-donker);
}

:focus-visible {
  outline: 3px solid var(--kleur-terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--kleur-blush);
  color: var(--kleur-salie-donker);
}

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

/* =========================================================================
   NAVIGATIE
   ========================================================================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 240, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(138, 154, 123, 0.18);
}

.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0.65rem 1rem;
  max-width: var(--breedte-inhoud);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.4rem;
}

.site-nav a {
  font-size: var(--tekst-klein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kleur-salie-donker);
}

.site-nav a:hover {
  color: var(--kleur-terracotta);
}

/* =========================================================================
   SECTIES — algemene opbouw
   ========================================================================= */

.sectie {
  padding: var(--ruimte-sectie) 1.25rem;
  position: relative;
  /* Zijwaartse reveals (.fade-in--links/--rechts) starten met translateX
     buiten de sectie en zetten anders horizontale overflow op de pagina
     (scrollWidth > viewport op mobiel). `clip` knipt die startstand af
     zonder een scrollcontainer te maken, zodat animation-timeline: view()
     op de tijdlijn-stengel aan het viewport blijft hangen. */
  overflow-x: clip;
}

.sectie-binnen {
  max-width: var(--breedte-inhoud);
  margin: 0 auto;
  position: relative;
}

.sectie-kop {
  text-align: center;
  max-width: var(--breedte-tekst);
  margin: 0 auto calc(var(--ruimte-blok) * 2);
}

.sectie-kop h2 {
  font-size: var(--titel-groot);
}

.sectie-label {
  display: block;
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: var(--kleur-terracotta);
  margin-bottom: 0.35rem;
}

.sectie-intro {
  color: var(--kleur-inkt-zacht);
}

.sectie--blush {
  background: var(--kleur-blush-licht);
}

.sectie--groen {
  background: linear-gradient(180deg, rgba(174, 191, 165, 0.16), rgba(174, 191, 165, 0.34));
}

/* Florale scheider tussen tekstblokken */
.scheider {
  display: flex;
  justify-content: center;
  color: var(--kleur-salie);
  margin: 1.75rem 0;
}

.scheider svg {
  width: min(280px, 70vw);
  height: auto;
}

/* Hoekornamenten (branches in de hoeken van een sectie) */
.hoek {
  position: absolute;
  width: clamp(90px, 14vw, 170px);
  height: auto;
  color: var(--kleur-eucalyptus);
  pointer-events: none;
  z-index: 0;
}

.hoek--lb {
  left: -0.5rem;
  bottom: -0.5rem;
}

.hoek--rb {
  right: -0.5rem;
  bottom: -0.5rem;
  transform: scaleX(-1);
}

.hoek--lo {
  left: -0.5rem;
  top: -0.5rem;
  transform: scaleY(-1);
}

.hoek--ro {
  right: -0.5rem;
  top: -0.5rem;
  transform: scale(-1, -1);
}

/* =========================================================================
   SCROLL-REGIE — reveals bij het scrollen
   -------------------------------------------------------------------------
   Eén systeem: elk element met .fade-in wordt door de IntersectionObserver
   in main.js zichtbaar gemaakt (.is-zichtbaar). Varianten bepalen de
   richting/vorm van de reveal; alleen transform, opacity en clip-path
   worden geanimeerd (composited, geen layout). Elementen die samen in
   beeld komen, krijgen van JS een korte cascade (transition-delay).
   ========================================================================= */

.fade-in {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 800ms ease,
    transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Zijwaartse reveals (tijdlijn, locatie, welkom-collage) */
.fade-in--links {
  transform: translateX(-44px);
}

.fade-in--rechts {
  transform: translateX(44px);
}

/* Sectietitels: zachte gordijn-reveal via clip-path + kleine translate.
   De negatieve randen laten ruimte voor letteruitlopers van het
   script-font; alleen de onderrand start dicht. */
.fade-in--titel {
  clip-path: inset(-8% -8% 100% -8%);
  transform: translateY(16px);
  transition:
    opacity 700ms ease,
    transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    clip-path 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fade-in.is-zichtbaar {
  opacity: 1;
  transform: none;
}

.fade-in--titel.is-zichtbaar {
  clip-path: inset(-8% -8% -12% -8%);
}

/* Parallax-lagen: JS (of niets, bij reduced motion) vult --par.
   De translate-property componeert netjes met bestaande transforms. */
[data-parallax] {
  translate: 0 var(--par, 0px);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in--titel {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  [data-parallax] {
    translate: none;
  }
}

/* =========================================================================
   1. HERO
   ========================================================================= */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.25rem;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(232, 207, 196, 0.5), transparent 55%),
    radial-gradient(ellipse at 82% 80%, rgba(174, 191, 165, 0.45), transparent 55%),
    var(--kleur-creme);
  overflow: hidden;
}

/* Grote eucalyptustakken links en rechts achter de hero-inhoud.
   Bij het laden "groeien ze in": een stroke-dashoffset-animatie tekent
   de stengels en blaadjes. stroke-dasharray/-offset zijn overervende
   SVG-eigenschappen, dus één animatie op het <svg>-element stuurt alle
   paden binnen het <use>-symbool aan. will-change alleen hier: dit zijn
   de enige lagen die én laden-animeren én parallax meebewegen. */
.hero-flora {
  position: absolute;
  color: var(--kleur-salie);
  opacity: 0.4;
  pointer-events: none;
  animation: flora-ingroei 2400ms ease-out 250ms both;
  will-change: translate, opacity;
}

@keyframes flora-ingroei {
  from {
    stroke-dasharray: 700 700;
    stroke-dashoffset: 700;
    opacity: 0;
  }
  to {
    stroke-dasharray: 700 700;
    stroke-dashoffset: 0;
    opacity: var(--flora-dekking, 0.4);
  }
}

.hero-flora--links {
  width: clamp(160px, 26vw, 340px);
  height: auto;
  left: -3%;
  top: 4%;
  transform: rotate(16deg);
}

.hero-flora--rechts {
  width: clamp(160px, 26vw, 340px);
  height: auto;
  right: -3%;
  bottom: 2%;
  transform: rotate(-158deg);
}

.hero-flora--bloem {
  width: clamp(70px, 10vw, 130px);
  height: auto;
  right: 10%;
  top: 10%;
  color: var(--kleur-terracotta);
  opacity: 0.32;
  transform: rotate(14deg);
  --flora-dekking: 0.32;
  animation-delay: 750ms;
}

.hero-inhoud {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

/* Hero-choreografie: elk .hero-intro-element komt na elkaar binnen.
   De volgorde staat als --intro in de HTML; fill-mode "backwards" houdt
   het element onzichtbaar tot zijn beurt en laat daarna de normale
   stijlen (incl. hover-transforms) weer met rust. */
.hero-intro {
  animation: hero-binnen 950ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(250ms + var(--intro, 0) * 150ms);
}

@keyframes hero-binnen {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

.hero-aankondiging {
  font-size: var(--tekst-klein);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kleur-inkt-zacht);
  margin-bottom: 1rem;
}

.hero-namen {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--titel-script);
  color: var(--kleur-salie-donker);
  margin: 0 0 0.5rem;
}

.hero-namen .ampersand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.55em;
  color: var(--kleur-terracotta);
  vertical-align: 0.18em;
  padding: 0 0.15em;
}

.hero-datum {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-inkt);
  margin-bottom: 0.4rem;
}

.hero-locatie {
  color: var(--kleur-inkt-zacht);
  margin-bottom: 1.5rem;
}

.hero-scheider {
  margin: 1.2rem 0;
}

.knop {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--tekst-basis);
  letter-spacing: 0.06em;
  padding: 0.85rem 2.2rem;
  border-radius: var(--radius-rond);
  border: 2px solid var(--kleur-salie);
  background: var(--kleur-salie);
  color: var(--kleur-wit);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang);
}

.knop:hover {
  background: var(--kleur-salie-donker);
  border-color: var(--kleur-salie-donker);
  color: var(--kleur-wit);
  transform: translateY(-2px);
}

.knop--omtrek {
  background: transparent;
  color: var(--kleur-salie-donker);
}

.knop--omtrek:hover {
  background: var(--kleur-salie);
  color: var(--kleur-wit);
}

/* Zwevende blaadjes (JS voegt ze toe; puur decoratief) */
.blaadje {
  position: absolute;
  top: -8%;
  width: 26px;
  height: auto;
  color: var(--kleur-salie);
  opacity: 0;
  pointer-events: none;
  animation: dwarrel linear infinite;
}

/* Twee dwarrelpaden met een zachte zijwaartse "sway", zodat blaadjes en
   bloemblaadjes niet in een rechte lijn vallen. Alleen transform/opacity. */
@keyframes dwarrel {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.5;
  }
  30% {
    transform: translate3d(3vw, 32vh, 0) rotate(95deg);
  }
  55% {
    transform: translate3d(-2vw, 62vh, 0) rotate(180deg);
  }
  85% {
    opacity: 0.45;
  }
  100% {
    transform: translate3d(5vw, 115vh, 0) rotate(320deg);
    opacity: 0;
  }
}

@keyframes dwarrel-b {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.45;
  }
  32% {
    transform: translate3d(-3vw, 30vh, 0) rotate(-110deg);
  }
  58% {
    transform: translate3d(2vw, 64vh, 0) rotate(-200deg);
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translate3d(-5vw, 115vh, 0) rotate(-340deg);
    opacity: 0;
  }
}

.blaadje--b {
  animation-name: dwarrel-b;
}

@media (prefers-reduced-motion: reduce) {
  .blaadje {
    display: none;
  }
}

/* =========================================================================
   2. AFTELKLOK — geïntegreerd in de hero
   Verfijnd, niet schreeuwerig: dunne cijfers in de display-serif, kleine
   labels, hairlines als omkadering. De eenheden zoomen bij eerste zicht
   (het laden van de hero) kort en zacht op, na de rest van de choreografie.
   ========================================================================= */

.hero-aftel {
  margin: 0 auto 2.1rem;
  max-width: 30rem;
  padding: 1rem 0.5rem 1.1rem;
  border-top: 1px solid rgba(138, 154, 123, 0.4);
  border-bottom: 1px solid rgba(138, 154, 123, 0.4);
}

.aftelklok {
  display: flex;
  justify-content: center;
}

.aftelklok-eenheid {
  text-align: center;
  min-width: 4rem;
  padding: 0 clamp(0.4rem, 2.5vw, 1.3rem);
  animation: cijfer-zoom 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(1300ms + var(--cijfer, 0) * 110ms);
}

.aftelklok-eenheid + .aftelklok-eenheid {
  border-left: 1px solid rgba(138, 154, 123, 0.3);
}

@keyframes cijfer-zoom {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}

.aftelklok-getal {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 400;
  color: var(--kleur-salie-donker);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.aftelklok-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-inkt-zacht);
}

/* Op smalle schermen stapelt de klok naar een rustig 2x2-raster */
@media (max-width: 24rem) {
  .aftelklok {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 0;
    max-width: 15rem;
    margin: 0 auto;
  }

  .aftelklok-eenheid + .aftelklok-eenheid {
    border-left: 0;
  }

  .aftelklok-eenheid:nth-child(even) {
    border-left: 1px solid rgba(138, 154, 123, 0.3);
  }
}

.aftelklok-boodschap {
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: var(--kleur-terracotta);
  margin: 0;
}

/* =========================================================================
   2b. WELKOM — fotocollage (op de plek van de oude aftelsectie)
   ========================================================================= */

.welkom-collage {
  display: grid;
  gap: 1.6rem;
  max-width: 56rem;
  margin: 0 auto;
}

.welkom-foto {
  margin: 0;
  position: relative;
}

.welkom-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-zacht);
  box-shadow: var(--schaduw-zacht);
}

@media (min-width: 46rem) {
  .welkom-collage {
    grid-template-columns: 1.55fr 1fr;
    align-items: center;
  }

  .welkom-foto--groot img {
    transform: rotate(-1.2deg);
  }

  .welkom-foto--klein {
    margin: 4rem 0 0 -3.5rem;
    z-index: 1;
  }

  .welkom-foto--klein img {
    transform: rotate(2.4deg);
    border: 6px solid var(--kleur-wit);
  }
}

/* =========================================================================
   3. ONS VERHAAL — tijdlijn
   ========================================================================= */

.tijdlijn {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 54rem;
  position: relative;
}

/* Verticale stengel door de tijdlijn — tekent zichzelf mee terwijl je
   scrolt. Basis: JS zet --lijn-progres (0 → 1) en de stengel schaalt
   vanaf de top (alleen transform). Progressive enhancement: browsers met
   CSS scroll-driven animations doen dit puur in CSS (animation-timeline)
   en JS slaat zijn fallback dan over. Fallback zonder JS: volle lijn. */
.tijdlijn::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 2.1rem;
  width: 2px;
  background: linear-gradient(180deg, var(--kleur-eucalyptus), var(--kleur-salie));
  border-radius: 2px;
  transform: scaleY(var(--lijn-progres, 1));
  transform-origin: top center;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tijdlijn::before {
      animation: lijn-teken linear both;
      animation-timeline: view();
      animation-range: entry 15% exit 70%;
    }
  }
}

@keyframes lijn-teken {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.tijdlijn-item {
  position: relative;
  padding: 0 0 2.5rem 6rem;
}

.tijdlijn-item:last-child {
  padding-bottom: 0;
}

.tijdlijn-icoon {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.2rem;
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kleur-wit);
  border: 2px solid var(--kleur-eucalyptus);
  border-radius: 50%;
  color: var(--kleur-salie-donker);
  box-shadow: var(--schaduw-zacht);
}

.tijdlijn-icoon svg {
  width: 2.3rem;
  height: 2.3rem;
}

/* Icoonmedaillon popt zacht mee zodra het moment in beeld schuift */
.tijdlijn-item .tijdlijn-icoon {
  transform: scale(0.6);
  transition: transform 650ms cubic-bezier(0.34, 1.3, 0.5, 1) 180ms;
}

.tijdlijn-item.is-zichtbaar .tijdlijn-icoon {
  transform: scale(1);
}

/* Tijdlijnfoto's in een organisch afgerond "blob"-masker, met een
   crèmekleurige rand zodat ze in de florale omkadering passen */
.tijdlijn-foto {
  display: block;
  width: min(210px, 56vw);
  height: auto;
  margin: 0.85rem 0 1rem;
  border-radius: 58% 42% 45% 55% / 52% 58% 42% 48%;
  box-shadow: 0 0 0 6px var(--kleur-wit), var(--schaduw-zacht);
  transform: rotate(-2deg);
}

.tijdlijn-item:nth-child(even) .tijdlijn-foto {
  border-radius: 45% 55% 58% 42% / 42% 48% 52% 58%;
  transform: rotate(2deg);
}

.tijdlijn-datum {
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--kleur-terracotta);
}

.tijdlijn-item h3 {
  font-size: 1.6rem;
  margin: 0.15rem 0 0.4rem;
}

.tijdlijn-item p {
  color: var(--kleur-inkt-zacht);
  margin: 0;
  max-width: 38rem;
}

@media (min-width: 46rem) {
  .tijdlijn::before {
    /* Centreren via left-calc, zodat transform vrij blijft voor scaleY */
    left: calc(50% - 1px);
  }

  .tijdlijn-item .tijdlijn-foto {
    margin-left: auto;
  }

  .tijdlijn-item:nth-child(even) .tijdlijn-foto {
    margin-left: 0;
    margin-right: auto;
  }

  .tijdlijn-item {
    width: 50%;
    padding: 0 3.6rem 3rem 0;
    text-align: right;
  }

  .tijdlijn-item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 3rem 3.6rem;
    text-align: left;
  }

  .tijdlijn-icoon {
    left: auto;
    right: -2.1rem;
  }

  .tijdlijn-item:nth-child(even) .tijdlijn-icoon {
    right: auto;
    left: -2.1rem;
  }

  .tijdlijn-item p {
    max-width: none;
  }
}

/* Grote verhaalfoto (verlovingsshoot) onder de tijdlijn */
.verhaal-foto {
  margin: 3rem auto 0;
  max-width: 40rem;
}

.verhaal-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-zacht);
  box-shadow: var(--schaduw-zacht);
}

.verhaal-foto figcaption {
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.55rem;
  color: var(--kleur-terracotta);
  margin-top: 0.9rem;
}

/* Videoslot "onze video" (CMS): verborgen tot het bruidspaar er in het
   beheer een YouTube/Vimeo-link aan koppelt. */
.verhaal-video {
  max-width: 40rem;
  margin: 2.5rem auto 0;
}

.verhaal-video iframe,
.verhaal-video .cms-video {
  border-radius: var(--radius-zacht);
  overflow: hidden;
  box-shadow: var(--schaduw-zacht);
}

/* =========================================================================
   4. DE GROTE DAG — programma
   ========================================================================= */

.programma {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--breedte-tekst);
  text-align: center;
}

.programma-item h3 {
  font-size: 1.7rem;
  margin-bottom: 0.2rem;
}

.programma-tijd {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--kleur-terracotta);
  letter-spacing: 0.08em;
}

.programma-item p {
  color: var(--kleur-inkt-zacht);
  max-width: 34rem;
  margin: 0.35rem auto 0;
}

.programma-scheider {
  margin: 1.4rem 0;
  color: var(--kleur-eucalyptus);
}

.programma-scheider svg {
  width: min(190px, 55vw);
}

.notitie {
  max-width: var(--breedte-tekst);
  margin: 2.75rem auto 0;
  background: var(--kleur-wit);
  border-left: 4px solid var(--kleur-blush);
  border-radius: 0 var(--radius-zacht) var(--radius-zacht) 0;
  padding: 1.2rem 1.5rem;
  box-shadow: var(--schaduw-zacht);
}

.notitie strong {
  color: var(--kleur-salie-donker);
}

.notitie p {
  margin: 0;
}

/* =========================================================================
   5. LOCATIE
   ========================================================================= */

.locatie-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 52rem) {
  .locatie-grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

.locatie-foto {
  margin: 0;
}

.locatie-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-zacht);
  box-shadow: var(--schaduw-zacht);
}

.locatie-kaart {
  background: var(--kleur-wit);
  border-radius: var(--radius-zacht);
  box-shadow: var(--schaduw-zacht);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.locatie-kaart h3 {
  font-size: 1.8rem;
}

.locatie-adres {
  font-style: normal;
  color: var(--kleur-inkt-zacht);
  margin-bottom: 1.25rem;
}

.locatie-kaart .hoek {
  width: 100px;
  opacity: 0.55;
}

.locatie-detail {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  color: var(--kleur-inkt-zacht);
}

.locatie-detail svg {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--kleur-salie);
  margin-top: 0.2rem;
}

.locatie-detail p {
  margin: 0;
}

/* =========================================================================
   6. RSVP
   ========================================================================= */

.rsvp-formulier {
  max-width: var(--breedte-tekst);
  margin: 0 auto;
  background: var(--kleur-wit);
  border-radius: var(--radius-zacht);
  box-shadow: var(--schaduw-zacht);
  padding: clamp(1.5rem, 5vw, 3rem);
  position: relative;
}

.veld-rij {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 40rem) {
  .veld-rij--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.veld {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.1rem;
}

.veld label,
.veldgroep legend {
  font-size: var(--tekst-klein);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kleur-salie-donker);
  margin-bottom: 0.4rem;
}

.veld input,
.veld textarea {
  font: inherit;
  color: var(--kleur-inkt);
  background: var(--kleur-creme);
  border: 1px solid rgba(138, 154, 123, 0.45);
  border-radius: 0.7rem;
  padding: 0.75rem 0.95rem;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}

.veld input:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--kleur-salie);
  box-shadow: 0 0 0 3px rgba(138, 154, 123, 0.25);
}

.veld textarea {
  resize: vertical;
  min-height: 6.5rem;
}

.veld-hint {
  font-size: var(--tekst-klein);
  color: var(--kleur-inkt-zacht);
  margin-top: 0.35rem;
}

.veldgroep {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
}

.keuze-opties {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.keuze {
  position: relative;
}

.keuze input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.keuze label {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--kleur-eucalyptus);
  border-radius: var(--radius-rond);
  color: var(--kleur-salie-donker);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--tekst-basis);
  margin: 0;
  cursor: pointer;
  transition: background var(--overgang), border-color var(--overgang), color var(--overgang);
}

.keuze input:checked + label {
  background: var(--kleur-salie);
  border-color: var(--kleur-salie);
  color: var(--kleur-wit);
}

.keuze input:focus-visible + label {
  outline: 3px solid var(--kleur-terracotta);
  outline-offset: 2px;
}

/* Honeypot: onzichtbaar voor mensen, aanwezig voor bots */
.veld--honingpot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier-fout {
  display: none;
  background: rgba(189, 122, 92, 0.12);
  border: 1px solid var(--kleur-terracotta);
  border-radius: 0.7rem;
  color: #8c4f33;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.1rem;
}

.formulier-fout.is-zichtbaar {
  display: block;
}

.rsvp-bevestiging {
  display: none;
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.rsvp-bevestiging.is-zichtbaar {
  display: block;
}

.rsvp-bevestiging svg {
  width: 90px;
  height: auto;
  color: var(--kleur-salie);
  margin-bottom: 0.8rem;
}

.rsvp-bevestiging h3 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.4rem;
  color: var(--kleur-terracotta);
}

.rsvp-deadline {
  text-align: center;
  color: var(--kleur-inkt-zacht);
  font-style: italic;
  margin-top: 1.4rem;
}

/* =========================================================================
   7. CADEAUTIP
   ========================================================================= */

.cadeau-kaart {
  max-width: var(--breedte-tekst);
  margin: 0 auto;
  text-align: center;
  background: var(--kleur-wit);
  border-radius: var(--radius-zacht);
  box-shadow: var(--schaduw-zacht);
  padding: clamp(1.75rem, 5vw, 3rem);
  position: relative;
  overflow: hidden;
}

.cadeau-kaart .hoek {
  width: 110px;
  opacity: 0.5;
}

.cadeau-iban {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  background: var(--kleur-blush-licht);
  border: 1px dashed var(--kleur-terracotta);
  border-radius: 0.7rem;
  padding: 0.6rem 1.4rem;
  margin: 0.5rem 0 0.3rem;
  color: var(--kleur-salie-donker);
}

.cadeau-tenaamstelling {
  font-size: var(--tekst-klein);
  color: var(--kleur-inkt-zacht);
}

/* =========================================================================
   8. PRAKTISCH / FAQ — accordeon
   ========================================================================= */

.faq {
  max-width: var(--breedte-tekst);
  margin: 0 auto;
}

.faq details {
  background: var(--kleur-wit);
  border: 1px solid rgba(138, 154, 123, 0.3);
  border-radius: var(--radius-zacht);
  margin-bottom: 0.9rem;
  overflow: hidden;
  transition: box-shadow var(--overgang);
}

.faq details[open] {
  box-shadow: var(--schaduw-zacht);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--kleur-salie-donker);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--kleur-terracotta);
  transition: transform var(--overgang);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--kleur-terracotta);
}

.faq .faq-antwoord {
  padding: 0 1.4rem 1.2rem;
  color: var(--kleur-inkt-zacht);
}

.faq .faq-antwoord p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   9. FOOTER
   ========================================================================= */

.site-footer {
  text-align: center;
  padding: 4rem 1.25rem 2.5rem;
  background: var(--kleur-salie-donker);
  color: rgba(255, 253, 249, 0.85);
}

.site-footer .scheider {
  color: var(--kleur-blush);
  margin-top: 0;
}

.footer-namen {
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--kleur-wit);
  margin-bottom: 0.4rem;
}

.footer-credit {
  font-size: var(--tekst-klein);
  letter-spacing: 0.08em;
}

.footer-credit a {
  color: var(--kleur-blush);
}

.footer-credit a:hover {
  color: var(--kleur-wit);
}

.footer-terug {
  display: inline-block;
  margin-top: 1.6rem;
  font-size: var(--tekst-klein);
  color: rgba(255, 253, 249, 0.6);
  text-decoration: none;
}

.footer-terug:hover {
  color: var(--kleur-wit);
  text-decoration: underline;
}

/* =========================================================================
   REDUCED MOTION — volledige scroll- en laadregie uit.
   (De reveal- en parallax-regels staan al bij hun eigen blok; dit blok
   schakelt alle overige animaties uit zodat alles direct zichtbaar is.)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-flora,
  .hero-intro,
  .aftelklok-eenheid {
    animation: none;
  }

  .tijdlijn::before {
    transform: scaleY(1);
    animation: none;
  }

  .tijdlijn-item .tijdlijn-icoon {
    transform: none;
    transition: none;
  }

  .knop:hover {
    transform: none;
  }
}


/* ---------------------------------------------------------------------
   Gastenbijdragen — standaardblok, identiek in elke 27 Moments-site.
   Bewust neutraal opgebouwd (currentColor): het neemt automatisch de
   huisstijl van dit template over.
   ------------------------------------------------------------------- */
.gastenblok {
  padding: clamp(48px, 8vw, 88px) 24px;
  text-align: center;
}

.gastenblok__inhoud {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 46px) clamp(22px, 4vw, 40px);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.025);
}

.gastenblok__label {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
}

.gastenblok h2 { margin-bottom: 12px; }
.gastenblok p { opacity: 0.82; }

.gastenblok__knop {
  display: inline-block;
  margin-top: 22px;
  padding: 13px 30px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gastenblok__knop:hover,
.gastenblok__knop:focus-visible {
  background: currentColor;
  color: #fff;
}

/* Zorgt dat de tekst leesbaar blijft op de gevulde hover-staat. */
.gastenblok__knop:hover span,
.gastenblok__knop:focus-visible span { color: #fff; }