/*Vars*/
:root{
	/*font-size: 62.5%;*/
    font-size: 80%;
    /*text-wrap: balance;*/
}
/*Format*/

:root :where(p) {
    max-width: 80ch;
}

.is-style-factlist{
  
    margin: 0;
    padding: 0;
    column-count: 2;
    gap: var(--wp--preset--spacing--mainpadding);

    ::marker{
        color: var(--wp--preset--color--ci-yellow);
        font-weight: 700;
    }

    li{
        border-bottom: var(--wp--custom--main-border);
        border-color: var(--wp--preset--color--ci-yellow);
        padding: 2rem 0;


        b, strong{
              font-size: 2rem;
            display: block;
            color: var(--wp--preset--color--accent);
        }
    }
}

@media screen and (max-width: 768px) {
    .is-style-factlist{
        column-count: unset;

        li{

            &:last-child{
                border-bottom: 0;
            }
        }
    }
}

.is-style-codeonimage{
    position: relative;

    .codewrap{
        position: absolute;

        top: 50%;
       
        transform: translateY(-50%);
        width: 100%;
        margin-top: 0;
    }

    &:first-child .codewrap{
         left: -50%;
    }

    &:last-child .codewrap{
         left: 50%;
    }
}

.is-style-logo-gallery{

    align-items: center;
    gap: 4rem !important;

    figure{
        margin-top: auto !important;
                max-width: 95px !important;
    }

    img{
        filter: grayscale(1);
        transition: var(--wp--custom--main-trans);

        &:hover{
            filter: grayscale(0);
        }
    }

}

.btn{
    background: var(--wp--preset--color--ci-yellow);
    border-radius: 5rem;
    color: var(--wp--preset--color--accent);
    transition: var(--wp--custom--main-trans);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wp-element-button,
.btn{

     transition: var(--wp--custom--main-trans);

    &:hover{
        background: var(--wp--preset--color--accent) !important;
        color: var(--wp--preset--color--light);
        border-color: var(--wp--preset--color--accent) !important;
        box-shadow: var(--wp--custom--box-shadow);
        transform: translateY(-.25rem);
    }


}


.has-background{
    transition: var(--wp--custom--main-trans);

     &:hover{
        box-shadow: var(--wp--custom--box-shadow);
     }
}


h1,
h2{
    italic,
    em{
        opacity: .3;
        mix-blend-mode: multiply;
    }
}

h2{

    a{

        --margin: .05em;
        position: relative;
        transition: var(--wp--custom--main-trans);

        font-weight: 600;
        color: var(--wp--preset--color--accent) !important;
        margin: 0 var(--margin);

        &::before{
            content: '';
            position: absolute;
            bottom: 0;
            left: calc(-1 * var(--margin));
            width: calc(100% + (2 * var(--margin)));
            height: 10%;
            background-color: var(--wp--preset--color--ci-yellow);
            transition: var(--wp--custom--main-trans);
            z-index: -1;
        }

        &:hover{

            
            &::before{
                height: 100%;
            }
        }
    }
}

hr{
    max-width: var(--wp--style--global--content-size);
    margin: 3rem auto;
    background: var(--wp--preset--color--accent);
    opacity: .25;
    height: var(--wp--custom--border-width);
    border: 0 !important;
    min-height: unset !important;

    &.wp-block-separator{
        max-width: unset;
    }
}

main{
    hr{
        margin: 0 auto;
    }
}

/*Head*/

header{
    
    width: 100%;
    padding: calc(var(--wp--preset--spacing--mainpadding) / var(--wp--custom--div-three));
    box-sizing: border-box;
    background: color-mix(in srgb, var(--wp--preset--color--light) 70%, transparent);
    border: var(--wp--custom--main-border);
    
    position: sticky;
    z-index: 100;
    top: 0;

    backdrop-filter: blur(14px);
    transition: var(--wp--custom--main-trans);

    &:hover{
        box-shadow: var(--wp--custom--box-shadow);
    }

    section{
        max-width: var(--wp--style--global--content-size);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }

    .wrap{
         width: 165px;

         justify-content: end;
         display: flex;
    }
    svg{
       width: 100%;
       height: auto;
    }

    a{
        font-weight: 600;  
        transition: var(--wp--custom--main-trans);              
    }

    nav{
        ul{
            display: flex;
            gap: var(--wp--preset--spacing--20);
            align-items: center;
            margin: 0;
            padding: 0;
            list-style: none;

            li{
                a{
                    &:hover{
                        color: var(--wp--preset--color--ci-yellow);
                    }
                }
            }
        }
    }

    
}

#toggler{
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    outline: none;
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--wp--preset--color--ci-yellow);
    color: var(--wp--preset--color--accent);
    border-radius: 5rem;
    cursor: pointer;
    transition: var(--wp--custom--main-trans);


    svg {
        width: 60px;
        height: 30px;
        stroke: currentColor;
        stroke-width: 4px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        display: block;
        position: absolute;
        path {
            transition: stroke-dasharray var(--duration, .85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, .85s) var(--easing, ease) var(--delay, 0s);
            stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
            stroke-dashoffset: var(--offset, 126px);
            transform: translateZ(0);
            &:nth-child(2) {
                --duration: .7s;
                --easing: ease-in;
                --offset: 100px;
                --array-2: 74px;
            }
            &:nth-child(3) {
                --offset: 133px;
                --array-2: 107px;
            }
        }
    }

    &:hover{
        background-color: var(--wp--preset--color--accent);
        color: var(--wp--preset--color--light);
        box-sizing: var(--wp--custom--box-shadow);
        transform: translateY(-.25rem);
    }
}

aside.respnav-wrap{
    position: fixed;
    height: calc(100dvh - var(--header-height));
    width: 100dvw;


    bottom: 0;
    left: 0;
    transform: translateY(100dvh);
    transition: var(--wp--custom--main-trans);

    z-index: 5;

    background: color-mix(in srgb, var(--wp--preset--color--light) 70%, transparent);
    backdrop-filter: blur(14px);

    display: flex;
    align-items: center;
    justify-content: center;

    nav{

        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-direction: column;

            li{
                border-bottom: var(--wp--custom--main-border);
                border-color: var(--wp--preset--color--accent);
                display: block;
                width: 100%;
                text-align: center;

                &:last-child{
                    border-bottom: 0;
                }
               
                a{
                    font-size: 5vh;
                    display: block;
                }
            }
        }
    }

}

.navopen{

    overflow: hidden;

    aside.respnav-wrap{
        transform: none;
    }

    #toggler{
        svg {
            path {
                --offset: 57px;
                &:nth-child(1),
                &:nth-child(3) {
                    --delay: .15s;
                    --easing: cubic-bezier(.2, .4, .2, 1.1);
                }
                &:nth-child(2) {
                    --duration: .4s;
                    --offset: 2px;
                    --array-1: 1px;
                }
                &:nth-child(3) {
                    --offset: 58px;
                }
            }
        }
    }
}

/*Main*/

/*Footer*/

footer{
    padding: var(--wp--preset--spacing--mainpadding) calc(var(--wp--preset--spacing--mainpadding) / var(--wp--custom--div-three));
    box-sizing: border-box;
    background: var(--wp--preset--color--mid);
    

    section{
        max-width: var(--wp--style--global--content-size);
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin: 0 auto;
        box-sizing: border-box;
        gap: var(--wp--preset--spacing--mainpadding);

        svg{
            width: auto;
            height: 30px;
            display: block;
            margin-bottom: 1rem;
        }

        .col-50{
             flex:  0 0 calc(50% - var(--wp--preset--spacing--mainpadding));
        }

        .col-25{
            flex:  0 0 calc(25% - var(--wp--preset--spacing--mainpadding));;
        }

        b{
            display: block;
            height: 30px;
            margin-bottom: 1rem;
        }   

        p{
            margin-top: 0;
        }

        ul{
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;

            &.nav-law{
                flex-direction: row;
                gap: 1rem;
            }
        }



        a{
            color: var(--wp--preset--color--text);
            transition: var(--wp--custom--main-trans);

            &:hover{
                color: var(--wp--preset--color--accent);
            }

            &[href^="mailto:"],
            &[href^="tel:"]{
                &::before {
                    content: '';
                    display: inline-block;
                    width: 1em;
                    height: 1em;
                    margin-right: .5em;
                    background-color: currentcolor; 
                    mask-repeat: no-repeat;
                    mask-position: center;
                    mask-size: contain;
                    transition: var(--maintrans);
                }
            }
            
            &[href^="mailto:"]{
                &::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l3.235 1.94a2.8 2.8 0 0 0-.233 1.027L1 5.384v5.721l3.453-2.124q.219.416.55.835l-3.97 2.443A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741l-3.968-2.442q.33-.421.55-.836L15 11.105V5.383l-3.002 1.801a2.8 2.8 0 0 0-.233-1.026L15 4.217V4a1 1 0 0 0-1-1zm6 2.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132'/%3E%3C/svg%3E");
                }
            }
            
            &[href^="tel:"]{
                &::before {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M10 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM6 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'%3E%3C/path%3E%3Cpath fill='white' d='M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2M1.599 4.058a.5.5 0 0 1 .208.676A7 7 0 0 0 1 8c0 1.18.292 2.292.807 3.266a.5.5 0 0 1-.884.468A8 8 0 0 1 0 8c0-1.347.334-2.619.923-3.734a.5.5 0 0 1 .676-.208m12.802 0a.5.5 0 0 1 .676.208A8 8 0 0 1 16 8a8 8 0 0 1-.923 3.734.5.5 0 0 1-.884-.468A7 7 0 0 0 15 8c0-1.18-.292-2.292-.807-3.266a.5.5 0 0 1 .208-.676M3.057 5.534a.5.5 0 0 1 .284.648A5 5 0 0 0 3 8c0 .642.12 1.255.34 1.818a.5.5 0 1 1-.93.364A6 6 0 0 1 2 8c0-.769.145-1.505.41-2.182a.5.5 0 0 1 .647-.284m9.886 0a.5.5 0 0 1 .648.284C13.855 6.495 14 7.231 14 8s-.145 1.505-.41 2.182a.5.5 0 0 1-.93-.364C12.88 9.255 13 8.642 13 8s-.12-1.255-.34-1.818a.5.5 0 0 1 .283-.648'%3E%3C/path%3E%3C/svg%3E");
                }
            }
        }
    }
}


/*Responsive*/

@media screen and (max-width: 990px){
    #toggler{
        display: flex;
    }

    header{
        nav{
            display: none;
        }
    }

    .wp-block-group :where(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover, .wp-block-media-text),
    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 80dvw !important;
        margin-left: auto;
        margin-right: auto;
    }

    footer{
        section{
            flex-direction: column;
        }
    }



}


dialog#popover{
   div{
        border-radius: 3rem;
        max-width: 1000px;

        button{
            border-radius: 3rem;
            background-color: var(--wp--preset--color--accent);
            color: var(--wp--preset--color--light);
            right: 1.5rem;
            top: 2rem;
        }
   }


}