/*
  ThuisDichtbij — huisstijl voor de Silktide Consent Manager.

  Laadt ná silktide-consent-manager.css en overschrijft uitsluitend de
  vormgeving. De consentlogica, de consent-ID's (noodzakelijk, analytics,
  marketing) en de Google Consent Mode-signalen blijven ongemoeid.

  Kleuren: donkergroen #203325, crème #F5ECE7, donkere tekst #051C0E.
  Typografie: Lora (lopende tekst) en Playfair Display (koppen), gelijk
  aan de rest van de site.

  Selectors zijn bewust één niveau specifieker dan die van Silktide
  (#stcm-wrapper #stcm-banner ... in plaats van #stcm-wrapper ...), zodat
  overschrijven lukt zonder !important.
*/

/* --------------------------------
   Variabelen
-------------------------------- */
#stcm-wrapper {
  --boxShadow: 0 12px 40px rgba(5, 28, 14, 0.14);
  --fontFamily: inherit;
  --primaryColor: #203325;
  --backgroundColor: #F5ECE7;
  --textColor: #051C0E;
  --backdropBackgroundColor: rgba(5, 28, 14, 0.25);
  --backdropBackgroundBlur: 2px;
  --iconColor: #F5ECE7;
  --iconBackgroundColor: #203325;

  /* Afgeleide tinten, zodat randen en hover-states subtiel blijven. */
  --tdb-border: rgba(32, 51, 37, 0.12);
  --tdb-border-strong: rgba(32, 51, 37, 0.34);
  --tdb-wash: rgba(32, 51, 37, 0.06);
  --tdb-radius: 12px;

  /* --fontFamily is 'inherit'; deze regel bepaalt waar naartoe geërfd wordt. */
  font-family: "Lora", Georgia, "Times New Roman", serif;
}

/* --------------------------------
   Focus
-------------------------------- */
/*
  Silktide zet bij focus een vrijwel zwarte ring en draait de hoekradius
  terug naar 5px, waardoor knoppen van vorm veranderen zodra ze focus
  krijgen. Hier blijft de vorm intact en is de ring donkergroen: rustiger,
  en nog steeds duidelijk zichtbaar voor toetsenbordgebruik.
*/
#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus {
  border-radius: var(--tdb-radius);
  box-shadow: 0 0 0 2px var(--backgroundColor), 0 0 0 4px var(--primaryColor);
}

#stcm-wrapper #stcm-banner .stcm-preferences-button:focus,
#stcm-wrapper #stcm-banner a.stcm-logo:focus,
#stcm-wrapper #stcm-modal .stcm-modal-close:focus {
  border-radius: 8px;
}

#stcm-wrapper #stcm-modal .stcm-toggle:focus-within {
  box-shadow: 0 0 0 2px var(--backgroundColor), 0 0 0 4px var(--primaryColor);
}

#stcm-wrapper #stcm-icon:focus {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #F5ECE7, 0 0 0 4px var(--primaryColor);
}

/* Bij muisgebruik hoeft de ring niet te verschijnen; bij toetsenbord wel. */
#stcm-wrapper a:focus:not(:focus-visible),
#stcm-wrapper #stcm-banner button:focus:not(:focus-visible),
#stcm-wrapper #stcm-modal button:focus:not(:focus-visible),
#stcm-wrapper #stcm-icon:focus:not(:focus-visible) {
  box-shadow: none;
}

/* --------------------------------
   Banner
-------------------------------- */
#stcm-wrapper #stcm-banner {
  padding: 30px 32px;
  border-radius: 16px;
  border: 1px solid var(--tdb-border);
  box-shadow: var(--boxShadow);
  max-height: calc(100vh - 32px);
}

#stcm-wrapper #stcm-banner p {
  font-size: 17px;
  line-height: 28px;
  color: var(--textColor);
  margin: 0 0 4px;
}

/* De begeleidende tekst mag iets rustiger zijn dan de koptekst. */
#stcm-wrapper #stcm-banner p + p {
  color: rgba(5, 28, 14, 0.78);
}

#stcm-wrapper #stcm-banner a {
  color: var(--primaryColor);
  background-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

#stcm-wrapper #stcm-banner a:hover {
  color: var(--textColor);
}

#stcm-wrapper #stcm-banner .stcm-actions {
  gap: 12px;
  margin-top: 26px;
}

/* --------------------------------
   Knoppen — gedeelde basis
-------------------------------- */
#stcm-wrapper #stcm-banner .stcm-button,
#stcm-wrapper #stcm-modal .stcm-button {
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 26px;
  border-radius: var(--tdb-radius);
  border: 1px solid transparent;
  /* Nederlandse labels zijn langer; ze horen op één regel te blijven staan. */
  white-space: nowrap;
  transition: background-color 300ms ease, color 300ms ease,
    border-color 300ms ease, opacity 300ms ease;
}

/* Primair: "Alles accepteren" en "Voorkeuren opslaan". */
#stcm-wrapper #stcm-banner .stcm-accept-all,
#stcm-wrapper #stcm-modal .stcm-modal-save {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--backgroundColor);
}

#stcm-wrapper #stcm-banner .stcm-accept-all:hover,
#stcm-wrapper #stcm-modal .stcm-modal-save:hover {
  background-color: var(--textColor);
  border-color: var(--textColor);
  color: var(--backgroundColor);
}

/* Secundair: "Alleen noodzakelijk" — duidelijk, maar niet dominant. */
#stcm-wrapper #stcm-banner .stcm-reject-all,
#stcm-wrapper #stcm-modal .stcm-modal-reject-all {
  background-color: transparent;
  border-color: var(--tdb-border-strong);
  color: rgba(32, 51, 37, 0.85);
}

#stcm-wrapper #stcm-banner .stcm-reject-all:hover,
#stcm-wrapper #stcm-modal .stcm-modal-reject-all:hover {
  background-color: var(--tdb-wash);
  border-color: var(--primaryColor);
  color: var(--primaryColor);
}

/* Tertiair: "Voorkeuren" — een tekstknop, visueel het rustigst. */
#stcm-wrapper #stcm-banner .stcm-preferences-button {
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  padding: 6px 0;
  color: rgba(32, 51, 37, 0.7);
  transition: color 300ms ease;
}

#stcm-wrapper #stcm-banner .stcm-preferences-button span {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(32, 51, 37, 0.3);
}

#stcm-wrapper #stcm-banner .stcm-preferences-button:hover,
#stcm-wrapper #stcm-banner .stcm-preferences-button span:hover {
  color: var(--primaryColor);
}

/* Het Silktide-logo hoort op de achtergrond te blijven. */
#stcm-wrapper #stcm-banner a.stcm-logo {
  width: 28px;
  height: 28px;
  opacity: 0.32;
  fill: var(--primaryColor);
  transition: opacity 300ms ease;
}

#stcm-wrapper #stcm-banner a.stcm-logo:hover {
  opacity: 0.6;
}

/* --------------------------------
   Voorkeurenscherm
-------------------------------- */
#stcm-wrapper #stcm-modal {
  padding: 34px;
  border-radius: 16px;
  border: 1px solid var(--tdb-border);
  box-shadow: var(--boxShadow);
}

#stcm-wrapper #stcm-modal h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--textColor);
}

#stcm-wrapper #stcm-modal header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tdb-border);
}

#stcm-wrapper #stcm-modal section {
  margin-top: 26px;
}

#stcm-wrapper #stcm-modal legend {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--textColor);
  margin: 0 0 6px;
}

#stcm-wrapper #stcm-modal p {
  font-size: 16px;
  line-height: 26px;
  color: rgba(5, 28, 14, 0.78);
}

/* Elke consentcategorie krijgt lucht en een fijne scheidingslijn. */
#stcm-wrapper #stcm-modal fieldset {
  padding-bottom: 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--tdb-border);
}

#stcm-wrapper #stcm-modal fieldset:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

#stcm-wrapper #stcm-modal .stcm-modal-close {
  background: transparent;
  border-radius: 50%;
  color: var(--primaryColor);
  transition: background-color 300ms ease;
}

#stcm-wrapper #stcm-modal .stcm-modal-close:hover {
  background-color: var(--tdb-wash);
}

#stcm-wrapper #stcm-modal .stcm-modal-close svg {
  fill: var(--primaryColor);
}

#stcm-wrapper #stcm-modal footer {
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--tdb-border);
}

#stcm-wrapper #stcm-modal footer a.stcm-credit-link {
  font-size: 14px;
  color: rgba(32, 51, 37, 0.45);
}

#stcm-wrapper #stcm-modal footer a.stcm-credit-link:hover {
  color: var(--primaryColor);
}

/* --------------------------------
   Schakelaars
-------------------------------- */
#stcm-wrapper #stcm-modal .stcm-toggle,
#stcm-wrapper #stcm-modal .stcm-toggle-track {
  height: 32px;
  width: 68px;
}

/* Uit: gedempt groengrijs, zodat het crème label leesbaar blijft. */
#stcm-wrapper #stcm-modal .stcm-toggle-track {
  background: rgba(5, 28, 14, 0.45);
  transition: background-color 300ms ease;
}

/* Aan: de donkergroene accentkleur van de huisstijl. */
#stcm-wrapper #stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
  background: var(--primaryColor);
}

#stcm-wrapper #stcm-modal .stcm-toggle-thumb {
  height: 28px;
  width: 28px;
  background: var(--backgroundColor);
  box-shadow: 0 1px 3px rgba(5, 28, 14, 0.2);
}

#stcm-wrapper #stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-thumb {
  left: calc(100% - 30px);
}

/*
  Silktide maakt een vastgezette schakelaar volledig grijs (grayscale).
  Hier blijft hij donkergroen, maar gedempt: zichtbaar aan én duidelijk
  niet aanpasbaar.
*/
#stcm-wrapper #stcm-modal .stcm-toggle input:disabled + .stcm-toggle-track {
  filter: none;
  opacity: 0.78;
}

#stcm-wrapper #stcm-modal .stcm-toggle-off,
#stcm-wrapper #stcm-modal .stcm-toggle-on {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  top: 8px;
  color: var(--backgroundColor);
}

#stcm-wrapper #stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-off {
  right: calc(100% - 30px);
}

#stcm-wrapper #stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-on {
  right: calc(100% - 32px);
}

/* --------------------------------
   Cookievoorkeuren-icoon
-------------------------------- */
/*
  Silktide gebruikt --iconColor voor de achtergrond en --iconBackgroundColor
  voor de vulling van het pictogram; die namen zijn in de bron omgedraaid.
  Hier wordt de bedoelde uitkomst vastgelegd: een donkergroene cirkel met
  een crème pictogram.
*/
#stcm-wrapper #stcm-icon {
  width: 52px;
  height: 52px;
  bottom: 20px;
  left: 20px;
  background-color: var(--iconBackgroundColor);
  border: 1px solid var(--tdb-border);
  box-shadow: 0 6px 18px rgba(5, 28, 14, 0.16);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

#stcm-wrapper #stcm-icon:hover {
  background-color: var(--textColor);
  box-shadow: 0 8px 22px rgba(5, 28, 14, 0.22);
}

#stcm-wrapper #stcm-icon.stcm-pos-bottom-right {
  left: auto;
  right: 20px;
}

#stcm-wrapper #stcm-icon svg {
  fill: var(--iconColor);
}

/* --------------------------------
   Mobiel
-------------------------------- */
@media (max-width: 599px) {
  /* Compact en comfortabel; de banner laat bewust een deel van de pagina vrij. */
  #stcm-wrapper #stcm-banner {
    padding: 22px 20px;
    border-radius: 14px;
    width: auto;
    max-width: calc(100% - 24px);
    max-height: 80vh;
  }

  /*
    Alleen de hoekposities worden over de volle breedte uitgerekt. De
    gecentreerde varianten rekenen met een eigen transform; die mag hier
    niet worden doorkruist, anders valt de banner buiten beeld.
  */
  #stcm-wrapper #stcm-banner:not(.stcm-pos-center):not(.stcm-pos-bottom-center) {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }

  #stcm-wrapper #stcm-banner.stcm-pos-center,
  #stcm-wrapper #stcm-banner.stcm-pos-bottom-center {
    width: calc(100% - 24px);
  }

  #stcm-wrapper #stcm-banner p {
    font-size: 16px;
    line-height: 26px;
  }

  #stcm-wrapper #stcm-banner .stcm-actions {
    margin-top: 20px;
  }

  /* Knoppen onder elkaar en ruim genoeg om met de duim te raken. */
  #stcm-wrapper #stcm-banner .stcm-button {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    white-space: normal;
  }

  #stcm-wrapper #stcm-banner .stcm-preferences-button {
    min-height: 44px;
    align-items: center;
  }

  #stcm-wrapper #stcm-modal {
    padding: 24px 20px;
    border-radius: 14px;
    max-height: 88vh;
  }

  #stcm-wrapper #stcm-modal h1 {
    font-size: 24px;
    line-height: 32px;
  }

  #stcm-wrapper #stcm-modal .stcm-consent-row {
    gap: 16px;
  }

  #stcm-wrapper #stcm-modal .stcm-button {
    width: 100%;
    min-height: 48px;
  }

  #stcm-wrapper #stcm-icon {
    width: 48px;
    height: 48px;
    bottom: 16px;
    left: 16px;
  }

  #stcm-wrapper #stcm-icon.stcm-pos-bottom-right {
    left: auto;
    right: 16px;
  }
}

/* --------------------------------
   Zwevend icoon verborgen
-------------------------------- */
/*
  Silktide v2.0.1 kent geen configuratieoptie om het zwevende icoon weg te
  laten; het wordt altijd aangemaakt en met een inline display-waarde
  getoond. Daarom is hier een gerichte override nodig, met !important omdat
  inline styling anders wint. De knop blijft in de DOM bestaan en alle
  consentlogica blijft ongewijzigd; alleen de zichtbaarheid vervalt.
  Het voorkeurenscherm is in plaats daarvan bereikbaar via de footerlink
  "Cookievoorkeuren".
*/
#stcm-wrapper #stcm-icon {
  display: none !important;
}

/* --------------------------------
   Footerlink "Cookievoorkeuren"
-------------------------------- */
/*
  De knop staat tussen de gewone footerlinks en moet daar niet van te
  onderscheiden zijn. Onderstaande regels halen alleen de eigen opmaak van
  een <button> weg; kleur, hover en overgang komen van dezelfde
  Tailwind-klassen als de omliggende links.
*/
.tdb-cookie-preferences {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tdb-cookie-preferences:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/*
  Een comfortabel aanraakgebied op smalle schermen. Het gebied wordt met een
  pseudo-element boven en onder de tekst uitgebreid, zodat de regelhoogte en
  dus de onderlinge afstand in de footer exact gelijk blijft aan die van de
  andere links.
*/
.tdb-cookie-preferences {
  position: relative;
}

@media (max-width: 599px) {
  .tdb-cookie-preferences::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}