/* =============================================================================
   faq.php — veelgestelde vragen
   -----------------------------------------------------------------------------
   Voorvoegsel: .fq-
   De pagina was een raster van gekleurde kaarten met eigen hexwaarden per
   categorie. Hier draagt elke categorie één variabele (--fq) die uit de
   tokens komt; de rest van de opmaak is voor alle categorieën gelijk.
   ============================================================================= */

/* ── Categoriekleuren ──────────────────────────────────────────────────────── */
.fq-c-registratie { --fq: var(--primary); --fq-zacht: var(--primary-light); }
.fq-c-chipreaders { --fq: var(--blue);    --fq-zacht: var(--blue-light); }
.fq-c-vermist     { --fq: var(--danger);  --fq-zacht: color-mix(in srgb, var(--danger) 11%, var(--surface)); }
.fq-c-gevonden    { --fq: var(--warning); --fq-zacht: color-mix(in srgb, var(--warning) 15%, var(--surface)); }
.fq-c-algemeen    { --fq: var(--info);    --fq-zacht: color-mix(in srgb, var(--info) 12%, var(--surface)); }
.fq-c-alle        { --fq: var(--text-muted); --fq-zacht: var(--surface-warm); }

/* ── Kiezerband ────────────────────────────────────────────────────────────── */
.fq-kiezer {
    background: var(--surface-warm);
    border-bottom: 1px solid var(--border);
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.fq-kiezer-kop { max-width: 60ch; margin: 0 0 1.5rem; }
.fq-kiezer-kop h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 .4rem; }
.fq-kiezer-kop p  { margin: 0; color: var(--text-muted); font-size: .96rem; }

.fq-zoek {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: .5rem .9rem;
    max-width: 30rem;
    margin-bottom: 1.5rem;
}
.fq-zoek:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.fq-zoek .bi { color: var(--text-muted); flex-shrink: 0; }
.fq-zoek input {
    border: 0;
    background: none;
    flex: 1;
    min-width: 0;
    font: inherit;
    color: var(--text);
    padding: .15rem 0;
}
.fq-zoek input:focus { outline: none; }

.fq-tegels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
}
.fq-tegel {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--fq);
    border-radius: var(--radius-sm);
    padding: .85rem .9rem;
    cursor: pointer;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.fq-tegel:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fq-tegel[aria-pressed="true"] { border-color: var(--fq); box-shadow: inset 0 0 0 1px var(--fq); }
.fq-tegel-icoon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--fq-zacht);
    color: var(--fq);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fq-tegel-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fq-tegel-naam  { font-weight: 700; font-size: .93rem; color: var(--text); }
.fq-tegel-sub   { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.fq-tegel-telling { font-size: .75rem; font-weight: 700; color: var(--fq); margin-top: .2rem; }

.fq-reset { margin: 1.25rem 0 0; }
.fq-reset button {
    background: none;
    border: 0;
    color: var(--blue);
    font-weight: 600;
    font-size: .9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
}
.fq-reset button:hover { text-decoration: underline; }

/* ── Body: vragen links, hulpkolom rechts ─────────────────────────────────── */
.fq-body { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.fq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.fq-groep + .fq-groep { margin-top: 2.5rem; }
.fq-groep-kop {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--fq-zacht);
}
.fq-groep-kop h2 { font-size: 1.2rem; margin: 0; }
.fq-groep-kop .fq-tegel-icoon { width: 1.9rem; height: 1.9rem; font-size: .9rem; }
.fq-groep-aantal {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 700;
    color: var(--fq);
    background: var(--fq-zacht);
    border-radius: var(--radius-pill);
    padding: .15rem .6rem;
}

.fq-vraag {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    overflow: hidden;
}
.fq-vraag[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.fq-vraag > summary {
    list-style: none;
    cursor: pointer;
    padding: .9rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-weight: 600;
    font-size: .97rem;
    color: var(--text);
}
.fq-vraag > summary::-webkit-details-marker { display: none; }
.fq-vraag > summary:hover { background: var(--surface-warm); }
.fq-vraag > summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-weight: 400;
    margin-left: auto;
    color: var(--text-muted);
    font-size: .8rem;
    transition: transform .18s ease;
}
.fq-vraag[open] > summary::after { transform: rotate(180deg); }
.fq-vraag-nr {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--fq, var(--text-muted));
    font-weight: 700;
    font-size: .86rem;
    min-width: 1.4rem;
}
.fq-antwoord {
    padding: 0 1rem 1.1rem 3.15rem;
    color: var(--text);
    line-height: 1.7;
    font-size: .95rem;
    margin: 0;
}

.fq-geen {
    background: var(--surface-warm);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}
.fq-geen .bi { font-size: 1.8rem; color: var(--border-strong); display: block; margin-bottom: .6rem; }
.fq-geen p { margin: 0; }

/* ── Contactblok onder de vragen ──────────────────────────────────────────── */
.fq-slot {
    margin-top: 2.5rem;
    background: var(--blue-light);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.fq-slot h2 { font-size: 1.1rem; margin: 0 0 .4rem; color: var(--blue-darker); }
.fq-slot p  { margin: 0 0 1rem; color: var(--text); font-size: .95rem; }
.fq-slot-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ── Zijkolom ─────────────────────────────────────────────────────────────── */
.fq-zij { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1rem; }
.fq-zijkaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
}
.fq-zijkaart h2 {
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 .8rem;
}
.fq-snel { display: flex; flex-direction: column; gap: .5rem; }
.fq-snel .btn { width: 100%; }

.fq-springlijst { list-style: none; margin: 0; padding: 0; }
.fq-springlijst li + li { border-top: 1px solid var(--border); }
.fq-springlijst a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 0;
    color: var(--text);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
}
.fq-springlijst a:hover { color: var(--fq, var(--blue)); }
.fq-springlijst .bi { color: var(--fq); flex-shrink: 0; }
.fq-springlijst span:last-child {
    margin-left: auto;
    font-size: .78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Smal ─────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .fq-grid { grid-template-columns: 1fr; }
    .fq-zij  { position: static; }
}
@media (max-width: 575px) {
    .fq-tegels { grid-template-columns: 1fr 1fr; }
    .fq-antwoord { padding-left: 1rem; }
    .fq-slot-knoppen .btn { width: 100%; }
}