/* ==========================================================================
   Checklist – afvinkbare lijst als blokstijl op core/list

   Gebruik: kies bij een lijstblok in de editor de stijl "Checklist".
   WordPress zet dan is-style-checklist op de <ul> of <ol>.

   De opmaak volgt bewust de beslisboom (style.css sectie 12.2.1): dezelfde
   card, hetzelfde eigen selectievakje en dezelfde rij-opbouw, zodat de twee
   interactieve componenten van de site familie van elkaar zijn.

   Alles hangt aan is-style-checklist--actief, een class die js/checklist.js
   toevoegt. Zonder JavaScript blijft de lijst een gewone, ongeschonden lijst.
   ========================================================================== */

/* --- Groep ---
   Wrapper met role="group" en aria-labelledby naar de kop erboven. Zelfde
   card-recept als .beslisboom .gfield_radio: achtergrond, 1px rand, kleine
   radius en ruimte rondom. De wrapper is de directe kindnode van
   .entry-content en erft daar de max-width van 720px. */
.checklist-groep {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--basic-white);
    border: 1px solid var(--grey-020);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
}

/* --- Voet ---
   Teller met daarachter de wislink. Typografie gelijk aan
   .beslisboom .gfield_description; de scheidingslijn gebruikt hetzelfde
   token als de lijnen in de blokstijl "Met lijnen". Bij weinig ruimte
   wipt de link netjes naar de volgende regel. */
.checklist-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    margin: var(--space-md) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--grey-020);
    font-size: var(--size-14);
    color: var(--grey-070);
}

/* De teller is tegelijk de live regio (role="status"): je leest de stand
   gewoon mee én hoort elke wijziging, zonder dat de focus verspringt. */
.checklist-teller {
    margin: 0;
}

/* --- Wislink ---
   Een echte <button>, want dit voert een actie uit en navigeert niet. De
   knopbasis uit style.css sectie 7.0 wordt hier teruggezet naar een
   tekstlink, met hetzelfde recept als .reply .comment-reply-link — een
   primaire knop zou te veel gewicht geven aan een hulpfunctie.
   Contrast: --theme-070 haalt 7,9:1 op wit en 9,4:1 op zwart. */
.checklist-wissen {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    font-size: inherit;
    font-weight: 500;
    color: var(--theme-060);
    text-decoration: underline;
    cursor: pointer;
}

.checklist-wissen:hover,
.checklist-wissen:focus-visible {
    background: none;
    color: var(--theme-070);
}

/* --- De lijst zelf (alleen met JavaScript) ---
   Bij een ul vervangt het selectievakje de opsomming, dus de bolletjes mogen
   weg. Bij een ol blijven de nummers staan: daar telt de volgorde.
   Het !important is nodig omdat theme.json padding-left op core/list zet. */
ul.is-style-checklist--actief {
    list-style: none;
    padding-left: 0 !important;
}

.is-style-checklist--actief {
    margin: 0;
}

/* Zelfde tussenruimte als de gap tussen twee keuzes in de beslisboom. */
.is-style-checklist--actief > li {
    margin-bottom: var(--space-md);
}

.is-style-checklist--actief > li:last-child {
    margin-bottom: 0;
}

/* --- Rij ---
   Bewust een apart element binnen de li: display:flex op de li zelf laat de
   marker van een geordende lijst verdwijnen. De li blijft een gewoon blok.
   Opbouw gelijk aan .beslisboom .gchoice. */
.checklist-rij {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

/* --- Selectievakje ---
   Eigen vakje in plaats van het vakje van de browser, net als
   .beslisboom .gfield-choice-input — anders verschillen de twee componenten
   zichtbaar van elkaar. Ook de maat is gelijk (--choice-size). De kleine
   marge bovenlangs lijnt het vakje optisch uit met de eerste regel tekst.

   Aanwijsgebied (SC 2.5.8): bij een item zonder bedieningselement hoort het
   hele <label> bij het aanwijsgebied, dus dat is ruim voldoende. Bij een item
   mét een link is alleen het vakje het doel; dat is kleiner dan 24x24 en
   leunt op de uitzondering "afstand" — de items staan var(--space-md) uit
   elkaar, ruim boven de vereiste 24px hart op hart.

   Contrast: rand --grey-060 haalt 5,0:1 op wit en 6,3:1 op zwart; de gevulde
   staat --theme-060 haalt 5,1:1 en 6,3:1. Ruim boven de 3:1 die SC 1.4.11
   voor bedieningselementen vraagt. accent-color is niet meer nodig, want die
   werkt alleen op het vakje van de browser. */
.checklist-vakje {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: var(--choice-size);
    height: var(--choice-size);
    margin: var(--space-2xs) 0 0 0;
    border: 1px solid var(--grey-060);
    border-radius: var(--radius-sm);
    background: var(--basic-white);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checklist-vakje:checked {
    border-color: var(--theme-060);
    background-color: var(--theme-060);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.5 3.5L13 5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}

/* De globale focusring uit style.css (2px lime + 4px ring) wordt niet
   overschreven; de tussenruimte tussen de items houdt er ruimte voor vrij. */

/* --- Tekst ---
   Is een <label> als het item geen bedieningselement bevat, en anders een
   <span> die via aria-labelledby aan het vakje hangt. Alleen het label is
   klikbaar; bij een span zou een klik met de link in het item botsen.
   Typografie gelijk aan .beslisboom .gchoice label. */
.checklist-tekst {
    display: block;
    margin: 0;
    color: var(--grey-090);
    line-height: 1.45;
}

label.checklist-tekst {
    cursor: pointer;
}

/* --- Afgevinkt ---
   Doorhaling en gedempte tekst zijn een extra aanduiding; het selectievakje
   blijft de bron van de status. --grey-070 haalt 7,9:1 op wit en 9,5:1 op
   zwart, dus de tekst blijft in beide modes ruim boven 4,5:1. */
.is-style-checklist--actief li.is-afgevinkt .checklist-tekst {
    text-decoration: line-through;
    color: var(--grey-070);
}

/* --- Geneste lijsten ---
   Blijven gewone lijsten; ze schuiven alleen op zodat ze onder de tekst van
   het bovenliggende item uitlijnen in plaats van onder het selectievakje. */
.is-style-checklist--actief li > ul,
.is-style-checklist--actief li > ol {
    margin-top: var(--space-sm);
    margin-left: calc(var(--choice-size) + var(--space-sm));
}

/* --- Editor ---
   De JavaScript draait niet in de editor, dus daar is dit een gewone lijst.
   Een hol vakje als marker maakt zichtbaar dat de stijl aanstaat. Alleen bij
   een ul: bij een ol blijven de nummers de marker. Bewust editor-only, zodat
   op de site geen vakje oplicht in het moment voordat de JavaScript draait. */
.editor-styles-wrapper ul.wp-block-list.is-style-checklist {
    list-style-type: "\2610\00a0";
}

/* --- Print --- */
@media print {
    /* Teller en wislink zijn schermhulpmiddelen; op papier zijn de
       selectievakjes zelf de enige status. De card mag ook weg: dat
       scheelt ruimte. */
    .checklist-voet {
        display: none !important;
    }

    .checklist-groep {
        border: 0;
        padding: 0;
        margin: 0;
    }

    /* De universele reset in style.css sectie 13.0 zet elke achtergrond op
       transparent !important. Zonder deze regels print een aangevinkt vakje
       als een leeg vakje. Een zwart vinkje op een leeg vakje leest op papier
       beter dan een gevuld blok, en heeft geen kleur nodig. */
    .checklist-vakje {
        border: 1px solid currentColor !important;
    }

    .checklist-vakje:checked {
        background-color: transparent !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.5 3.5L13 5'/></svg>") !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Geen doorhaling op papier: daar is het vakje de enige status. */
    .is-style-checklist--actief li.is-afgevinkt .checklist-tekst {
        text-decoration: none;
    }

    /* style.css sectie 13.0 zet page-break-inside: avoid op ul en ol. Bij een
       lange checklist duwt dat de hele lijst naar een volgende pagina en loopt
       hij er alsnog vanaf. Per item afbreken mag; midden in een item niet. */
    .is-style-checklist--actief {
        page-break-inside: auto;
        break-inside: auto;
    }

    .is-style-checklist--actief li {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}