/* ---------------------------------------------------------------
   Menu de acessibilidade flutuante, fixo no meio da lateral direita.
   --------------------------------------------------------------- */

.acessibilidade {
    position: fixed;
    right: 0;
    top: 38%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    align-items: flex-start;
}

.acessibilidade__abrir {
    background: var(--azul);
    color: #fff;
    border: 0;
    border-radius: var(--raio) 0 0 var(--raio);
    padding: .9rem .7rem;
    cursor: pointer;
    box-shadow: var(--sombra-alta);
    display: grid;
    place-items: center;
    line-height: 0;
}
.acessibilidade__abrir:hover { background: var(--azul-escuro); }
.acessibilidade__abrir svg { width: 26px; height: 26px; fill: currentColor; }

.acessibilidade__painel {
    background: #fff;
    border: 1px solid var(--borda);
    border-right: 0;
    border-radius: var(--raio) 0 0 var(--raio);
    box-shadow: var(--sombra-alta);
    width: 268px;
    padding: 1rem;
    display: none;
}
.acessibilidade[data-aberto="true"] .acessibilidade__painel { display: block; }

.acessibilidade__titulo {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texto-suave);
    margin: 0 0 .65rem;
    font-weight: 700;
}

.acessibilidade__opcao {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    background: var(--fundo-alt);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: .6rem .7rem;
    margin-bottom: .4rem;
    font: inherit;
    font-size: .9rem;
    color: var(--texto);
    text-align: left;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}
.acessibilidade__opcao:hover { background: #fff; border-color: var(--amarelo); }
.acessibilidade__opcao[aria-pressed="true"] {
    background: var(--amarelo);
    border-color: var(--amarelo-escuro);
    font-weight: 600;
}
.acessibilidade__opcao svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

.acessibilidade__restaurar {
    width: 100%;
    background: none;
    border: 0;
    color: var(--ambar-escuro);
    font: inherit;
    font-size: .85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: .4rem 0 0;
}

/* ---------------------------------------------------------------
   Efeitos aplicados ao documento. As classes entram no elemento html.
   --------------------------------------------------------------- */

html.ac-contraste {
    filter: contrast(1.35);
    background: #000;
}
html.ac-contraste body {
    background: #000;
    color: #FFF;
}
html.ac-contraste h1, html.ac-contraste h2,
html.ac-contraste h3, html.ac-contraste h4 { color: var(--amarelo); }
html.ac-contraste a { color: var(--amarelo); }
html.ac-contraste .cabecalho,
html.ac-contraste .submenu { background: #000; border-color: #FFF; }
html.ac-contraste .menu__link,
html.ac-contraste .submenu__link { color: #FFF; }

html.ac-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    outline: 2px dashed var(--ambar) !important;
    outline-offset: 2px;
    font-weight: 700 !important;
}

html.ac-texto-1 { font-size: 112.5%; }
html.ac-texto-2 { font-size: 125%; }
html.ac-texto-3 { font-size: 140%; }

html.ac-espacamento body {
    line-height: 2.1 !important;
    letter-spacing: .085em !important;
    word-spacing: .19em !important;
}
html.ac-espacamento p { margin-bottom: 1.8em !important; }

/* O cursor grande usa um SVG embutido, sem depender de arquivo externo. */
html.ac-cursor,
html.ac-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M5 2l14 9-6.2 1.2L16 20l-3 1.4-3.2-7.6L5 18z" fill="%23FFF" stroke="%23000" stroke-width="1.5"/></svg>') 4 2, auto !important;
}

html.ac-saturacao-baixa { filter: saturate(.45); }
html.ac-saturacao-alta  { filter: saturate(1.8); }
html.ac-saturacao-cinza { filter: grayscale(1); }

/* Contraste e saturação são ambos filtros no html, então precisam ser combinados. */
html.ac-contraste.ac-saturacao-baixa { filter: contrast(1.35) saturate(.45); }
html.ac-contraste.ac-saturacao-alta  { filter: contrast(1.35) saturate(1.8); }
html.ac-contraste.ac-saturacao-cinza { filter: contrast(1.35) grayscale(1); }

@media (max-width: 640px) {
    .acessibilidade__painel { width: 232px; }
}

@media print {
    .acessibilidade { display: none; }
}