/* =========================================================
   01 — CONTROLES DA BARRA DE ACESSIBILIDADE
   ========================================================= */

.topbar-coluna-direita p {
    display: flex;
    align-items: center;
    white-space: nowrap;
}


/* =========================================================
   01.1 — CONTROLES A− / A+ / CONTRASTE
   ========================================================= */

.esuas-acessibilidade-controle {
    appearance: none;
    -webkit-appearance: none;

    border: 0;
    background: transparent;

    margin: 0 4px;
    padding: 0;

    color: inherit;

    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;

    cursor: pointer;
}


/* =========================================================
   01.2 — HOVER DOS CONTROLES
   ========================================================= */

/*
 * A− e A+ utilizam fundo verde somente no modo normal.
 */

#esuas-fonte-diminuir:hover,
#esuas-fonte-aumentar:hover {
    background: #2f6f45 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}


/* ---------------------------------------------------------
   FOCO SEM HOVER — A− / A+
   --------------------------------------------------------- */

/*
 * Depois de clicar, o botão pode permanecer focado quando
 * o mouse sai.
 *
 * No modo normal, esse foco não deve deixar o fundo cinza.
 */

#esuas-fonte-diminuir:focus:not(:hover),
#esuas-fonte-aumentar:focus:not(:hover) {
    background: transparent !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   ALTO CONTRASTE — A− / A+
   --------------------------------------------------------- */

/*
 * No alto contraste, A− e A+ NÃO utilizam o verde do hover.
 *
 * O fundo permanece preto tanto sem o mouse quanto quando
 * o mouse estiver sobre o controle.
 */

html.esuas-alto-contraste
#esuas-fonte-diminuir:hover,
html.esuas-alto-contraste
#esuas-fonte-aumentar:hover {
    background: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}


/*
 * Após clicar no controle durante o alto contraste,
 * o foco também não deve produzir fundo cinza.
 */

html.esuas-alto-contraste
#esuas-fonte-diminuir:focus,
html.esuas-alto-contraste
#esuas-fonte-aumentar:focus {
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}


/* =========================================================
   01.3 — FOCO PELO TECLADO
   ========================================================= */

.esuas-acessibilidade-controle:focus-visible,
.esuas-link-acessibilidade:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* =========================================================
   01.4 — BOTÃO DE CONTRASTE
   ========================================================= */

.esuas-contraste {
    font-size: 17px;
    margin-left: 5px;
    margin-right: 5px;
}


/* =========================================================
   01.5 — LINK "ACESSIBILIDADE"
   ========================================================= */

.esuas-link-acessibilidade {
    color: inherit;
    text-decoration: none;
    margin-left: 2px;
    white-space: nowrap;
}

.esuas-link-acessibilidade:hover {
    text-decoration: underline;
}


/* =========================================================
   02 — TAMANHO DA FONTE
   ========================================================= */

html[data-esuas-font-size="110"] body {
    font-size: 110%;
}

html[data-esuas-font-size="120"] body {
    font-size: 120%;
}


/* =========================================================
   02.1 — AUMENTO DA FONTE: PRIMEIRA LINHA DE CARDS
   ========================================================= */

/*
 * Os cards principais utilizam tamanhos fixos em px no CSS
 * principal. Por isso não acompanham automaticamente o
 * aumento aplicado ao body.
 *
 * Tamanhos originais:
 * - Títulos: 17px
 * - Textos: 15px
 * - Links: 14px
 */


/* ---------------------------------------------------------
   TÍTULOS — 110%
   17px → 18,7px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.card-e-suas h2,

html[data-esuas-font-size="110"] body
.card-e-suas h3,

html[data-esuas-font-size="110"] body
.card-e-suas h4 {
    font-size: 18.7px !important;
}


/* ---------------------------------------------------------
   TÍTULOS — 120%
   17px → 20,4px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.card-e-suas h2,

html[data-esuas-font-size="120"] body
.card-e-suas h3,

html[data-esuas-font-size="120"] body
.card-e-suas h4 {
    font-size: 20.4px !important;
}


/* ---------------------------------------------------------
   TEXTOS — 110%
   15px → 16,5px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.card-e-suas p {
    font-size: 16.5px !important;
}


/* ---------------------------------------------------------
   TEXTOS — 120%
   15px → 18px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.card-e-suas p {
    font-size: 18px !important;
}


/* ---------------------------------------------------------
   LINKS — 110%
   14px → 15,4px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.card-e-suas a {
    font-size: 15.4px !important;
}


/* ---------------------------------------------------------
   LINKS — 120%
   14px → 16,8px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.card-e-suas a {
    font-size: 16.8px !important;
}

/* =========================================================
   02.2 — AUMENTO DA FONTE: CARDS HORIZONTAIS
   ========================================================= */

/*
 * Os cards horizontais também utilizam tamanhos fixos
 * em px no CSS principal.
 *
 * Tamanhos originais:
 * - Títulos: 17px
 * - Textos: 15px
 * - Links: 14px
 */


/* ---------------------------------------------------------
   TÍTULOS — 110%
   17px → 18,7px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.card-e-suas-horizontal h2,

html[data-esuas-font-size="110"] body
.card-e-suas-horizontal h3,

html[data-esuas-font-size="110"] body
.card-e-suas-horizontal h4 {
    font-size: 18.7px !important;
}


/* ---------------------------------------------------------
   TÍTULOS — 120%
   17px → 20,4px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.card-e-suas-horizontal h2,

html[data-esuas-font-size="120"] body
.card-e-suas-horizontal h3,

html[data-esuas-font-size="120"] body
.card-e-suas-horizontal h4 {
    font-size: 20.4px !important;
}


/* ---------------------------------------------------------
   TEXTOS — 110%
   15px → 16,5px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.card-e-suas-horizontal > p:first-of-type {
    font-size: 16.5px !important;
}


/* ---------------------------------------------------------
   TEXTOS — 120%
   15px → 18px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.card-e-suas-horizontal > p:first-of-type {
    font-size: 18px !important;
}


/* ---------------------------------------------------------
   LINKS — 110%
   14px → 15,4px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.card-e-suas-horizontal > p:last-of-type {
    font-size: 15.4px !important;
}


/* ---------------------------------------------------------
   LINKS — 120%
   14px → 16,8px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.card-e-suas-horizontal > p:last-of-type {
    font-size: 16.8px !important;
}

/* =========================================================
   02.3 — AUMENTO DA FONTE: HERO
   ========================================================= */


/* ---------------------------------------------------------
   TÍTULO DO HERO
   Tamanho original: 42px
   --------------------------------------------------------- */

/* 1º A+ — 42px → 46,2px */

html[data-esuas-font-size="110"] body
.hero-principal h1 {
    font-size: 46.2px !important;
}


/* 2º A+ — 42px → 50,4px */

html[data-esuas-font-size="120"] body
.hero-principal h1 {
    font-size: 50.4px !important;
}


/* ---------------------------------------------------------
   TEXTO DO HERO
   Tamanho original: 22px
   --------------------------------------------------------- */

/* 1º A+ — 22px → 24,2px */

html[data-esuas-font-size="110"] body
.hero-principal p {
    font-size: 24.2px !important;
}


/* 2º A+ — 22px → 26,4px */

html[data-esuas-font-size="120"] body
.hero-principal p {
    font-size: 26.4px !important;
}


/* ---------------------------------------------------------
   BOTÃO DO HERO
   --------------------------------------------------------- */

/* 1º A+ */

html[data-esuas-font-size="110"] body
.hero-principal .wp-block-button__link {
    font-size: 110% !important;
}


/* 2º A+ */

html[data-esuas-font-size="120"] body
.hero-principal .wp-block-button__link {
    font-size: 120% !important;
}

/* =========================================================
   02.4 — AUMENTO DA FONTE: DIREITOS RESERVADOS
   ========================================================= */


/* ---------------------------------------------------------
   DIREITOS RESERVADOS — 110%
   15px → 16,5px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.site-info .footer-bar p {
    font-size: 16.5px !important;
}


/* ---------------------------------------------------------
   DIREITOS RESERVADOS — 120%
   15px → 18px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.site-info .footer-bar p {
    font-size: 18px !important;
}

/* =========================================================
   02.5 — AUMENTO DA FONTE: MENU PRINCIPAL
   ========================================================= */


/* ---------------------------------------------------------
   MENU PRINCIPAL — 110%
   15px → 16,5px
   --------------------------------------------------------- */

html[data-esuas-font-size="110"] body
.main-navigation .main-nav ul li a {
    font-size: 16.5px !important;
}


/* ---------------------------------------------------------
   MENU PRINCIPAL — 120%
   15px → 18px
   --------------------------------------------------------- */

html[data-esuas-font-size="120"] body
.main-navigation .main-nav ul li a {
    font-size: 18px !important;
}

/* =========================================================
   03 — ALTO CONTRASTE: REGRAS GERAIS
   ========================================================= */

html.esuas-alto-contraste body {
    background: #000 !important;
    color: #fff !important;
}


/* =========================================================
   03.1 — TEXTOS GERAIS
   ========================================================= */

html.esuas-alto-contraste body p,
html.esuas-alto-contraste body h1,
html.esuas-alto-contraste body h2,
html.esuas-alto-contraste body h3,
html.esuas-alto-contraste body h4,
html.esuas-alto-contraste body h5,
html.esuas-alto-contraste body h6 {
    color: #fff !important;
}


/* =========================================================
   03.2 — LINKS GERAIS
   ========================================================= */

html.esuas-alto-contraste body a {
    color: #ffffff !important;
}


/* =========================================================
   03.3 — BOTÕES GERAIS
   ========================================================= */

html.esuas-alto-contraste body button,
html.esuas-alto-contraste body .wp-block-button__link {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}


/* =========================================================
   04 — ALTO CONTRASTE: BARRA SUPERIOR
   ========================================================= */

html.esuas-alto-contraste .top-bar {
    background: #000 !important;
    color: #fff !important;
}


/* =========================================================
   05 — ALTO CONTRASTE: CABEÇALHO E MENU
   ========================================================= */

html.esuas-alto-contraste .site-header {
    background: #000 !important;
    color: #fff !important;
}


/* MENU */

html.esuas-alto-contraste .main-navigation,
html.esuas-alto-contraste .main-navigation ul {
    background: #000 !important;
}

html.esuas-alto-contraste .main-navigation a {
    color: #fff !important;
}


/* =========================================================
   06 — ALTO CONTRASTE: CAMPOS
   ========================================================= */

html.esuas-alto-contraste input,
html.esuas-alto-contraste textarea,
html.esuas-alto-contraste select {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}


/* =========================================================
   07 — ALTO CONTRASTE: BOTÃO DE CONTRASTE
   ========================================================= */

/* Modo normal */

.esuas-contraste:hover {
    background: #2f6f45 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px;
}


/* Contraste ativo */

html.esuas-alto-contraste .esuas-contraste {
    background: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* Hover com contraste ativo */

html.esuas-alto-contraste .esuas-contraste:hover {
    background: #000000 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* =========================================================
   07.1 — BLOQUEIO DO HOVER APÓS DESLIGAR
   ========================================================= */

.esuas-contraste.esuas-contraste-sem-hover:hover {
    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================================
   07.2 — CONTROLES DA BARRA NO ALTO CONTRASTE
   ========================================================= */

.esuas-alto-contraste
.esuas-acessibilidade-controle:not(#esuas-contraste),
.esuas-alto-contraste
.esuas-link-acessibilidade {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   07.2.1 — A− / A+ NO ALTO CONTRASTE
   ========================================================= */

/*
 * A− e A+ seguem exatamente o mesmo comportamento visual
 * adotado pelo botão de contraste (◐):
 *
 * - estado normal: sem borda;
 * - hover: borda branca fina;
 * - foco: borda branca mais larga;
 * - foco + hover: mantém a borda mais larga.
 */


/* ---------------------------------------------------------
   ESTADO NORMAL
   --------------------------------------------------------- */

html.esuas-alto-contraste
#esuas-fonte-diminuir,

html.esuas-alto-contraste
#esuas-fonte-aumentar {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
}


/* ---------------------------------------------------------
   HOVER — BORDA FINA
   --------------------------------------------------------- */

html.esuas-alto-contraste
#esuas-fonte-diminuir:hover,

html.esuas-alto-contraste
#esuas-fonte-aumentar:hover {
    border: 1px solid #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
}


/* ---------------------------------------------------------
   FOCO / BOTÃO SELECIONADO — BORDA MAIS LARGA
   --------------------------------------------------------- */

html.esuas-alto-contraste
#esuas-fonte-diminuir:focus,

html.esuas-alto-contraste
#esuas-fonte-aumentar:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff !important;
    border-radius: 6px !important;
}


/* ---------------------------------------------------------
   FOCO + HOVER — MANTÉM A BORDA LARGA
   --------------------------------------------------------- */

html.esuas-alto-contraste
#esuas-fonte-diminuir:focus:hover,

html.esuas-alto-contraste
#esuas-fonte-aumentar:focus:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff !important;
    border-radius: 6px !important;
}


/* =========================================================
   07.3 — BOTÃO DE CONTRASTE: ESTADO NORMAL
   ========================================================= */

.esuas-alto-contraste #esuas-contraste {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
}


/* =========================================================
   07.4 — BOTÃO DE CONTRASTE: HOVER
   ========================================================= */

.esuas-alto-contraste #esuas-contraste:hover {
    border: 1px solid #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
}


/* =========================================================
   07.5 — BOTÃO DE CONTRASTE: FOCO / SELECIONADO
   ========================================================= */

.esuas-alto-contraste #esuas-contraste:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff !important;
    border-radius: 6px !important;
}


/* =========================================================
   07.6 — BOTÃO DE CONTRASTE: FOCO + HOVER
   ========================================================= */

.esuas-alto-contraste
#esuas-contraste:focus:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff !important;
    border-radius: 6px !important;
}


/* =========================================================
   07.7 — LINK "ACESSIBILIDADE" NO ALTO CONTRASTE
   ========================================================= */

.esuas-alto-contraste .esuas-link-acessibilidade {
    color: #ffffff !important;
}

.esuas-alto-contraste .esuas-link-acessibilidade:hover,
.esuas-alto-contraste .esuas-link-acessibilidade:focus {
    color: #ffffff !important;
}

html.esuas-alto-contraste .esuas-link-acessibilidade:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}


/* =========================================================
   08 — ALTO CONTRASTE: PRIMEIRA LINHA DE CARDS
   ========================================================= */

/* Container dos cards */

html.esuas-alto-contraste body .card-e-suas {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}


/* Títulos */

html.esuas-alto-contraste body .card-e-suas h2,
html.esuas-alto-contraste body .card-e-suas h3,
html.esuas-alto-contraste body .card-e-suas h4,
html.esuas-alto-contraste body .card-e-suas h5,
html.esuas-alto-contraste body .card-e-suas h6,
html.esuas-alto-contraste body .card-e-suas strong {
    color: #ffffff !important;
}


/* Textos */

html.esuas-alto-contraste body .card-e-suas p {
    color: #ffffff !important;
}


/* Links */

html.esuas-alto-contraste body .card-e-suas a,
html.esuas-alto-contraste body .card-e-suas a:hover {
    color: #ffffff !important;
}


/* Ícones */

html.esuas-alto-contraste body .card-e-suas .wp-block-icon {
    background: #ffffff !important;
}

html.esuas-alto-contraste body .card-e-suas .wp-block-icon svg {
    color: #000000 !important;
    fill: #000000 !important;
}


/* =========================================================
   09 — ALTO CONTRASTE: CARDS HORIZONTAIS
   ========================================================= */

html.esuas-alto-contraste body .card-e-suas-horizontal {
    background: #000000 !important;
    color: #ffffff !important;
}


/* Títulos */

html.esuas-alto-contraste body
.card-e-suas-horizontal h2,
html.esuas-alto-contraste body
.card-e-suas-horizontal h3,
html.esuas-alto-contraste body
.card-e-suas-horizontal h4,
html.esuas-alto-contraste body
.card-e-suas-horizontal h5,
html.esuas-alto-contraste body
.card-e-suas-horizontal h6 {
    color: #ffffff !important;
}


/* Textos */

html.esuas-alto-contraste body
.card-e-suas-horizontal p {
    color: #ffffff !important;
}


/* Links */

html.esuas-alto-contraste body
.card-e-suas-horizontal a,
html.esuas-alto-contraste body
.card-e-suas-horizontal a:hover {
    color: #ffffff !important;
}


/* Ícones */

html.esuas-alto-contraste body
.card-e-suas-horizontal svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}


/* =========================================================
   10 — ALTO CONTRASTE: FAIXA INFORMATIVA
   ========================================================= */

html.esuas-alto-contraste body .info-e-suas {
    background: #000000 !important;
    color: #ffffff !important;
}


/* Títulos */

html.esuas-alto-contraste body .info-e-suas h2,
html.esuas-alto-contraste body .info-e-suas h3,
html.esuas-alto-contraste body .info-e-suas h4,
html.esuas-alto-contraste body .info-e-suas h5,
html.esuas-alto-contraste body .info-e-suas h6 {
    color: #ffffff !important;
}


/* Textos */

html.esuas-alto-contraste body .info-e-suas p {
    color: #ffffff !important;
}


/* Links */

html.esuas-alto-contraste body .info-e-suas a {
    color: #ffffff !important;
}


/* Divisórias */

html.esuas-alto-contraste body
.info-e-suas > .wp-block-column:not(:last-child) {
    border-right-color: #ffffff !important;
}


/* Ícones */

html.esuas-alto-contraste body .info-e-suas svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}


/* =========================================================
   11 — ALTO CONTRASTE: HERO
   ========================================================= */

/*
 * HERO ATUAL
 * ---------------------------------------------------------
 * A Hero foi construída no Gutenberg utilizando o bloco
 * "Cobertura (Cover)".
 *
 * A classe .hero-principal identifica exclusivamente esta
 * área da página.
 *
 * IMPORTANTE:
 * A imagem não é identificada pelo nome do arquivo.
 * O tratamento é aplicado à imagem de fundo pertencente
 * à própria Hero.
 *
 * Isso permite trocar futuramente a imagem sem precisar
 * alterar este CSS.
 */


/* ---------------------------------------------------------
   ÁREA GERAL DA HERO
   --------------------------------------------------------- */

html.esuas-alto-contraste body .hero-principal {
    background: #000000 !important;
}


/* ---------------------------------------------------------
   IMAGEM DE FUNDO — ESCALA DE CINZA
   --------------------------------------------------------- */

/*
 * A fotografia permanece no Hero, mas passa para escala
 * de cinza no alto contraste.
 *
 * Não alteramos o arquivo original da biblioteca de mídia.
 */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__image-background {
    filter: grayscale(100%) contrast(110%) !important;
}


/* ---------------------------------------------------------
   CAMADA DE CONTRASTE SOBRE A IMAGEM
   --------------------------------------------------------- */

/*
 * Mantém uma camada preta sobre a fotografia para melhorar
 * a diferenciação entre imagem e conteúdo textual.
 *
 * A imagem continua visível, porém com menor interferência
 * visual sobre o texto.
 */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__background {
    background-color: #000000 !important;
    opacity: 0.45 !important;
}


/* ---------------------------------------------------------
   ÁREA DO CONTEÚDO
   --------------------------------------------------------- */

/*
 * A área interna recebe fundo preto semitransparente.
 *
 * Isso garante uma área de leitura estável,
 * independentemente da imagem utilizada no futuro.
 */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container {
    background: rgba(0, 0, 0, 0.65) !important;
    padding: 20px !important;
    border-radius: 6px !important;
}


/* ---------------------------------------------------------
   TÍTULOS
   --------------------------------------------------------- */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container h1,

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container h2,

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container h3,

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container h4,

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container h5,

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container h6 {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TEXTOS
   --------------------------------------------------------- */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container p {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container a {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   BOTÃO
   --------------------------------------------------------- */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container
.wp-block-button__link {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}


/* ---------------------------------------------------------
   HOVER DO BOTÃO
   --------------------------------------------------------- */

html.esuas-alto-contraste body
.hero-principal .wp-block-cover__inner-container
.wp-block-button__link:hover {
    background: #000000 !important;
    color: #ffffff !important;
}


/* =========================================================
   FUTURA SUBSTITUIÇÃO DA HERO
   ========================================================= */

/*
 * Se a Hero for futuramente substituída por:
 *
 * - slider;
 * - carrossel;
 * - banner dinâmico;
 * - plugin específico;
 * - outro componente Gutenberg;
 *
 * revisar SOMENTE esta seção.
 *
 * Sempre que possível, manter a classe:
 *
 *     .hero-principal
 *
 * no novo componente.
 *
 * A imagem deve continuar sendo identificada pela estrutura
 * do componente, e não pelo nome do arquivo.
 *
 * As regras gerais de acessibilidade devem permanecer
 * preservadas. Se a nova Hero utilizar uma estrutura
 * diferente, ajustar somente os seletores específicos
 * desta seção.
 */

/* =========================================================
   12 — ALTO CONTRASTE: RODAPÉ
   ========================================================= */

/*
 * O rodapé principal passa para fundo preto.
 *
 * Mantemos imagens e logotipos sem alteração.
 * Os ícones das redes sociais recebem tratamento específico
 * na seção correspondente.
 * O restante do tratamento é aplicado aos elementos textuais
 * e à estrutura do rodapé.
 */


/* ---------------------------------------------------------
   FUNDO DO RODAPÉ
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-footer {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   ÁREA DOS WIDGETS
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-footer .footer-widgets {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TEXTOS
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-footer p,
html.esuas-alto-contraste .site-footer h1,
html.esuas-alto-contraste .site-footer h2,
html.esuas-alto-contraste .site-footer h3,
html.esuas-alto-contraste .site-footer h4,
html.esuas-alto-contraste .site-footer h5,
html.esuas-alto-contraste .site-footer h6 {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-footer a {
    color: #ffffff !important;
}


/* Hover dos links */

html.esuas-alto-contraste .site-footer a:hover {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   DIVISÓRIAS ENTRE AS COLUNAS
   --------------------------------------------------------- */

html.esuas-alto-contraste
.site-footer .wp-block-column:not(:last-child) {
    border-right-color: #ffffff !important;
}


/* ---------------------------------------------------------
   ÍCONES DAS REDES SOCIAIS
   --------------------------------------------------------- */

/*
 * No alto contraste, os ícones das redes sociais ficam
 * monocromáticos.
 *
 * Todos os itens recebem o mesmo tratamento visual:
 * fundo branco e símbolo preto.
 *
 * A regra utiliza a estrutura do bloco nativo de Ícones
 * sociais do Gutenberg, e não identifica redes individualmente.
 *
 * Dessa forma, novas redes adicionadas futuramente ao bloco
 * também recebem automaticamente o tratamento.
 */

html.esuas-alto-contraste .site-footer
.wp-block-social-links .wp-social-link {
    background-color: #ffffff !important;
    color: #000000 !important;
}


html.esuas-alto-contraste .site-footer
.wp-block-social-links .wp-social-link svg {
    color: #000000 !important;
    fill: #000000 !important;
}


/* =========================================================
   OBSERVAÇÃO SOBRE O LOGOTIPO
   ========================================================= */

/*
 * NÃO alterar imagens do rodapé.
 *
 * O logotipo permanece com suas cores originais.
 */


/* =========================================================
   13 — ALTO CONTRASTE: DIREITOS RESERVADOS
   ========================================================= */

/*
 * A área .site-info é o contêiner externo da barra
 * de direitos reservados.
 *
 * O fundo precisa ser aplicado ao contêiner e não apenas
 * ao .footer-bar.
 */


/* ---------------------------------------------------------
   CONTÊINER EXTERNO
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-info {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   CONTÊINER INTERNO
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-info.grid-container {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   BARRA DE DIREITOS RESERVADOS
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-info .footer-bar {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TEXTO
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-info .footer-bar p,
html.esuas-alto-contraste .site-info .footer-bar a {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

html.esuas-alto-contraste .site-info .footer-bar a:hover {
    color: #ffffff !important;
}

/* =========================================================
   14 — RESPONSIVIDADE
   ========================================================= */

/* ---------------------------------------------------------
   BARRA SUPERIOR — TELAS PEQUENAS
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .topbar-coluna-esquerda {
        display: none !important;
    }

    .topbar-coluna-direita {
    flex-basis: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	}

    .topbar-coluna-direita > .wp-block-group {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .topbar-coluna-direita p {
    width: max-content !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap;
	}

    .esuas-icone-acessibilidade {
        width: 15px !important;
        height: 15px !important;
        display: block !important;
        object-fit: contain;
    }

	/* -----------------------------------------------------
       CONTRASTE — AJUSTE DO ÍCONE NO MOBILE
       ----------------------------------------------------- */

    .esuas-contraste {
        font-size: 15px !important;
        line-height: 1 !important;
    }
}
	
/* =========================================================
   15 — ALTO CONTRASTE: PÁGINAS E POSTS
   ========================================================= */

/* ---------------------------------------------------------
   FUNDO DA ÁREA DE CONTEÚDO
   --------------------------------------------------------- */

html.esuas-alto-contraste body.page .site-content,
html.esuas-alto-contraste body.single-post .site-content {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   ÁREA PRINCIPAL
   --------------------------------------------------------- */

html.esuas-alto-contraste body.page .content-area,
html.esuas-alto-contraste body.single-post .content-area,
html.esuas-alto-contraste body.page .site-main,
html.esuas-alto-contraste body.single-post .site-main {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   ARTIGO / CONTEÚDO DA PÁGINA
   --------------------------------------------------------- */

html.esuas-alto-contraste body.page .inside-article,
html.esuas-alto-contraste body.single-post .inside-article {
    background: #000000 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TÍTULOS E TEXTOS
   --------------------------------------------------------- */

html.esuas-alto-contraste body.page .inside-article h1,
html.esuas-alto-contraste body.page .inside-article h2,
html.esuas-alto-contraste body.page .inside-article h3,
html.esuas-alto-contraste body.page .inside-article h4,
html.esuas-alto-contraste body.page .inside-article h5,
html.esuas-alto-contraste body.page .inside-article h6,
html.esuas-alto-contraste body.single-post .inside-article h1,
html.esuas-alto-contraste body.single-post .inside-article h2,
html.esuas-alto-contraste body.single-post .inside-article h3,
html.esuas-alto-contraste body.single-post .inside-article h4,
html.esuas-alto-contraste body.single-post .inside-article h5,
html.esuas-alto-contraste body.single-post .inside-article h6,
html.esuas-alto-contraste body.page .inside-article p,
html.esuas-alto-contraste body.single-post .inside-article p {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   LISTAS
   --------------------------------------------------------- */

html.esuas-alto-contraste body.page .inside-article li,
html.esuas-alto-contraste body.single-post .inside-article li {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

html.esuas-alto-contraste body.page .inside-article a,
html.esuas-alto-contraste body.single-post .inside-article a,
html.esuas-alto-contraste body.page .inside-article a:hover,
html.esuas-alto-contraste body.single-post .inside-article a:hover {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   LINHAS E DIVISÓRIAS
   --------------------------------------------------------- */

html.esuas-alto-contraste body.page .inside-article hr,
html.esuas-alto-contraste body.single-post .inside-article hr {
    border-color: #ffffff !important;
}