/* ==========================================================================
   FAQS (ACORDEÓN): CONFIGURACIÓN DE INTERFAZ (UI VARIABLES)
   ========================================================================== */

/* --- 1. Contenedor Principal (Layout & Box) --- */
$faqMaxWidth: 700px;
$faqGap: 10px;
$faqBorder: 1px solid $mediumGray1;
$faqRadius: 0px;

/* --- 2. Elemento Individual: Pregunta (Question Tab) --- */
$faqPadding: 12px 24px;
$faqQuestionSize: 16px;
$faqQuestionSizeMobile: 16px;
$faqQuestionWeight: normal;
$faqQuestionFont: $mainFont;

/* --- 3. Elemento Individual: Respuesta (Answer Block) --- */
$faqAnswerSize: 16px;
$faqAnswerPadding: 12px 24px;
$ansBgColor: #f9f9f9;
$ansColor: black;

/* --- 4. Icono (Icon) --- */
$faqIconSize: 24px;
$faqIconColor: $mainColor;
$inACircle: false; // true/false para envolver el ícono en un círculo
$circleColor: $secondColor; // Solo aplica si $inACircle es true

/* --- 5. Colores: Estado Normal (Colors: Normal State) --- */
$faqBgColor: $white;
$faqFontColor: $black;

/* --- 6. Colores: Estado Activo/Expandido (Colors: Active State) --- */
$faqBgColorActive: $mainColor;
$faqFontColorActive: $white;
$faqIconColorActive: $white;

/* --- 7. Animación (Animation) --- */
$faqAnimationSpeed: .2s;

.faqs {
    max-width: $faqMaxWidth;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: $faqGap;
    justify-content: flex-start;
    align-items: flex-start;

    @media #{$ipad} {
        grid-template-columns: 1fr;
    }

    .faq {
        border-radius: $faqRadius;
        display: block;
        text-align: left;
        width: 100%;
        border: $faqBorder;
        overflow: hidden; // Ensures radius clips content if needed
        transition: $faqAnimationSpeed;

        .faq-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: $faqPadding;
            background-color: $faqBgColor;
            cursor: pointer;
            transition: $faqAnimationSpeed;

            h3 {
                font-size: $faqQuestionSize;
                width: 80%;
                font-family: $faqQuestionFont;
                font-weight: $faqQuestionWeight;
                color: $faqFontColor;
                margin: 0;

                @media #{$ipad} {
                    font-size: $faqQuestionSizeMobile;
                }
            }

            span {
                font-size: $faqIconSize;
                color: $faqIconColor;
                transition: $faqAnimationSpeed;

                @if $inACircle {
                    border-radius: 50%;
                    background-color: $circleColor;
                    width: $faqIconSize;
                    height: $faqIconSize;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: calc($faqIconSize / 2);
                }
            }
        }

        .faq-answer {
            font-size: $faqAnswerSize;
            display: none;
            // animation: faqAnimation $faqAnimationSpeed; // Animation handled via JS toggle usually, but keeping keyframes if needed
            transform-origin: 0 0;
            padding: $faqAnswerPadding;
            background-color: $ansBgColor;

            p {
                color: $ansColor;
                margin: 0;
            }
        }

        &.active {
            .faq-head {
                background-color: $faqBgColorActive;

                h3 {
                    color: $faqFontColorActive;
                }

                span {
                    color: $faqIconColorActive;
                }
            }

            .faq-answer {
                display: block;
                animation: faqAnimation $faqAnimationSpeed ease-in-out;
            }
        }
    }
}

@keyframes faqAnimation {
    from {
        transform-origin: top left;
        transform: scaleY(0);
        opacity: 0;
        max-height: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
        max-height: 1000px;
    }
}