/* 
 * @file            Style CSS
 * @description     Main CSS file containing the core styling of the page. It defines the entire layout structure, color scheme, positioning, and other visual elements. The styling strategy follows a Desktop-First approach, meaning this file serves as the foundational style layer for desktop screen resolutions.
 * @author          Mário Miguel de Almeida
 * @last-modified   08/30/2025  
 * @dependencies    reset.css
*/


body {
    background-color: #fef7f0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.faq {
    max-width: 65.5rem;
    height: 34.7rem;
    background-color: #FCFCFC;
    border-radius: 2.1rem;
    -webkit-box-shadow: 0 2rem 2rem -1rem #00000040;
    box-shadow: 0 2rem 2rem -1rem #00000040;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4rem;

    & .faq__image-wrapper {
        width: 30%;

        & img {
            position: relative;
            left: -9rem;
            width: 27.8rem;
        }
    }

    & .faq__content {
        width: 38rem;

        & .faq__title {
            margin-bottom: 1.5rem;
            font-size: 2.5rem;
            font-weight: 700;
        }

        & .faq__accordion .faq__accordion-item {
            &:not(:last-child) {
                margin-bottom: 1.2rem;
                padding-bottom: 1.2rem;
                border-bottom: 0.1rem solid gainsboro;
            }

            & .faq__accordion-header {
                & .faq__accordion-trigger {
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;

                    & .faq__accordion-question {
                        font-size: 1.7rem;
                        font-weight: 500;
                    }

                    & .faq__accordion-icon {
                        & img {
                            width: 1.5rem;
                            height: 0.86rem;
                            margin-right: 1.2rem;
                        }

                        & .faq__icon-image--active {
                            display: none;
                        }
                    }

                }

                &.active .faq__accordion-trigger .faq__accordion-icon {
                    & .faq__icon-image--default {
                        display: none;
                    }

                    & .faq__icon-image--active {
                        display: block;
                    }
                }
            }

            & .faq__accordion-content {
                max-height: 0;
                overflow: hidden;
                -webkit-transition: 0.3s;
                -o-transition: 0.3s;
                transition: 0.3s;

                & .faq__accordion-paragraph {
                    max-width: 34.7rem;
                    font-size: 1.5rem;
                }

                &.active {
                    max-height: 5.9rem;
                    margin-top: 1.2rem;
                }
            }
        }

    }
}


.credits {
    position: absolute;
    bottom: 0.8rem;

    & .credits__paragraph small {
        font-size: 1.6rem;

        & .credits__link {
            font-weight: 400;
            color: red;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;

            &:hover {
                font-weight: 700;
            }
        }
    }
}