/* ---------- Lettertypen (staan op deze website zelf, in de map "fonts") ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-500-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jost-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jost-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Kleuren en lettertypen ---------- */
:root {
  /* Fotofilter: zelfde sfeer over alle foto's. Zet --foto-tint op 0 voor geen kleurlaag. */
  --foto-filter: saturate(.8) contrast(.95) brightness(1.06);
  --foto-tint: .3;
  /* Zelfde filter over de kaart. Zet --kaart-tint op 0 voor geen kleurlaag. */
  --kaart-filter: saturate(.55) contrast(.95) brightness(1.05);
  --kaart-tint: .35;

  --ground: #FDF4F6;
  --panel: #F7E7EC;
  --line: #EBD3DC;
  --plum: #5E4658;
  --mauve: #855A7A;
  --rose: #F7C6D3;
  --lilac: #D6C8F0;
  --oudroze: #D9A9BC;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--plum);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
}

a { color: var(--plum); }
a:hover { opacity: .8; }

:focus-visible {
  outline: 3px solid var(--mauve);
  outline-offset: 3px;
}

/* Snelkoppeling voor toetsenbordgebruikers: pas zichtbaar als je erop tabt */
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: .6rem 1rem;
  background: var(--plum);
  color: var(--ground);
  border-radius: 8px;
  z-index: 10;
}
.skip:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem min(2rem, 8vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
}

nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
nav a { text-decoration: none; padding: .6rem 0; font-size: 1rem; }

/* ---------- Knoppen ---------- */
.button {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  min-height: 48px;
  padding: .7rem 2rem;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
  background: var(--plum);
  color: var(--ground);
  font: inherit;
  font-size: 1rem;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
}

.button-outline { background: transparent; color: var(--plum); }

/* ---------- Secties ---------- */
.hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 4.5rem min(2rem, 8vw) 5rem;
  text-align: center;
}

.hero-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: .25rem 0 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--mauve);
}

.hero-by::before,
.hero-by::after {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--oudroze);
}

.hero h1 {
  margin: 0;
  font-size: min(4rem, 9vw);
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero p { margin: 0 0 1rem; }
.hero .button { margin-top: 1rem; }

.panel { background: var(--panel); padding: 4.5rem min(2rem, 8vw); }
.narrow { max-width: 760px; margin: 0 auto; }
.wide { max-width: 1100px; margin: 0 auto; }

.panel h2, .sfeer h2 {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  overflow-wrap: anywhere;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.panel h2 { text-align: center; margin-bottom: .5rem; }

.lead {
  margin: 0 0 2.25rem;
  text-align: center;
  color: var(--mauve);
}

/* ---------- Uitklapmenu ---------- */
.acc {
  background: var(--ground);
  border-radius: 16px;
  padding: .25rem 1.75rem;
  margin-bottom: 1rem;
}

.acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  font-family: var(--serif);
  font-size: 1.75rem;
  list-style: none;
  cursor: pointer;
}

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

.plus {
  font-size: 2rem;
  color: var(--mauve);
  transition: transform .2s;
}

.acc[open] .plus { transform: rotate(45deg); }

.prices { margin: 0; padding: 0 0 1.25rem; list-style: none; }

.prices li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-top: 1px solid var(--line);
}

.prices li span:first-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.price { color: var(--mauve); white-space: nowrap; }

.group {
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--mauve);
}

.group + .prices li:first-child { border-top: 0; }

/* ---------- Sfeer ---------- */
.sfeer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4.5rem min(2rem, 8vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
}

.carousel { flex: 1 1 380px; min-width: 0; max-width: 520px; margin-inline: auto; }
.carousel-stage { position: relative; }

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: 1px solid var(--mauve);
  border-radius: 160px 160px 16px 16px;
}

.carousel-track::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  max-height: 420px;
  scroll-snap-align: start;
  background: linear-gradient(160deg, var(--rose), var(--lilac));
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--foto-filter);
}

/* Zachte roze-lila kleurlaag over de foto, zodat alle foto's bij elkaar passen */
.slide:not(:empty)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--rose), var(--lilac));
  mix-blend-mode: color;
  opacity: var(--foto-tint);
  pointer-events: none;
}

/* Pijltjes en puntjes van de carrousel */
.carousel-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(133, 90, 122, .45);
  border-radius: 50%;
  background: rgba(253, 244, 246, .5);
  opacity: .75;
  transition: opacity .2s, background-color .2s;
  color: var(--plum);
  cursor: pointer;
}

.carousel-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-prev { left: 12px; top: calc(50% - 22px); }
.carousel-next { right: 12px; top: calc(50% - 22px); }
.carousel-btn:hover,
.carousel-btn:focus-visible { opacity: 1; background: rgba(253, 244, 246, .92); }

.carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: .75rem;
}

.carousel-dots button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel-dots button::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--mauve);
  border-radius: 50%;
}

.carousel-dots button[aria-current="true"]::before { background: var(--mauve); }
.carousel-count { font-size: .95rem; color: var(--mauve); }

/* Zonder meerdere foto's geen knoppen; op aanraakschermen geen pijltjes */
.carousel:not(.is-multi) .carousel-btn,
.carousel:not(.is-multi) .carousel-dots { display: none; }

@media (hover: none) {
  .carousel-arrow { display: none; }
}

.sfeer-text { flex: 1 1 380px; }
.sfeer-text h2 { margin-bottom: 1rem; }
.sfeer-text p { margin: 0 0 1.5rem; }

/* Op tablets en telefoons komt alles onder elkaar, in deze volgorde:
   kop (zoals bij de andere blokken), foto's, tekst en de Instagram-knop.
   871px is precies de breedte waarbij tekst en foto's niet meer naast elkaar passen. */
@media (max-width: 871px) {
  .sfeer { flex-direction: column; align-items: stretch; gap: 0; }
  .sfeer-text { display: contents; text-align: center; }
  .sfeer-text h2 { order: -1; margin: 0 0 1.75rem; }
  .carousel { width: 100%; margin-bottom: 2rem; }
  .sfeer-text .button { align-self: center; }
}


/* ---------- Recensies ---------- */
.rev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.rev {
  margin: 0;
  padding: 1.5rem;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.rev blockquote {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  quotes: "“" "”";
}

/* Aanhalingstekens om elke recensie */
.rev blockquote::before { content: open-quote; }
.rev blockquote::after { content: close-quote; }

.rev figcaption { font-size: .95rem; color: var(--mauve); }

/* ---------- Kleuren laten afwisselen ----------
   De blokken wisselen af tussen licht (--ground) en roze (--panel).
   Staan er recensies, dan is het recensieblok roze; contact wordt dan licht
   en de footer roze, zodat het ritme tot onderaan doorloopt. */
body:has(#recensies:not([hidden])) #contact { background: var(--ground); }
body:has(#recensies:not([hidden])) #contact input,
body:has(#recensies:not([hidden])) #contact textarea { background: #fff; }
body:has(#recensies:not([hidden])) .site-footer { background: var(--panel); }

/* ---------- Contact ---------- */
.contact-grid { display: flex; flex-wrap: wrap; gap: 3rem; }
.contact-grid > * { flex: 1 1 380px; }

address { font-style: normal; margin-bottom: 1.25rem; }

.cancel-note { margin: 0 0 1.25rem; }

.map {
  position: relative;
  min-height: 220px;
  border: 1px solid var(--mauve);
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
}

.map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
  filter: var(--kaart-filter);
}

/* Zachte roze-lila kleurlaag over de kaart; de kaart blijft gewoon bedienbaar */
.map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--rose), var(--lilac));
  mix-blend-mode: color;
  opacity: var(--kaart-tint);
  pointer-events: none;
}
.route { display: inline-block; margin-top: 1rem; padding: .6rem 0; }

form { display: flex; flex-direction: column; }

label { font-size: 1rem; margin-top: .85rem; margin-bottom: .3rem; }
label:first-of-type { margin-top: 0; }

input, textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--mauve);
  border-radius: 10px;
  background: var(--ground);
  color: var(--plum);
  font: inherit;
}

.error { font-size: .9rem; color: #9A2B50; }
.error:not(:empty) { margin-top: .3rem; }
form .button { align-self: flex-start; margin-top: .75rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.status { margin: .75rem 0 0; color: var(--mauve); }

/* ---------- Keuzevenster Bellen of WhatsApp (alleen op aanraakschermen) ---------- */
.choose {
  width: min(92vw, 380px);
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--mauve);
  border-radius: 20px;
  background: var(--ground);
  color: var(--plum);
  text-align: center;
  box-shadow: 0 20px 50px rgba(94, 70, 88, .25);
}
.choose:focus { outline: none; }
.choose::backdrop { background: rgba(94, 70, 88, .45); }
.choose h2 { margin: 0 0 .25rem; font-size: 1.7rem; }
.choose p { margin: 0 0 1.5rem; color: var(--mauve); }
.choose-actions { display: flex; flex-direction: column; gap: .75rem; }
.choose-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
}
.choose-close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--plum);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Terug naar boven ---------- */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--plum);
  border-radius: 50%;
  background: var(--plum);
  color: var(--ground);
  box-shadow: 0 4px 14px rgba(94, 70, 88, .25);
  transition: opacity .25s, visibility .25s;
}

/* Met JavaScript verschijnt de knop pas als je een stukje naar beneden bent */
.js .to-top { opacity: 0; visibility: hidden; }
.js .to-top.visible { opacity: 1; visibility: visible; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 2rem;
  text-align: center;
  font-size: .95rem;
  color: var(--mauve);
}
.site-footer a { color: inherit; }

/* ---------- Rustig bewegen ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plus { transition: none; }
  .to-top { transition: none; }
}

/* ---------- Privacypagina ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 3rem min(2rem, 8vw) 4rem; }
.legal h1 { margin-bottom: 1.5rem; font-size: min(2.6rem, 9vw); }
.legal h2 { margin: 2rem 0 .5rem; font-size: 1.5rem; }
.legal p { margin: 0 0 .75rem; }
.legal ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.legal li { margin: 0; line-height: 1.35; }