/*Vars*/
:root{
    --mainpadding: 5vw;

    --mainborder: 2px solid var(--wp--preset--color--dark);
    --maintrans: .3s all ease-in-out;

    --border-radius: .25em;

	font-size: 62.5%;
}

*{
    scroll-behavior: smooth;
}
/*Format*/

.brands img{
    height: 7.5vw !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
}

@media screen and (max-width: 768px) {
    .brands img{
        height: auto !important;
        width: 100% !important;
        max-width: 250px;
        aspect-ratio: unset !important;
    }
}

.wp-block-image img{
    width: 100%;
    height: auto;
}

.directions{
    b{
        font-size: 1.125em;
        margin-bottom: .5em;
        display: block;
        line-height: 1.2;

    }
}

.d-none{
    display: none!important;
}

div.alignfull{
    margin-left: -5vw;
    margin-right: -5vw;
}

.logofill {
    fill: var(--wp--preset--color--text);
}

.wp-block-embed iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
}

.redfont{
    color: var(--wp--preset--color--ci);
}

.btn{
    background: var(--wp--preset--color--ci);
    color: var(--wp--preset--color--light);
    padding: .5em 1em;
    border-radius: var(--border-radius);
    transition: var(--maintrans);

            display: inline-flex;
            align-items: center;
            gap: .5em;

            svg{
                height: 1em;
                width: 1em;
            }
           
        

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

    &.dark{
        background: var(--wp--preset--color--dark);

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

/*accordion*/

.wp-block-accordion-item{
    margin: 0 !important;
    border-top: var(--mainborder);
    transition: var(--maintrans);

    &.is-open{
        border-color: var(--wp--preset--color--ci);

         .wp-block-accordion-heading{
            color: var(--wp--preset--color--ci);
         }
    }

    .wp-block-accordion-heading{
        color: var(--wp--preset--color--text);
        transition: var(--maintrans);

        &:hover{
            text-decoration: none !important;
            color: var(--wp--preset--color--ci);

            .wp-block-accordion-heading__toggle-title{
                text-decoration: none !important;
            }
        }
    }

    .wp-block-accordion-panel{
        margin: 0 0 2em 0!important;
    }
}

/*NAV*/

nav{
    > section{
        padding: 2em var(--mainpadding);
        display: flex;
        align-items: center;
        justify-content: space-between;

        svg{
            width: 200px;
            height: auto;
        }

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

            li{
                border-right: var(--mainborder);

                &:last-child{
                    border-right: 0px;
                }
            }

            a{
                padding: 0 .5em;
                font-weight: 600;
                transition: var(--maintrans);

                &:hover,
                &[aria-current="page"]{
                    color: var(--wp--preset--color--dark);
                }
            }

            
        }

        .wrap{
            display: flex;
            align-items: center;
            gap: var(--mainpadding);
        }
    }

    .toggler{
        border: none;
        background: var(--wp--preset--color--ci);
        padding: .8em .8em;
        width:3.5em;
        height: 3.5em;
        border-radius: 5em;
        color: var(--wp--preset--color--light);

        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 5px;

        transition: var(--maintrans);

        span{
            height: 2px;
            width: 100%;
            background: var(--wp--preset--color--light);
            display: block;
            transition: var(--maintrans);
        }

        &:hover{
            background: var(--wp--preset--color--dark);
            cursor: pointer;
        }
    }    
}

aside.navholderresp{
    --navheight: 100px;

    padding: var(--mainpadding);
    background: var(--wp--preset--color--ci);
    box-sizing: border-box;
    position: fixed;
    top: var(--navheight);
    left: 0;
    height: calc(100dvh - var(--navheight));
    width: 100%;
    z-index: 1000;
    transition: var(--maintrans);
    transform: translatex(100dvw);
    overflow: auto;

    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        
        a{
            color: var(--wp--preset--color--light);
            font-size: clamp(2em, 3.5dvh, 4em);
            transition: var(--maintrans);

             &:hover,
                &[aria-current="page"]{
                    color: var(--wp--preset--color--dark);
                }
        }

        
    }

    hr{
        margin: var(--mainpadding) 0;
        background: var(--wp--preset--color--light);
        border: 0px;
        height: 2px;
    }

    .contacts{
        display: flex;
        gap: 2em;
        flex-direction: column;

        .btn{
            display: block;
            font-size: clamp(1em, 3.5dvh, 1.5em);
            border: var(--mainborder);


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

            svg{
                margin-left: .5em;
            }
        }
    }

    address{
        font-style: normal;
        color: var(--wp--preset--color--light);
    }

    .directions{
        display: flex;
        gap: var(--mainpadding);

        
    b{
        color: var(--wp--preset--color--light);
    }

        > *{
            flex: 0 0 calc(33% - var(--mainpadding));
        }

        a{
            color: var(--wp--preset--color--light);
        }
    }

    svg{
        position: relative;
        top: 3px;
    }

    .sub-menu{
        position: relative;
        opacity: 1;
        top: .5em !important;
        border-top: var(--mainborder);
        border-color: var(--wp--preset--color--light);
        background: transparent;
        border-radius: 0;
        padding-top: .5em !important;

        width: max-content;
        flex-direction: column;

        .wpml-ls-item {
            margin-top: 0em;
        }

        li{
            border-right: 0;
            border-bottom: var(--mainborder);

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

    .wpml-ls-item {
        margin-top: 1em;

        a::after{
            display: none;
        }
    }

}


.sub-menu{
            position: absolute;
            opacity: 0;
            pointer-events: none;
            transition: var(--maintrans);
            top: 4em;
            background-color: var(--wp--preset--color--mid);

            list-style: none;
            margin: 0;
            padding: .5em;
            border-radius: var(--border-radius);

            z-index: 1000;

            flex-direction: column;
            width: max-content;


            a{
                color: var(--wp--preset--color--ci);
            }


            li{
                border-right: 0;
                border-bottom: var(--mainborder);

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

        }

.menu-item {
        position: relative;
        line-height: 2em;
    }

.menu-item-has-children{

    &>a::after{
        content: '+';
        color: currentColor;
        margin-left: .5em;
    }

    &:hover{
        .sub-menu{
            opacity: 1;
            top: 2em;
            pointer-events: all;
        }
    }
}

.navopen{
    overflow: hidden;

    nav{
         .toggler{
            background: var(--wp--preset--color--dark);

            span:nth-of-type(1),
            span:nth-of-type(3){
                opacity: 0;            
            }
         }
    }
    aside.navholderresp{
        transform: none;
    }
}


/*Head*/

.prehead{
    position: relative;
    top: 0;
    background: var(--wp--preset--color--light);
    z-index: 2;
    
    transition: var(--maintrans);
    padding: var(--mainpadding) var(--mainpadding) 0;
    z-index: 100;
    background: var(--wp--preset--color--light);

    .h1{
        font-size: 4dvh;
        line-height: 1.2;
        display: inline-block;
         transition: var(--maintrans);
    }

    .contacts{
        display: flex;
    gap: 1em;
    flex-wrap: wrap;
}
    
    

    

    &.sticky{
        position: sticky;
        top: 0;
        padding: var(--mainpadding);

        display: flex;
        justify-content: space-between;
        gap: 1em;

        .claim{
            font-size: clamp(1em, 3dvh, 1.225em);
            opacity: 0;
            transition: var(--maintrans);

            color: var(--wp--preset--color--light);
        }

        &.topped{
            background-color: var(--wp--preset--color--ci);
            padding: 1em var(--mainpadding);

            .claim{
                opacity: 1;
            }

            .toggle_popover{
                background: var(--wp--preset--color--light);
                color: var(--wp--preset--color--ci);

                &:hover{
                    background-color: var(--wp--preset--color--dark);
                    color: var(--wp--preset--color--light);
                }
            }
        }
    }
}

header{
    --height: auto;

    height: var(--height);
    width: 100%;

    background: var(--wp--preset--color--light);
    z-index: 2;
    position: relative;

    video{
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
        object-fit: cover;
        transform: translateY(0);
        will-change: transform;

       
    }

    .opener{
        position: absolute;
        font-size: clamp(1em, 3dvh, 1.5em);
        bottom: 0;
        left: 0;
        background-color: var(--wp--preset--color--light);
        border-top: var(--mainborder);
        border-color: var(--wp--preset--color--ci);
        padding: var(--mainpadding);
        max-width: 50ch;
    }

    &.overlayhead{
        padding: var(--mainpadding);
        display: flex;
        justify-content: space-between;
        gap: var(--mainpadding);
        box-sizing: border-box;
        background: var(--wp--preset--color--mid);

        .logo{
            svg{
                width: 20em;
                height: auto;
            }
        }
    }
}

/*Main*/
main{
    position: relative;
    z-index: 5;
    background: var(--wp--preset--color--light);

    > section{
        padding: var(--mainpadding);
    }
}

/*forms*/

#gform_1 .gform_body{
    border-top: var(--mainborder);
    padding-top: 2em;
}

/*Footer*/

footer{
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--light);
    position: sticky;
    bottom: 0;
    z-index: 1;



    > section{
        padding: var(--mainpadding);

        display: flex;
        gap: var(--mainpadding);
        justify-content: space-between;

        > *{
            flex: 0 0 calc(33% - var(--mainpadding));

            h2,h3{
                color: var(--wp--preset--color--light);
                margin: 0;
                font-size: clamp(1.5em, 5dvw, 2em);
            }
            
            svg{
                top: 3px;
                position: relative;
            }

            a:hover{
                color: var(--wp--preset--color--mid);
            }


            hr{
                border: 0;
                margin: 2em 0;
                height: 2px;
                background-color: var(--wp--preset--color--light);
            }

            address{
                font-style: normal;
            }

            .direction{
                margin-bottom: 2em;
            }

            .nav-legal{
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                flex-direction: row;

                li{
                    border-right: 2px solid var(--wp--preset--color--light);

                     a{
                        padding-right:1em;
                        color: var(--wp--preset--color--light);
                    }

                    &:last-of-type{
                        border-right: 0px;
                         a{
                                padding-right:0em;
                                padding-left:1em;
                            }
                    }

                   
                }
            }
        }
    }
}

.afterfooter{
    text-align: center;
    font-weight: 600;

    .wpml-ls-current-language{
        a{
            color: var(--wp--preset--color--dark);
        }
    }
}


/*PopOver*/

dialog#popover {
    padding: var(--mainpadding);
    div {
        max-width: 990px;
        border-radius: var(--border-radius);
    }

    .wpml-ls-statics-footer{
        display: none !important;
    }
}


/*Responsive*/

@media screen and (max-width: 990px){


    

    aside.navholderresp{
        .directions{
            display: flex;
            gap: var(--mainpadding);

            > *{
                flex: 0 0 100%;
            }

        }
    }

    .prehead {
        &.sticky{
            display: block;
            font-size: .8em;

            .claim{
                display: none;
            }

            .contacts{
                display: flex;
                justify-content: space-between;
                gap: 1em;
                box-sizing: border-box;

                flex-wrap: nowrap;

                .btn{
                    font-size: clamp(1.25em, 15vw, 1.5em);
                    display: block;
                    width: 100%;
                }
            }

        }
    }

    header{
        .opener{
            position: relative;
        }
    }

    nav{
        #menu-main-menu{
            display: none;
        }

        .btn{
            display: none;
        }
    }       
    
    footer{
        position: relative;
        > section{
            flex-direction: column;
        }
    }
    




    /*Details*/
    .wp-block-columns{
        gap: calc(var(--mainpadding) / 2);
    }

}


@media screen and (max-width: 740px){
    
    header {
        &.overlayhead {
            flex-direction: column;
        }
    }

    .prehead{
        .h1{
            font-size: 3dvh;
        }

         &.sticky {
            .contacts {
                flex-direction: column;

                .btn{
                    font-size: 1.25em;
                    width: auto;
                }
            }
        }
    }
}