/* ---------------------------------------------------------------------------
 * page.css — losse pagina's (page.php), baserules 8
 * --------------------------------------------------------------------------- */

.paginaKop {
    padding-block: var(--ruimte6) var(--ruimte5);
    border-bottom: 1px solid var(--kleurRand);
}

.paginaKopIntro {
    margin-top: var(--ruimte4);
    max-width: var(--breedteTekst);
    font-size: 1.0625rem;
    color: var(--kleurTekstZacht);
}

.paginaBeeld {
    margin-block: var(--ruimte6);
}

.paginaBeeld img {
    width: 100%;
    border-radius: var(--randRadius);
}

/* Redactionele inhoud. Alle marges hangen hier aan de lopende tekst, zodat een
   redacteur zonder HTML een leesbare pagina krijgt (baserules 13). */
.paginaInhoud {
    max-width: var(--breedteTekst);
    padding-block: var(--ruimte6) var(--ruimte8);
}

.paginaInhoud > * + * {
    margin-top: var(--ruimte4);
}

.paginaInhoud h2 {
    margin-top: var(--ruimte7);
}

.paginaInhoud h3,
.paginaInhoud h4 {
    margin-top: var(--ruimte6);
}

.paginaInhoud ul,
.paginaInhoud ol {
    padding-left: var(--ruimte5);
}

.paginaInhoud ul { list-style: disc; }
.paginaInhoud ol { list-style: decimal; }

.paginaInhoud li + li {
    margin-top: var(--ruimte2);
}

.paginaInhoud blockquote {
    padding-left: var(--ruimte5);
    border-left: 3px solid var(--kleurAccent);
    font-size: 1.0625rem;
    color: var(--kleurTekstSterk);
}

.paginaInhoud table {
    font-size: var(--maatKlein);
}

.paginaInhoud th,
.paginaInhoud td {
    padding: var(--ruimte3);
    border-bottom: 1px solid var(--kleurRand);
}

.paginaInhoud figure img {
    border-radius: var(--randRadius);
}

.paginaInhoud figcaption {
    margin-top: var(--ruimte2);
    font-size: var(--maatMini);
    color: var(--kleurTekstZacht);
}

/* Veelgestelde vragen. De vragen komen uit een repeater-metaveld, dus een
   redacteur typt alleen vraag en antwoord — geen HTML (baserules 13). */
.paginaFaq {
    max-width: var(--breedteTekst);
    padding-bottom: var(--ruimte8);
}

.paginaFaqItem {
    border-bottom: 1px solid var(--kleurRand);
}

.paginaFaqItem summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte4);
    padding-block: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    list-style: none;
}

/* Het standaard driehoekje weg; er komt een eigen plusje voor terug. */
.paginaFaqItem summary::-webkit-details-marker {
    display: none;
}

.paginaFaqItem summary::after {
    content: '';
    width: .625rem;
    height: .625rem;
    flex: none;
    border-right: 2px solid var(--kleurAccent);
    border-bottom: 2px solid var(--kleurAccent);
    transform: rotate(45deg);
    transition: transform var(--overgang);
}

.paginaFaqItem[open] summary::after {
    transform: rotate(-135deg);
}

.paginaFaqAntwoord {
    padding-bottom: var(--ruimte4);
    color: var(--kleurTekst);
}