/* ==========================================================================
   1. VARIÁVEIS E CONFIGURAÇÕES RAIZ
   ========================================================================== */
:root {
    --base-font-size: 100%;
    --bg-color: #ffffff;
    --text-color: #333333;
    --accent-blue: #0056b3;
}

/* Aplicado via JS */
body.high-contrast {
    --bg-color: #000000 !important;
    --text-color: #ffff00 !important;
}

/* ==========================================================================
   2. ESTILOS BASE (MODO PADRÃO)
   ========================================================================== */
body {
    font-size: var(--base-font-size);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background 0.3s, color 0.3s;
}

a {
    color: var(--accent-blue);
    text-decoration: underline;
    transition: color 0.3s;
}

/* Tipografia Relativa (Garante que o A+ funcione) */
#menu-container a, 
#menu-container li,
#menu-container span,
.item-titulo, 
.item-titulo a, 
.item-titulo span {
    font-size: 1rem !important; 
    line-height: 1.3 !important;
}

.links .link { font-size: 1.3rem; }

#menu-container {
    height: auto !important;
    min-height: 50px;
    
}

/* ==========================================================================
   3. COMPONENTES DE ACESSIBILIDADE (WIDGET)
   ========================================================================== */
.accessibility-wrapper {
    position: fixed;
    /* top: calc(50% - 70px); */
    top: 160px;
    right: 10px;
    z-index: 9999999999 !important;
}

#acc-trigger {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    border: none; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#acc-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white; padding: 10px;
    border-radius: 8px; border: 1px solid #ddd;
}

#acc-menu.hidden { display: none; }

#acc-menu button {
    padding: 8px; cursor: pointer;
    background: #eee; border: 1px solid #ccc; border-radius: 4px;
}

/* ==========================================================================
   4. REGRAS CONSOLIDADAS: ALTO CONTRASTE
   ========================================================================== */

/* --- Fundo e Texto Global --- */
body.high-contrast,
body.high-contrast #header,
body.high-contrast #rodape-1,
body.high-contrast #banners-home,
body.high-contrast #servicos,
body.high-contrast #links,
body.high-contrast #menu-container,
body.high-contrast #menu-container nav,
body.high-contrast #menu-container ul,
body.high-contrast #menu-container li {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffff00 !important;
}

/* --- Seletores que devem ser Amarelos --- */
body.high-contrast a,
body.high-contrast .titulo-home,
body.high-contrast .titulo-home a,
body.high-contrast .titulo-home span,
body.high-contrast .item-titulo,
body.high-contrast .item-titulo a,
body.high-contrast .noticia-data,
body.high-contrast .textwidget,
body.high-contrast .textwidget *,
body.high-contrast #header *,
body.high-contrast #rodape-1 *,
body.high-contrast #banners-home *,
body.high-contrast #servicos *,
body.high-contrast #links * {
    color: #ffff00 !important;
}

/* --- Links e Hovers (Uniformizados) --- */
body.high-contrast a { 
    text-decoration: underline !important;
    background-color: #ffff00 !important; /* Força o fundo preto em todos os links */
    color: #000000 !important;
}

/* Links que estão dentro de elementos que já são pretos (como o menu) */
body.high-contrast #menu-container a,
body.high-contrast .textwidget a,
body.high-contrast .item-titulo a {
    background-color: transparent !important; /* Aqui pode ser transparente pois o pai já é preto */
}

/* Estado de Hover: A única exceção onde o fundo fica Amarelo */
body.high-contrast a:hover,
body.high-contrast .saiba-mais:hover,
body.high-contrast #menu-container a:hover,
body.high-contrast #menu-container li:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

body.high-contrast .saiba-mais:hover {
    text-decoration: underline !important;
}

body.high-contrast #conteudo ul a {
    color: #ffff00 !important;
    background-color: transparent !important;
}

/* --- Menu Aberto e Delimitação --- */
body.high-contrast #menu-container {
    border: 3px solid #ffff00 !important;
    box-shadow: 10px 0px 0px #000000, 12px 0px 0px #ffff00 !important;
}

body.high-contrast #menu-container li {
    border-bottom: 1px solid #ffff00 !important;
}

/* --- Regras de Visibilidade (Menu Ativo via JS) --- */
body.high-contrast.menu-ativo #botao-buscar,
body.high-contrast.menu-ativo #botao-menu {
    display: none !important;
}

/* --- Ícones --- */
body.high-contrast .noticia-data i,
body.high-contrast .noticia-data svg,
body.high-contrast .saiba-mais i,
body.high-contrast .saiba-mais svg {
    fill: #ffff00 !important;
    color: #ffff00 !important;
}

/* --- Ajuste Específico para o Menu do Rodapé --- */
body.high-contrast #menu-rodape-1,
body.high-contrast #menu-rodape-1 li,
body.high-contrast #menu-rodape-1 ul {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Garante que os links do menu do rodapé sejam amarelos com fundo preto */
body.high-contrast #menu-rodape-1 a {
    color: #ffff00 !important;
    background-color: #000000 !important;
    text-decoration: underline !important;
    display: block; /* Melhora a área de clique */
    padding: 5px 0;
}

/* Efeito de hover para os links do menu do rodapé */
body.high-contrast #menu-rodape-1 a:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* --- Ajuste para Links em Itens de Notícia --- */
body.high-contrast .noticia-item,
body.high-contrast .noticia-item a,
body.high-contrast .noticia-item .titulo-noticia {
    background-color: #000000 !important;
    color: #ffff00 !important;
    text-decoration: underline !important;
}

/* Hover específico para o item de notícia */
body.high-contrast .noticia-item:hover,
body.high-contrast .noticia-item a:hover {
    /* background-color: #ffff00 !important; */
    color: #ffff00 !important;
}

/* Caso haja um resumo ou "leia mais" dentro da notícia */
body.high-contrast .noticia-item .resumo,
body.high-contrast .noticia-item .post-excerpt {
    color: #ffff00 !important;
    background-color: transparent !important;
}

body.high-contrast .alerta {
    background-color: transparent !important;
    color: #ffffff !important;
}

body.high-contrast .alerta:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}
body.high-contrast a.servico-home {
    background-color: transparent !important;

}

body.high-contrast ul#menu-sociais li.menu-item a {
    background-color: #ffff00 !important;
}

body.high-contrast .video-home-image a:hover {
    background-color: transparent !important;
}

/* Estilo Padrão (Modo Normal) */
.radar-container {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.radar-button {
    display: block;
    background-color: #0056b3; /* Azul padrão */
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 8px;
    padding: 12px 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    max-width: 350px;
}

.radar-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.radar-title {
    display: block;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1;
}

.radar-subtitle {
    display: block;
    margin-top: 5px;
    font-size: 0.62rem;
    opacity: 0.9;
}

.radar-icon { font-size: 32px !important; }
.radar-external { font-size: 18px !important; }

.radar-button:hover, .radar-button:focus {
    background-color: #003d7a;
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   AJUSTE BOTÃO DO RADAR
   ========================================================================== */
body.high-contrast .radar-button {
    background-color: #000000 !important;
    border: 2px solid #ffff00 !important;
    color: #ffff00 !important;
}

body.high-contrast .radar-button * {
    color: #ffff00 !important;
}

body.high-contrast .radar-button:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

body.high-contrast .radar-button:hover * {
    color: #000000 !important;
}

/* ==========================================================================
   ESTILIZAÇÕES ESPECÍFICAS
   ========================================================================== */

/* --- HEADER COM DESTAQUE ESCURO --- */
body.high-contrast #header, 
body.high-contrast .site-header, 
body.high-contrast #menu-container {
    background-color: #1A1A1A !important; /* Cinza Grafite */
    border-bottom: 2px solid #FFFF00 !important; /* Linha amarela para delimitar a separação */
}

/* Garante que os itens dentro do header fiquem amarelos */
body.high-contrast #header *,
body.high-contrast #menu-container a {
    color: #FFFF00 !important;
    background-color: transparent !important; /* Evita "quadrados" pretos nos links */
}

body.high-contrast #menu-container {
    background: #1A1A1A !important; /* Cinza Grafite */;
}

/* Efeito de seleção no Menu do Header */
body.high-contrast #menu-container a:hover {
    background-color: #FFFF00 !important;
    color: #000000 !important;
}

body.high-contrast #menu-container .menu-superior-container li {
    background: #1A1A1A !important; /* Cinza Grafite */;
}

body.high-contrast #rodape-1 #menu-rodape-1,
body.high-contrast #rodape-1 #menu-rodape-1 li,
body.high-contrast #rodape-1 #menu-rodape-1 li a,
body.high-contrast #rodape-1 {
    background: #1A1A1A !important; /* Cinza Grafite */;
}

body.high-contrast #rodape-1 #menu-rodape-1 li a:hover {
    background-color: #FFFF00 !important;
    display: block;
}

#menu-container #botao-fechar {
    top: 7px !important;
}

#menu-container .fechar {
    font-size: 48px !important;
}

body.high-contrast #servicos {
    background-color: #1A1A1A !important;
}


body.high-contrast #banners-home,
body.high-contrast #links {
    background-color: #353535 !important;
}

body.high-contrast #links a:hover,
body.high-contrast #links a {
    background-color: transparent !important;
}


body.high-contrast .widget_media_image img.image, 
body.high-contrast img.icone-servico {
    background-color: #ffffff !important; /* Cria um fundo branco atrás da imagem */
    padding: 5px !important;            /* Dá um respiro para o texto preto não colar na borda */
    border: 2px solid #ffff00 !important; /* Moldura amarela para destacar */
    border-radius: 4px;
}

/* 1. RESETA A BARRA */
body.high-contrast #wpadminbar,
body.high-contrast #wpadminbar * {
    background-color: #1d2327 !important; /* Cor padrão do WP */
    color: #f0f0f1 !important;           /* Cor do texto padrão */
    filter: none !important;              /* Remove filtros como grayscale ou invert */
    text-shadow: none !important;
}

/* 2. Mantém os ícones da barra visíveis */
body.high-contrast #wpadminbar .ab-icon:before,
body.high-contrast #wpadminbar .ab-item:before {
    color: #a7aaad !important;
}

/* 3. Garante que o hover da barra continue funcionando */
body.high-contrast #wpadminbar a:hover,
body.high-contrast #wpadminbar a:hover * {
    color: #72aee6 !important; /* Azul de destaque do WP */
    background-color: #2c3338 !important;
}

/* Isso garante que o site responda ao aumento do JavaScript */
html {
    /* Define que 1rem = 100% do que o navegador/JS ditar */
    font-size: 100%; 
}

body {
    font-size: 1rem !important; 
    line-height: 1.5;
}

/* Se as seções do site tiverem fontes travadas, force-as a herdar */
#header, #footer, #main, #sidebar, .post-content {
    font-size: inherit;
}

body.high-contrast #wpadminbar,
body.high-contrast #wpadminbar * {
    background-color: #1d2327 !important;
    color: #f0f0f1 !important;
    font-size: 13px !important; /* Tamanho fixo original da barra */
}

body.high-contrast #menu-superior .menu-item-has-children a:after {
    filter: drop-shadow(1px 1px 0px #fff) 
            drop-shadow(-1px -1px 0px #fff) 
            drop-shadow(1px -1px 0px #fff) 
            drop-shadow(-1px 1px 0px #fff) !important;
}

body.high-contrast .video-home-image,
body.high-contrast .video-home-image a {
    background-color: transparent !important;

}

body.high-contrast h2.titulo-arquivos,
body.high-contrast .widget-titulo {
    color: #ffff00 !important;
}

body.high-contrast #links .link:not(:first-child) {
    border-top: 1px solid #ffff00;
}

body.high-contrast #botao-topo img {
    filter: drop-shadow(1px 1px 0px #000000) 
            drop-shadow(-1px -1px 0px #000000) 
            drop-shadow(1px -1px 0px #000000) 
            drop-shadow(-1px 1px 0px #000000) !important;
}

/* ==========================================================================
   ESTILOS MOBILE DO BOTÃO
   ========================================================================== */
@media screen and (max-width: 968px) {
    .accessibility-wrapper {
        top: auto !important;
        bottom: 20px !important; /* Move para baixo para facilitar o alcance do polegar */
        right: 10px !important;
    }

    #acc-trigger {
        width: 38px !important;  /* Tamanho reduzido para celular */
        height: 38px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    }

    #acc-trigger svg, 
    #acc-trigger i {
        font-size: 18px !important; /* Ícone interno menor */
    }
    
    /* Diminuir um pouco o menu quando aberto no celular */
    #acc-menu {
        padding: 8px !important;
        gap: 5px !important;
    }
    
    #acc-menu button {
        padding: 6px !important;
        font-size: 14px !important;
    }
}