/* ===== Basis & variabelen ===== */
:root {
  --wijn-donker: #4a1225;
  --wijn: #6e1f3a;
  --wijn-licht: #8f3552;
  --goud: #c9a05a;
  --goud-licht: #e3c891;
  --creme: #faf5ee;
  --creme-donker: #f1e8da;
  --inkt: #2b1a20;
  --inkt-zacht: #5f4a52;
  --wit: #ffffff;
  --fout: #b3261e;
  --ok: #2e6b3f;
  --radius: 14px;
  --schaduw: 0 10px 30px rgba(74, 18, 37, 0.12);
}

* { box-sizing: border-box; }

/* Een element met [hidden] hoort weg te blijven, ook als een latere regel het
   een display geeft (grid/flex winnen anders van de browserstandaard). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--creme);
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

a { color: var(--wijn); }

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

/* Focusstijl voor toetsenbordnavigatie */
:focus-visible {
  outline: 3px solid var(--goud);
  outline-offset: 2px;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--creme);
  padding: clamp(5rem, 16vw, 10rem) 1.5rem clamp(4rem, 12vw, 8rem);
  text-align: center;
  overflow: hidden;
}

.hero-beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Donkere waas zodat de tekst leesbaar blijft op de foto */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(201, 160, 90, 0.25), transparent 55%),
    linear-gradient(160deg, rgba(43, 8, 20, 0.88) 0%, rgba(74, 18, 37, 0.78) 55%, rgba(60, 14, 30, 0.86) 100%);
}

.hero-inner { max-width: 40rem; margin: 0 auto; }

.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--goud-licht);
  margin: 0 0 1rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 700;
  color: var(--wit);
}

.hero-intro {
  font-size: 1.1rem;
  color: rgba(250, 245, 238, 0.94);
  margin: 0 auto 2rem;
  max-width: 32rem;
}

.hero-noot {
  font-size: 0.9rem;
  color: rgba(250, 245, 238, 0.8);
  margin: 1rem 0 0;
}

/* ===== Knoppen ===== */
.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: var(--goud);
  color: var(--wijn-donker);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.btn-primary:hover { background: var(--goud-licht); transform: translateY(-1px); }

.btn-secundair {
  background: transparent;
  color: var(--wijn);
  border: 2px solid var(--wijn);
}

.btn-secundair:hover { background: var(--wijn); color: var(--creme); }

.btn-whatsapp {
  background: #25d366;
  color: #073b1c;
}

.btn-whatsapp:hover { background: #3ee07c; transform: translateY(-1px); }

.btn-breed { width: 100%; margin-top: 0.5rem; }

/* ===== Secties ===== */
.section { padding: clamp(3rem, 8vw, 5rem) 1.5rem; }

.section-inner { max-width: 60rem; margin: 0 auto; }

.section-smal { max-width: 34rem; }

.section-alt { background: var(--creme-donker); }

.section-donker {
  background:
    radial-gradient(ellipse at 80% 110%, rgba(201, 160, 90, 0.18), transparent 55%),
    linear-gradient(160deg, var(--wijn-donker) 0%, var(--wijn) 100%);
  color: var(--creme);
}

.section h2 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: var(--wijn-donker);
}

.section-donker h2 { color: var(--wit); }

.section-sub { color: var(--inkt-zacht); margin: 0 0 2rem; }

.section-donker .section-sub { color: rgba(250, 245, 238, 0.85); }

/* ===== Tweekoloms-secties met beeld ===== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.split-beeld { margin: 0; }

.split-beeld img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  object-fit: cover;
  /* Vanuit het midden snijden kost bij een staande foto van een persoon het
     hoofd. Iets boven het midden uitlijnen houdt het gezicht in beeld. */
  object-position: center 22%;
  aspect-ratio: 4 / 3.2;
}

.split-beeld-staand img { aspect-ratio: 4 / 4.6; }

.split-omgekeerd .split-beeld { order: 2; }

.badge {
  display: inline-block;
  background: var(--wijn);
  color: var(--goud-licht);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin: 0 0 1.25rem;
}

.format-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.format-lijst li {
  padding-left: 1.6rem;
  position: relative;
}

.format-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--goud);
}

.format-lijst strong { color: var(--wijn-donker); }

.logo-accent {
  width: 9rem;
  margin-top: 2rem;
  opacity: 0.75;
  mix-blend-mode: multiply;
}

/* ===== Eerdere proeverijen ===== */
.event-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.event-kaart {
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.event-status {
  align-self: flex-start;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  background: var(--creme-donker);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
}

.event-titel { font-size: 1.3rem; margin: 0; color: var(--wijn-donker); }

/* Een tegel die naar de aanmeldpagina leidt, hoort zich als knop te gedragen. */
.event-kaart-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.event-kaart-link:hover,
.event-kaart-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(74, 18, 37, 0.18);
}

.event-kaart-link:hover .event-actie { gap: 0.6rem; }

.event-actie {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--creme-donker);
  color: var(--wijn);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.15s ease;
}

.event-actie::after { content: "\2192"; }

/* Een avond waarvoor je je niet meer kunt aanmelden blijft leesbaar staan. */
.event-kaart-dicht { opacity: 0.6; }

.event-locatie { margin: 0; color: var(--inkt-zacht); font-size: 0.95rem; }

.komend-cta { margin: 2rem 0 0; text-align: center; }

/* Drie foto's naast elkaar, onder elkaar op een telefoon. */
.foto-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}

.foto-strip figure { margin: 0; }

.foto-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}

.event-datum {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  color: var(--wijn);
}

.event-prijs { margin: 0; color: var(--inkt-zacht); font-size: 0.95rem; }

.eerder-cta {
  margin: 2rem 0 0;
  color: var(--inkt-zacht);
}

/* ===== Formulier ===== */
form {
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 2rem 1.5rem;
  color: var(--inkt);
}

.veld { margin-bottom: 1.25rem; }

label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.95rem; }

.verplicht { color: var(--wijn); }

input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid #d8cdbd;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: var(--creme);
}

input:focus {
  outline: none;
  border-color: var(--wijn);
  box-shadow: 0 0 0 3px rgba(110, 31, 58, 0.15);
  background: var(--wit);
}

.veld-fout {
  color: var(--fout);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}

.veld-fout:empty { display: none; }

.veld.heeft-fout input { border-color: var(--fout); }

.form-noot {
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  text-align: center;
  margin: 0.9rem 0 0;
}

/* ===== Bevestiging ===== */
.bevestiging {
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  border-top: 5px solid var(--goud);
  padding: 2.5rem 1.75rem;
  text-align: center;
  color: var(--inkt);
}

.bevestiging-icoon { font-size: 3rem; margin-bottom: 0.5rem; }

.bevestiging h3 { font-size: 1.6rem; color: var(--wijn-donker); }

.bevestiging p { color: var(--inkt-zacht); margin: 0 0 1.5rem; }

/* ===== Delen ===== */
.delen-inner { text-align: center; }

.deel-knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

.deel-status {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  font-weight: 500;
  color: var(--ok);
}

/* ===== Footer ===== */
.footer {
  background: var(--wijn-donker);
  color: rgba(250, 245, 238, 0.85);
  text-align: center;
  padding: 2.5rem 1.5rem;
  font-size: 0.9rem;
}

.footer a { color: var(--goud-licht); }

.footer p { margin: 0.25rem 0; }

/* ===== Mobiel ===== */
@media (max-width: 45.9rem) {
  .split { grid-template-columns: 1fr; }
  .split-omgekeerd .split-beeld { order: 0; }
  .split-beeld img { aspect-ratio: 3 / 2; }
  .split-beeld-staand img { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  form { padding: 1.5rem 1.1rem; }
  .bevestiging { padding: 2rem 1.25rem; }
  .deel-knoppen .btn { width: 100%; }
}

/* Minder beweging voor wie dat wil */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ===== Taalknop =====
   Vaste pil linksonder in beeld, met de vlag en de naam van de huidige taal.
   Klikken opent een klein menu omhoog. Hij zweeft over de pagina heen en heeft
   daarom een eigen achtergrond, zodat hij ook op de donkere secties leesbaar
   blijft. */

.taalswitch {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 60;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.taalswitch-knop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--creme-donker);
  border-radius: 999px;
  background: var(--wit);
  color: var(--inkt);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(74, 18, 37, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.taalswitch-knop:hover,
.taalswitch-knop:focus-visible {
  transform: translateY(-1px);
  border-color: var(--goud);
  box-shadow: 0 10px 26px rgba(74, 18, 37, 0.24);
}

.taalswitch-vlag { font-size: 1.05rem; }

.taalswitch-pijl {
  color: var(--inkt-zacht);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.taalswitch.is-open .taalswitch-pijl { transform: rotate(180deg); }

.taalswitch-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.5rem);
  min-width: 100%;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--wit);
  border: 1px solid var(--creme-donker);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(74, 18, 37, 0.22);
}

.taalswitch-menu li { margin: 0; }

.taalswitch-keuze {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--inkt);
  font-size: 0.9rem;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.taalswitch-keuze:hover,
.taalswitch-keuze:focus-visible { background: var(--creme); }

.taalswitch-keuze.is-actief {
  color: var(--wijn);
  font-weight: 600;
}

/* Op smalle schermen mag hij wat compacter: de vlag zegt genoeg zodra het
   menu open kan. */
@media (max-width: 30rem) {
  .taalswitch { left: 0.75rem; bottom: 0.75rem; }
  .taalswitch-knop { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
}