/*
 * Opmaak voor tekst die uit de editor komt.
 *
 * reset.css heeft alle marges en kopgroottes weggehaald, zodat een h2 een
 * structuurkeuze is en geen opmaakkeuze. Voor tekst die een redacteur intypt
 * moet dat wel weer terug: daar bepaalt het kopniveau juist wél hoe iets eruit
 * hoort te zien.
 *
 * Daarom staat het hier, met alles onder .paginaInhoud en .artikelInhoud: binnen
 * dat gebied gelden de gewone typografische regels, buiten dat gebied niet.
 */

.paginaInhoud,
.artikelInhoud {
    font-size: var(--tekstMd);
    line-height: 1.7;
}

.paginaInhoud > * + *,
.artikelInhoud > * + * {
    /*
     * Ritme via de "lobotomized owl": ruimte tussen opeenvolgende elementen in
     * plaats van marge onder elk element. Dan is er nooit een extra witregel
     * onderaan of bovenaan het blok.
     */
    margin-top: var(--ruimteMd);
}

.paginaInhoud h2,
.artikelInhoud h2 {
    margin-top: var(--ruimteXl);
    font-size: var(--tekstH2);
    font-weight: 500;
    line-height: 1.25;
}

.paginaInhoud h3,
.artikelInhoud h3 {
    margin-top: var(--ruimteLg);
    font-size: var(--tekstH3);
    font-weight: 500;
    line-height: 1.3;
}

.paginaInhoud h4,
.artikelInhoud h4 {
    margin-top: var(--ruimteLg);
    font-size: var(--tekstLg);
    font-weight: 500;
}

.paginaInhoud a,
.artikelInhoud a {
    color: var(--kleurBlauw);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.paginaInhoud a:hover,
.artikelInhoud a:hover {
    color: var(--kleurBlauwDonker);
}

/* Lijsten krijgen hun bolletjes terug: reset.css haalde ze site-breed weg. */
.paginaInhoud ul,
.artikelInhoud ul,
.paginaInhoud ol,
.artikelInhoud ol {
    padding-left: 1.25rem;
    list-style: disc;
}

.paginaInhoud ol,
.artikelInhoud ol {
    list-style: decimal;
}

.paginaInhoud li + li,
.artikelInhoud li + li {
    margin-top: var(--ruimteXs);
}

.paginaInhoud blockquote,
.artikelInhoud blockquote {
    padding: var(--ruimteMd) var(--ruimteLg);
    border-left: 3px solid var(--kleurOranje);
    background-color: var(--kleurVlak);
    font-size: var(--tekstMd);
}

.paginaInhoud figure,
.artikelInhoud figure {
    margin-block: var(--ruimteLg);
}

.paginaInhoud img,
.artikelInhoud img {
    border-radius: var(--randMd);
}

.paginaInhoud table,
.artikelInhoud table {
    width: 100%;
    font-size: var(--tekstSm);
}

.paginaInhoud th,
.artikelInhoud th,
.paginaInhoud td,
.artikelInhoud td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--kleurLijn);
    text-align: left;
}

.paginaInhoud th,
.artikelInhoud th {
    background-color: var(--kleurVlak);
    font-weight: 500;
}

/*
 * Een brede tabel mag binnen zijn eigen kader schuiven, maar nooit de pagina
 * horizontaal laten scrollen.
 */
.paginaInhoud .tabelHouder,
.artikelInhoud .tabelHouder {
    overflow-x: auto;
}