/* ===================================================================
   FAQ SIDEBAR NAVIGATIE (2 niveaus)
   ===================================================================
   Niveau 1 (hoofdcategorie) hergebruikt .rf-sidebar-desktop/.rf-sidebar-wrapper/
   .rf-nav-list/.rf-nav-item/.rf-nav-link uit main.css (regel ±11522-11779) —
   hier alleen het 2e (sub-)niveau, content-kopjes en sticky-scroll-offset.
   Geen !important: alle selectors zijn specifieker dan hun main.css-tegenhanger. */

/* Niveau 1: cluster-link mag niet activeren als "huidige pagina" — geen
   .rf-nav-active hier, dat blijft voorbehouden aan het sub-niveau. */
.faq-nav-cluster-link {
    cursor: pointer;
}

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

/* Niveau 2: sub-categorie links onder elke hoofdcategorie */
.faq-subnav-list {
    list-style: none;
    margin: 4px 0 8px 0;
    padding: 0 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.faq-subnav-item {
    margin: 0;
}

.faq-subnav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    color: var(--rf-dark);
    text-decoration: none;
    border-left: 2px solid var(--rf-light-gray);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    transition: all var(--transition-fast, 0.15s ease);
}

.faq-subnav-link:hover {
    color: var(--rf-dark);
    text-decoration: none;
    border-left-color: var(--rf-green);
    background-color: #f1f3f4;
}

.faq-subnav-link.faq-nav-active {
    border-left-color: var(--rf-green);
    background-color: rgba(97, 206, 112, 0.12);
    color: var(--rf-dark);
    font-weight: var(--font-weight-semibold, 600);
}

.faq-subnav-badge {
    background-color: var(--rf-light-gray);
    color: var(--rf-gray);
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

.faq-subnav-link.faq-nav-active .faq-subnav-badge {
    background-color: var(--rf-green);
    color: var(--rf-white);
}

/* Content-kolom: cluster- en categorie-kopjes */
.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);
}

/* .rf-sidebar-wrapper (main.css, gedeeld met de dossier-sidebar) plakt op
   top: 1rem — prima op dossierpagina's, maar op deze publieke pagina schuift
   .rf-header (wordt bij scrollen position:fixed, hoogte --header-height-lg,
   z-index 1040) daar overheen: het eerste hoofditem verdwijnt dan achter de
   site-header. Specifieker dan het main.css-origineel (2 classes > 1), dus
   geen !important nodig — en scoped tot .faq-sidebar-col zodat de dossier-
   sidebar (die deze bug niet heeft) ongemoeid blijft. */
.faq-sidebar-col .rf-sidebar-wrapper {
    top: calc(var(--header-height-lg) + 1rem);
    height: calc(100vh - var(--header-height-lg) - 2rem);
}

@media (max-width: 992px) {
    .faq-subnav-list {
        padding-left: 20px;
    }
}