/*
 * Acessibilidade do portal (todos os sites e todos os cabeçalhos).
 * As preferências viram classes no <html> (a11y-*), aplicadas antes da pintura por um script no <head> do layout;
 * o comportamento fica em /acessibilidade.js.
 */

/* ---------- Atalhos (eMAG): visíveis só ao receber foco pelo teclado ---------- */
.a11y-atalhos {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2147483000;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .25rem;
}
.a11y-atalhos a {
    position: absolute;
    left: -10000px;
    padding: .6rem 1rem;
    border-radius: .5rem;
    background: #111827;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: underline;
}
.a11y-atalhos a:focus {
    position: static;
    left: auto;
}

.a11y-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Foco sempre visível (vários modelos usam focus:outline-none) ---------- */
:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 2px !important;
}
#conteudo:focus, [data-a11y-alvo]:focus {
    outline: none !important;
}

/* ---------- Menus que só abriam com o mouse (group-hover) também abrem pelo teclado ---------- */
.group:focus-within .group-hover\:block { display: block !important; }
.group:focus-within .group-hover\:flex { display: flex !important; }
.group:focus-within .group-hover\:visible { visibility: visible !important; }
.group:focus-within .group-hover\:opacity-100 { opacity: 1 !important; }
.group:focus-within .group-hover\:pointer-events-auto { pointer-events: auto !important; }
.group:focus-within .group-hover\:translate-y-0 { --tw-translate-y: 0px !important; transform: translateY(0) !important; }
.group:focus-within .group-hover\:rotate-180 { transform: rotate(180deg) !important; }
.group.a11y-fechado .group-hover\:block,
.group.a11y-fechado .group-hover\:flex { display: none !important; }

/* ---------- Tamanho da fonte: o Tailwind usa rem, então a escala vai no <html> ---------- */
html { font-size: var(--a11y-fonte, 100%); }
/* Os scripts antigos dos cabeçalhos mudavam o font-size do body (sem efeito no rem). */
body { font-size: 1rem; }

/* ---------- Alto contraste (preto, branco e amarelo; imagens preservadas) ---------- */
/* Os scripts antigos usavam filter: invert() no body, que invertia fotos e soltava elementos fixos. */
body.high-contrast { filter: none !important; }

html.a11y-contraste,
html.a11y-contraste body {
    background: #000 !important;
}
/* :where() zera a especificidade, para as regras de links/campos abaixo prevalecerem. */
html.a11y-contraste body :where(*:not(svg):not(svg *):not(img):not(video):not(iframe):not(canvas):not([vw]):not([vw] *)) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.a11y-contraste body a,
html.a11y-contraste body a :where(*:not(svg):not(svg *):not(img)) {
    color: #ff0 !important;
}
html.a11y-contraste body a { text-decoration: underline !important; }
html.a11y-contraste body button,
html.a11y-contraste body input,
html.a11y-contraste body select,
html.a11y-contraste body textarea {
    border: 1px solid #fff !important;
}
html.a11y-contraste body ::placeholder { color: #ccc !important; opacity: 1; }
html.a11y-contraste svg { color: #fff; }
html.a11y-contraste a svg { color: #ff0; }
html.a11y-contraste :focus-visible { outline-color: #ff0 !important; }
html.a11y-contraste .a11y-atalhos a { background: #ff0 !important; color: #000 !important; }

/* ---------- Espaçamento de texto (WCAG 1.4.12) ---------- */
html.a11y-espacamento body :where(*:not(i):not(svg):not(svg *)) {
    line-height: 1.8 !important;
    letter-spacing: .06em !important;
    word-spacing: .16em !important;
}
html.a11y-espacamento body p { margin-bottom: 1.2em; }

/* ---------- Fonte de leitura facilitada ---------- */
html.a11y-legivel body,
html.a11y-legivel body *:not(i):not([class*="fa-"]):not(svg):not(svg *) {
    font-family: 'Atkinson Hyperlegible', Verdana, Arial, sans-serif !important;
}

/* ---------- Sublinhar links ---------- */
html.a11y-sublinhar body a { text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- Pausar animações (e respeitar a preferência do sistema) ---------- */
html.a11y-animacoes *,
html.a11y-animacoes *::before,
html.a11y-animacoes *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Botão de contraste dos cabeçalhos antigos indica quando está ligado ---------- */
#contrast-toggle[aria-pressed="true"] { font-weight: 700; text-decoration: underline; }