/* ==========================================================================
   Starter: voormalige snippets (CSS). Per site vervangen door de eigen snippets uit de oude site.
   Overgenomen op 05-10-2026, inhoud ongewijzigd tenzij hieronder vermeld
   (sectie 2, formulieren, is in 0.9.19 herschreven).
   Laadt alleen als Fluent Snippets uit staat.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Complianz close fix
   -------------------------------------------------------------------------- */
.cmplz-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmplz-close svg {
    width: 16px;
    height: 16px;
    min-width: unset;
    min-height: unset;
}

.cmplz-close {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.cmplz-close svg {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    fill: #111 !important; /* zwart icoon of pas aan naar jouw kleur */
}


/* --------------------------------------------------------------------------
   2. Formulieren (Fluent Forms), herschreven in 0.9.19
   De formulieren erven de stijl van het thema (Fluent-instelling "inherit theme"),
   dus zonder deze regels tekent de browser zijn eigen velden (harde inset-rand).
   - Invoervelden: wit, dunne lichte rand, geen schaduw. In donkere modus een
     donker veld met witte tekst. Focus: blauwe rand met zachte ring.
   - Verzendknop: precies de knop .btn--primary van ACSS, overal gecentreerd.
     De hoge specificiteit wint van de CSS die Fluent Forms per formulier
     meestuurt (form.fluent_form_N .wpf_has_custom_css.ff-btn-submit), zonder !important.
   Niet voor het conversational form (Deel je tip); dat heeft een eigen opmaak.
   -------------------------------------------------------------------------- */
.fluentform {
  --starter-veld-bg: light-dark(#fff, color-mix(in oklch, #000 30%, transparent));
  --starter-veld-tekst: var(--text-dark);
  --starter-veld-rand: light-dark(color-mix(in oklch, var(--neutral-light) 75%, #fff), color-mix(in oklch, #fff 22%, transparent));
}
.fluentform .ff-el-form-control {
  box-sizing: border-box;
  inline-size: 100%;
  padding: 0.5em 0.75em;
  border: 1px solid var(--starter-veld-rand);
  border-radius: 10px;
  background-color: var(--starter-veld-bg);
  color: var(--starter-veld-tekst);
  box-shadow: none;
  font: inherit;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.fluentform .ff-el-form-control::placeholder {
  color: var(--neutral);
  opacity: 1;
}
.fluentform .ff-el-form-control:hover {
  border-color: var(--neutral-semi-light);
}
.fluentform .ff-el-form-control:focus {
  border-color: var(--secondary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--secondary) 30%, transparent);
}
.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--fluentform-danger, var(--danger));
}

/* Verzendknop: altijd in het midden */
.fluentform .ff-el-group.ff_submit_btn_wrapper {
  text-align: center;
}
.fluentform form.frm-fluent-form .ff-btn.ff-btn-submit.ff-btn-submit {
  color-scheme: light;
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--primary-hover);
  --focus-color: var(--primary-light);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  inline-size: auto;
  min-inline-size: var(--btn-min-width);
  margin: 0;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border-width: var(--btn-border-width, 2px);
  border-style: var(--btn-border-style, solid);
  border-color: var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  background: var(--btn-background);
  color: var(--btn-text-color);
  font-family: inherit;
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  text-align: center;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
  transition: var(--btn-transition, var(--transition));
}
@media (hover: hover) and (pointer: fine) {
  .fluentform form.frm-fluent-form .ff-btn.ff-btn-submit.ff-btn-submit:hover {
    background: var(--btn-background-hover);
    border-color: var(--btn-border-color-hover);
    color: var(--btn-text-color-hover);
    opacity: 1;
  }
}
.fluentform form.frm-fluent-form .ff-btn.ff-btn-submit.ff-btn-submit:focus {
  opacity: 1;
}

/* Vervallen in 0.9.19: ".ff_btn_no_style.btn--primary { ... !important }" (alleen voor knoppen met
   de class btn--primary, dus niet op Contact) en ".form-starter-verhaal .bricks-button { @apply btn--primary; }"
   (@apply werkt niet in gewone CSS en had nooit effect). */


/* --------------------------------------------------------------------------
   3. Balanced columns
   -------------------------------------------------------------------------- */
.col-2-balanced {
  column-count: 2;
  column-gap: 2rem;
  column-fill: balance;
}

@media (max-width: 768px) {
  .col-2-balanced {
    columns: 1;
  }
}


/* --------------------------------------------------------------------------
   4. Background page colors
   -------------------------------------------------------------------------- */
.page-blue-light { background: linear-gradient(135deg, light-dark(var(--secondary-light), var(--secondary-ultra-light)), var(--secondary-ultra-light)); }
.page-green-light { background: linear-gradient(135deg, var(--accent-ultra-light), light-dark(var(--tertiary-light), var(--tertiary-ultra-light))); }
.page-purple-light { background: linear-gradient(45deg, light-dark(var(--secondary-light), var(--secondary-ultra-light)), var(--primary-ultra-light)); }
.page-magenta-light { background: linear-gradient(135deg, var(--primary-ultra-light), var(--secondary-ultra-light)); }
.page-very-light { background: linear-gradient(135deg, var(--primary-ultra-light), light-dark(var(--tertiary-light), var(--tertiary-ultra-light))); }
.page-green-blue { background: linear-gradient(45deg, light-dark(var(--secondary-light-trans-90), var(--secondary-ultra-light)), light-dark(var(--tertiary-light), var(--tertiary-ultra-light))); }
.page-ultra-light { background: linear-gradient(135deg, var(--primary-ultra-light), light-dark(var(--secondary-light), var(--secondary-ultra-light))); }
.page-magenta-heavy { background: linear-gradient(45deg, var(--primary-ultra-light), light-dark(var(--primary-semi-light), var(--primary-ultra-light))); }


/* --------------------------------------------------------------------------
   5. ACSS 3 -> 4 overbrugging (tijdelijk)
   Bootst ACSS 3-classes en -variabelen na die in ACSS 4 zijn verdwenen,
   met ACSS 4-tokens. Verwijderen zodra de scan 0 treffers geeft.
   -------------------------------------------------------------------------- */

/* Variabelen */
:root {
  --secondary-trans-80: color-mix(in oklch, var(--secondary) 80%, transparent);
  --black-trans-20: color-mix(in oklch, var(--black) 20%, transparent);
  --black-trans-50: color-mix(in oklch, var(--black) 50%, transparent);
  --tertiary-trans-20: color-mix(in oklch, var(--tertiary) 20%, transparent);
  --white-trans-10: color-mix(in oklch, var(--white) 10%, transparent);
  --white-trans-30: color-mix(in oklch, var(--white) 30%, transparent);
  --white-trans-40: color-mix(in oklch, var(--white) 40%, transparent);
  --white-trans-50: color-mix(in oklch, var(--white) 50%, transparent);
  --primary-ultra-dark-trans-90: color-mix(in oklch, var(--primary-ultra-dark) 90%, transparent);
  --secondary-light-trans-90: color-mix(in oklch, var(--secondary-light) 90%, transparent);
  --width-s: calc(var(--content-width) * 0.2);
  --width-l: calc(var(--content-width) * 0.6);
  --width-xl: calc(var(--content-width) * 0.8);
}

/* Utility classes */
.text--primary.text--primary, .text--primary.text--primary :where(h1,h2,h3,h4,h5,h6) { color: var(--primary); }
.text--secondary.text--secondary, .text--secondary.text--secondary :where(h1,h2,h3,h4,h5,h6) { color: var(--secondary); }
.text--white.text--white, .text--white.text--white :where(h1,h2,h3,h4,h5,h6) { color: var(--white); }
.text--tertiary-dark.text--tertiary-dark, .text--tertiary-dark.text--tertiary-dark :where(h1,h2,h3,h4,h5,h6) { color: var(--tertiary-dark); }
.text--500.text--500 { font-weight: 500; }
.text--bold.text--bold { font-weight: 600; }
.text--center.text--center { text-align: center; }
.rounded--l.rounded--l { border-radius: var(--radius-l); }
.rounded--xl.rounded--xl { border-radius: var(--radius-xl); }
.rounded--xxl.rounded--xxl { border-radius: var(--radius-xxl); }
.padding--xs.padding--xs { padding: var(--space-xs); }
.padding--l.padding--l { padding: var(--space-l); }
.padding--xl.padding--xl { padding: var(--space-xl); }
.padding--xxl.padding--xxl { padding: var(--space-xxl); }
.width--m.width--m:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.4); max-inline-size: 100%; }
.width--l.width--l:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.6); max-inline-size: 100%; }
.width--xl.width--xl:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.8); max-inline-size: 100%; }
.width--xxl.width--xxl:not([class*="breakout--"]) { inline-size: calc(var(--content-width) * 0.9); max-inline-size: 100%; }
.bg--white.bg--white { background-color: var(--white); }
@media (max-width: 768px) { .self--stretch-m.self--stretch-m { align-self: stretch; } }
.aspect--16-9.aspect--16-9 { aspect-ratio: 16 / 9; }
.link--secondary-semi-dark.link--secondary-semi-dark { --link-color: var(--secondary-semi-dark); --link-color-hover: var(--secondary-dark); }
.grid--auto-1-3.grid--auto-1-3 { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr 3fr; }
@media (max-width: 768px) { .grid--auto-1-3.grid--auto-1-3 { grid-template-columns: 1fr; } }
.grid--auto-3-1.grid--auto-3-1 { display: grid; gap: var(--grid-gap); grid-template-columns: 3fr 1fr; }
@media (max-width: 768px) { .grid--auto-3-1.grid--auto-3-1 { grid-template-columns: 1fr; } }