html, body{
    width: 100%;
    max-width: 100%;
}

body {
    margin: 0;
    line-height: 1.4;
    font-family: "Parkinsans", sans-serif;
}

/*****************-Alles header-*******************/
header{
    display: flex;
    justify-content: space-between;
    margin-bottom: -20px;
    align-items: center;

    @media (min-width: 768px) {
        margin-bottom: 0px;
    }   

    @media (min-width: 1024px) {
        margin-bottom: 3rem;
    } 

    .logo{
        display: none;

        @media (min-width: 768px) {
            display: block;
            padding: 20px;
            margin-bottom: -20px;
        }
    }

    .logo-small{
        display: flex;
        padding: 20px;

        @media (min-width: 768px) {
            display: none;
        }
    }

    .create-your-list{
        display: none;

        @media (min-width: 1024px) {
            display: block;
        }
    }

    .create-your-list-small{
        display: flex;

        @media (min-width: 1024px) {
            display: none;
        }
    }

    .icons{
        display: flex;
        padding: 20px 20px 0 20px;
        align-content: center;

        /* a{
            display: flex;
            text-decoration: none;
            color: var(--secondary-text-color);
            flex-direction: column;
        } */
    }
}

/*************-main-***************/
@keyframes --open-chat {
  0% {
    width: 2.5em;
  }

  50% {
    width: 90%;
    height: 5em;
  }

  100% {
    width: 90%;
    height: 23em;
  }
}

@keyframes --open-chat-mobile {
  0% {
    width: 2.5em;
  }

  50% {
    width: 18em;
    height: 40em;
  }

  100% {
    width: 90%;
    height: 100%;
  }
}

main{
    background-color: var(--secondary-background-color);
    position: relative;
    margin-top: 3em;
    padding-bottom: 1rem;

    &:has(input[type="checkbox"]:checked){
        .product-grid{
            article{
                display: none;
            }
            article:first-of-type{
                display: block;
            }
        }
    }

    @media(min-width:1024px){
        margin-top: 1em;
        display: flex;
        
    }

    .main-section-search{
        display: none;

        @media(min-width:1024px){
            display: flex;
            flex-direction: column;
            width: 21rem;
            flex: 3;
            position: sticky;
            bottom: 0;
            align-self: end;
            align-items: center;


            h1{
                width: 65%;
                font-weight: 500;
                text-wrap-style: pretty;
                align-content: end;

                span{
                    color: var(--primary-color);
                }
            }

            .heading-gone{
                display: none;
            }

            .users img{
                width: 21rem;
            }

            .secondary-search-bg {
                position: relative;
                width: 90%;
            }

            .ai-button-secondary{
                right: 0.7em;
            }

            .ai-button-primary{
                left: 0.7em;
                height: 50px;
            }

            .secondary-search-input{
                width: 100%;
                box-sizing: border-box;
            }

            article{           
                display: none;
                flex-direction: column;
                background-color:var(--primary-background-color);
                border-radius: 2rem;
                position: relative;
                overflow: hidden;
                width: 2.5em;
                height: 2.5em;
                animation-name: --open-chat-mobile;
                animation-duration: 1s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;

                @media (min-width:1024px) {
                    animation-name: --open-chat;
                }

                #chat-handle{
                    border: none;
                    align-self: center;
                    border-radius: 0 0 1rem 1rem ;
                    cursor: pointer;
                }
                
                p{
                    border-radius: 1rem 1rem 0 1rem;
                    margin-inline: 5px;
                    padding: .2rem;
                    width: fit-content;
                    max-width: 20ch;
                }

                p:first-of-type{
                    background-color: var(--user-chat-background-color);
                    align-self: end;
                }

                .chat-response-age, .chat-response-describe{
                    p{
                        background-color: var(--checkbox-background-color);
                        border-radius: 1rem 1rem 1rem 0;
                    }
                }

                
            }

            .article-visible {
                display: flex;

            }

        }
    }

    /* 2de section rechts */
    .background-grid{
        display: grid;
        background-color: var(--primary-background-color);
        grid-template-rows: repeat(1fr);
        justify-content: center;
        border-top: 5px solid var(--primary-color);

        @media(min-width:1024px){
            width: 42rem;
            flex: 6;
        }

        h2{
            text-align: center;
            font-size: var(--font-size-text);
            background-color: var(--primary-background-color);
            font-weight: var(--font-weight-text);
            width: 97%;

        }

        .tie{
            position: absolute;
            top: -49px;
            left: 50%;
            transform: translateX(-50%);

            @media (min-width: 768px) {
                position: absolute;
                top: -72px;
                left: 50%;
                transform: translateX(-50%);
            }

            @media (min-width: 1024px) {
                left: 67%;
            }

            svg{
                height: 50px;

                @media (min-width: 768px) {
                    height: 100%;
                }
            }
        }

        .product-grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            margin-inline: 10px;
            justify-items: center;
            background-color: var(--primary-background-color);
            padding-bottom: 1em;
            padding-top: 1em;

            @media (min-width: 425px) {
            grid-template-columns: repeat(2, 1fr);
            }   

            @media (min-width: 768px) {
            grid-template-columns: repeat(3, 1fr);
            }

            @media (min-width: 1024px) {
            grid-template-columns: repeat(3, 1fr);
            }
            
            @media (min-width: 1440px) {
            grid-template-columns: repeat(4, 1fr);
            }

            @media (min-width: 1770px) {
            grid-template-columns: repeat(5, 1fr);
            }

        }

        .product-link-overlay{
            position: absolute;
            inset: 0;
        }

        /* in de styleguide aanpassen */
        .article-product{
            .article-tags{
                bottom: 120px;

                img{
                    width: 2rem;
                    border-radius: 50%;
                }
            }

            .article-statistics{
                width: 96%;
                height: 3.5rem;
                border-top: 1px solid var(--primary-background-color);
                bottom: -7px;
                
                p:first-of-type{
                    display: flex;
                    align-items:center ;
                    margin-bottom: -7px;
                }
                p{
                    text-align: center;
                }
            }

            p{
                margin: 0;
            }
        }
    }
}


/*********************-footer-********************/
footer{
    background-color: var(--secondary-color);

    form{
        background-color: var(--primary-color);
        color: var(--secondary-background-color);
        justify-content: space-between;   
        text-align: center; 
        padding: 0.3rem 5% .3rem 5%;

        p:first-of-type{
            font-weight: var(--font-weight-heading);
            margin-top: 10px;
        }

        p{
            margin: auto;
        }

        @media(min-width:768px){
            display: flex;

            .footer-email-text{
                text-align: start;
                
            }

            .footer-form-email{
                width: 20rem;
            }

        }
        @media(min-width:1024px){
            .footer-form-email{
                width: 30rem;
            }
        }
        @media(min-width:1440px){
            .footer-form-email{
                width: 40rem;
            }
        }

    
    }

    .logo-footer{
        margin-left: 8px;
    }

    .footer-middle {
        display: grid;
        color: var(--secondary-background-color);

        @media (max-width: 1023px) {
            display: none;
        }

        @media (min-width: 1024px) {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 3fr;

            /* ul{

                #text{
                    font-size: var(--font-size-heading);
                    font-weight: var(--font-weight-heading);                    
                }

                a{
                    font-size: var(--font-size-text);
                    font-weight: var(--font-weight-text);
                }
            } */
            
            ul{
                li:first-of-type{
                    font-size: var(--font-size-heading);
                    font-weight: var(--font-weight-heading);                     
                }
            }
        }
    }

    .contact-us{
        Display:flex;
        flex-direction: column;

        li{
            display: flex;
            align-items: center;
            gap: 10px;
        } 

        p{
            margin: 3px 0 3px 0;
        }
    }

    .footer-middle-phone{
        display: grid;
        color: var(--secondary-background-color);
        gap: 10px;
        margin-left: 8px;

        @media (min-width: 1024px) {
            display: none;
        }
    }

    ul{
        list-style-type: none;
    }

    li{
        margin-block-start: 0.5em;
    }

    a{
        color: var(--secondary-background-color);
        text-decoration: none;
    }

    .footer-bottom, .footer-bottom a{
        display: flex;
        color: var(--secondary-text-color);
        justify-content: space-evenly;
    }
}