/**
 * =====================================================
 * CSS COMPLETO DE ACESSIBILIDADE - VERSÃO FINAL
 * Arquivo: accessibility-complete.css
 * Local: /css/accessibility-complete.css
 * =====================================================
 * 
 * Este arquivo resolve TODOS os problemas de acessibilidade:
 * - Contraste de cores
 * - H3 no footer
 * - Botões acessíveis
 * - Foco visível
 */

/* =====================================================
   1. BOTÕES WHATSAPP - CONTRASTE MELHORADO
   ===================================================== */

.btn-whatsapp,
.btn-whatsapp-lead,
.btn-contato-cidade {
    background: #128C7E !important; /* Verde WhatsApp mais escuro */
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.btn-whatsapp:hover,
.btn-whatsapp-lead:hover,
.btn-contato-cidade:hover {
    background: #0F7A6C !important; /* Ainda mais escuro no hover */
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Botão WhatsApp flutuante */
.whatsapp-float {
    background: #128C7E !important;
}

.whatsapp-float:hover {
    background: #0F7A6C !important;
}

/* =====================================================
   2. TÍTULOS H2 - CONTRASTE MELHORADO
   ===================================================== */

section h2 {
    color: #1a202c !important; /* Cinza muito escuro */
    font-weight: 700 !important;
}

/* H2 em fundos claros */
section[style*="background: var(--cor-cinza-claro)"] h2,
section[style*="background: white"] h2 {
    color: #111827 !important;
}

/* H2 em fundos escuros */
section[style*="background: linear-gradient"] h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* =====================================================
   3. TÍTULOS H3 (FOOTER E CARDS) - CONTRASTE MÁXIMO
   ===================================================== */

/* H3 no footer */
.footer-col h3 {
    color: #f3f4f6 !important; /* Cinza muito claro (quase branco) */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 1.25rem !important;
}

/* H3 nos cards de serviço */
.service-card h3 {
    color: #111827 !important; /* Preto azulado */
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    margin: 0.75rem 0 !important;
}

/* H3 nos diferenciais */
.diferencial h3 {
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* H3 nos títulos de cidade */
.cidade-titulo {
    color: var(--cor-primaria) !important;
    font-weight: 700 !important;
}

/* =====================================================
   4. BADGE DE CONTAGEM DE BAIRROS
   ===================================================== */

.contador-bairros-badge {
    background: #dc2626 !important; /* Vermelho mais escuro */
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
}

/* =====================================================
   5. HEADER DE BAIRROS
   ===================================================== */

.bairros-header {
    background: #1e40af !important; /* Azul mais escuro */
    color: #ffffff !important;
    font-weight: 600 !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 0.75rem 1rem !important;
}

/* =====================================================
   6. LINKS NO FOOTER - DISTINÇÃO VISUAL
   ===================================================== */

.footer-col ul li a {
    color: #e5e7eb !important; /* Cinza claro */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.footer-col ul li a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
    padding-left: 5px;
}

/* Link AgênciaPAZ - sempre com underline */
.footer-bottom a[href*="agenciapaz"] {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.footer-bottom a[href*="agenciapaz"]:hover {
    color: #fbbf24 !important; /* Amarelo no hover */
}

/* =====================================================
   7. BOTÃO MENU MOBILE
   ===================================================== */

.mobile-menu-toggle {
    background: transparent !important;
    border: 2px solid var(--cor-primaria) !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mobile-menu-toggle i {
    color: var(--cor-primaria) !important;
    font-size: 1.5rem !important;
}

.mobile-menu-toggle:hover {
    background: var(--cor-primaria) !important;
}

.mobile-menu-toggle:hover i {
    color: #ffffff !important;
}

/* =====================================================
   8. FOCO VISÍVEL (NAVEGAÇÃO POR TECLADO)
   ===================================================== */

/* Foco geral */
*:focus {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Foco em botões */
button:focus,
.btn-whatsapp:focus,
.btn-primary:focus,
.faq-question:focus {
    outline: 3px solid #fbbf24 !important; /* Amarelo para destaque */
    outline-offset: 3px !important;
}

/* Foco em links */
a:focus {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* =====================================================
   9. SKIP LINK (PULAR PARA CONTEÚDO)
   ===================================================== */

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--cor-primaria);
    color: white;
    padding: 10px 20px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
}

.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    overflow: visible;
}

/* =====================================================
   10. BOTÕES DO FAQ
   ===================================================== */

.faq-question {
    text-align: left !important;
    width: 100% !important;
    padding: 1.25rem !important;
    background: #f9fafb !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.faq-question:hover {
    background: #f3f4f6 !important;
    border-color: var(--cor-primaria) !important;
}

.faq-question[aria-expanded="true"] {
    background: var(--cor-primaria) !important;
    color: #ffffff !important;
    border-color: var(--cor-primaria) !important;
}

/* =====================================================
   11. PARÁGRAFOS - CONTRASTE ADEQUADO
   ===================================================== */

section p {
    color: #374151 !important; /* Cinza escuro para boa leitura */
    line-height: 1.6 !important;
}

section[style*="background: var(--cor-cinza-claro)"] p {
    color: #1f2937 !important;
}

/* =====================================================
   12. NOME NOS DEPOIMENTOS
   ===================================================== */

.comentario .nome {
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

/* =====================================================
   13. BOTÃO "LIGAR AGORA"
   ===================================================== */

a.btn-whatsapp[href^="tel:"] {
    background: #ffffff !important;
    color: #1a202c !important; /* Texto escuro em fundo claro */
    border: 3px solid #ffffff !important;
    font-weight: 700 !important;
}

a.btn-whatsapp[href^="tel:"]:hover {
    background: #f3f4f6 !important;
    color: #000000 !important;
    transform: scale(1.05);
}

/* =====================================================
   14. RESPONSIVO - MOBILE
   ===================================================== */

@media (max-width: 768px) {
    /* Aumentar fonte em mobile */
    .btn-whatsapp,
    .btn-whatsapp-lead {
        font-size: 1.05rem !important;
        padding: 12px 20px !important;
    }
    
    /* Títulos mais escuros */
    h2, h3 {
        color: #111827 !important;
    }
    
    /* Footer */
    .footer-col h3 {
        font-size: 1.05rem !important;
    }
}

/* =====================================================
   15. MODO ALTO CONTRASTE (SISTEMA)
   ===================================================== */

@media (prefers-contrast: high) {
    /* Aumentar contraste quando usuário ativa modo alto contraste */
    
    h2, h3 {
        color: #000000 !important;
    }
    
    footer h3 {
        color: #ffffff !important;
        text-shadow: 0 0 2px #000000 !important;
    }
    
    .btn-whatsapp,
    .btn-whatsapp-lead {
        border: 3px solid #000000 !important;
    }
}

/* =====================================================
   16. REDUZIR ANIMAÇÕES (PREFERÊNCIA DO USUÁRIO)
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   17. FORMULÁRIOS - ACESSIBILIDADE
   ===================================================== */

input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-color: var(--cor-primaria) !important;
}

label {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* =====================================================
   FIM DO ARQUIVO - TODAS AS CORREÇÕES APLICADAS
   ===================================================== */