/*
|--------------------------------------------------------------------------
| ALTO CONTRASTE
|--------------------------------------------------------------------------
| Ligado por [data-contrast="high"] no <html>. Fora desse estado este arquivo
| não pinta nada.
|
| O padrão seguido é o do eMAG (Modelo de Acessibilidade em Governo
| Eletrônico), que é o que o público de um site de universidade estadual
| encontra nos outros sites públicos: fundo preto, texto branco, link amarelo
| e sempre sublinhado. Manter a convenção importa mais do que a estética
| aqui — quem usa alto contraste usa em todo lugar e reconhece o padrão.
|
| A regra é deliberadamente pesada (`*` com !important). Alto contraste tem
| que vencer cor definida no Elementor, em CSS embutido de widget e em style
| inline — não há como ser cirúrgico e ainda cobrir o site inteiro.
|
| Imagens, vídeos e canvas ficam de fora: o eMAG não inverte conteúdo. Fotos
| de jornal antigo continuam como são.
*/

:root[data-contrast="high"],
:root[data-contrast="high"] body {
    background: #000 !important;
    color: #FFF !important;
}

:root[data-contrast="high"] *:not(img):not(picture):not(video):not(canvas):not(iframe):not(svg):not(svg *) {
    background-color: transparent !important;
    background-image: none !important;
    color: #FFF !important;
    border-color: #FFF !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/*
| Daqui para baixo o seletor repete [data-contrast="high"].
|
| Não é descuido: a regra geral acima carrega sete :not(), e isso a deixa com
| especificidade alta o bastante para vencer as regras específicas — as duas
| têm !important, então quem decide é a especificidade. Repetir o atributo
| soma uma unidade na coluna que importa e devolve a precedência a quem deve
| ter. Sem isso o link fica branco, não amarelo. Conferido no navegador.
*/

/* Ícone vetorial acompanha a cor do texto, senão vira preto sobre preto. */
:root[data-contrast="high"][data-contrast="high"] svg:not([class*="logo"]) { fill: currentColor !important; }

/* Link amarelo e sublinhado: a cor sozinha não pode ser o único sinal. */
:root[data-contrast="high"][data-contrast="high"] a,
:root[data-contrast="high"][data-contrast="high"] a * {
    color: #FF0 !important;
    text-decoration: underline !important;
}

/* Sem fundo próprio, botão some. O contorno devolve a silhueta. */
:root[data-contrast="high"][data-contrast="high"] button,
:root[data-contrast="high"][data-contrast="high"] .elementor-button,
:root[data-contrast="high"][data-contrast="high"] input[type="submit"],
:root[data-contrast="high"][data-contrast="high"] input[type="button"] {
    border: 2px solid #FFF !important;
    color: #FFF !important;
    text-decoration: none !important;
}

/* Campo de formulário precisa de moldura para existir sobre o preto. */
:root[data-contrast="high"][data-contrast="high"] input,
:root[data-contrast="high"][data-contrast="high"] select,
:root[data-contrast="high"][data-contrast="high"] textarea {
    background-color: #000 !important;
    border: 2px solid #FFF !important;
}

:root[data-contrast="high"][data-contrast="high"] ::placeholder {
    color: #CCC !important;
    opacity: 1 !important;
}

/* Vários widgets do Elementor zeram o outline. Aqui ele volta, em amarelo. */
:root[data-contrast="high"][data-contrast="high"] :focus-visible {
    outline: 3px solid #FF0 !important;
    outline-offset: 2px !important;
}

/*
| O próprio botão, que precisa ser reconhecível nos dois estados.
| Fora do alto contraste ele herda as cores do tema.
*/
.high-contrast-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .5em .9em;
    border: 2px solid currentColor;
    border-radius: 5px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}

.high-contrast-toggle__icon {
    font-size: 1.1em;
    line-height: 1;
}

.high-contrast-toggle:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Estado ligado, para quem enxerga o botão mas não a página inteira. */
:root[data-contrast="high"][data-contrast="high"] .high-contrast-toggle[aria-pressed="true"] {
    border-color: #FF0 !important;
    color: #FF0 !important;
}

/*
|--------------------------------------------------------------------------
| VERSÃO FLUTUANTE (padrão do shortcode)
|--------------------------------------------------------------------------
| Encaixa logo acima do botão do VLibras, cujas medidas vêm do próprio plugin
| (vlibras-plugin.js):
|
|     #vlibras-access { position: fixed; right: 10px; top: calc(50vh - 20px);
|                       width: 40px; height: 40px; z-index: 2147483639 }
|
| Ou seja: ele é centrado na vertical, não colado no rodapé. Por isso o nosso
| usa a mesma margem de 10px e 40×40, e sobe o suficiente para encostar acima
| dele com uma folga de 10px — a conta de `top` está no valor abaixo.
|
| O z-index fica UMA unidade abaixo do dele, de propósito: se algum dia os dois
| se sobrepuserem, quem fica por cima é o VLibras.
*/

.high-contrast-toggle--floating {
    position: fixed;
    right: 10px;                    /* mesma margem do VLibras */
    top: calc(50vh - 70px);         /* 20px (meio do VLibras) + 40px (altura) + 10px (folga) */
    z-index: 2147483638;            /* VLibras usa ...639 */

    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;

    background: transparent;
    color: #000;
    border: 2px solid #000;
    border-radius: 8px;             /* mesmo raio do botão do VLibras */

    transition: background-color .2s ease, color .2s ease;
}

.high-contrast-toggle--floating .high-contrast-toggle__icon {
    font-size: 22px;
}

/* Hover e foco invertem: fundo preto, ícone branco. */
.high-contrast-toggle--floating:hover,
.high-contrast-toggle--floating:focus-visible {
    background: #000;
    color: #FFF;
}

/*
| O rótulo sai da tela mas continua no DOM e continua sendo lido: é o nome
| acessível do botão. display:none o removeria da árvore de acessibilidade.
*/
.high-contrast-toggle--floating .high-contrast-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}