/* ==========================================================================
   theme.css — WordPress-specifieke aanvullingen op het designsysteem
   ========================================================================== */

/* ---------- Header ---------- */
.site-header__acties { display: flex; align-items: center; gap: 0.5rem; }
.menu .current_page_item > a { background: var(--kleur-accent-zacht); color: var(--teal-800); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

/* ---------- Gedeelde lay-outhulpjes ---------- */
.paneel {
  display: grid;
  gap: var(--ruimte-m);
  padding: var(--ruimte-l);
  border-radius: var(--rond-xl);
  background: var(--kleur-oppervlak);
  box-shadow: var(--schaduw-s);
}
.twee-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--ruimte-xl);
  align-items: center;
}
.sectie--compact { padding-block: var(--ruimte-xl); }
.sectie__vervolg { margin-top: var(--ruimte-l); text-align: center; }
.hero__beeldvak { position: relative; min-width: 0; }

/* De golf boven de footer krijgt de kleur van de sectie erboven */
.golf--cacao { background: var(--kleur-achtergrond); }
.home .golf--cacao,
.is-tarieven .golf--cacao { background: var(--kleur-achtergrond-koel); }

/* ---------- Paginakop ---------- */
.paginakop {
  position: relative;
  isolation: isolate;
  padding-block: var(--ruimte-xl) var(--ruimte-l);
}
/* Gloed die naar onderen in de pagina oplost, zonder zichtbare rand */
.paginakop::before {
  content: "";
  position: absolute;
  inset: 0 0 -8rem;
  z-index: -1;
  background-image: var(--verloop-gloed);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  pointer-events: none;
}
.paginakop__raster { display: grid; gap: var(--ruimte-xl); align-items: center; }
.paginakop--beeld .paginakop__raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.paginakop__tekst { display: grid; gap: var(--ruimte-s); justify-items: start; max-width: 46rem; }
.paginakop__beeld { aspect-ratio: 4 / 5; max-width: 26rem; justify-self: end; width: 100%; }
@media (max-width: 52rem) {
  .paginakop--beeld .paginakop__raster { grid-template-columns: 1fr; }
  .paginakop__beeld { aspect-ratio: 5 / 4; justify-self: stretch; max-width: none; }
}
.pagina { padding-block: var(--ruimte-l) var(--ruimte-2xl); }

/* ---------- Prijs ---------- */
.prijs__vanaf { font-family: var(--font-tekst); font-size: var(--tekst-xs); color: var(--kleur-tekst-zacht); margin-right: 0.15em; }
.prijs__tot { margin-left: 0.05em; }

/* ---------- Cadeaubon-band ---------- */
.band__titel { font-size: var(--tekst-3xl); line-height: var(--regel-strak); }
.band__titel .hand { display: block; font-size: 0.6em; margin: 0.15em 0 0 0.8em; }

/* ---------- Tarieven ---------- */
.tarieven { padding-top: var(--ruimte-l); }
.tarieven__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--ruimte-xl);
  align-items: start;
}
.tarieven__lijsten { display: grid; gap: var(--ruimte-xl); min-width: 0; }
.tarieven__groep { display: grid; gap: var(--ruimte-s); }
.tarieven__titel { font-size: var(--tekst-2xl); }
.tarieven__zijkant {
  position: sticky;
  top: 7rem;
  display: grid;
  gap: var(--ruimte-s);
  justify-items: start;
}
.tarieven__zijkant .melding { width: 100%; }
.prijslijst__omschrijving { margin-top: 0.2rem; }
@media (max-width: 60rem) {
  .tarieven__raster { grid-template-columns: 1fr; }
  .tarieven__zijkant { position: static; }
}

/* ---------- Contact ---------- */
.contact__tekst { display: grid; gap: var(--ruimte-s); justify-items: start; }
.contact__gegevens { gap: var(--ruimte-l); }

/* ---------- Footer ---------- */
.site-footer__kolom { display: grid; gap: 0.5rem; align-content: start; }
.site-footer .label { color: var(--zand-400); }
.site-footer__merk { font-family: var(--font-kop); font-size: var(--tekst-xl); color: var(--zand-50); line-height: 1.2; }
.site-footer__merk .hand { color: var(--zand-400); margin-left: 0.15em; }
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }

/* ---------- Editorinhoud (blokken in de_content) ---------- */
.entry-content img,
.entry-content .wp-block-image { margin-block: var(--ruimte-l); }
/* Staande foto's houden hun vorm: begrensd in hoogte en gecentreerd, nooit bijgesneden. */
.entry-content .wp-block-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(30rem, 75vh); margin-inline: auto; border-radius: var(--rond-l); }
/* Foto rechts naast de tekst (bijv. het portret bij "Even voorstellen"). */
/* Beeld zonder kiezelvorm (bijv. de cadeaubon met eigen schaduw). */
.entry-content .wp-block-image.is-los img { border-radius: 0; max-height: none; width: 100%; }
.entry-content .wp-block-image .alignright { display: block; float: right; width: min(40%, 16rem); margin: 0.4rem 0 var(--ruimte-m) var(--ruimte-l); }
.entry-content .wp-block-image .alignright img { width: 100%; max-height: none; }
.entry-content .wp-block-image:has(> .alignright) { margin-block: 0; }
.entry-content h2 { clear: both; }
@media (max-width: 36rem) {
  .entry-content .wp-block-image .alignright { float: none; width: min(70%, 15rem); margin: 0 auto var(--ruimte-l); }
}
.entry-content .wp-block-image.is-style-rounded img { border-radius: var(--rond-kiezel); }
.entry-content figcaption,
.wp-caption-text { margin-top: 0.6rem; font-size: var(--tekst-xs); color: var(--kleur-tekst-stil); text-align: center; }
.entry-content .alignwide { max-width: min(var(--container), 100vw - 2 * var(--goot)); margin-inline: calc(50% - min(var(--container), 100vw - 2 * var(--goot)) / 2); }
.entry-content .alignfull { max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignleft { float: left; margin: 0.3em var(--ruimte-m) var(--ruimte-s) 0; }
.alignright { float: right; margin: 0.3em 0 var(--ruimte-s) var(--ruimte-m); }
.aligncenter { margin-inline: auto; }

/* Gutenberg-knoppen krijgen de stijl van .knop */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--rond-pil);
  background: var(--verloop-knop);
  color: var(--kleur-tekst-omgekeerd);
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-half);
  text-decoration: none;
  box-shadow: var(--schaduw-teal);
  transition: transform var(--duur-m) var(--curve-veer), box-shadow var(--duur-m) var(--curve-zacht);
}
.wp-block-button__link:hover { color: var(--kleur-tekst-omgekeerd); transform: translateY(var(--zweef)); }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--kleur-tekst); box-shadow: inset 0 0 0 1px var(--kleur-lijn-sterk); }

.wp-block-separator { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--kleur-lijn-sterk) 20%, var(--kleur-lijn-sterk) 80%, transparent); }
.wp-block-quote { border-left: 2px solid var(--zand-400); padding-left: var(--ruimte-m); }
.wp-block-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wp-block-table td, .wp-block-table th { padding: 0.75rem 0.5rem; border: 0; border-bottom: 1px solid var(--kleur-lijn); text-align: left; }

/* Paletkleuren uit de editor */
.has-cacao-color { color: var(--cacao-800); }
.has-cacao-zacht-color { color: var(--cacao-600); }
.has-teal-color { color: var(--teal-600); }
.has-zandgoud-color { color: var(--zand-700); }
.has-cacao-background-color { background-color: var(--cacao-800); }
.has-teal-background-color { background-color: var(--teal-600); }
.has-teal-zacht-background-color { background-color: var(--teal-100); }
.has-zandgoud-background-color { background-color: var(--zand-500); }
.has-zand-background-color { background-color: var(--zand-200); }
.has-oppervlak-background-color { background-color: var(--zand-50); }
.has-background { padding: var(--ruimte-m); border-radius: var(--rond-l); }

/* ---------- Paginering ---------- */
.pagination, .paginering { margin-top: var(--ruimte-xl); }
.nav-links, .paginering { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.page-numbers, .paginering a, .paginering > span {
  display: inline-grid; place-items: center;
  min-width: 2.75rem; height: 2.75rem; padding-inline: 0.9rem;
  border-radius: var(--rond-pil);
  background: var(--kleur-oppervlak);
  box-shadow: var(--schaduw-s);
  text-decoration: none;
  font-size: var(--tekst-s);
}
.page-numbers.current { background: var(--kleur-accent-zacht); color: var(--teal-800); }

/* ---------- Hero: label staat in de h1 (vindbaarheid), maar oogt als label ---------- */
.hero__label { display: block; margin-bottom: 0.9rem; font-size: var(--tekst-xs); line-height: 1.5; letter-spacing: var(--spatie-kapitaal); }

/* ---------- Details-blok (veelgestelde vragen) in de editor-inhoud ---------- */
.entry-content .wp-block-details {
  border-radius: var(--rond-m);
  background: var(--kleur-oppervlak);
  box-shadow: var(--schaduw-s);
  transition: box-shadow var(--duur-m) var(--curve-zacht);
  interpolate-size: allow-keywords;
}
.entry-content .wp-block-details + .wp-block-details { margin-top: var(--ruimte-2xs); }
.entry-content .wp-block-details[open] { box-shadow: var(--schaduw-m); }
.entry-content .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-s);
  padding: var(--ruimte-s) var(--ruimte-m);
  font-family: var(--font-kop);
  font-size: var(--tekst-l);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  border-radius: var(--rond-m);
}
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::after {
  content: "";
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--teal-600), var(--teal-600)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--teal-600), var(--teal-600)) center / 1.5px 12px no-repeat,
    var(--kleur-accent-zacht);
  transition: transform var(--duur-m) var(--curve-veer), background-size var(--duur-m) var(--curve-zacht);
}
.entry-content .wp-block-details[open] summary::after { transform: rotate(180deg); background-size: 12px 1.5px, 1.5px 0, auto; }
.entry-content .wp-block-details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size var(--duur-l) var(--curve-adem), opacity var(--duur-l) var(--curve-adem), content-visibility var(--duur-l) allow-discrete;
}
.entry-content .wp-block-details[open]::details-content { block-size: auto; opacity: 1; }
.entry-content .wp-block-details > :not(summary) { padding-inline: var(--ruimte-m); color: var(--kleur-tekst-zacht); }
.entry-content .wp-block-details > :last-child { padding-bottom: var(--ruimte-m); }
.entry-content .wp-block-details > :not(summary) + * { margin-top: 0.8em; }

/* ---------- Editor-inhoud: kolommen, foto naast tekst, stappen ---------- */
.entry-content .wp-block-columns { gap: var(--ruimte-l); }
.entry-content .wp-block-media-text { gap: var(--ruimte-l); }
.entry-content .wp-block-media-text__media img { border-radius: var(--rond-kiezel); box-shadow: var(--schaduw-m); }
.entry-content .wp-block-group.has-background { padding: var(--ruimte-l); border-radius: var(--rond-xl); }
/* Stappen: nummer in een zachte cirkel links, titel (vet) erboven, uitleg eronder.
   Een verticale lijn verbindt de cirkels, zodat het als één verloop leest. */
.entry-content ol.stappen {
  list-style: none;
  padding: 0;
  counter-reset: stap;
  display: grid;
  gap: var(--ruimte-m);
}
.entry-content ol.stappen li {
  position: relative;
  counter-increment: stap;
  min-height: 2.75rem;
  padding-left: 4rem;
  color: var(--kleur-tekst-zacht);
  line-height: 1.65;
}
.entry-content ol.stappen li + li { margin-top: 0; }
.entry-content ol.stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--kleur-accent-zacht);
  color: var(--teal-800);
  font-family: var(--font-kop);
  font-size: var(--tekst-l);
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.entry-content ol.stappen li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.375rem - 1px);
  top: 3.25rem;
  bottom: calc(-1 * var(--ruimte-m) + 0.5rem);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--teal-200), rgb(181 225 221 / 0.2));
}
.entry-content ol.stappen li strong {
  display: block;
  padding-top: 0.55rem;
  margin-bottom: 0.15rem;
  font-family: var(--font-kop);
  font-size: var(--tekst-l);
  font-weight: 400;
  line-height: 1.3;
  color: var(--kleur-tekst);
}
.entry-content h2[id], .entry-content h3[id] { scroll-margin-top: 8rem; }
.entry-content .inhoudsopgave { display: flex; flex-wrap: wrap; gap: var(--ruimte-2xs); padding: 0; list-style: none; }
.entry-content .inhoudsopgave li + li { margin-top: 0; }
.entry-content .inhoudsopgave a {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  border-radius: var(--rond-pil);
  background: var(--kleur-accent-zacht);
  color: var(--teal-800);
  font-size: var(--tekst-s);
  text-decoration: none;
  transition: background-color var(--duur-m) var(--curve-zacht);
}
.entry-content .inhoudsopgave a:hover { background: var(--teal-200); }

.entry-content ol.stappen li strong + br { display: none; }

/* ---------- Vertrouwen: chips in de hero ---------- */
.hero__vertrouwen { list-style: none; margin: 0; padding: 0; }
.hero__vertrouwen .chip { background: rgb(255 255 255 / 0.55); }
.hero__vertrouwen .chip { gap: 0.5em; padding: 0.4rem 0.95rem 0.4rem 0.8rem; }

/* ---------- ProVoet-badge: officieel logo in eigen kleuren op een licht kaartje ---------- */
.provoet {
  display: inline-grid;
  justify-items: start;
  gap: 0.35rem;
  justify-self: start;
  margin-top: 0.75rem;
  padding: 0.8rem 1.1rem 0.9rem;
  border-radius: var(--rond-l);
  background: var(--zand-50);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.45);
  color: var(--kleur-tekst-zacht);
  text-decoration: none;
  transition: transform var(--duur-m) var(--curve-veer), box-shadow var(--duur-m) var(--curve-zacht);
}
.site-footer .provoet { color: var(--kleur-tekst-zacht); text-decoration: none; }
.provoet:hover { transform: translateY(var(--zweef)); box-shadow: 0 16px 30px -14px rgb(0 0 0 / 0.5); color: var(--kleur-tekst-zacht); }
.provoet__label { font-size: var(--tekst-xs); letter-spacing: 0.04em; }
.provoet__logo { display: block; width: 8.5rem; height: auto; }
.provoet--licht { margin-top: 0; box-shadow: var(--schaduw-s); }
.provoet--licht:hover { box-shadow: var(--schaduw-m); }

/* Focusring op de donkere footer: zandgoud in plaats van teal (min. 3:1 op cacao) */
.site-footer { --focus-ring: 0 0 0 2px var(--cacao-800), 0 0 0 4.5px var(--zand-400); }

/* Cadeaubon-band: sluier iets voller achter de tekst, zodat het beeld nooit door de tekst heen spreekt */
.band::before { background: linear-gradient(100deg, rgb(251 247 241 / 0.96) 0%, rgb(251 247 241 / 0.9) 48%, rgb(251 247 241 / 0.08) 100%); }

/* Kolommen mogen smaller worden dan hun langste woord (reflow en tekstafstand) */
.tarieven__groep, .tarieven__groep > *, .band__inhoud, .hero__tekst { min-width: 0; }

/* Footer-links worden wit bij hover; de ProVoet-badge staat op een licht kaartje en houdt zijn tekstkleur */
.site-footer .provoet:hover,
.site-footer .provoet:focus-visible { color: var(--kleur-tekst-zacht); }

/* Paginakop: een veertje aan de rand, zacht zwevend (zie VEER in components.css) */
.paginakop::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--ruimte-l);
  left: max(0.5rem, calc(50% - var(--container) / 2 - 4.5rem));
  width: clamp(4rem, 7vw, 6.5rem);
  aspect-ratio: 17 / 31.2;
  background: var(--zand-500);
  -webkit-mask: url("../img/veer.svg") no-repeat center / contain;
  mask: url("../img/veer.svg") no-repeat center / contain;
  opacity: 0.16;
  --veer-hoek: -20deg;
  pointer-events: none;
  animation: vz-zweven 22s var(--curve-adem) infinite;
}
@media (prefers-reduced-motion: reduce) { .paginakop::after { animation: none; transform: rotate(-20deg); } }