/**
 * Barra de Acessibilidade — SGEPI
 *
 * Mobile-first. Renderizada dentro de .navbar .container.
 * Herda background e alinhamento do navbar.
 */

/* ======================================================================
   1. CSS VARIABLES
   ====================================================================== */

:root {
    --sgepi-font-scale: 1;
}

/* ======================================================================
   2. ACCESSIBILITY BAR — MOBILE FIRST (< 500px)
   ====================================================================== */

.a11y-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
}

.a11y-bar__label {
    display: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
}

.a11y-bar__controls {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
}

/* ======================================================================
   3. BUTTONS
   ====================================================================== */

.a11y-btn {
    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 5px;

    background: #b9ddf5;
    color: #083b59;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    cursor: pointer;

    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    text-align: center;

    transition: transform 150ms ease, background-color 150ms ease;
}

.a11y-btn:hover {
    background: #a1cfeb;
    transform: translateY(-1px);
}

.a11y-btn:active {
    transform: translateY(0);
}

/* Foco visivel — teclado */
.a11y-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Estado ativo (toggle) */
.a11y-btn[aria-pressed="true"] {
    background: #083b59;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* Icones RemixIcon dentro do botao */
.a11y-btn i {
    font-size: 1rem;
    line-height: 1;
}

/* ======================================================================
   4. RESPONSIVE — ULTRA-COMPACT (< 360px)
   ====================================================================== */

@media (max-width: 359px) {
    .a11y-bar__controls {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-top: 6px;
    }
}

/* ======================================================================
   5. RESPONSIVE — MOBILE (>= 500px)
   ====================================================================== */

@media (min-width: 500px) {
    .a11y-bar {
        gap: 6px;
    }

    .a11y-bar__label {
        display: block;
        font-size: 0.85rem;
    }

    .a11y-bar__controls {
        gap: 5px;
    }

    .a11y-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .a11y-btn i {
        font-size: 1.15rem;
    }
}

/* ======================================================================
   6. RESPONSIVE — TABLET / DESKTOP
   ====================================================================== */

@media (min-width: 768px) {
    .a11y-bar {
        gap: 8px;
    }

    .a11y-bar__label {
        font-size: 0.9rem;
    }

    .a11y-bar__controls {
        gap: 6px;
    }

    .a11y-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .a11y-btn i {
        font-size: 1.25rem;
    }
}

/* ======================================================================
   7. MODO DE ALTO CONTRASTE
   ====================================================================== */

html.high-contrast {
    background: #000;
    color: #fff;
}

html.high-contrast body {
    background: #000;
    color: #fff;
}

/* Navbar */
html.high-contrast .navbar {
    background: #000 !important;
    border-bottom: 2px solid #fff;
}

html.high-contrast .navbar img {
    filter: brightness(0) invert(1);
}

/* Footer */
html.high-contrast .footer {
    background: #000 !important;
    border-top: 2px solid #fff;
}

html.high-contrast .footer img {
    filter: brightness(0) invert(1);
}

html.high-contrast .footer .text-footer {
    color: #fff;
}

/* Links */
html.high-contrast a {
    color: #ff0;
}

html.high-contrast a:hover {
    color: #ffa;
}

/* Cards de evento */
html.high-contrast .event-card {
    background: #111;
    border: 2px solid #fff;
    color: #fff;
}

html.high-contrast .event-card .event-title {
    color: #fff;
}

html.high-contrast .event-card .event-date {
    color: #ccc;
}

html.high-contrast .event-card .event-status-badge {
    border: 1px solid #fff;
}

/* Categoria cards */
html.high-contrast .categoria-card {
    background: #111;
    border: 2px solid #fff;
    color: #fff;
}

html.high-contrast .categoria-card .categoria-title {
    color: #fff;
}

html.high-contrast .categoria-card .categoria-description {
    color: #ccc;
}

/* Info blocks */
html.high-contrast .info-block {
    background: #111;
    border: 1px solid #fff;
}

html.high-contrast .info-block .label-text {
    color: #ccc;
}

html.high-contrast .info-block .value-text {
    color: #fff;
}

/* Formularios */
html.high-contrast .form-control,
html.high-contrast .form-select {
    background: #111;
    color: #fff;
    border-color: #fff;
}

html.high-contrast .form-control:focus,
html.high-contrast .form-select:focus {
    background: #222;
    color: #fff;
    border-color: #ff0;
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.3);
}

html.high-contrast .form-label {
    color: #fff;
}

/* Botoes Bootstrap */
html.high-contrast .btn-primary {
    background: #ff0;
    color: #000;
    border-color: #ff0;
}

html.high-contrast .btn-primary:hover {
    background: #ffa;
    border-color: #ffa;
    color: #000;
}

html.high-contrast .btn-outline-secondary {
    color: #fff;
    border-color: #fff;
}

html.high-contrast .btn-outline-secondary:hover {
    background: #fff;
    color: #000;
}

/* Alertas */
html.high-contrast .alert-success {
    background: #003300;
    color: #0f0;
    border-color: #0f0;
}

html.high-contrast .alert-danger {
    background: #330000;
    color: #f00;
    border-color: #f00;
}

html.high-contrast .alert-warning {
    background: #333300;
    color: #ff0;
    border-color: #ff0;
}

/* Texto generico */
html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4,
html.high-contrast h5,
html.high-contrast h6 {
    color: #fff;
}

html.high-contrast p,
html.high-contrast span,
html.high-contrast li,
html.high-contrast td,
html.high-contrast th {
    color: #fff;
}

html.high-contrast .text-muted {
    color: #ccc !important;
}

/* Manter a barra de acessibilidade visivel no alto contraste */
html.high-contrast .a11y-bar__label {
    color: #fff;
}

html.high-contrast .a11y-btn {
    background: #b9ddf5;
    color: #083b59;
}

html.high-contrast .a11y-btn[aria-pressed="true"] {
    background: #ff0;
    color: #000;
}

/* ======================================================================
   8. ESCALA DE FONTE GLOBAL
   ====================================================================== */

body {
    font-size: calc(1rem * var(--sgepi-font-scale));
}

/* A barra de acessibilidade NAO escala */
.a11y-bar {
    font-size: 0.875rem;
}

/* ======================================================================
   9. REDUCAO DE MOVIMENTO
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    .a11y-btn {
        transition: none;
    }
}

/* ======================================================================
   10. FORCA VISUAL DO BOTAO (modo de alto contraste do SO)
   ====================================================================== */

@media (forced-colors: active) {
    .a11y-btn {
        border: 2px solid ButtonText;
    }

    .a11y-btn:focus-visible {
        outline: 3px solid Highlight;
    }

    .a11y-btn[aria-pressed="true"] {
        background: Highlight;
        color: HighlightText;
    }
}