/* ==========================================
   BLOCO 1: CABEÇALHO DA PÁGINA FAQ
   Responsabilidade: Header com imagem de fundo
   ========================================== */

/* Header da página FAQ */
.faq-header {
    height: 40vh; /* 40% da altura da viewport */
    min-height: 250px; /* Altura mínima */
    background-image: url('../imagens/fotos-banner/banner-perguntas-frequentes.png'); /* Imagem de fundo */
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 2: CONTEÚDO DO CABEÇALHO
   Responsabilidade: Título e subtítulo
   ========================================== */

/* Container do conteúdo do header */
.faq-header-content {
    max-width: 800px; /* Largura máxima */
    padding: 0 20px; /* Espaçamento lateral */
}

/* ==========================================
   BLOCO 3: TÍTULO PRINCIPAL DO FAQ
   Responsabilidade: Título da página
   ========================================== */

/* Título da página FAQ */
.faq-header-content h1 {
    font-size: 36px; /* Tamanho grande */
    margin-bottom: 15px; /* Espaçamento abaixo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 4: DESCRIÇÃO DO FAQ
   Responsabilidade: Subtítulo explicativo
   ========================================== */

/* Parágrafo do header */
.faq-header-content p {
    font-size: 18px; /* Tamanho intermediate */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 5: SEÇÃO PRINCIPAL DO FAQ
   Responsabilidade: Container das perguntas e respostas
   ========================================== */

/* Seção principal do FAQ */
.faq-section {
    padding: 60px 0; /* Espaçamento vertical */
}

/* ==========================================
   BLOCO 6: CONTAINER PRINCIPAL
   Responsabilidade: Container centralizado
   ========================================== */

/* Container padrão */
.container {
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centralização horizontal */
    padding: 0 20px; /* Espaçamento lateral */
}

/* ==========================================
   BLOCO 7: CONTAINER DO FAQ
   Responsabilidade: Container específico do FAQ
   ========================================== */

/* Container do FAQ */
.faq-container {
    max-width: 800px; /* Largura máxima para leitura */
    margin: 0 auto; /* Centralização horizontal */
}

/* ==========================================
   BLOCO 8: CATEGORIAS DO FAQ
   Responsabilidade: Filtros por categoria
   ========================================== */

/* Container das categorias */
.faq-categories {
    display: flex; /* Layout flexbox */
    justify-content: center; /* Centralização horizontal */
    gap: 15px; /* Espaçamento entre botões */
    margin-bottom: 40px; /* Espaçamento abaixo */
    flex-wrap: wrap; /* Permitir quebra de linha */
}

/* ==========================================
   BLOCO 9: BOTÕES DE CATEGORIA
   Responsabilidade: Filtros de categoria
   ========================================== */

/* Botões de categoria */
.category-btn {
    background-color: #f0f0f0; /* Fundo cinza claro */
    border: none; /* Sem borda */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 30px; /* Cantos muito arredondados */
    font-size: 16px; /* Tamanho da fonte */
    cursor: pointer; /* Cursor pointer */
    transition: all 0.3s; /* Transições suaves */
}

/* ==========================================
   BLOCO 10: HOVER DOS BOTÕES DE CATEGORIA
   Responsabilidade: Efeito visual no hover
   ========================================== */

/* Hover nos botões de categoria */
.category-btn:hover {
    background-color: #e0e0e0; /* Fundo cinza mais escuro */
}

/* ==========================================
   BLOCO 11: BOTÃO DE CATEGORIA ATIVO
   Responsabilidade: Estado selecionado
   ========================================== */

/* Botão de categoria ativo */
.category-btn.active {
    background-color: #0B3D91; /* Fundo azul da marca */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 12: LISTA DE PERGUNTAS FAQ
   Responsabilidade: Container das perguntas
   ========================================== */

/* Lista de perguntas FAQ */
.faq-list {
    background-color: white; /* Fundo branco */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra para elevação */
    overflow: hidden; /* Ocultar overflow */
}

/* ==========================================
   BLOCO 13: ITEM INDIVIDUAL FAQ
   Responsabilidade: Cada pergunta/resposta
   ========================================== */

/* Item individual do FAQ */
.faq-item {
    border-bottom: 1px solid #eee; /* Borda inferior */
}

/* ==========================================
   BLOCO 14: ÚLTIMO ITEM FAQ
   Responsabilidade: Remover borda inferior
   ========================================== */

/* Último item da lista */
.faq-item:last-child {
    border-bottom: none; /* Sem borda */
}

/* ==========================================
   BLOCO 15: PERGUNTA (CABECALHO)
   Responsabilidade: Área clicável da pergunta
   ========================================== */

/* Área da pergunta */
.faq-question {
    padding: 20px; /* Espaçamento interno */
    display: flex; /* Layout flexbox */
    justify-content: space-between; /* Distribuição space-between */
    align-items: center; /* Centralização vertical */
    cursor: pointer; /* Cursor pointer */
    transition: background-color 0.3s; /* Transição de cor */
}

/* ==========================================
   BLOCO 16: HOVER DA PERGUNTA
   Responsabilidade: Efeito visual no hover
   ========================================== */

/* Hover na pergunta */
.faq-question:hover {
    background-color: #f9f9f9; /* Fundo cinza muito claro */
}

/* ==========================================
   BLOCO 17: TÍTULO DA PERGUNTA
   Responsabilidade: Texto da pergunta
   ========================================== */

/* Título da pergunta */
.faq-question h3 {
    font-size: 18px; /* Tamanho intermediate */
    color: #333; /* Cor escura */
    margin: 0; /* Sem margem */
}

/* ==========================================
   BLOCO 18: ÍCONE DA PERGUNTA
   Responsabilidade: Ícone de seta indicativo
   ========================================== */

/* Ícone da pergunta */
.faq-question i {
    color: #00B4D8; /* Cor azul */
    font-size: 20px; /* Tamanho intermediate */
    transition: transform 0.3s; /* Transição de rotação */
}

/* ==========================================
   BLOCO 19: RESPOSTA (CONTEÚDO)
   Responsabilidade: Área da resposta
   ========================================== */

/* Área da resposta */
.faq-answer {
    padding: 0 20px; /* Espaçamento lateral */
    max-height: 0; /* Altura inicial zero */
    overflow: hidden; /* Ocultar conteúdo */
    transition: max-height 0.3s ease-out, padding 0.3s ease; /* Transições suaves */
}

/* ==========================================
   BLOCO 20: PARÁGRAFO DA RESPOSTA
   Responsabilidade: Texto da resposta
   ========================================== */

/* Parágrafo da resposta */
.faq-answer p {
    color: #666; /* Cor cinza */
    line-height: 1.6; /* Altura de linha */
    margin-bottom: 15px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 21: LISTA NA RESPOSTA
   Responsabilidade: Listas dentro das respostas
   ========================================== */

/* Lista na resposta */
.faq-answer ul {
    margin-bottom: 15px; /* Espaçamento abaixo */
    padding-left: 20px; /* Indentação da lista */
}

/* ==========================================
   BLOCO 22: ITENS DA LISTA
   Responsabilidade: Elementos da lista
   ========================================== */

/* Itens da lista */
.faq-answer ul li {
    margin-bottom: 8px; /* Espaçamento entre itens */
    color: #666; /* Cor cinza */
    list-style-type: disc; /* Marcador de lista */
}

/* ==========================================
   BLOCO 23: ITEM FAQ ATIVO
   Responsabilidade: Estado expandido da pergunta
   ========================================== */

/* Item FAQ no estado ativo */
.faq-item.active .faq-question {
    background-color: #f5f5f5; /* Fundo cinza claro */
}

/* ==========================================
   BLOCO 24: ÍCONE ATIVO
   Responsabilidade: Rotação da seta no estado ativo
   ========================================== */

/* Ícone da pergunta ativa */
.faq-item.active .faq-question i {
    transform: rotate(180deg); /* Rotação 180 graus */
}

/* ==========================================
   BLOCO 25: RESPOSTA ATIVA
   Responsabilidade: Expansão da resposta
   ========================================== */

/* Resposta no estado ativo */
.faq-item.active .faq-answer {
    max-height: 1000px; /* Altura máxima expandida */
    padding: 20px; /* Espaçamento interno */
    padding-top: 0; /* Sem padding superior */
}

/* ==========================================
   BLOCO 26: SEÇÃO DE CHAMADA PARA CONTATO
   Responsabilidade: CTA para contato
   ========================================== */

/* Seção de contato */
.contact-cta {
    text-align: center; /* Centralização do texto */
    margin-top: 50px; /* Espaçamento acima */
}

/* ==========================================
   BLOCO 27: TÍTULO DO CONTATO
   Responsabilidade: Título da seção de contato
   ========================================== */

/* Título da seção de contato */
.contact-cta h3 {
    font-size: 24px; /* Tamanho intermediate */
    color: #0B3D91; /* Cor azul da marca */
    margin-bottom: 15px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 28: DESCRIÇÃO DO CONTATO
   Responsabilidade: Texto explicativo de contato
   ========================================== */

/* Parágrafo da seção de contato */
.contact-cta p {
    color: #666; /* Cor cinza */
    margin-bottom: 20px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 29: BOTÃO DE CONTATO
   Responsabilidade: Link para página de contato
   ========================================== */

/* Botão de contato */
.contact-btn {
    display: inline-block; /* Comportamento de bloco em linha */
    background-color: #00B4D8; /* Fundo azul */
    color: white; /* Texto branco */
    padding: 12px 25px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: 500; /* Peso semi-negrito */
    transition: background-color 0.3s; /* Transição de cor */
}

/* ==========================================
   BLOCO 30: HOVER DO BOTÃO DE CONTATO
   Responsabilidade: Efeito visual do botão
   ========================================== */

/* Hover no botão de contato */
.contact-btn:hover {
    background-color: #0096c7; /* Azul mais escuro */
}

/* ==========================================
   BLOCO 31: RESPONSIVIDADE MOBILE
   Responsabilidade: Adaptação para smartphones
   ========================================== */

/* Media query para smartphones */
@media (max-width: 576px) {
    /* Título menor em mobile */
    .faq-header-content h1 {
        font-size: 28px; /* Tamanho menor */
    }

    /* Descrição menor em mobile */
    .faq-header-content p {
        font-size: 16px; /* Tamanho menor */
    }

    /* Perguntas menores em mobile */
    .faq-question h3 {
        font-size: 16px; /* Tamanho menor */
    }
}