/* =========================================
   Correções Globais para WordPress
   ========================================= */

/* 2. Global Reset & Safety */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 3. Layout Fixes */
html {
    width: 100%;
    overflow-x: hidden;
}

body {
    padding-top: 0;
    overflow-x: hidden !important;
    width: 100%;
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
}

/* FIX: Footer seguro APENAS para Mobile/Tablet */
@media (max-width: 1024px) {
    .copy-bar {
        padding-bottom: 30px !important; 
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
    
    /* REMOVIDO: body, html { padding-top: 0 !important; } 
       Isso estava fazendo a Admin Bar do WP cobrir a faixa rosa */
}

.site-footer, .copy-bar {
    position: relative;
    z-index: 10;
}

/* Ajuste da posição do Menu Hamburguer - RESTAURANDO VALORES ORIGINAIS */
.area-hamburguer {
    z-index: 10000 !important;
    position: absolute !important;
    top: 0 !important; /* Topo absoluto */
    right: 0 !important;
    width: auto !important;
    height: 0 !important; /* Altura zero para não bloquear cliques na faixa rosa */
    pointer-events: none; /* Permite clicar através do container */
    background-color: transparent !important; /* GARANTIR TRANSPARÊNCIA */
}

/* Elementos clicáveis do menu devem reagir */
.area-hamburguer .hamburguer,
.area-hamburguer .cb-falso,
.area-hamburguer ul {
    pointer-events: auto;
}

/* Ícone do Hamburguer - Posição Original */
.area-hamburguer .hamburguer {
    top: 52px !important; /* Valor original do projeto */
    right: 20px !important;
    position: absolute !important;
    background-color: transparent !important; /* Garantir que o container do ícone não tenha fundo */
}

/* Checkbox invisível - Posição Original */
.cb-falso {
    z-index: 10001 !important;
    top: 40px !important; /* Valor original do projeto */
    right: 20px !important;
}

/* GARANTIR que a faixa rosa (redes sociais) apareça - GLOBALMENTE */
.menu-secundario {
    display: block !important;
    position: relative !important;
    z-index: 9999 !important; /* Abaixo do menu mobile, mas acima do resto */
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 35px;
    width: 100% !important;
    background-color: #D75258 !important; /* Forçar a cor rosa caso a variável falhe */
    clear: both; /* Garantir que nada flutue ao lado cobrindo-a */
    margin-bottom: 0 !important;
}

.menu-secundario-info {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    align-items: center;
    height: 100%;
    min-height: 35px;
}

.hamburguer span {
    background-color: #D75258 !important; /* Cor primária forçada para garantir contraste */
}

/* Quando o menu está aberto, o X deve ser visível sobre o fundo branco */
.cb-falso:checked ~ .hamburguer span {
    background-color: #fff !important; 
}

/* FIX: Ajuste do Container para Tablets/iPads 
   Resolve o problema do footer cortado onde a barra de rolagem não vai até o fim
   devido ao padding excessivo (320px) do geral.css */
@media (max-width: 1024px) {
    .container {
        padding: 5px 20px !important;
    }
    
    .footer-info {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        gap: 10px !important; /* Mais coladinho conforme solicitado */
        padding-bottom: 0px !important; /* Remove o espaço excessivo antes do copy */
        margin-bottom: 10px !important; /* Pequena margem para não colar TOTALMENTE se não quiser, ou 0 para colar */
    }

    .footer-info ul li {
        line-height: 22px !important; /* Reduz altura da linha para aproximar itens */
    }
    
    /* FIX EXTREMO: Remover padding do container do footer para colar na barra vermelha */
    .container.footer {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .footer {
        padding-bottom: 0 !important;
    }
}

/* =========================================
   CORREÇÃO CRÍTICA: Faixa Rosa e Footer (Mobile < 601px)
   ========================================= */
@media (max-width: 601px) {
    /* 1. Forçar Faixa Rosa Visível */
    .menu-secundario {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 35px !important;
        width: 100% !important;
        background-color: #D75258 !important;
        position: relative !important;
        z-index: 9999 !important;
        margin-top: 0 !important;
    }

    /* FIX EXTREMO: Ocultar Barra do WordPress para visualização correta do topo */
    #wpadminbar {
        display: none !important;
    }

    html {
        margin-top: 0 !important;
        padding-top: 0 !important; /* Garantir que não haja padding */
    }
    
    body {
        margin-top: 0 !important; /* Restaurado para 0 pois estava cortando o topo */
        padding-top: 0 !important;
    }
    
    body.admin-bar {
        margin-top: 0 !important; /* Restaurado para 0 */
    }

    /* FIX ESPECIAL: Quando a barra preta do WordPress (Admin Bar) estiver ativa no mobile */
    /* REMOVIDO pois ocultamos a barra:
    body.admin-bar .menu-secundario {
        margin-top: 46px !important; 
    }
    body.admin-bar .area-hamburguer {
        top: 46px !important; 
    }
    */

    .menu-secundario-info {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 35px !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Alinha ícones à direita */
        padding-right: 15px !important;
    }

    /* Garantir que os itens da lista (ícones) apareçam */
    .menu-secundario-info ul {
        display: flex !important;
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .menu-secundario-info ul li {
        display: block !important;
    }

    /* 2. Garantir que o Hamburguer não cubra a faixa */
    .area-hamburguer {
        background-color: transparent !important;
        height: 0 !important;
        overflow: visible !important;
    }

    /* 3. Footer COLADINHO (Mobile Pequeno) */
    .container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .footer-info {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        gap: 15px !important;
    }

    /* Remove qualquer margem/padding extra do rodapé */
    .site-footer, footer, .footer {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Ajuste do Header para não cobrir o hambúrguer se for branco */
.menu-principal .container-mobile {
    z-index: 9999;
    position: relative;
}

/* 4. Correção Específica: Nossos Valores (Sobre) */
.nossos-valores-item {
    overflow: hidden;
}

.nossos-valores-item > div:last-child {
    display: flex;
    height: 100%;
}

.nossos-valores-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 5. Correção Específica: Home Page Title e Grid */
.home-atividades, 
section.atividades {
    padding-top: 60px;
    width: 100%;
}

/* Centralizar o título da seção */
.atividades-container {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.grid-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1280px !important; /* Largura máxima para centralizar bonito */
    margin: 0 auto !important;    /* Centraliza o container na tela */
    padding: 0 20px;
    gap: 40px; /* Mais espaço entre os cards */
}

@media (max-width: 1024px) {
    .grid-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .grid-cards-container {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   RESPONSIVIDADE (Tablet e Mobile)
   ========================================= */

/* Tablet (até 1024px): 2 colunas */
@media (max-width: 1024px) {
    .grid-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }
}

/* Mobile (até 768px): 1 coluna */
@media (max-width: 768px) {
    .grid-cards-container {
        grid-template-columns: 1fr !important;
        gap: 40px;
        padding: 0 30px; /* Mais margem nas laterais */
    }

    /* Ajuste da altura da imagem no mobile para não ficar gigante */
    .grid-cards-container .card-img img {
        height: 300px !important; 
    }
}

/* 4.1 - Fix para telas muito pequenas (WordPress Preview ou iPhone SE) */
@media (max-width: 380px) {
    .grid-cards-container {
        padding: 0 10px; /* Reduz padding lateral */
    }
    
    .grid-cards-container .card-img img {
        height: 250px !important; /* Reduz altura da imagem */
    }

    .banner div {
        font-size: 14px; /* Ajuste fonte banner */
    }
}

/* Forçar largura do card para caber no grid */
.grid-cards-container .card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px; 
    overflow: hidden; /* Mantém o card arredondado */
    position: relative; /* Necessário para o hover funcionar */
}

.grid-cards-container .card-img {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important; /* Deixa o ícone vazar */
    position: relative;
    z-index: 1;
}

.grid-cards-container .card-img img {
    width: 100%;
    height: 380px !important; 
    object-fit: cover;
    object-position: top center; 
    border-radius: 10px 10px 0 0; 
    display: block;
}

/* Ajuste do ícone da cruz para garantir que fique por cima */
.card-img::after {
    z-index: 10 !important;
}

/* GARANTIR QUE O HOVER FUNCIONE */
.card:hover .card-copy,
.card.active-card .card-copy {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important; /* Garante que fique acima da imagem e do ícone */
}

.card-copy {
    z-index: 20 !important; /* Por padrão já fica acima */
    background-color: rgba(215, 82, 88, 0.85) !important; /* Aumentei a opacidade para facilitar leitura */
}

.grid-cards-container .card-title {
    border-radius: 0 0 10px 10px; 
    text-align: center; 
    justify-content: center;
    padding: 20px; /* Mais preenchimento no título */
}

.grid-cards-container .card-title p {
    text-align: center;
    width: 100%;
    margin: 0;
}

/* 7. Correção Eventos */
.evento-item > img {
    max-height: 400px !important; /* Limitando a altura da imagem do evento */
    max-width: 100%;
    width: auto;
    object-fit: contain; /* Garante que a imagem inteira apareça sem cortar */
    display: block;
    margin: 0 auto 30px auto;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .evento-item > img {
        max-height: 250px !important;
    }
}

.eventos-container {
    padding: 0 20px;
    max-width: 1000px; /* Limitei a largura do container */
    margin: 0 auto;
}
.carrossel-doacao {
    max-width: 100% !important; /* Corrigido de 100vw para 100% para evitar scroll lateral */
    overflow: hidden;
    padding: 40px 0;
    height: auto !important;
}

.slider {
    max-width: 100%;
}

.donation-form {
    text-align: center;
    padding: 40px;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    margin: 40px auto;
    max-width: 600px;
}

/* BANNER FIX: Limitar altura e garantir que não estoure */
.banner-sobre img,
.banner-voluntariado img {
    width: 100%;
    height: 400px; /* Altura fixa razoável */
    object-fit: cover; /* Corta o excesso sem esticar */
    object-position: center;
}

/* Ajuste de z-index para garantir que o menu fique sobre tudo */
.menu-principal, .menu-secundario {
    z-index: 9999;
}

/* =========================================
   Novas Correções de Responsividade (Contato, Sobre, etc.)
   ========================================= */

/* CONTATO: Ajustar o grid quebrado e inputs curtos */
.contato-grid-container {
    gap: 40px !important; /* Remove o gap gigante de 290px */
    grid-template-columns: 1fr 1fr; /* Divide meio a meio por padrão */
}

@media (max-width: 900px) {
    .contato-grid-container {
        grid-template-columns: 1fr; /* Uma coluna em tablets/celulares */
    }
    
    .contato-grid-container .form-contato {
        order: -1; /* Formulário primeiro no mobile? Opcional */
        width: 100%;
    }
}

#contato .form-contato input,
#contato .form-contato textarea {
    width: 100% !important; /* Ocupar largura total do container */
}

/* SOBRE: Ajustar imagem valores */
@media (max-width: 800px) {
    .nossos-valores-item {
        grid-template-columns: 1fr !important;
    }
    .nossos-valores-item img {
        height: 300px; /* Altura fixa para imagem não sumir ou ficar gigante */
        width: 100%;
    }
}

/* EVENTOS: Melhorar leitura */
#eventos .evento-item {
    padding: 30px !important;
    max-width: 100%;
    border-radius: 10px;
}

/* GERAL: Container Padding e Largura para corrigir desktop e mobile */
.container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 1280px; /* Mantém a largura máxima original de design (~1280px) */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* BOX FLUTUANTE FIX: Subir mais a caixa branca */
.sobre-container {
    margin-top: -150px !important; /* Subi ainda mais (era -100px) para mostrar mais do banner */
    position: relative;
    z-index: 10;
    margin-bottom: 60px; /* Garante espaço embaixo para não colar no rodapé/conteúdo */
}

/* Ajuste específico para o texto dentro da caixa flutuante */
.sobre-item {
    padding-top: 40px; /* Espaço interno no topo */
}

/* =========================================
   6. Correção: Diretoria e Fundação (Mobile)
   ========================================= */

@media (max-width: 768px) {
    .historia {
        padding: 60px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important; /* Espaço entre cada membro */
        height: auto !important;
        min-height: auto !important;
    }

    .historia ul {
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        height: auto !important;
        border-left: none !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .title-dados {
        font-size: 18px !important;
        margin-bottom: 10px !important;
        line-height: 1.2 !important;
        width: 100% !important;
    }

    .text-serif-dados {
        font-size: 32px !important; /* Reduzido de 46px para evitar quebra excessiva */
        line-height: 1.2 !important;
        width: 100% !important;
        word-wrap: break-word !important;
    }
}

/* Ajuste para telas extra pequenas (iPhone SE, etc) */
@media (max-width: 380px) {
    .text-serif-dados {
        font-size: 26px !important;
    }
}

/* =========================================
   7. Estilização dos Grupos da Diretoria
   ========================================= */

.grupo-diretoria-header {
    grid-column: 1 / -1;
    width: 100%;
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.grupo-diretoria-header h2 {
    color: #fff;
    font-family: var(--fonte-corpo);
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* No mobile, o header deve ficar centralizado */
@media (max-width: 768px) {
    .grupo-diretoria-header {
        text-align: center;
        margin: 30px 0 10px 0;
    }
    
    .grupo-diretoria-header h2 {
        font-size: 20px;
    }
}

/* Ajustes de Alinhamento e Bordas da Diretoria */
.grupo-diretoria-wrapper {
    display: contents; /* Mantém o comportamento do grid pai (.historia) */
}

/* Remover borda do primeiro item de cada grupo no desktop */
.grupo-diretoria-wrapper ul:first-of-type {
    border-left: none !important;
}

/* Centralizar especificamente a Diretoria Executiva (Estatutária) */
.grupo-executiva {
    display: flex !important;
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
    gap: 0 !important;
}

.grupo-executiva ul {
    border-left: none !important;
    margin: 0 !important;
    flex: 1; /* Faz cada bloco ocupar exatamente o mesmo espaço (50%) */
    max-width: 500px; /* Limite para não ficar largo demais em telas gigantes */
    text-align: center;
    padding: 0 40px !important;
}

/* A linha agora fica no meio exato pois os dois blocos têm larguras idênticas */
.grupo-executiva ul + ul {
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 1050px) {
    .grupo-executiva {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    .grupo-executiva ul {
        border-left: none !important;
        padding: 0 !important;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    .grupo-executiva ul + ul {
        border-left: none !important;
    }
}