@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Leckerli+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Send+Flowers&display=swap');

:root{
    --background-main: #faf9f6;
    --background-sec: #F0F2F5;
    --background-third: #F7F6F3;
    --background-fourth: #121212;
    --accent-gold: #CCac00;
    --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;          
    --text-stylish: Leckerli One;
}

main{
    .faqs-section{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 50px;
        width: 100%;
        height: 100vh;

        h3{
            font-family: var(--text-regular1);
            font-size: 3rem;
            text-align: center;
            text-wrap: nowrap;
            span{
                font-family: var(--text-stylish1);
                color: var(--accent-gold);
            }
        }
    
        .faqs-container{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
            margin-top: 50px;
            width: 500px;
            height: fit-content; 

            .faq{
                width: 100%;
                height: fit-content;
                font-family: var(--text-regular1);
                border-radius: 15px;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
                overflow: hidden;
                cursor: pointer;

                details{
                    width: 100%;
                    transition: height 1s ease-in-out;
                    
                    .question{
                        position: relative;
                        display: flex;
                        align-items: center;
                        margin-right: 35px;
                        padding: 5px 15px;
                        height: 45px;
                        font-size: .99rem;
                        list-style-position: outside;
                        z-index: 5;

                        svg{
                            position: absolute;
                            right: -15px;
                            padding: 2px 2px;
                            background: inherit;
                            border-radius: 100%;
                            transition: all .3s ease-in-out;
                        }
                        svg:hover{
                            fill: #7d7d7d;
                            background: #ececeb;
                        }
                    }
                    summary::marker{
                        color: white;
                    }
                    .answer{
                        width: 94%;
                        padding: 15px 10px;
                        margin-left: 4.9px;
                        margin-bottom: 5px;
                        font-size: .97rem;
                        background: #ececeb;
                        border-radius: 15px;
                        transition: height 1s ease-in-out;
                        z-index: 1;
                    }
                }
                details::details-content{
                    block-size: 0;
                    transition: all .5s ease-in-out;
                    transition-behavior: allow-discrete;
                }
                details[open]::details-content{
                    block-size: auto;
                }
                details[open]{
                    .question{
                        svg{
                            rotate: 45deg;
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 900px){
    main{
        .faqs-section{
            height: 90vh;

            h3{
                font-size: 2rem;
            }
            .faqs-container{
                gap: 15px;
            }
        }
    }
}
@media(max-width: 500px){
    main{
        .faqs-section{
            .faqs-container{
                width: 90%;
                .faq{
                    details{
                        .answer{
                            margin-left: 3px;
                            padding: 15px 7px;
                           
                        }
                    }
                }
            }
        }
    }
}