/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E506-vragen-met-zoeken/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E506 · Veelgestelde vragen met zoeken
   Gewone <details>-vragen (werken zonder JavaScript) met een zoekveld dat
   meteen filtert en treffers markeert, plus knoppen per onderwerp. Het
   antwoord schuift zacht in en het plusje draait naar een kruisje; alleen
   transform en opacity, de hoogte springt gewoon.
   Instellen op .e506 met CSS-variabelen:
     --e506-accent   kleur van accenten en markering   (standaard #e2603f)
     --e506-vlak     achtergrond van een open vraag    (standaard rgba(226,96,63,.07))
     --e506-lijn     scheidingslijnen                  (standaard rgba(0,0,0,.12))
   ========================================================================== */

.e506 { color: inherit; }
.e506-zoek[hidden], .e506-filters[hidden], .e506-niets[hidden], .e506-vraag[hidden] { display: none; }

.e506-zoek { position: relative; margin: 0 0 14px; }
.e506-zoek label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e506-zoek svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .55; pointer-events: none; }
.e506-zoek input {
  width: 100%; min-height: 54px; padding: 0 16px 0 48px; border-radius: 16px;
  border: 1.5px solid var(--e506-lijn, rgba(0, 0, 0, .14)); background: rgba(255, 255, 255, .7); color: inherit; font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.e506-zoek input:focus { outline: none; border-color: var(--e506-accent, #e2603f); }
.e506-zoek input:focus-visible { outline: 2px solid var(--e506-accent, #e2603f); outline-offset: 2px; }

.e506-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.e506-filters button {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--e506-lijn, rgba(0, 0, 0, .14));
  background: transparent; color: inherit; font-size: 14px; font-weight: 600;
}
.e506-filters button[aria-pressed="true"] { background: var(--e506-accent, #e2603f); border-color: var(--e506-accent, #e2603f); color: #fff; }
.e506-teller { min-height: 1.4em; margin: 8px 0 4px; font-size: 13px; opacity: .7; }

.e506-lijst { border-top: 1px solid var(--e506-lijn, rgba(0, 0, 0, .12)); }
.e506-vraag { border-bottom: 1px solid var(--e506-lijn, rgba(0, 0, 0, .12)); }
.e506-vraag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 6px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; line-height: 1.35;
}
.e506-vraag summary::-webkit-details-marker { display: none; }
.e506-vraag summary:focus-visible { outline: 2px solid var(--e506-accent, #e2603f); outline-offset: 2px; border-radius: 8px; }
.e506-plus { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; }
.e506-plus::before, .e506-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; border-radius: 1px; }
.e506-plus::after { transform: rotate(90deg); }
.e506-vraag[open] .e506-plus { transform: rotate(45deg); opacity: 1; color: var(--e506-accent, #e2603f); }
.e506-vraag[open] { background: var(--e506-vlak, rgba(226, 96, 63, .07)); }
.e506-antwoord { padding: 0 6px 20px; max-width: 64ch; line-height: 1.6; }
.e506-antwoord p + p { margin-top: 10px; }
.e506-mark { background: transparent; color: inherit; box-shadow: inset 0 -.5em 0 rgba(226, 96, 63, .28); border-radius: 2px; }

.e506-niets { margin-top: 18px; padding: 20px; border-radius: 18px; border: 1.5px dashed var(--e506-lijn, rgba(0, 0, 0, .2)); }
.e506-niets p { margin: 0 0 12px; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e506-plus { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease; }
  html:not([data-rm]) .e506-vraag[open] .e506-antwoord { animation: e506-in .45s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes e506-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }