/*
Theme Name: PONCK Theme Child
Template: Impreza
Version: 1.0
Author:	PONCK | The Web Company
Theme URI: https://ponck.nl/diensten/website-laten-maken/
Author URI: https://ponck.nl/diensten/website-laten-maken/
*/
/* BNS profielkaarten - titel en persoonsnaam */
.bns-grid .item .inner h2.post_title,
.bns-grid .item .inner h2.post_title a,
.bns-grid .item .inner h3 {
    font-family: inherit !important;
}

/* Bedrijfsnaam minder dik */
.bns-grid .item .inner h2.post_title,
.bns-grid .item .inner h2.post_title a {
    font-weight: 600 !important;
}

.term-voor-interieurprofessionals,
.term-voor-merkpartners {
    display: none;
}

/* Voeg een # toe voor elke categorie-link */
.custom-category a::before {
    content: " | #";
}

/* Verwijder de ongewenste <b> tags die al aanwezig zijn */
.custom-category b {
    display: none;
}

/* ================================
        BESLISBOOM Styling
   ================================ */
/* Alleen op Gravity Forms formulier 75 */
#gform_wrapper_75 .gfield_description:not(.validation_message),
/* fallback rechtstreeks op de ID's die GF zet per veld: gfield_description_75_{fieldId} */
[id^="gfield_description_75_"]:not(.validation_message) {
  display: block;
  /* Lijk op h3-styling van de site — gebruik thema-variabelen als die bestaan */
  font-size: 1.5rem;
  font-weight: var(--h2-font-weight, 700);
  line-height: var(--h2-line-height, 1.8);
  margin: var(--h2-margin, 0 0 0.75em);
  color: var(--h2-color, inherit);
  letter-spacing: var(--h2-letter-spacing, normal);
  text-transform: var(--h2-text-transform, none);
}

/* Optioneel: consistentie met h3 spacing boven velden */
#gform_wrapper_75 .gfield_description:not(.validation_message) + .ginput_container {
  margin-top: 0.25rem; /* stem dit af op je h3/field spacing */
}

/* Wil je links in descriptions dezelfde stijl als in h3? */
#gform_wrapper_75 .gfield_description:not(.validation_message) a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
#gform_wrapper_75 .gfield_description:not(.validation_message) a:hover {
  text-decoration: underline;
}

/* VORIGE (secondary): bg #cb6483, text wit — hover #c31837 */
#gform_wrapper_75 input.gform_previous_button,
#gform_wrapper_75 .gform_previous_button.button,
#gform_wrapper_75 .gform_previous_button.gform-theme-button {
  background-color: rgba(203,100,131,0.5) !important;
  color: #fff !important;
  border-color: #cb6483 !important;
  background-image: none !important; /* kill eventuele gradients */
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#gform_wrapper_75 input.gform_previous_button:hover,
#gform_wrapper_75 input.gform_previous_button:focus,
#gform_wrapper_75 .gform_previous_button.button:hover,
#gform_wrapper_75 .gform_previous_button.button:focus,
#gform_wrapper_75 .gform_previous_button.gform-theme-button:hover,
#gform_wrapper_75 .gform_previous_button.gform-theme-button:focus {
  background-color: #c31837 !important;
  border-color: #c31837 !important;
  color: #fff !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* VOLGENDE (primary): "andersom" — bg #c31837, hover #cb6483, tekst wit */
#gform_wrapper_75 input.gform_next_button,
#gform_wrapper_75 .gform_next_button.button,
#gform_wrapper_75 .gform_next_button.gform-theme-button {
  background-color: #c31837 !important;
  color: #fff !important;
  border-color: #c31837 !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#gform_wrapper_75 input.gform_next_button:hover,
#gform_wrapper_75 input.gform_next_button:focus,
#gform_wrapper_75 .gform_next_button.button:hover,
#gform_wrapper_75 .gform_next_button.button:focus,
#gform_wrapper_75 .gform_next_button.gform-theme-button:hover,
#gform_wrapper_75 .gform_next_button.gform-theme-button:focus {
  background-color: #cb6483 !important;
  border-color: #cb6483 !important;
  color: #fff !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Disabled states (optioneel, voor consistentie) */
#gform_wrapper_75 .gform_previous_button[disabled],
#gform_wrapper_75 .gform_next_button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* keuzerondjes aanvinken */
/* ===== GF #75 — Radios: rode bullet + witte check met delay & pop ===== */

/* Tunables */
:root{
  --ponck-check-delay: .10s;  /* vertraging vóór de check verschijnt */
  --ponck-check-dur:   .40s;  /* duur van de pop-animatie */
}

/* 1) Input visueel verbergen maar toegankelijk laten */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"]{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* 2) Clipping voorkomen zodat de check mag “uitsteken” */
#gform_wrapper_75 .gfield_radio li,
#gform_wrapper_75 .gfield_radio .gchoice,
#gform_wrapper_75 .gfield_radio label{
  overflow:visible !important;
}

/* 3) Label = klikdoel + host */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"] + label{
  position:relative;display:inline-flex;align-items:center;
  min-height:26px;padding-left:2rem;cursor:pointer;
}

/* 4) Lege cirkel (unchecked) */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"] + label::before{
  content:"";position:absolute;left:0;top:50%;
  width:22px;height:22px;transform:translateY(-50%);
  border-radius:50%;border:2px solid #c7c7c7;background:#fff;
  box-sizing:border-box;z-index:0;
  transition:background-color .15s ease,border-color .15s ease;
}

/* 5) Aangevinkt → cirkel vullen (rood) */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"]:checked + label::before,
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"]:checked ~ label::before{
  background-color:#c31837;border-color:#c31837;
}

/* 6) Witte SVG-check (iets groter en “buiten” de cirkel) */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"] + label::after{
  content:"";position:absolute;top:50%;left:-2px; /* laat 'm uit de cirkel steken */
  width:35px;height:35px;transform:translate(-10%,-55%) scale(.9) rotate(-6deg);
  opacity:0;z-index:2;pointer-events:none;background-repeat:no-repeat;background-size:contain;
  /* witte check als inline SVG (URL-escaped #%23 voor #) */
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M5 12.5 L10 17 L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  /* we animeren met keyframes, niet met transitions */
  transition:none;
}

/* 7) Toon + animeer de check met een kleine delay */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"]:checked + label::after,
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"]:checked ~ label::after{
  animation:ponck-check-pop var(--ponck-check-dur) ease forwards;
  animation-delay:var(--ponck-check-delay);
}

/* 8) Pop/reveal keyframes */
@keyframes ponck-check-pop{
  0%   {opacity:0;transform:translate(-10%,-55%) scale(.7)  rotate(-6deg);}
  60%  {opacity:1;transform:translate(-10%,-55%) scale(1.08) rotate(-6deg);}
  100% {opacity:1;transform:translate(-10%,-55%) scale(1)    rotate(-6deg);}
}

/* Optioneel: hover randje iets donkerder */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"] + label:hover::before{
  border-color:#b0b0b0;
}

/* Toegankelijkheid: reduce motion respecteren */
@media (prefers-reduced-motion: reduce){
  #gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"]:checked + label::after,
  #gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"]:checked ~ label::after{
    animation:none;opacity:1;transform:translate(-10%,-55%) scale(1) rotate(-6deg);
  }
}

/* Klein schaduwtje onder/om het witte vinkje */
#gform_wrapper_75 .gfield_radio input.gfield-choice-input[type="radio"] + label::after{
  /* 2 zachte drop-shadows voor wat diepte en contrast op het rode bolletje */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15))
          drop-shadow(0 2px 2px rgba(0,0,0,.20));
  /* Safari/Chrome okay; blijft netjes meeschalen met je transform */
}

/* keuze vierkantjes met zelfde styling */

/* ================================================
   GF #75 — CHECKBOXES
   Rode vierkantjes + geanimeerd wit vinkje
   ================================================ */

/* 1. Checkbox visueel verbergen */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 2. Voorkom dat de animatie wordt afgesneden */
#gform_wrapper_75 .gfield_checkbox li,
#gform_wrapper_75 .gfield_checkbox .gchoice,
#gform_wrapper_75 .gfield_checkbox label {
  overflow: visible !important;
}

/* 3. Label en klikgebied */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"] + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-left: 2rem;
  cursor: pointer;
}

/* 4. Leeg vierkant */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 4px;
  border: 2px solid #c7c7c7;
  background: #fff;
  box-sizing: border-box;
  z-index: 0;
  transition: background-color .15s ease,
              border-color .15s ease;
}

/* 5. Aangevinkt → rood vierkant */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"]:checked + label::before {
  background-color: #c31837;
  border-color: #c31837;
}

/* 6. Wit vinkje */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -2px;
  width: 35px;
  height: 35px;
  transform: translate(-10%, -55%) scale(.9) rotate(-6deg);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M5 12.5 L10 17 L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15))
          drop-shadow(0 2px 2px rgba(0,0,0,.20));
  transition: none;
}

/* 7. Animatie bij aanvinken */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"]:checked + label::after {
  animation: ponck-check-pop var(--ponck-check-dur, .40s) ease forwards;
  animation-delay: var(--ponck-check-delay, .10s);
}

/* 8. Hover */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"] + label:hover::before {
  border-color: #b0b0b0;
}

/* 9. Focus voor toetsenbordgebruik */
#gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"]:focus-visible + label::before {
  outline: 2px solid #c31837;
  outline-offset: 3px;
}

/* 10. Respecteer verminderde animaties */
@media (prefers-reduced-motion: reduce) {
  #gform_wrapper_75 .gfield_checkbox input.gfield-choice-input[type="checkbox"]:checked + label::after {
    animation: none;
    opacity: 1;
    transform: translate(-10%, -55%) scale(1) rotate(-6deg);
  }
}

/* --- Optioneel: op kleine schermen terug naar 1 kolom --- */
@media (max-width: 480px){
  #gform_wrapper_75 .gfield--type-radio .gfield_radio,
  #gform_wrapper_75 .gfield--type-checkbox .gfield_checkbox {
    grid-template-columns: 1fr;
  }
}

/* button back voor profielen */
.btn-back{
  display:inline-flex; align-items:center; gap:.4em;
  color:#c31837; font:inherit; font-weight:700; font-size:20px;
  text-decoration:none;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  transition:color .16s ease;
}
.btn-back .chev{ transition:transform .16s ease; }
/* Chevron “bold” */
.btn-back .chev path{
  stroke-width:3;                 /* dikker = bold */
  vector-effect:non-scaling-stroke; /* blijft even dik bij schaal */
}

.btn-back:hover,
.btn-back:focus-visible{ color:#cb6483; }

.btn-back:hover .chev,
.btn-back:focus-visible .chev{ transform:translateX(-3px); }

.btn-back:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* template wissel voor consumenten en professional voor profielen */
/* Eerst standaard: laat alleen PRO zien, verberg CONSUMENT */
.header-consumer, .footer-consumer { display:none; }

/* Op UM-profielen: kies variant o.b.v. context-cookie */
.is-um-profile.ctx-consument .header-pro,
.is-um-profile.ctx-consument .footer-pro { display:none !important; }

.is-um-profile.ctx-consument .header-consumer,
.is-um-profile.ctx-consument .footer-consumer { display:block !important; }

/* Pro-context op profielen (default) */
.is-um-profile.ctx-pro .header-consumer,
.is-um-profile.ctx-pro .footer-consumer { display:none !important; }

.is-um-profile.ctx-pro .header-pro,
.is-um-profile.ctx-pro .footer-pro { display:block !important; }