/* B-CLOSE FAQ — variant A "Verfijnde cards" (Comith, v1.1)
   Als apart bestand ge-enqueued zodat wpautop/contentfilters de CSS niet kunnen breken. */

.bcfaq-block{margin:2rem 0}
.bcfaq-block h2{color:#1C3D5F;margin-bottom:1.25rem}

.bcfaq{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(28,61,95,.08);
  margin-bottom:12px;
  overflow:hidden;
  border-left:4px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.bcfaq.is-open{border-left-color:#1C3D5F;box-shadow:0 6px 24px rgba(28,61,95,.12)}

.bcfaq-q{margin:0;padding:0;font-size:inherit;line-height:inherit}

/* Harde resets: theme-buttonstyling (borders, pills, gradients) mag hier niet inlekken */
.bcfaq-wrap .bcfaq-toggle,
.bcfaq-wrap .bcfaq-toggle:hover,
.bcfaq-wrap .bcfaq-toggle:focus,
.bcfaq-wrap .bcfaq-toggle:active{
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin:0;
  padding:18px 22px;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  cursor:pointer;
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1.45;
  color:#1C3D5F !important;
  transition:background .2s;
}
.bcfaq-wrap .bcfaq-toggle:hover{background:#EEF2F5 !important}
.bcfaq-wrap .bcfaq-toggle:focus-visible{outline:3px solid #4E7CB0;outline-offset:-3px}

.bcfaq-icon{
  flex:0 0 auto;
  width:30px;height:30px;
  border-radius:50%;
  background:#EEF2F5;
  display:grid;place-items:center;
  transition:transform .3s, background .3s;
}
.bcfaq-icon svg{width:14px;height:14px;stroke:#1C3D5F;stroke-width:2.5;fill:none;transition:stroke .3s;display:block}
.bcfaq.is-open .bcfaq-icon{transform:rotate(180deg);background:#1C3D5F}
.bcfaq.is-open .bcfaq-icon svg{stroke:#fff}

/* Inklap: drie verdedigingslinies zodat gesloten antwoorden ALTIJD verborgen zijn
   1. hidden-attribuut (gezet door PHP/JS) → display:none op browserniveau
   2. .bcfaq-a[hidden] met !important → wint zelfs van theme-CSS die display forceert
   3. max-height + overflow als animatielaag */
.bcfaq-a[hidden]{display:none !important}
.bcfaq-a{
  max-height:0 !important;
  overflow:hidden !important;
  transition:max-height .4s ease;
}
.bcfaq.is-open .bcfaq-a{max-height:60em !important}

.bcfaq-a-inner{padding:0 22px 20px;color:#41556A}
.bcfaq-a-inner > :first-child{margin-top:0}
.bcfaq-a-inner > :last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .bcfaq,.bcfaq-icon,.bcfaq-a{transition:none}
}