/* prvek Zaškrtávací seznam – rozvržení a stavy (vzhled dává šablona) */

/*
    Seznam a karta s výsledkem vedle sebe, na telefonu (a v úzkém sloupci) pod sebou. Načítá ho
    web i náhled v adminu u všech šablon, proto je vzhled jen decentní - šablona si ho dokreslí
    ve vlastním checklist.css. Rozměry jsou v rem (1rem = 10px).

    Políčko je skutečný input type=checkbox uvnitř popisku: je neviditelné, ale leží přes
    čtvereček, takže funguje myš, dotyk i klávesnice (Tab, mezerník). Viditelný je čtvereček
    s fajfkou hned za ním - stav se kreslí sousedním selektorem, bez skriptu.
*/
.cm-checklist-element{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:3.2rem 4.8rem;
}
.cm-checklist-list{
    flex:1.6 1 36rem;
    min-width:0;
}
.cm-checklist-result{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
    flex:1 1 26rem;
    min-width:0;
    padding:2.4rem;
    border:1px solid var(--line-color, #EBEBEB);
    border-radius:10px;
}

/* nadpis a úvodní text nad položkami (nepovinné) - písmo nadpisů šablony, menší než běžný h2 */
.cm-checklist-title{
    margin:0 0 1.2rem;
    font-size:3.6rem;
    line-height:1.2;
}
.cm-checklist-intro{
    margin:0 0 1.6rem;
    font-size:1.7rem;
    line-height:1.5;
}

/* položky - na širším místě ve dvou sloupcích */
.cm-checklist-items{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
    gap:.2rem 3.6rem;
    margin:0;
    padding:0;
    list-style:none;
}
.cm-checklist-item{
    margin:0;
    padding:0;
}
.cm-checklist-item::before,
.cm-checklist-item::marker{
    content:none;
}
.cm-checklist-label{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:1.4rem;
    padding:.8rem 0;
    font-size:1.6rem;
    line-height:1.55;
    cursor:pointer;
}
.cm-checklist-input{
    position:absolute;
    z-index:1;
    left:-.6rem;
    top:.4rem;
    display:block;
    width:3.4rem;
    height:3.4rem;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    cursor:pointer;
}
.cm-checklist-box{
    position:relative;
    flex:none;
    width:2.2rem;
    height:2.2rem;
    margin-top:.2rem;
    border:2px solid currentColor;
    border-radius:4px;
    transition:background-color .3s, border-color .3s;
}
.cm-checklist-tick{
    position:absolute;
    left:0;
    top:-.9rem;
    width:3rem;
    height:2.8rem;
    overflow:visible;
}
.cm-checklist-tick path{
    fill:none;
    stroke:var(--link-color, currentColor);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset .35s ease;
}
.cm-checklist-input:checked + .cm-checklist-box .cm-checklist-tick path{
    stroke-dashoffset:0;
}
.cm-checklist-input:focus-visible + .cm-checklist-box{
    outline:3px solid var(--link-color, currentColor);
    outline-offset:3px;
}
.cm-checklist-text{
    min-width:0;
}

/* karta s výsledkem - počet zaškrtnutých, text podle počtu a tlačítko */
.cm-checklist-status{
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.cm-checklist-count{
    position:relative;
    align-self:flex-start;
    font-size:4.8rem;
    line-height:1;
    font-variant-numeric:tabular-nums;
}
.cm-checklist-result-text{
    margin:0;
    font-size:1.6rem;
    line-height:1.55;
}
.cm-checklist-button .cm-button-element .cm-button-content :is(button,a){
    margin-left:0;
    margin-right:0;
}

/* text jen pro čtečky (počet zaškrtnutých slovy) */
.cm-checklist-sr-only{
    position:absolute !important;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

@media (max-width:767px){
    .cm-checklist-element{
        flex-direction:column;
        align-items:stretch;
        gap:3.2rem;
    }
    .cm-checklist-list,
    .cm-checklist-result{
        flex:none;
    }
    .cm-checklist-title{
        font-size:2.8rem;
    }
}

@media (prefers-reduced-motion:reduce){
    .cm-checklist-box,
    .cm-checklist-tick path{
        transition:none;
    }
}