@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  /* Kleurschema wedding */
  --blue: #A8D1ED;
  --blue-pale: #DEF2FF;
  --yellow-pale: #F6EDB1;
  --yellow: #F5E59C;
  --cream: #F9F2D2;
  --orange: #F9BC69;
  --blush: #F0DBD0;
  --olive: #D1D37C;
  --black: #1A1A17;

  /* Donkerdere tinten uit datzelfde palet, zodat kleur ook in tekst en iconen kan */
  --olive-deep: #6E7134;
  --blue-deep: #35657F;
  --orange-deep: #B5701F;
  --terracotta: #B3492F;

  --bg: #FCF8EC;
  --ink: var(--black);
  --line: rgba(26, 26, 23, 0.14);
  --surface: rgba(255, 255, 255, 0.62);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Eén doorlopend kleurverloop over de volledige paginahoogte (niet fixed), zodat
   je al scrollend door het palet reist zonder harde randen tussen secties. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58rem 34rem at 84% -2%, rgba(168, 209, 237, 0.85), transparent 62%),
    radial-gradient(44rem 28rem at 0% 8%, rgba(246, 237, 177, 0.8), transparent 64%),
    radial-gradient(50rem 32rem at 98% 30%, rgba(240, 219, 208, 0.9), transparent 62%),
    radial-gradient(46rem 30rem at -4% 46%, rgba(209, 211, 124, 0.6), transparent 62%),
    radial-gradient(48rem 32rem at 92% 64%, rgba(249, 188, 105, 0.55), transparent 62%),
    radial-gradient(44rem 30rem at 2% 80%, rgba(222, 242, 255, 0.95), transparent 62%),
    radial-gradient(50rem 34rem at 88% 98%, rgba(209, 211, 124, 0.5), transparent 62%),
    var(--bg);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
}

a { color: inherit; }

::selection { background: var(--blue); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--olive-deep);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Klein sierlijntje: streepje – bolletje – streepje, in paletkleuren */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto 1.1rem;
}

.ornament::before,
.ornament::after {
  content: "";
  width: clamp(28px, 8vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--olive));
}

.ornament::after { background: linear-gradient(90deg, var(--olive), transparent); }

.ornament span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.tag {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(249, 188, 105, 0.32);
  color: #8A5518;
  margin-right: 0.55rem;
}

/* ---------- Layout shell ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 5vw;
  background: rgba(252, 248, 236, 0.82);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(110, 113, 52, 0.18);
}

.site-header .brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
  color: rgba(26, 26, 23, 0.72);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--olive-deep);
  border-color: var(--olive);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(110, 113, 52, 0.3);
  border-radius: 8px;
  width: 40px;
  height: 36px;
  font-size: 1.2rem;
  color: var(--olive-deep);
  cursor: pointer;
}

main { min-height: 60vh; }

.section {
  padding: clamp(3rem, 8vw, 6rem) 5vw;
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}

.section-head h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.section-head p { opacity: 0.78; margin-top: 0.6rem; }

/* Zachte kleurzones: aan boven- en onderkant uitgefade, dus geen harde blokranden */
.tint-blue {
  background-image: linear-gradient(180deg, rgba(168, 209, 237, 0) 0%, rgba(168, 209, 237, 0.5) 40%, rgba(168, 209, 237, 0.42) 62%, rgba(168, 209, 237, 0) 100%);
}

.tint-blush {
  background-image: linear-gradient(180deg, rgba(240, 219, 208, 0) 0%, rgba(240, 219, 208, 0.62) 42%, rgba(240, 219, 208, 0.5) 64%, rgba(240, 219, 208, 0) 100%);
}

.tint-olive {
  background-image: linear-gradient(180deg, rgba(209, 211, 124, 0) 0%, rgba(209, 211, 124, 0.42) 42%, rgba(209, 211, 124, 0.34) 64%, rgba(209, 211, 124, 0) 100%);
}

.tint-yellow {
  background-image: linear-gradient(180deg, rgba(246, 237, 177, 0) 0%, rgba(246, 237, 177, 0.7) 42%, rgba(246, 237, 177, 0.55) 64%, rgba(246, 237, 177, 0) 100%);
}

.site-footer {
  position: relative;
  padding: 3.5rem 5vw 2.5rem;
  text-align: center;
  background-image: linear-gradient(180deg, rgba(209, 211, 124, 0) 0%, rgba(209, 211, 124, 0.3) 70%);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 113, 52, 0.35), transparent);
}

.site-footer .brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.site-footer .date {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin: 0 0 0.4rem;
}

.site-footer .footer-address {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

.site-footer .footer-address a { color: var(--blue-deep); }

/* ---------- Hero (homepage) ---------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 6rem 5vw 4rem;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(26, 26, 23, 0.22) 0%, rgba(26, 26, 23, 0.6) 100%),
    var(--hero-image, linear-gradient(135deg, var(--blue) 0%, var(--blush) 50%, var(--orange) 100%));
  background-size: cover;
  background-position: var(--hero-position, center);
}

.hero-content { position: relative; z-index: 2; }

.hero .eyebrow { color: rgba(255, 255, 255, 0.88); margin-bottom: 1.2rem; }

.hero h1 {
  font-size: clamp(3rem, 10vw, 6.4rem);
  line-height: 1;
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.hero .hero-date {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.hero .hero-place {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.9;
}

.hero-countdown {
  display: inline-block;
  margin: 1.8rem 0 0;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scroll-cue {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.scroll-cue span {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.7);
  animation: scrollpulse 1.8s ease-in-out infinite;
}

@keyframes scrollpulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span { animation: none; }
}

/* ---------- E-mailherkenning op de homepage ---------- */

.gate { text-align: center; }

.gate-box,
.gate-result {
  max-width: 560px;
  margin: 0 auto;
}

.gate form {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.gate input[type="email"] {
  flex: 1 1 260px;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(110, 113, 52, 0.28);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

.gate-feedback {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  min-height: 1.2em;
}

.gate-feedback.error { color: var(--terracotta); }

.gate-result .gate-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  background: var(--ink);
  color: #FCF8EC;
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  color: #FCF8EC;
}

.btn:active { transform: scale(0.98); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(26, 26, 23, 0.35);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.75);
  color: var(--olive-deep);
  border-color: var(--olive-deep);
}

/* ---------- Kaarten ---------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  max-width: 980px;
  margin: 0 auto;
}

/* Staat de fotomodule aan, dan zijn er vier tegels in plaats van drie. Bij de
   gewone breedte passen die net niet naast elkaar, waardoor er eentje alleen op
   een tweede rij belandt. Daarom regelen we die vier apart: naast elkaar als het
   past, anders twee bij twee — nooit één verdwaalde tegel.
   (Kent een browser `:has()` niet, dan blijft het gewoon zoals het was.) */
@media (min-width: 1040px) {
  .info-grid:has(.info-card.nav-fotos:not([hidden])) {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1160px;
  }
}

@media (min-width: 620px) and (max-width: 1039px) {
  .info-grid:has(.info-card.nav-fotos:not([hidden])) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }
}

.info-card {
  display: block;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  padding: 2.2rem 1.6rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 18px 40px -28px rgba(26, 26, 23, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 50px -30px rgba(26, 26, 23, 0.55);
  border-color: rgba(255, 255, 255, 0.95);
}

.icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  background: var(--badge-bg, var(--blue-pale));
  color: var(--badge-ink, var(--blue-deep));
}

.icon-badge svg { width: 26px; height: 26px; }

.badge-blue { --badge-bg: rgba(168, 209, 237, 0.55); --badge-ink: var(--blue-deep); }
.badge-blush { --badge-bg: rgba(240, 219, 208, 0.8); --badge-ink: var(--terracotta); }
.badge-olive { --badge-bg: rgba(209, 211, 124, 0.55); --badge-ink: var(--olive-deep); }

.info-card h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.info-card p { font-size: 0.9rem; opacity: 0.78; margin: 0; }

.info-card .card-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--olive-deep);
}

/* ---------- Tijdlijn (dagplanning) ---------- */

.timeline {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  padding-left: 2.6rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--olive) 50%, var(--orange) 100%);
  opacity: 0.75;
}

.timeline-item {
  position: relative;
  padding-bottom: 2.6rem;
}

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

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 0.4rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dot, var(--orange));
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(26, 26, 23, 0.12);
}

.timeline-item:nth-child(4n+1)::before { --dot: var(--blue); }
.timeline-item:nth-child(4n+2)::before { --dot: var(--olive); }
.timeline-item:nth-child(4n+3)::before { --dot: var(--orange); }
.timeline-item:nth-child(4n+4)::before { --dot: var(--yellow); }

.timeline-time {
  font-family: var(--serif);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.15rem;
  color: var(--blue-deep);
}

.timeline-item h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.timeline-item p { margin: 0; opacity: 0.78; font-size: 0.92rem; }

.timeline-note {
  max-width: 680px;
  margin: 3rem auto 0;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ---------- RSVP ---------- */

.rsvp-form {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  padding: clamp(1.6rem, 5vw, 3rem);
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 24px 46px -30px rgba(26, 26, 23, 0.5);
}

.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.3rem; }

.field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--olive-deep);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea,
.field select {
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(110, 113, 52, 0.25);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
}

/* Eigen pijltje, anders ziet elke browser er anders uit */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E7134' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* Twee velden naast elkaar, onder elkaar op een smal scherm */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* Een streep tussen twee personen — enkel tussen wie er staat: wie niet komt,
   is verborgen maar telt anders nog mee voor "+". */
.parts-person:not([hidden]) ~ .parts-person:not([hidden]) {
  margin-top: 0.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(110, 113, 52, 0.25);
}

.parts-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
}

.parts-intro { margin: -0.4rem 0 1.2rem; }

.field textarea { resize: vertical; min-height: 90px; }

.field-hint {
  font-size: 0.78rem;
  opacity: 0.65;
  margin: 0;
}

.radio-group {
  display: flex;
  gap: 1.6rem;
  padding-top: 0.3rem;
  flex-wrap: wrap;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  cursor: pointer;
}

.radio-group input { accent-color: var(--olive-deep); }

.rsvp-submit { text-align: center; margin-top: 0.6rem; }

.form-success {
  text-align: center;
  padding: 2.4rem clamp(1.4rem, 5vw, 3rem);
}

.form-success h2 { font-size: 2rem; }

.rsvp-form.hidden { display: none; }

.rsvp-gate-feedback {
  font-size: 0.88rem;
  min-height: 1.2em;
  margin: 0.9rem 0 0;
}

.rsvp-gate-feedback.error { color: var(--terracotta); }

.rsvp-welcome {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.rsvp-welcome-sub {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0 0 1.8rem;
}

/* Wat er al ingevuld werd, op een rijtje */
.rsvp-overzicht {
  margin: 0 0 1.8rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: rgba(110, 113, 52, 0.07);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.1rem;
  align-items: baseline;
}

.rsvp-overzicht dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}

.rsvp-overzicht dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}

@media (max-width: 520px) {
  /* Op een smal scherm onder elkaar; naast elkaar wordt de waarde te smal */
  .rsvp-overzicht { grid-template-columns: 1fr; gap: 0.15rem; }
  .rsvp-overzicht dd { margin-bottom: 0.6rem; }
  .rsvp-overzicht dd:last-child { margin-bottom: 0; }
}

.identify-title {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
}

.identify-sub {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;
  margin: 0 auto 1.8rem;
  max-width: 420px;
}

/* ---------- Foto's van gasten ---------- */

/* Compact houden: de foto's moeten meteen in beeld komen, zonder scrollen */
.fotos-upload-sectie { padding: 1.4rem 5vw 0; }
.fotos-galerij-sectie { padding: 1.2rem 5vw clamp(3rem, 8vw, 5rem); }

.foto-balk {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 14px 30px -26px rgba(26, 26, 23, 0.5);
}

.foto-naam-veld { flex: 1; margin-bottom: 0; }

.foto-kies {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.75rem 1.2rem;
}

.foto-kies svg { width: 18px; height: 18px; }

@media (max-width: 560px) {
  .foto-balk { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .foto-kies { justify-content: center; }
}

.foto-status {
  text-align: center;
  font-size: 0.85rem;
  min-height: 0;
  margin: 0.7rem 0 0;
}

.foto-status:empty { margin: 0; }

.foto-status.bezig { opacity: 0.7; }
.foto-status.klaar { color: var(--olive-deep); }
.foto-status.fout { color: var(--terracotta); }

.foto-teller {
  text-align: center;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--olive-deep);
  margin: 0 0 0.9rem;
}

.foto-leeg {
  text-align: center;
  opacity: 0.7;
  margin: 0;
}

/* Nieuwste bovenaan; op een gsm twee kolommen, op een scherm meer */
.foto-galerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
  max-width: 980px;
  margin: 0 auto;
}

.foto-item {
  margin: 0;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 30px -24px rgba(26, 26, 23, 0.55);
}

.foto-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.foto-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.foto-open:hover img { transform: scale(1.03); }

/* Filmpjes krijgen een speelknop, zodat je ze herkent tussen de foto's */
.foto-open { position: relative; }

.video-teken {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Het driehoekje staat optisch pas in het midden als je het iets opschuift */
  padding-left: 4px;
  font-size: 0.95rem;
  line-height: 1;
  color: #FCF8EC;
  background: rgba(26, 26, 23, 0.55);
  border: 1.5px solid rgba(252, 248, 236, 0.85);
  border-radius: 50%;
  backdrop-filter: blur(2px);
  pointer-events: none;
  transition: background 0.2s ease;
}

.foto-open:hover .video-teken { background: rgba(26, 26, 23, 0.75); }

/* ---------- Voortgang bij het uploaden ---------- */

.foto-voortgang {
  max-width: 620px;
  margin: 0.9rem auto 0;
  text-align: center;
}

.foto-voortgang-spoor {
  height: 8px;
  border-radius: 999px;
  background: rgba(110, 113, 52, 0.15);
  overflow: hidden;
}

.foto-voortgang-balk {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--olive-deep);
  transition: width 0.3s ease;
}

/* Tijdens het klaarzetten weten we nog niet hoeveel er komt */
.foto-voortgang-balk.is-onbepaald {
  width: 35%;
  animation: voortgang-heen-en-weer 1.3s ease-in-out infinite;
}

@keyframes voortgang-heen-en-weer {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

.foto-voortgang-tekst {
  margin: 0.55rem 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.foto-voortgang-rest {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .foto-voortgang-balk.is-onbepaald { animation: none; margin-left: 0; width: 100%; opacity: 0.4; }
  .foto-voortgang-balk { transition: none; }
}

/* ================= Foto's 2: per moment van de dag =================
   Hetzelfde rooster, maar onder de momenten uit de dagplanning. De buitenste
   doos is dan geen rooster meer; elk moment heeft er zijn eigen. */

[data-galerijstijl="momenten"] #foto-galerij {
  display: block;
}

.foto-moment + .foto-moment { margin-top: 2.6rem; }

.foto-moment-kop {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
}

.foto-moment-kop span {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-deep);
}

/* ================= Foto's 3: de diavoorstelling =================
   Voor een tv of beamer in de zaal. Donker, zodat de foto's oplichten; het
   onderschrift groot genoeg om van achter in de zaal te lezen. */

body.scherm {
  margin: 0;
  background: var(--black);
  color: var(--bg);
  overflow: hidden;
}

.scherm-buis {
  position: fixed;
  inset: 0;
}

.scherm-beeld,
.scherm-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.scherm-beeld.is-zichtbaar,
.scherm-film.is-zichtbaar { opacity: 1; }

.scherm-leeg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 2rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  text-align: center;
}

.scherm-leeg[hidden] { display: none; }

.scherm-onder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding: 4rem clamp(1.2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.2rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.scherm-naam {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
}

.scherm-moment {
  margin: 0.2rem 0 0;
  font-size: clamp(0.72rem, 1.1vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

.scherm-oproep {
  margin: 0;
  text-align: right;
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.scherm-oproep strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--yellow-pale);
}

.scherm-knoppen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.6rem;
  transition: opacity 0.4s ease;
}

.scherm-knoppen button,
.scherm-knoppen a {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  cursor: pointer;
}

.scherm-knoppen button[aria-pressed="true"] {
  background: var(--yellow-pale);
  border-color: var(--yellow-pale);
  color: var(--black);
}

/* Ligt de muis stil, dan verdwijnen de knoppen en de muis zelf. */
body.scherm.is-rustig { cursor: none; }
body.scherm.is-rustig .scherm-knoppen { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  .scherm-onder { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .scherm-oproep { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .scherm-beeld, .scherm-film { transition: none; }
}

/* ---------- Foto groot bekijken ---------- */

body.lichtbak-open { overflow: hidden; }

.lichtbak {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(0.8rem, 3vw, 2rem);
  background: rgba(20, 20, 18, 0.92);
  backdrop-filter: blur(6px);
}

.lichtbak-inhoud {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  max-width: min(100%, 1100px);
  min-width: 0;
}

.lichtbak-inhoud img,
.lichtbak-inhoud video {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  border-radius: 10px;
  object-fit: contain;
}

/* De speler moet breed genoeg zijn om de knoppen te kunnen bedienen */
.lichtbak-inhoud video { width: min(100%, 900px); background: #000; }

.lichtbak-inhoud figcaption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Verschijnt enkel als de browser het geluid tegenhoudt */
.lichtbak-tip {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--sans);
  font-size: 0.78rem;
  text-align: center;
}

.lichtbak-sluit,
.lichtbak-nav {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.lichtbak-sluit:hover,
.lichtbak-nav:hover { background: rgba(255, 255, 255, 0.28); }

.lichtbak-nav {
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 0.2rem;
}

.lichtbak-sluit {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 42px;
  height: 42px;
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: 0.2rem;
}

/* Op een gsm zweven de pijlen over de foto, anders blijft er te weinig plaats */
@media (max-width: 620px) {
  .lichtbak { gap: 0; }
  .lichtbak-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
  }
  .lichtbak-vorige { left: 0.5rem; }
  .lichtbak-volgende { right: 0.5rem; }
  .lichtbak-inhoud img { max-height: 70vh; }
}

.foto-item figcaption {
  padding: 0.55rem 0.7rem 0.7rem;
  font-size: 0.75rem;
  opacity: 0.7;
  line-height: 1.35;
}

/* ---------- Gastenbalk (wie ben je + resetten) ---------- */

.guest-bar {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: min(92vw, 430px);
  padding: 0.55rem 0.6rem 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(252, 248, 236, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(110, 113, 52, 0.22);
  box-shadow: 0 16px 34px -22px rgba(26, 26, 23, 0.6);
  font-size: 0.78rem;
}

/* Zodat de zwevende balk de laatste regels van de footer niet afdekt */
body.has-guest-bar .site-footer { padding-bottom: 6rem; }

.guest-bar-text { opacity: 0.85; }

.guest-bar button {
  flex-shrink: 0;
  border: 1px solid rgba(110, 113, 52, 0.3);
  background: transparent;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--olive-deep);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.guest-bar button:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep);
  color: #FCF8EC;
}

@media (max-width: 620px) {
  .guest-bar {
    left: 0.8rem;
    right: 0.8rem;
    /* env(): ruimte laten voor de streep onderaan iPhones zonder thuisknop */
    bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
    justify-content: space-between;
    font-size: 0.74rem;
  }
}

/* ---------- FAQ ---------- */

.accordion {
  max-width: 760px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid var(--line);
  border-radius: 16px;
  transition: background 0.25s ease;
}

.accordion-item[open] {
  background: rgba(255, 255, 255, 0.55);
  border-bottom-color: transparent;
  box-shadow: 0 18px 40px -34px rgba(26, 26, 23, 0.6);
}

.accordion-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 1.3rem;
}

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

.accordion-item summary .plus {
  font-family: var(--sans);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  color: var(--orange-deep);
  transition: transform 0.2s ease;
}

.accordion-item[open] summary .plus { transform: rotate(45deg); }

.accordion-item .accordion-body {
  padding: 0 1rem 1.6rem;
  font-size: 0.95rem;
  max-width: 640px;
}

.accordion-item .accordion-body p { margin: 0 0 0.8rem; }
.accordion-item .accordion-body p:last-child { margin-bottom: 0; }
.accordion-item .accordion-body a { color: var(--blue-deep); }

.link-list {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  list-style: none;
}

.link-list li {
  position: relative;
  margin-bottom: 0.55rem;
}

.link-list li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.faq-note {
  font-size: 0.86rem;
  opacity: 0.7;
}

.accordion-item .accordion-body::after {
  content: "";
  display: table;
  clear: both;
}

/* Foto's in een FAQ-antwoord. Dit hing vroeger aan een klasse in de HTML; sinds
   de FAQ uit de database komt, geldt het voor elke afbeelding in een antwoord. */
.accordion-body img {
  float: right;
  width: 260px;
  max-width: 45%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 0 0.8rem 1.4rem;
  box-shadow: 0 14px 30px -18px rgba(26, 26, 23, 0.55);
}

@media (max-width: 480px) {
  .accordion-body img { float: none; display: block; margin: 0 auto 1rem; width: 100%; max-width: 260px; }
}

/* ---------- Paginakop (subpagina's) ---------- */

.page-hero {
  padding: clamp(3rem, 10vw, 5.5rem) 5vw 3rem;
  text-align: center;
}

.page-hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.page-hero p { opacity: 0.78; margin-top: 0.6rem; }

/* Voor pagina's waar de inhoud meteen in beeld moet komen */
.page-hero-compact {
  padding: clamp(1.6rem, 5vw, 2.6rem) 5vw 1.2rem;
}

.page-hero-compact h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 0.2em;
}

.page-hero-compact p { font-size: 0.92rem; margin-top: 0.2rem; }

.page-hero .lead {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 720px) {
  /* iOS Safari zoomt automatisch in op een invulveld met tekst kleiner dan 16px */
  .gate input[type="email"],
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"],
  .field textarea,
  .field select { font-size: 16px; }

  /* Staande uitsnede, anders valt er van een liggende foto te weinig in beeld.
     Iets minder hoog, zodat de uitsnede niet extra links/rechts wordt afgesneden. */
  .hero { min-height: 74vh; }

  .hero-photo {
    background-image:
      linear-gradient(180deg, rgba(26, 26, 23, 0.22) 0%, rgba(26, 26, 23, 0.6) 100%),
      var(--hero-image-mobile, var(--hero-image));
    background-position: center;
  }

  .site-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: rgba(252, 248, 236, 0.96);
    backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 1.5rem 5vw;
    border-bottom: 1px solid var(--line);
    /* -150% en visibility: anders blijft de onderrand van het gesloten paneel
       onder de header hangen als een lichte balk. */
    transform: translateY(-150%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .site-nav.open { transform: translateY(0); visibility: visible; }
  .nav-toggle { display: block; }
}

/* ================= De teksteditor =================
   Voor de dagplanning en de FAQ in het beheer, en voor de teksten op de pagina's
   zelf (zie editor.js en teksten.js). Hier en niet in admin.css, omdat de
   gewone pagina's ze ook nodig hebben. */

/* Opmaakknoppen boven een tekstvak */
.opmaakbalk {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid rgba(110, 113, 52, 0.3);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(110, 113, 52, 0.07);
}

.opmaakknop {
  min-width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--olive-deep);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.opmaakknop:hover { background: rgba(110, 113, 52, 0.18); }
.opmaakknop:active { background: rgba(110, 113, 52, 0.3); }
.opmaakknop.is-vet { font-weight: 800; font-family: var(--sans); }

.opmaakknop.is-cursief { font-style: italic; font-family: var(--serif); font-size: 1.05rem; }
.opmaakknop.is-onderlijnd { text-decoration: underline; font-family: var(--sans); }

/* De editor: wat je hier ziet, is wat een gast ziet (zie editor.js) */
.editor-veld {
  min-height: 9rem;
  max-height: 32rem;
  overflow-y: auto;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(110, 113, 52, 0.3);
  border-radius: 0 0 10px 10px;
  margin-top: -1px;
  background: #FFFDF8;
  font-size: 0.95rem;
  line-height: 1.55;
  outline: none;
}

.editor-veld.is-kort { min-height: 2.6rem; }
.editor-veld:focus { border-color: var(--olive-deep); box-shadow: 0 0 0 3px rgba(110, 113, 52, 0.15); }

.editor-veld p { margin: 0 0 0.6rem; }
.editor-veld p:last-child { margin-bottom: 0; }
.editor-veld a { color: var(--blue-deep); }
.editor-veld img { max-width: 160px; border-radius: 8px; display: block; margin: 0.3rem 0; }
.editor-veld ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.editor-veld .faq-note { font-size: 0.82rem; opacity: 0.65; }

/* Een knop die aan staat: de tekst waar de cursor staat is al vet, … */
.opmaakknop[aria-pressed="true"] { background: rgba(110, 113, 52, 0.25); }

/* ================= Teksten aanpassen op de pagina (teksten.js) =================
   Enkel zichtbaar voor wie in het beheer aangemeld is. */

.tekst-schakelaar {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 70;
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--olive-deep);
  color: #FCF8EC;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 26px -12px rgba(26, 26, 23, 0.6);
  cursor: pointer;
}

/* Op een gsm staat de balk "Je bekijkt de site als…" onderaan over de hele breedte. */
@media (max-width: 640px) {
  body.has-guest-bar .tekst-schakelaar { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* Zolang het venstertje open staat, gaan de balk onderaan en de knop opzij:
   anders schuiven ze over de editor en de knoppen Bewaren en Annuleren. */
body.tekst-open .guest-bar,
body.tekst-open .tekst-schakelaar { display: none; }

body.teksten-bewerken [data-tekst] {
  outline: 1.5px dashed rgba(110, 113, 52, 0.55);
  outline-offset: 3px;
  border-radius: 3px;
  cursor: text;
}

body.teksten-bewerken [data-tekst]:hover { background: rgba(245, 229, 156, 0.45); }
body.teksten-bewerken [data-tekst].is-bezig {
  outline: 2px solid var(--olive-deep);
  background: rgba(245, 229, 156, 0.6);
}

/* Een lege tekst moet je nog kunnen aanklikken. */
body.teksten-bewerken [data-tekst]:empty {
  display: inline-block;
  min-width: 3em;
  min-height: 1em;
}

.tekst-paneel {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 80;
  width: min(680px, 100%);
  max-height: 55vh;
  overflow-y: auto;
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: #FFFDF8;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px -16px rgba(26, 26, 23, 0.5);
  color: var(--ink);
  text-align: left;
}

.tekst-kop { margin: 0 0 0.6rem; font-size: 0.78rem; opacity: 0.7; }

.tekst-knoppen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }

.tekst-knop {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(110, 113, 52, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--olive-deep);
  font-family: var(--sans);
  font-size: 0.8rem;
  cursor: pointer;
}

.tekst-knop.is-hoofd { background: var(--olive-deep); border-color: var(--olive-deep); color: #FCF8EC; }
.tekst-knop.is-zacht { margin-left: auto; color: var(--terracotta); border-color: rgba(179, 73, 47, 0.35); }

.tekst-melding { margin: 0.5rem 0 0; font-size: 0.8rem; min-height: 1em; }
.tekst-melding:empty { margin: 0; min-height: 0; }


/* Een pagina met gewone lopende tekst, zoals privacy.html */
.leestekst {
  max-width: 680px;
  margin: 0 auto;
}
.leestekst h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2rem 0 0.5rem; }
.leestekst h2:first-child { margin-top: 0; }
.leestekst p { line-height: 1.7; }