/* Webcircuit — aanvullingen voor WordPress (niet in het statische ontwerp).
   Dit bestand wordt door tools/frontend/kopieer-assets.mjs bewaard. */

/* Foutmelding van een module: alleen zichtbaar voor ingelogde redacteuren. */
.wc-modulefout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 24px auto;
  max-width: 1100px;
  padding: 16px 20px;
  border: 2px solid #c62828;
  border-radius: 8px;
  background: #fff5f5;
  color: #5f1313;
  font: 15px/1.5 system-ui, sans-serif;
  position: relative;
  z-index: 5;
}
.wc-modulefout strong { font-size: 16px; color: #c62828; }
.wc-modulefout small { color: #7a4b4b; }
.wc-modulefout a { color: inherit; text-decoration: underline; }

/* De Etch-reset reserveert ruimte voor de scrollbalk; het ontwerp niet (gaf 15 px smallere pagina's). */
html { scrollbar-gutter: auto; }

/* De Etch-reset zet scrollbar-gutter: stable op <html>; het ontwerp niet.
   Met een vaste scrollbalk (Windows) schoof de hele pagina daardoor 15px. */
html { scrollbar-gutter: auto; }

/* Ingelogd: de vaste kop en het megamenu schuiven onder de WordPress-adminbalk. */
body.admin-bar .wc-site__slot { top: 32px !important; }
body.admin-bar .wc-megamenu { top: calc(84px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .wc-site__slot { top: 46px !important; }
  body.admin-bar .wc-megamenu { top: calc(84px + 46px); }
}

/* ------------------------------------------------------------ cookiemelding (SureCookie) in de huisstijl */
/* ID-selectors: SureCookie zet zijn eigen opmaak met hoge specificiteit. Kleuren staan in de SureCookie-instellingen. */
html body #surecookie-public-root,
html body #surecookie-public-root *,
html body #surecookie-preferences-root,
html body #surecookie-preferences-root * {
  font-family: "Poppins", "Poppins Placeholder", sans-serif !important;
  letter-spacing: 0 !important;
}
/* Kaart: zoals de kaarten op de site (ronde hoeken, zachte schaduw, dun groen randje). */
html body #surecookie-public-root .surecookie-public-banner {
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 30px 60px -24px rgba(21, 21, 21, .28), 0 0 0 1px rgba(32, 173, 150, .14) !important;
}
html body #surecookie-public-root .surecookie-banner-heading {
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #171717 !important;
}
html body #surecookie-public-root .surecookie-banner-description {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #5a6675 !important;
}
/* Knoppen: pillen zoals "Neem contact op"; hoofdknop groen, de rest lichtgroen met groene tekst. */
html body #surecookie-public-root .surecookie-btn-base,
html body #surecookie-preferences-root .surecookie-btn-primary,
html body #surecookie-preferences-root .surecookie-btn-outline,
html body #surecookie-preferences-root .surecookie-btn-outline-secondary {
  border-radius: 1000px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  transition: background-color .2s ease, color .2s ease !important;
}
html body #surecookie-public-root .surecookie-accept-btn,
html body #surecookie-public-root .surecookie-decline-btn,
html body #surecookie-public-root .surecookie-preferences-btn {
  background: #eefaf7 !important;
  color: #20ad96 !important;
  border-color: transparent !important;
}
html body #surecookie-public-root .surecookie-accept-all-btn { color: #fff !important; }
/* Voorkeurenvenster: bijknoppen lichtgroen zoals in de banner (de groene hoofdknop blijft). */
html body #surecookie-preferences-root .surecookie-btn-outline,
html body #surecookie-preferences-root .surecookie-btn-outline-secondary {
  background: #eefaf7 !important;
  color: #20ad96 !important;
  border-color: transparent !important;
}
html body #surecookie-public-root .surecookie-btn-base:hover {
  background: #5a6675 !important;
  color: #fff !important;
}
html body #surecookie-public-root .surecookie-accept-all-btn:hover,
html body #surecookie-preferences-root .surecookie-btn-primary:hover { background: #157f6e !important; color: #fff !important; }
html body #surecookie-preferences-root .surecookie-btn-outline:hover,
html body #surecookie-preferences-root .surecookie-btn-outline-secondary:hover { background: #5a6675 !important; color: #fff !important; }
html body #surecookie-public-root .surecookie-btn-base:focus-visible,
html body #surecookie-preferences-root .surecookie-btn-primary:focus-visible,
html body #surecookie-preferences-root .surecookie-btn-outline:focus-visible,
html body #surecookie-preferences-root .surecookie-btn-outline-secondary:focus-visible {
  outline: 2px solid #20ad96 !important;
  outline-offset: 2px !important;
}
/* Voorkeurenvenster: zelfde hoeken als de kaarten. */
html body #surecookie-preferences-root [role="dialog"],
html body #surecookie-preferences-root [class*="modal"][class*="container"] {
  border-radius: 24px !important;
}

/* Gewone pagina (privacy) met meelopende inhoudsopgave: sticky werkt alleen zonder overflow:hidden op de ouders. */
.wc-privacy:has(.wc-kbartikel), .wc-privacy__hoofd:has(.wc-kbartikel) { overflow: clip !important; }
.wc-kbartikel--pagina { padding-top: 0; }
/* Brede tabellen in de privacyverklaring: eerste kolom niet smal maken, op mobiel horizontaal scrollen. */
.wc-privacytabel table { min-width: 640px; }
.wc-privacytabel th { width: auto !important; white-space: nowrap; background: #f1faf7; }
.wc-privacytabel td { vertical-align: top; font-size: 14px; line-height: 1.55; }
.wc-privacytabel td:first-child { width: 36%; }
.wc-kbartikel--pagina .wc-kbartikel__tekst h3 { margin-top: 32px; }

/* Nieuws: de pen ligt naast de krant in plaats van los onderin. */
.wc-nieuws .wc-phero__deel--5 { left: 63%; top: 66%; }
@media (max-width: 809.98px) {
  .wc-nieuws .wc-phero__deel--5 { left: 63%; top: 66%; }
}

/* Ruimte tussen de paginatekst en het donkere afsluitblok. */
.wc-kbartikel--pagina { padding-bottom: 120px; }
@media (max-width: 809.98px) { .wc-kbartikel--pagina { padding-bottom: 72px; } }

/* Video in een bericht (Fluent Player) */
.wc-video { position: relative; margin: 32px 0; border-radius: 20px; overflow: hidden; }
.wc-video__toestemming {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center;
  background: linear-gradient(124deg, rgba(23, 23, 23, .92), rgba(21, 127, 110, .92));
  color: #fff;
}
.wc-video__toestemming p { max-width: 440px; margin: 0; font-size: 15px; line-height: 1.6; color: #fff; }
.wc-video__knop {
  border: 0; border-radius: 1000px; padding: 12px 24px; cursor: pointer;
  background: #20ad96; color: #fff; font: 500 15px/1.2 "Poppins", sans-serif;
  transition: background-color .2s ease;
}
.wc-video__knop:hover { background: #157f6e; }
.wc-video__knop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Inhoudsopgave links: geen zichtbare scrollbalk (lange lijsten blijven met muis/trackpad scrollbaar). */
.wc-kbartikel__zij { scrollbar-width: none; -ms-overflow-style: none; }
.wc-kbartikel__zij::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* De speler vult zijn 16:9-vak (de site-reset liet het iframe op de standaardhoogte van 150px staan). */
.wc-video media-player { display: block; width: 100%; height: 100%; }
.wc-video media-provider { width: 100%; height: 100%; }
/* Video zonder toestemming: alleen het lokale voorbeeldplaatje met de melding erover. */
.wc-video--wacht { aspect-ratio: 16 / 9; background: #171717; }
.wc-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }