/* šablona Doma – vzhled prvku Zaškrtávací seznam */

/*
    Seznam je list ze sešitu (linky, okraj a dírky), políčka jsou ručně kreslené čtverečky
    s fajfkou, která se při zaškrtnutí „dokreslí“, a zaškrtnutý řádek se podbarví jako
    zvýrazňovačem. Výsledek je žlutý lístek s páskou a zakroužkovaným počtem.
    Oba jsou papír, takže mají světlý kontext i uvnitř tmavé sekce.
*/

/* světlý kontext papíru (stejné hodnoty jako stránka v theme.css) */
.theme-doma :is(.cm-checklist-list,.cm-checklist-result){
    --doma-text:var(--palette-brown);
    --doma-text-contrast:var(--palette-cream);
    --doma-text-soft:color-mix(in oklab, var(--palette-brown) 91%, var(--palette-cream));
    --doma-text-body:color-mix(in oklab, var(--palette-brown) 83%, var(--palette-cream));
    --doma-text-muted:color-mix(in oklab, var(--palette-brown) 72%, var(--palette-cream));
    --doma-heading:var(--headline-color-from, var(--palette-brown));
    --doma-accent:var(--doma-gold-deep);
    --doma-line:color-mix(in oklab, var(--palette-brown) 10%, color-mix(in oklab, var(--palette-gold) 20%, var(--palette-cream)));
    --link-color:var(--palette-terracotta);
    --text-color:var(--palette-brown);
    color:var(--doma-text-soft);
}

/* list ze sešitu */
.theme-doma .cm-checklist-list{
    position:relative;
    padding:4.8rem clamp(22px, 3.4vw, 44px) 4rem clamp(68px, 7vw, 96px);
    border-radius:10px;
    background-color:var(--palette-paper);
    background-image:
        radial-gradient(circle 9px at 33px 70px, var(--palette-cream) 6.5px, color-mix(in srgb, var(--doma-shadow-base) 28%, var(--palette-cream)) 8.5px, transparent 9px),
        radial-gradient(circle 9px at 33px 50%, var(--palette-cream) 6.5px, color-mix(in srgb, var(--doma-shadow-base) 28%, var(--palette-cream)) 8.5px, transparent 9px),
        radial-gradient(circle 9px at 33px calc(100% - 70px), var(--palette-cream) 6.5px, color-mix(in srgb, var(--doma-shadow-base) 28%, var(--palette-cream)) 8.5px, transparent 9px),
        linear-gradient(90deg, transparent clamp(50px, 5vw, 70px), var(--doma-margin-line) clamp(50px, 5vw, 70px) calc(clamp(50px, 5vw, 70px) + 2px), transparent calc(clamp(50px, 5vw, 70px) + 2px)),
        repeating-linear-gradient(180deg, transparent 0 39px, var(--doma-ruled) 39px 40px);
    background-position:0 0, 0 0, 0 0, 0 0, 0 30px;
    box-shadow:0 30px 60px -40px var(--doma-shadow);
    transition:rotate .9s var(--doma-ease), translate .9s var(--doma-ease), box-shadow .9s var(--doma-ease);
}
.theme-doma .cm-checklist-items{
    gap:.2rem 3.6rem;
}

/* nadpis listu ručním písmem šablony a úvodní text pod ním */
.theme-doma .cm-checklist-title{
    position:relative;
    margin:0;
    font-family:var(--font-accent, cursive);
    font-weight:700;
    font-size:clamp(4rem, 4vw, 5.6rem);
    line-height:1;
    letter-spacing:0;
    color:var(--doma-text);
}
.theme-doma .cm-checklist-intro{
    position:relative;
    margin:1.2rem 0 0;
    font-size:1.7rem;
    line-height:1.5;
    color:var(--doma-text-body);
}
.theme-doma :is(.cm-checklist-title,.cm-checklist-intro) + .cm-checklist-items{
    margin-top:1.8rem;
}
.theme-doma .cm-checklist-label,
.theme-doma .cm-checklist-label *{
    line-height:1.55;
}
.theme-doma .cm-checklist-label{
    font-size:1.65rem;
    color:var(--doma-text);
}

/* ručně kreslený čtvereček - každý trochu jinak natočený */
.theme-doma .cm-checklist-box{
    border-color:var(--doma-gold-deep);
    border-radius:5px;
    background-color:var(--palette-paper);
    rotate:-2deg;
}
.theme-doma .cm-checklist-item:nth-child(3n+2) .cm-checklist-box{
    rotate:1.5deg;
}
.theme-doma .cm-checklist-item:nth-child(3n) .cm-checklist-box{
    rotate:-1deg;
}
.theme-doma .cm-checklist-label:hover .cm-checklist-box{
    border-color:var(--palette-terracotta);
}
.theme-doma .cm-checklist-tick path{
    stroke:var(--palette-terracotta);
    transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1);
}
.theme-doma .cm-checklist-input:checked + .cm-checklist-box{
    background-color:var(--palette-butter);
}
.theme-doma .cm-checklist-input:focus-visible + .cm-checklist-box{
    outline:3px solid var(--palette-terracotta);
    outline-offset:3px;
}

/* zaškrtnutý řádek podbarvený jako zvýrazňovačem (po řádcích textu) */
.theme-doma .cm-checklist-input:checked ~ .cm-checklist-text > span{
    background-image:linear-gradient(transparent 56%, color-mix(in srgb, var(--palette-butter) 95%, transparent) 56%, color-mix(in srgb, var(--palette-butter) 95%, transparent) 90%, transparent 90%);
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
}

/* lístek s výsledkem */
.theme-doma .cm-checklist-result{
    gap:1.4rem;
    max-width:38rem;
    margin:0 auto;
    padding:3.8rem 3.4rem 3.4rem;
    border:0;
    border-radius:6px 6px 28px 6px;
    background-color:var(--palette-butter);
    box-shadow:0 30px 60px -32px var(--doma-shadow-strong);
    rotate:-1.6deg;
    transition:rotate .9s var(--doma-ease), translate .9s var(--doma-ease), box-shadow .9s var(--doma-ease);
}
.theme-doma .cm-checklist-result::before{
    content:"";
    position:absolute;
    z-index:2;
    top:-1.4rem;
    left:50%;
    width:11rem;
    height:2.8rem;
    margin-left:-5.5rem;
    background-color:color-mix(in srgb, var(--palette-lavender) 95%, transparent);
    box-shadow:0 2px 4px var(--doma-shadow-tape);
    rotate:3deg;
    pointer-events:none;
}

/* zakroužkovaný počet */
.theme-doma .cm-checklist-count{
    padding:.2rem 1rem;
    font-family:var(--font-heading, inherit);
    font-size:6rem;
    color:var(--doma-text);
}
.theme-doma .cm-checklist-count::after{
    content:"";
    position:absolute;
    left:-8%;
    top:-24%;
    width:116%;
    height:148%;
    background-color:var(--palette-terracotta);
    -webkit-mask:url(svg/mark-circle.svg) 0 0 / 100% 100% no-repeat;
    mask:url(svg/mark-circle.svg) 0 0 / 100% 100% no-repeat;
    pointer-events:none;
}
.theme-doma .cm-checklist-result-text{
    margin-top:.6rem;
    font-size:1.65rem;
    color:var(--doma-text-body);
}
.theme-doma .cm-checklist-button{
    margin-top:.6rem;
}
.theme-doma .cm-checklist-button .cm-button-content :is(button,a){
    width:100%;
    justify-content:center;
    text-align:center;
}

/* obrázek pod lístkem s výsledkem - polaroid s páskou a popiskem ručním písmem */
.theme-doma .cm-checklist-aside{
    gap:4.4rem;
    max-width:38rem;
    margin:0 auto;
}
.theme-doma .cm-checklist-aside > .cm-checklist-result{
    width:100%;
}
.theme-doma .cm-checklist-figure{
    position:relative;
    max-width:27rem;
    padding:1.2rem 1.2rem 1.4rem;
    border-radius:10px;
    background-color:var(--palette-paper);
    box-shadow:0 30px 60px -30px var(--doma-shadow-strong);
    rotate:3deg;
    transition:rotate .9s var(--doma-ease), translate .9s var(--doma-ease), box-shadow .9s var(--doma-ease);
}
.theme-doma .cm-checklist-figure::before{
    content:"";
    position:absolute;
    z-index:2;
    top:-1.4rem;
    left:50%;
    width:10rem;
    height:2.8rem;
    margin-left:-5rem;
    background-color:color-mix(in srgb, var(--palette-butter) 92%, transparent);
    box-shadow:0 2px 4px var(--doma-shadow-tape);
    rotate:-3deg;
    pointer-events:none;
}
.theme-doma .cm-checklist-figure-image{
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius:6px;
}
.theme-doma .cm-checklist-figure-caption{
    margin:1rem 0 0;
    padding:0 .6rem;
    font-family:var(--font-accent, cursive);
    font-size:2.4rem;
    font-weight:600;
    line-height:1.15;
    color:var(--palette-brown);
}

/* nadzvednutí papíru při najetí myší */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .theme-doma .cm-checklist-figure:hover{
        rotate:0deg;
        translate:0 -6px;
        box-shadow:0 36px 60px -30px var(--doma-shadow-strong);
    }
    .theme-doma .cm-checklist-list:hover{
        rotate:-.8deg;
        translate:0 -5px;
        box-shadow:0 36px 60px -34px var(--doma-shadow);
    }
    .theme-doma .cm-checklist-result:hover{
        rotate:0deg;
        translate:0 -6px;
        box-shadow:0 36px 60px -30px var(--doma-shadow-strong);
    }
}

@media (max-width:767px){
    .theme-doma .cm-checklist-list{
        padding:3.6rem 2.2rem 3.2rem 68px;
    }
    .theme-doma .cm-checklist-result{
        width:100%;
        padding:3.4rem 2.8rem 3rem;
    }
    .theme-doma .cm-checklist-count{
        font-size:5.2rem;
    }
    .theme-doma .cm-checklist-title{
        font-size:4rem;
    }
}

@media (prefers-reduced-motion:reduce){
    .theme-doma :is(.cm-checklist-list,.cm-checklist-result,.cm-checklist-box,.cm-checklist-tick path,.cm-checklist-figure){
        transition:none;
    }
}