/**
 * FAQ Accordion Component
 * 
 * Componente de accordion para FAQs com comportamento de abrir/fechar.
 * Independente do Design System Core, mas usa variáveis CSS do Bulma quando disponíveis.
 * 
 * Uso:
 * - Adicionar no template: $this->Html->css('/newds/css/components/faq-accordion.css', ['block' => true]);
 * - Estrutura HTML esperada (ver templates/QuantoRende/view.php para exemplo completo)
 */

/* ============================
   FAQ ACCORDION - ESTRUTURA
   ============================ */

/* Container principal */
.faq-accordion {
    border-radius: var(--bulma-radius, 4px);
    overflow: hidden;
    border: 1px solid hsl(var(--bulma-scheme-h, 0), var(--bulma-scheme-s, 0%), 90%);
}

/* Item individual */
.faq-item {
    border-bottom: 1px solid hsl(var(--bulma-scheme-h, 0), var(--bulma-scheme-s, 0%), 92%);
}

.faq-item:last-child {
    border-bottom: none;
}

/* ============================
   FAQ ACCORDION - PERGUNTA
   ============================ */

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background-color: hsl(var(--bulma-scheme-h, 0), var(--bulma-scheme-s, 0%), 97%);
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--bulma-info-h, 204), var(--bulma-info-s, 86%), var(--bulma-info-l, 53%));
}

.faq-question:hover {
    background-color: hsl(var(--bulma-scheme-h, 0), var(--bulma-scheme-s, 0%), 94%);
}

.faq-question.is-active {
    background-color: hsl(var(--bulma-info-h, 204), var(--bulma-info-s, 86%), var(--bulma-info-l, 53%));
    color: white;
}

/* Ícone de seta */
.faq-question .faq-icon {
    transition: transform 0.3s ease;
    font-size: 0.875rem;
}

.faq-question.is-active .faq-icon {
    transform: rotate(180deg);
}

/* ============================
   FAQ ACCORDION - RESPOSTA
   ============================ */

.faq-answer {
    display: none;
    padding: 1.25rem 1.5rem;
    background-color: white;
    line-height: 1.7;
    color: hsl(var(--bulma-scheme-h, 0), var(--bulma-scheme-s, 0%), 29%);
    border-left: 4px solid hsl(var(--bulma-success-h, 153), var(--bulma-success-s, 53%), var(--bulma-success-l, 53%));
}

.faq-answer.is-visible {
    display: block;
    animation: faqFadeIn 0.3s ease;
}

@keyframes faqFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ============================
   FAQ ACCORDION - RESPONSIVIDADE
   ============================ */

@media screen and (max-width: 768px) {
    .faq-question,
    .faq-answer {
        padding: 1rem;
    }
    
    .faq-question {
        font-size: 0.95rem;
    }
}

/* ============================
   QUANTO RENDE - PAGE-SPECIFIC OVERRIDES
   ============================ */

/* 
 * NOTA: Suporte a classes responsivas do Bulma (.is-X-mobile, .is-size-X-mobile)
 * agora está no Design System Core (meelion-bulma-custom.css)
 * 
 * Aqui ficam apenas overrides específicos da página Quanto Rende
 */

@media screen and (max-width: 768px) {
    /* Notification sem padding extra a direita (nao tem botao delete) */
    html body .notification.is-warning {
        padding-right: 1.25rem !important; /* Igual ao padding-left padrao */
    }
    
    /* Botoes CTA "Outras Simulacoes" menores no mobile */
    html body .section .buttons.are-medium .button {
        font-size: 0.875rem !important; /* 14px - is-small */
        padding: 0.5rem 1rem !important;
        height: auto !important;
    }
}