/*
 * De kop van een overzichtspagina.
 *
 * Drie regels boven elkaar, en ze staan zowel op /blog/ als op een categorie-,
 * tag-, auteur- of datumarchief:
 *
 *   .overzichtLabel   het kleine woord met een oranje streepje ervoor
 *   .overzichtTitel   de h1, met het oranje punt erachter
 *   .overzichtUitleg  één of twee zinnen eronder
 *
 * Gedeeld door home.css en archive.css. Wie van /blog/ naar een categorie
 * doorklikt hoort niet op een andere site te belanden, en dat betekent dat deze
 * drie regels op één plek staan en niet twee keer.
 *
 * Het blogoverzicht zet de titel een maat groter; die afwijking staat in
 * home.css, want daar hoort hij bij.
 */

.overzichtLabel {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    color: var(--kleurBlauw);
    column-gap: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.overzichtLabelStreep {
    width: 30px;
    height: 2px;
    flex: none;
    border-radius: 2px;
    background-color: var(--kleurOranje);
}

.overzichtTitel {
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.06;
}

/*
 * Het oranje punt achter de titel. Een redactioneel merkteken en geen inhoud,
 * dus in CSS en niet in de template: het hoort niet mee als iemand de titel
 * kopieert of als een schermlezer hem voorleest.
 */
.overzichtTitel::after {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-radius: 50%;
    background-color: var(--kleurOranje);
    content: "";
}

.overzichtUitleg {
    max-width: 56ch;
    margin-top: 16px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstMd);
    line-height: 1.7;
}

.overzichtUitleg a {
    color: var(--kleurBlauw);
}

/* ==================================================================
 * De entree
 *
 * Met CSS-keyframes en niet met Motion: dit hangt niet aan de scrollpositie en
 * hoeft niets te meten, dus het hoort niet in JavaScript (baserules regel 7).
 * Het draait ook zonder script, en het kan niet knipperen — CSS staat er al vóór
 * de eerste keer tekenen, waar een beginstand uit JavaScript dat niet doet.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .overzichtLabelStreep {
        animation: overzichtStreepIn 620ms var(--versnelling) 100ms both;
    }

    .overzichtTitel,
    .overzichtUitleg {
        animation: overzichtKopIn 640ms var(--versnelling) both;
    }

    .overzichtTitel {
        animation-delay: 40ms;
    }

    .overzichtUitleg {
        animation-delay: 130ms;
    }
}

@keyframes overzichtStreepIn {
    from {
        transform: scaleX(0);
        transform-origin: left center;
    }
}

@keyframes overzichtKopIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}