/**
 * custom.css — eigen aanvullingen op het thema.
 *
 * Bewust een apart bestand en niet in style.min.css:
 * - style.min.css is de gebouwde variant van style.css. Zonder buildstap moet je
 *   die twee met de hand synchroon houden; aanvullingen daarin raken bij de
 *   eerste hergeneratie kwijt.
 * - Alleen style.min.css wordt ingeladen (zie your_dj_scripts), style.css niet.
 *   Aanpassingen daarin doen dus niets, wat makkelijk verwarring geeft.
 *
 * Dit bestand wordt ná style.min.css ingeladen, zodat overschrijven op volgorde
 * gebeurt en niet met !important.
 */

/* ==========================================================================
   Header-hoogte als variabele
   ==========================================================================
   De header is position:absolute en overlapt de content. De hoogte stond als
   los getal op drie plekken in style.min.css (.header-compensation: 111 / 100 /
   72px). Hier één bron, zodat compensatie en ademruimte niet uit de pas lopen. */
:root {
  --header-height: 111px;
  --header-breathing-space: 40px;
}

@media screen and (max-width: 1599.98px) {
  :root {
    --header-height: 100px;
  }
}

@media screen and (max-width: 767.98px) {
  :root {
    --header-height: 72px;
    --header-breathing-space: 24px;
  }
}

/* ==========================================================================
   Eerste blok onder de header
   ==========================================================================
   Alleen de banner (homepage) had .header-compensation hardcoded. Op pagina's
   die met een ander blok beginnen — zoals /offerte-aanvragen/ — schoof de titel
   strak tegen het menu aan (gemeten: 0px ruimte).

   Dit pakt het op paginaniveau aan in plaats van per blok: het eerste element
   in <main> compenseert de headerhoogte plus ademruimte. Blokken die de
   compensatie zelf al meebrengen blijven ongemoeid. */
main > *:first-child:not(.header-compensation) {
  padding-top: calc(var(--header-height) + var(--header-breathing-space));
}

/* ==========================================================================
   Keuzevelden (radio- en checkboxgroepen)
   ==========================================================================
   Nodig omdat `.form .form-field input:not([type=checkbox])` ook radio's raakt:
   die kregen daardoor de opmaak van een tekstveld (volle breedte, onderrand,
   padding). Beide groepen krijgen hier dezelfde custom controls. */
.form .form-field .wpcf7-checkbox,
.form .form-field .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 14px;
}

.form .form-field .wpcf7-checkbox .wpcf7-list-item,
.form .form-field .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}

.form .form-field .wpcf7-checkbox .wpcf7-list-item label,
.form .form-field .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: #BDBDBD;
  font-size: 14px;
  line-height: 1.56;
  transition: color 0.3s;
}

.form .form-field .wpcf7-checkbox .wpcf7-list-item label:hover,
.form .form-field .wpcf7-radio .wpcf7-list-item label:hover {
  color: #ffffff;
}

.form .form-field .wpcf7-radio input[type=radio],
.form .form-field .wpcf7-checkbox input[type=checkbox] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  background-color: #B8B8B8;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form .form-field .wpcf7-checkbox input[type=checkbox] {
  border-radius: 4px;
  background-size: 12px 12px;
}

.form .form-field .wpcf7-radio input[type=radio] {
  border-radius: 50%;
  background-size: 10px 10px;
}

.form .form-field .wpcf7-checkbox input[type=checkbox]:checked,
.form .form-field .wpcf7-radio input[type=radio]:checked {
  background-color: rgba(101, 101, 101, 0.5);
}

.form .form-field .wpcf7-checkbox input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.99737 10.7418L12.25 1.98404C12.5026 1.62661 12.5447 1.14224 12.3763 0.720364C12.2079 0.319974 11.8079 0.0465362 11.3658 0.00552062C10.9237 -0.0374481 10.4816 0.173489 10.2289 0.530911L4.83947 8.08951L2.12365 5.37271C1.80785 5.05826 1.34472 4.9313 0.923699 5.05826C0.481561 5.18326 0.165765 5.52115 0.0394831 5.94107C-0.0658026 6.36294 0.0394831 6.82583 0.355279 7.14224L4.10259 10.9098C4.33422 11.1422 4.65002 11.2672 4.98681 11.2672H5.0921C5.25024 11.2497 5.40429 11.2028 5.54516 11.1305C5.72302 11.0387 5.87988 10.9059 5.99737 10.7418Z' fill='white'/%3E%3C/svg%3E%0A");
}

.form .form-field .wpcf7-radio input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='5' fill='white'/%3E%3C/svg%3E%0A");
}

/* Toetsenbordnavigatie zichtbaar houden: appearance:none haalt de standaard
   focusring weg, zonder dit is het veld niet te volgen met Tab. */
.form .form-field .wpcf7-radio input[type=radio]:focus-visible,
.form .form-field .wpcf7-checkbox input[type=checkbox]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Het label boven een keuzegroep mag niet als placeholder-grijs wegvallen. */
.form .form-field > .form-label {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.56;
}

/* Tijdvelden openen een flatpickr-kiezer, dus geen tekstcursor. */
.form .form-field input.js-timepicker {
  cursor: pointer;
}