/* ZND design check fixes (Productive #7 "Design check", 2026-09-25).
   ponytail: losse sheet naast main.css, want main.css is een statische build
   van 04-08 en de SCSS-bron is niet gegarandeerd gelijk. Bij de volgende
   SCSS-build deze regels naar _bootscore-custom.scss verhuizen. */

/* #4 Footer newsletter: label blijft op de rand, maar zonder navy vlak. De rand zelf
   krijgt een echte uitsnede: hij wordt getekend op ::before van de container en daar
   maskeren we een gat ter breedte van het label uit (maten komen uit
   js/znd-design-fixes.js). Zonder JS is het gat 0 breed: doorlopende rand, leesbaar label.
   ponytail: rand op ::before i.p.v. mask op de input, anders snijdt het masker de focusring af. */
.site-footer .gform-body .gform-field-label {
  background: transparent !important;
  white-space: nowrap;
}
/* 992-1199px: drie velden van ~115px breed, anders breekt "Last Name" af */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-footer .gform-body .gform-field-label {
    left: 15px !important;
    font-size: 14px !important;
  }
}
.site-footer .gform-body .gfield > .ginput_container:not(.ginput_container_consent, .ginput_container_checkbox) {
  position: relative;
}
.site-footer .gform-body .gfield > .ginput_container:not(.ginput_container_consent, .ginput_container_checkbox) input:not([type="checkbox"]) {
  border-color: transparent !important;
}
.site-footer .gform-body .gfield > .ginput_container:not(.ginput_container_consent, .ginput_container_checkbox)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--znd-box-w, 100%);
  border: 1px solid #ffffff40;
  border-radius: 100px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 100%, var(--znd-cut-w, 0px) 2px;
  -webkit-mask-position: 0 0, var(--znd-cut-x, 0px) 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 100% 100%, var(--znd-cut-w, 0px) 2px;
  mask-position: 0 0, var(--znd-cut-x, 0px) 0;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
.site-footer .gform-body .gfield > .ginput_container:focus-within::before {
  border-color: #ffffff;
}

/* #5/#6 Footer landkeuzeknop: pijl in een cirkeltje, zoals de andere knoppen.
   !important nodig tegen de inline regel `.custom-btn span` (transparant, fit-content). */
footer .custom-lang-switcher .hl-caret {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 0 0 10px !important;
  border-radius: 100px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  font-size: 14px !important;
}

/* #10-#13 Filter: titel boven de zoekbalk gelijk aan de andere filtertitels */
aside.widget-area .widget .wp-block-search .wp-block-search__label {
  font-size: 18px;
  font-weight: 600 !important;
  line-height: 1.1;
}
/* lege <li>'s (verborgen termen) gaven elk 5px extra ruimte tussen de checkboxes */
aside.widget-area .woocommerce-widget-layered-nav-list__item:empty {
  display: none;
}

/* #15 Formulieren: groepslabel van radio's/checkboxes lijnt uit met de keuzes */
.gform_wrapper .gfield--type-radio > .gfield_label,
.gform_wrapper .gfield--type-checkbox > .gfield_label {
  padding-left: 0;
}

/* #16 Formulieren: opeenvolgende toestemmingsvinkjes dichter op elkaar (grid-gap is 40px).
   Alleen consent: checkboxgroepen met een eigen kopje (US-contact) hebben die 40px wel nodig. */
.gform_wrapper .gform_fields > .gfield--type-consent + .gfield--type-consent {
  margin-top: -24px;
}

/* Telefoonveld: subveldlabel "Country" brak af als "Countr / y" (label is 68px breed) */
.gform_wrapper .gform-phone .gform-field-label--type-sub {
  white-space: nowrap;
}

/* Checkboxes/radio's op een witte achtergrond hadden rand #f1f1f4: onzichtbaar (WCAG 1.4.11).
   Zelfde navy rand als op het catalogusformulier. */
.gform_wrapper :is(.gfield--type-consent, .gfield--type-checkbox, .gfield--type-radio) input:is([type="checkbox"], [type="radio"]) {
  border-color: #163361 !important;
}

/* #10/#13 Filter volgens Figma (Webdesign - ZND, node 111:10760 "Group 114"):
   kaart 40px padding, 20px tussen secties, 10px onder "Keyword search", 15px onder de
   overige titels, zoekveld 42px met 30px knop, checkbox 16px, rijen 19px + 15px gap.
   Alleen de desktopkaart; de mobiele offcanvas-filter is niet aangeraakt. */
@media (min-width: 992px) {
  /* alleen desktop: op mobiel is de aside leeg (filter zit in de offcanvas) en zou padding 80px lege ruimte geven */
  aside.widget-area {
    padding: 40px 30px !important; /* zijkant 30: kaart is hier ~306px, zo blijft de inhoud ~250 zoals in het design */
  }
}
aside.widget-area .widget:first-child h3.widget-title {
  margin-bottom: 0 !important;
}
aside.widget-area .widget .wp-block-search .wp-block-search__label {
  margin-bottom: 10px !important;
}
aside.widget-area .wp-block-search__inside-wrapper {
  position: relative;
}
aside.widget-area .wp-block-search__input {
  height: 42px !important;
  padding: 0 44px 0 15px !important;
}
aside.widget-area .wp-block-search__button {
  position: absolute !important;
  top: 6px;
  right: 6px;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
aside.widget-area .collapsible-content-wrapper > ul {
  margin: 0 !important;
  padding-top: 15px !important;
}
aside.widget-area .collapsible-content-wrapper li {
  padding: 0 !important;
  margin: 0 0 15px !important;
  line-height: 19px;
}
aside.widget-area .collapsible-content-wrapper li:last-child {
  margin-bottom: 0 !important;
}
aside.widget-area .collapsible-content-wrapper ul {
  gap: 0 !important; /* US-categorielijst is een flex-kolom met 8px gap bovenop de marge */
}
aside.widget-area .collapsible-content-wrapper ul.children {
  margin-top: 5px !important; /* + 10px flex-gap van li.cat-item = 15px onder de hoofdcategorie */
  padding-top: 0 !important;
}
aside.widget-area .collapsible-content-wrapper li,
aside.widget-area section ul li a,
aside.widget-area section ul li a .term-name {
  line-height: 19px !important;
}
aside.widget-area section ul li a,
aside.widget-area section ul li a .term-name {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
aside.widget-area section ul li a::before {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important; /* US: .product-categories tekent het vakje als ::before */
}
aside.widget-area section ul li a input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

/* ===== WCAG #389 (Productive 18905916, 2026-09-25) =====
   main.css is daarnaast gepatcht: tekstkleur #0d92d2 -> #0a73a6 op lichte achtergrond (4.6:1 op #f1f1f4),
   -> #2bb1ed in footer/donkere blokken (5.1:1 op navy). Bij de volgende SCSS-build $light-blue als
   tekstkleur hierop aanpassen, anders komt 3.5:1 terug. */

/* Lichtblauw accent in koppen op donkerblauwe blokken (Dylan: #2BB1ED). :not() in main.css telt als (0,2,2). */
.site .block:is(.bg-color-blue, .bg-color-dark-blue) em {
  color: #2bb1ed !important;
}
/* ...behalve in de lichte kaarten binnen zo'n blok (product-range-grouped: #f5f7f9) */
.site .block:is(.bg-color-blue, .bg-color-dark-blue) .category-group em {
  color: #0a73a6 !important;
}

/* Lichtblauwe knoppen: donkere tekst + icoon (#00274B op #1896d3 = 4.56:1). Hover werd donkerder (#1586bc = 3.7:1),
   nu lichter (#2bb1ed = 6.2:1). Oude "oranje" knop is dezelfde .cta ($orange = #1896d3). */
.btn.cta,
.btn.wc-forward,
.btn-form.cta,
.woocommerce-error .button.cta,
.woocommerce-error .button.wc-forward {
  color: #00274b !important;
}
.btn.cta span i,
.btn.wc-forward span i,
.btn-form.cta span i,
.btn.cta i,
.btn-form.cta i {
  color: #00274b !important;
}
/* In donkere blokken zet main.css alles wit via `.bg-color-blue:not(.route-cards) :not(...)` (0,4,1); dubbele klasse wint */
.site :is(.bg-color-blue, .bg-color-dark-blue) :is(.btn.cta.cta, .btn.wc-forward.wc-forward, .btn-form.cta.cta),
.site :is(.bg-color-blue, .bg-color-dark-blue) :is(.btn.cta.cta, .btn.wc-forward.wc-forward, .btn-form.cta.cta) i {
  color: #00274b !important;
}
.btn.cta:hover,
.btn.wc-forward:hover,
.btn-form.cta:hover,
.woocommerce-error .button.cta:hover,
.woocommerce-error .button.wc-forward:hover {
  background-color: #2bb1ed !important;
  color: #00274b !important;
}

/* Jaartal timeline (About): 16px tekst, #00274B op #0d92d2 is 4.35:1, dus label op #1896d3 */
.timeline-content span,
.step-image span.label {
  background-color: #1896d3 !important;
  color: #00274b !important;
}

/* Iconen in de lichtblauwe cirkel (kaarten, contact): wit 3.5:1 -> navy 4.35:1 (niet-tekst eist 3:1) */
.card span.icon,
.card span.icon i,
.card span.icon svg {
  color: #00274b !important;
}

/* Toastmeldingen "Link copied" / "Copy failed": wit op #27ae60 = 2.9:1, op #e74c3c = 3.8:1 */
.custom-toast.success {
  background-color: #1e8449 !important;
}
.custom-toast.error {
  background-color: #c0392b !important;
}

/* JKC-link in de footer: klikvlak was 21px hoog (WCAG 2.5.8 vraagt 24px) */
.site-footer a[href="https://www.jkc.media"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}