/* ===================================================================
   FAQ CATEGORIE-NAVIGATIE (pill-drilldown)
   ===================================================================
   Vervangt de verticale 2-niveau sidebar-lijst (faq-sidebar.css,
   verwijderd 28-08-2026) door horizontale "pill"-navigatie met
   progressive disclosure: laag 1 = hoofdcategorie, laag 2 = subcategorie.
   Geen !important: alle selectors winnen puur op specificiteit. */

.faq-categorie-nav {
    margin-bottom: 1.5rem;
}

.faq-nav-clusters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.faq-nav-submenu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    margin-bottom: 1.5rem;
    background-color: var(--rf-grey);
    border-radius: 8px;
}

.faq-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background-color: var(--rf-white, #ffffff);
    border: 1px solid var(--border-light, #dfe1e3);
    border-radius: 999px;
    color: var(--rf-dark);
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
}

.faq-nav-pill:hover {
    border-color: var(--rf-green);
}

.faq-nav-pill:focus-visible {
    outline: 2px solid var(--rf-green);
    outline-offset: 2px;
}

.faq-nav-pill-active {
    background-color: var(--rf-light-green);
    border-color: var(--rf-green);
    font-weight: var(--font-weight-semibold, 600);
}

.faq-nav-pill-badge {
    background-color: var(--rf-light-gray);
    color: var(--rf-gray);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 10px;
}

.faq-nav-pill-active .faq-nav-pill-badge {
    background-color: var(--rf-green);
    color: var(--rf-white, #fff);
}

.faq-drilldown-hidden {
    display: none;
}

body.faq-search-active .faq-cluster-section.faq-drilldown-hidden,
body.faq-search-active .faq-category-section.faq-drilldown-hidden {
    display: block;
}

/* Content-kolom: cluster- en categorie-kopjes (niet sidebar-specifiek) */
.faq-cluster-section + .faq-cluster-section {
    margin-top: 3rem;
}

.faq-cluster-title {
    color: var(--rf-dark);
    font-weight: var(--font-weight-bold, 700);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--rf-light-gray);
}

.faq-category-section + .faq-category-section {
    margin-top: 2rem;
}

.faq-category-title {
    color: var(--rf-dark);
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: 1rem;
}

/* Sticky-scroll-offset: zorgt dat scrollIntoView() een sectie niet direct
   tegen de rand van het scherm plakt (en onder de sticky header eindigt
   zodra .rf-header de .sticky-klasse krijgt bij scrollen). Hergebruikt de
   bestaande --header-height-lg variabele i.p.v. een nieuw magisch getal. */
.faq-cluster-section,
.faq-category-section {
    scroll-margin-top: calc(var(--header-height-lg) + 1rem);
}