@font-face {
    font-family: din;
    src: url("../fonts/din-2014.otf");
}

@layer styleguide {
    :root{
        --primary-text-color: #ffffff;
        --secondary-text-color: #52a4d6;
        
        --primary-background-color:#082036;
        --secondary-background-color:#ffffff;
        --quote-background-color: #12314D;
        --contact-background-color: #1a4973;
        --button-color: #52a4d6;

        --h1-font-size-desktop:96px;
        --h1-font-size-tablet:72px;
        --h1-font-size-mobile:64px;
        --h1-letter-spacing:3%;
        --h1-font-weight:600;

        --h2-font-size-desktop:72px;
        --h2-font-size-tablet:64px;
        --h2-font-size-mobile:48px;
        --h2-letter-spacing:3%;
        --h2-font-weight:400;

        --h3-font-size-desktop:64px;
        --h3-font-size-tablet:48px;
        --h3-font-size-mobile:32px;
        --h3-letter-spacing:3%;
        --h3-font-weight:400;

        --p-large-font-size-desktop:32px;
        --p-large-font-size-tablet:28px;
        --p-large-font-size-mobile:24px;
        --p-large-letter-spacing:3%;
        --p-large-font-weight:300;

        --p-medium-font-size-desktop:28px;
        --p-medium-font-size-tablet:24px;
        --p-medium-font-size-mobile:20px;
        --p-medium-letter-spacing:3%;
        --p-medium-font-weight:300;

        --p-small-font-size-desktop:24px;
        --p-small-font-size-tablet:20px;
        --p-small-font-size-mobile:16px;
        --p-small-letter-spacing:3%;
        --p-small-font-weight:300;

    }
}

*{
    margin: 0;
    line-height: 1.4;
    font-family: din;
    letter-spacing: 3%;
    box-sizing: border-box;
}

body.menu-open{
    overflow: hidden;
}

@keyframes --move-in-from-right {
    0% {
        translate: 100%;
    }
    70%{
        translate: -20%;
    }
    100% {
        translate: 0%;
    }
}

@keyframes --move-in-from-left {
    0% {
        translate: -100%;
    }
    70%{
        translate: 20%;
    }
    100% {
        translate: 0%;
    }
}

header{
    display: flex;
    position: relative;
    height: 5rem;
    justify-content: space-between;
    padding-inline: 3%;

    nav{
        align-content: center;

        .menu-button {
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            padding: 0;
            justify-content: center;
            z-index: 1001;
            position: relative;

            path {
                transition: .2s ease-out;
                transform-origin: center;
            }
            &:has(+ .hamburgerMenu-open) {
                .lijn-onder, .lijn-boven {
                    opacity: 0;
                }
                .lijn-midden {
                    rotate: 45deg;
                }
                .lijn-midden + .lijn-midden {
                    rotate: -45deg;
                }
            }
        }

        .menu{
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            z-index: 1000;
            transform: translateY(-100%);
            transition: transform .2s ease-in-out;

            background-color: #1D72A6;
            color: var(--primary-text-color);

            padding: 0;
            margin:0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            li{
                position: relative;
                text-align: center;
                list-style: none;

                a{
                    text-decoration: none;
                    color: var(--primary-text-color);
                    font-size: var(--p-large-font-size-mobile);

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }

        #menu-label{
            color: black;
            font-size: 16px;
        }

        .hamburgerMenu-open{
            transform: translateY(0);
            padding-top: 5rem;
            
            @media (prefers-reduced-motion: no-preference) {
                li {
                    animation-duration: .5s;
                    animation-fill-mode: backwards;
                    animation-delay: calc(sibling-index() * .15s);
                }
                li:nth-of-type(odd) {
                    animation-name:--move-in-from-left;
                }

                li:nth-of-type(even) {
                    animation-name:--move-in-from-right;
                }
            }

        }

        
    }

    @media (min-width: 1024px){
        nav{
            .menu-button{
                display: none;
            }

            .menu{
                position: absolute;
                top: 0;
                right: 0;
                width: 80%;
                height: 5rem;
                z-index: 1;
                transform: translateX(0);

                background-color: transparent;
                
                display: flex;
                flex-direction: row;
                height: 5rem;
                margin: 0;
                align-items: center;

                li{
                    a{
                        color: black;
                    }
                    .contact-us-btn{
                        color: var(--primary-text-color);

                        &:hover{
                            color: black;
                            text-decoration: none;
                        }
                    }
                }
                
            }
        }
    }

}



main{
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);

    h1{
        font-weight: var(--h1-font-weight);
        font-size: var(--h1-font-size-mobile);
        text-align: center;
        margin: 0;
        @media (min-width:768px){
            font-size: var(--h1-font-size-tablet);
        }
        @media (min-width:1024px){
            font-size: var(--h1-font-size-desktop);
        }
    }


    .viewer, .configurator, .full-experience{
        padding-bottom: 2rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto max-content;

        .js-270viewer{
            width: auto;
            height: auto;
            margin: 0;
            aspect-ratio: 1/1;
            object-fit: cover;
            grid-column-start: 2;
        }

        p, details{
            font-size: var(--p-large-font-size-mobile);
            font-weight: var(--p-large-font-weight);
            margin: 0;
            padding-inline: 3%;
            width: 21rem;
            grid-column-start: 2;
            text-wrap-style: pretty;

            @media (min-width:768px){
                font-size: var(--p-large-font-size-tablet);
            }
            @media (min-width:1024px){
                font-size: var(--p-large-font-size-desktop);
            }
        }

        h2{
            font-size: var(--h3-font-size-mobile) ;
            font-weight: var(--h3-font-weight);
            margin: 0;
            padding-inline: 3%;
            grid-column-start: 2;
            @media (min-width:768px){
                font-size: var(--h3-font-size-tablet);
            }
            @media (min-width:1024px){
                font-size: var(--h3-font-size-desktop);
            }
        }

        p:first-of-type{
            padding-left: 1.3rem;
        }

        p:nth-of-type(2){
            display: none;
        }

        ul{
            padding-left: 1.2rem;
            li{
                display: flex;
                align-items: center;
                gap: .5rem;

                &::before{
                    content: url(../assets/Icon-Arrow.svg);
                }
            }
        }
        .list-tablet{
            display: none;
        }

        @media(min-width:768px){
            grid-template-rows: max-content max-content max-content;
            
            p:first-of-type{
                display: none;
            }

            p:nth-of-type(2){
                display: block;
                grid-column-start: 1;
                grid-row-start: 2;
                width: 100%;
            }
            
            h2{
                grid-column-start: 1;
                grid-row-start: 1;
            }

            .js-270viewer{
                grid-row-start: 1;
                grid-row-end: 4;
            }

            details{
                display: none;
            }

            .list-tablet{
                display: block;
                grid-row-start: 3;
            }
        }
    }

    .configurator{
        .js-270viewer, p, details, h2{
            grid-column-start: 1;
        }

        @media(min-width:768px){
            grid-template-columns: auto 1fr;
            grid-template-rows: max-content max-content max-content;

            .js-270viewer{
                grid-row-start: 1;
                grid-row-end: 4;
            }
            h2{
                grid-column-start: 2;
            }
            p:nth-of-type(2){
                grid-column-start: 2;
                grid-row-start: 2;
            }

        }
    }

    .quote{
        background-color: var(--quote-background-color);
        color: var(--primary-text-color);
        font-size: var(--h2-font-size-mobile);
        font-weight: var(--h2-font-weight);
        padding-inline: 3%;
        margin: 0;
        @media (min-width:768px){
            font-size: var(--h2-font-size-tablet);
        }
        @media (min-width:1024px){
            font-size: var(--h2-font-size-desktop);
        }

        em{
            color: var(--secondary-text-color);
            font-style: normal;
        }
    }

    .implem{
        padding-inline: 3%;

        h2{
            font-size: var(--h2-font-size-mobile);
            @media (min-width:768px){
                font-size: var(--h2-font-size-tablet);
            }
            @media (min-width:1024px){
                font-size: var(--h2-font-size-desktop);
            }
        }

        p{
            max-width: 50ch;
            padding-bottom: 2rem;
            font-size: var(--p-large-font-size-mobile);
            @media (min-width:768px){
                font-size: var(--p-large-font-size-tablet);
            }
            @media (min-width:1024px){
                font-size: var(--p-large-font-size-desktop);
            }
        }

        img{
            width: 100%;
        }
    }

    .CTA{
        padding-inline: 3%;
        padding-top: 1rem;
        padding-bottom: 2rem;
        background-color: var(--contact-background-color);

        h2{
            padding-bottom: 1rem;
            font-size: var(--h2-font-size-mobile);
            @media (min-width:768px){
                font-size: var(--h2-font-size-tablet);
            }
            @media (min-width:1024px){
                font-size: var(--h2-font-size-desktop);
            }
        }

        a:nth-of-type(2){
            text-decoration: none;
            color: #72C1F2;
            border: #72C1F2 2px solid;
            border-radius: 10rem;
            padding: .75rem 1.5rem .75rem 1.5rem;
            cursor: pointer;
            display: inline-block;

            &:hover{
                background-color: var(--primary-text-color);
                scale: 1.1;
            }
            &:active{
                scale: 0.9;
            }
        }
    }
}

.contact-us-btn{
    background-color: var(--button-color);
    color: var(--primary-text-color);
    border: var(--button-color) 2px solid;
    border-radius: 10rem;
    text-decoration: none;
    padding: .75rem 1.5rem .75rem 1.5rem;
    cursor: pointer;
    display: inline-block;

    &:hover{
        background-color: var(--primary-text-color);
        color: var(--button-color);
        scale: 1.1;
    }
    &:active{
        scale: .9;
    }
}

footer{
    padding-inline: 3%;
    height: fit-content;
    padding-top: 1rem;
    color: var(--contact-background-color);

    p{
        margin: 0;
    }

    div:nth-of-type(2){
        display: flex;
        justify-content: space-between;
        max-width: 25rem;

        a{
            text-decoration: none;
            color: var(--contact-background-color);
            cursor: pointer;
        }
    }

    @media(min-width:768px){
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 6rem;

        div:nth-of-type(2){
            align-items: flex-end;
        }
    }

}