/* ---------------------------------------------------------------------------
 * single.css — een blogartikel (single.php), naar 'Blog artikel'
 *
 * De maten zijn die van het ontwerp. Daar is alles content-box en hier
 * border-box (zie de kop van main.css): een max-width met padding eromheen
 * is hier max-width + 2 × de goot, en de omlijnde knop is 56 + 2 × 2 = 60px
 * hoog. De kaarten onderaan staan in blogKaart.css.
 * --------------------------------------------------------------------------- */

/* De voortgangsbalk bovenin. Zonder script blijft hij op nul, en dus weg. */
.artikelVoortgang {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 70;
    height: 4px;
    pointer-events: none;
}

.artikelVoortgangBalk {
    display: block;
    height: 100%;
    background: var(--kleurActie);
    transform: scaleX(0);
    transform-origin: left;
}

.artikel {
    background: var(--kleurWit);
}

/* ------------------------------------------------------------------ de kop */

.artikelKop {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: calc(1000px + 2 * var(--goot));
    margin-inline: auto;
    padding: 22px var(--goot) 0;
}

.artikelOnderwerp {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: var(--hoekPil);
    background: var(--kleurMint);
    color: var(--kleurActieDiep);
    font-size: 14px;
    font-weight: 800;
}

.artikelTitel {
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
}

.artikelMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    color: var(--kleurTekstZacht);
    font-size: 15px;
}

.artikelSchrijverRond {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
    font-weight: 800;
}

.artikelSchrijverFoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artikelMetaTekst {
    display: flex;
    flex-direction: column;
}

.artikelSchrijver {
    color: var(--kleurInkt);
}

/* ------------------------------------------------------------------ de foto */

.artikelBeeld {
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin-inline: auto;
    padding: 28px var(--goot) 0;
}

.artikelBeeldVlak {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--hoekVlak);
    background: var(--kleurVlak);
    aspect-ratio: 21 / 9;
}

/* Het ontwerp wisselt op 760px naar 4:3, net als de rest van het blad. */
@media (max-width: 47.5rem) {
    .artikelBeeldVlak {
        aspect-ratio: 4 / 3;
    }
}

.artikelBeeldFoto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------- inhoudsopgave naast de tekst */

.artikelRomp {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(28px, 5vw, 72px);
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin-inline: auto;
    padding: clamp(40px, 5vw, 64px) var(--goot) clamp(56px, 7vw, 96px);
}

.artikelZij,
.artikelInhoud,
.artikelInhoudLijst {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.artikelZij {
    flex: 1 1 220px;
    max-width: 280px;
}

/**
 * Het ontwerp laat de kolom ook plakken als hij op een smal scherm bóven de
 * tekst staat; dan schuift de tekst eronder door. Hier plakt hij alleen naast
 * de tekst: vanaf 897px passen 220 + de goot + 560 naast elkaar (zelfde
 * afspraak als de onderwerpen op /faq/).
 */
@media (min-width: 56.25rem) {
    .artikelZij {
        position: sticky;
        top: 130px;
    }
}

.artikelInhoudKop {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
}

.artikelInhoudLink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--kleurTekstStil);
    font-size: 15px;
    font-weight: 500;
    transition: color .2s;
}

.artikelInhoudLink::before {
    content: '';
    flex-shrink: 0;
    width: 3px;
    height: 22px;
    border-radius: 3px;
    background: var(--kleurRand);
    transition: background .2s;
}

.artikelInhoudLink.isHier {
    color: var(--kleurInkt);
    font-weight: 700;
}

.artikelInhoudLink.isHier::before {
    background: var(--kleurActie);
}

.artikelDelen {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.artikelDelenKnop {
    height: 44px;
    padding: 0 16px;
    border: 2px solid var(--kleurRand);
    border-radius: var(--hoekPil);
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.artikelDelenKnop:hover {
    border-color: var(--kleurInkt);
}

/* ------------------------------------------------------------------ de tekst */

.artikelTekst {
    display: flex;
    flex: 999 1 560px;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    max-width: 720px;
    color: #3a3832;
    font-size: 18px;
    line-height: 1.8;
}

.artikelTekst > p.artikelInleiding {
    color: var(--kleurInkt);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.65;
}

.artikelTekst > h2 {
    margin-top: 16px;
    color: var(--kleurInkt);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

/* Niet in het ontwerp, wel in elf artikelen: een kop binnen een hoofdstuk. */
.artikelTekst > h3 {
    margin-top: 6px;
    color: var(--kleurInkt);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.artikelTekst strong {
    color: var(--kleurInkt);
}

.artikelTekst > p a,
.artikelTekst > ul a,
.artikelTekst > ol a {
    color: var(--kleurActieDiep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.artikelTekst > p a:hover,
.artikelTekst > ul a:hover,
.artikelTekst > ol a:hover {
    color: var(--kleurActie);
}

.artikelTekst > ul,
.artikelTekst > ol {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 1.3em;
}

.artikelTekst > ul {
    list-style: disc;
}

.artikelTekst > ol {
    list-style: decimal;
}

.artikelTekst li::marker {
    color: var(--kleurActie);
}

/* Foto's in de tekst: met de hoek van de blokken eromheen. */
.artikelTekst > figure,
.artikelTekst > p > img {
    margin: 0;
}

.artikelTekst img {
    max-width: 100%;
    height: auto;
    border-radius: var(--hoekGroot);
}

.artikelTekst figcaption {
    margin-top: 8px;
    color: var(--kleurTekstMeta);
    font-size: 14px;
    line-height: 1.5;
}

/* De tip: geel vak, 'Tip' in handschrift. */
.artikelTip {
    display: flex;
    gap: 14px;
    padding: 22px 24px;
    border-radius: var(--hoekGroot);
    background: var(--kleurGeelVlak);
}

.artikelTipLabel {
    flex-shrink: 0;
    color: var(--kleurInkt);
    font-family: var(--fontAccent);
    font-size: 26px;
    line-height: 1;
}

.artikelTipTekst {
    font-size: 17px;
    line-height: 1.65;
}

.artikelTipTekst p + p {
    margin-top: .8em;
}

/* Het product: foto, regeltje, naam, maat en kleur, prijs. */
.artikelProduct {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 14px;
    border: 2px solid var(--kleurVlak);
    border-radius: var(--hoekGroot);
    color: var(--kleurInkt);
    line-height: normal;
    transition: border-color .2s, transform .2s;
}

.artikelProduct:hover {
    border-color: var(--kleurActie);
    color: var(--kleurInkt);
    transform: translateY(-2px);
}

.artikelProductBeeld {
    display: block;
    flex-shrink: 0;
    width: 130px;
    height: 100px;
    overflow: hidden;
    border-radius: var(--hoek);
    background: var(--kleurVlak);
}

.artikelProductFoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artikelProductTekst {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    gap: 4px;
}

.artikelProductLabel {
    color: var(--kleurActieDiep);
    font-size: 13px;
    font-weight: 700;
}

.artikelProductNaam {
    font-size: 19px;
}

.artikelProductRegel {
    color: var(--kleurTekstZacht);
    font-size: 15px;
}

.artikelProductPrijs {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-right: 8px;
}

.artikelProductPrijs strong {
    font-size: 24px;
    letter-spacing: -.03em;
}

.artikelProductPrijs s {
    color: var(--kleurTekstStil);
}

/* Kort samengevat: regels met een vinkje. */
.artikelSamenvatting,
.artikelSamenvatting ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.artikelSamenvatting {
    padding: 22px 24px;
    border-radius: var(--hoekGroot);
    background: var(--kleurGrond);
    color: var(--kleurInkt);
}

.artikelSamenvattingKop {
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
}

.artikelSamenvatting li {
    display: flex;
    gap: 12px;
    font-size: 17px;
    line-height: 1.55;
}

.artikelSamenvatting .icoon {
    color: var(--kleurActie);
}

/* De knoppen onder de tekst. */
.artikelKnoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    line-height: normal;
}

.artikelKnopGroen,
.artikelKnopRand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--hoekPil);
    font-size: 16px;
}

.artikelKnopGroen {
    height: 56px;
    padding: 0 26px;
    background: var(--kleurActie);
    color: var(--kleurWit);
    font-weight: 800;
    transition: background .2s, transform .15s;
}

.artikelKnopGroen:hover {
    background: var(--kleurActieHover);
    color: var(--kleurWit);
}

.artikelKnopGroen .icoon {
    transition: transform .3s var(--curve);
}

.artikelKnopGroen:hover .icoon {
    transform: translateX(4px);
}

.artikelKnopRand {
    height: 60px;
    padding: 0 24px;
    border: 2px solid var(--kleurInkt);
    color: var(--kleurInkt);
    font-weight: 700;
    transition: all .2s;
}

.artikelKnopRand:hover {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

/* Vragen onder een artikel (niet in het ontwerp; de vorm van de homepage). */
.artikelVragen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.artikelVragenKop {
    margin-bottom: 10px;
    color: var(--kleurInkt);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.artikelVraag {
    padding: 0 20px;
    border-radius: var(--hoek);
    background: var(--kleurGrond);
}

.artikelVraagKop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    color: var(--kleurInkt);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.artikelVraagKop::-webkit-details-marker {
    display: none;
}

.artikelVraagIcoon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--kleurWit);
    color: var(--kleurInkt);
    transition: all .3s;
}

.artikelVraag[open]:not(.isSluitend) .artikelVraagIcoon {
    background: var(--kleurActie);
    color: var(--kleurWit);
    transform: rotate(45deg);
}

.artikelVraagInhoud {
    display: flow-root;
    color: var(--kleurTekstZacht);
    font-size: 16px;
    line-height: 1.65;
}

.artikelVraagInhoud p {
    margin-bottom: 20px;
}

/* ------------------------------------------------------------ lees verder */

.artikelVerder {
    background: var(--kleurGrond);
}

.artikelVerderBinnen {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin-inline: auto;
    padding: clamp(56px, 7vw, 96px) var(--goot);
}

.artikelVerderKop {
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    text-wrap: balance;
}

/* ------------------------------------------------------------------ beweging */

/* De titel en zijn handschrift komen binnen bij het laden, zoals in het
   ontwerp; wat eronder staat doet verschijnen.js. */
@media (prefers-reduced-motion: no-preference) {
    .artikelTitel {
        animation: artikelBinnen 700ms var(--curve) 80ms backwards;
    }

    .artikelTitel .kopAccent {
        animation: artikelSchrijven 800ms var(--curve) 200ms backwards;
    }
}

@keyframes artikelBinnen {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@keyframes artikelSchrijven {
    from {
        clip-path: inset(-20% 100% -20% 0);
        transform: translateY(6px) rotate(-2deg);
    }

    to {
        clip-path: inset(-20% 0 -20% 0);
        transform: none;
    }
}