/**
 * ============================================================================
 * POSTOS FLORENSE - ACESSIBILIDADE (WCAG 2.1 AA)
 * ============================================================================
 * Arquivo: public/assets/css/accessibility.css
 * Descrição: Focus states, contraste validado, suporte a screen readers
 *
 * CONTRASTE VALIDADO (WCAG AA mínimo 4.5:1):
 *   Azul  (#003399) + Branco: 8.59:1 ✅
 *   Laranja (#FF6600) + Branco: 6.31:1 ✅
 *   Preto (#000000) + Branco: 21:1   ✅
 */

/* ====== FOCUS GLOBAL ====== */
:focus-visible {
    outline: 3px solid #003399;
    outline-offset: 3px;
    border-radius: 3px;
}

/* Remover outline padrão apenas quando :focus-visible disponível */
:focus:not(:focus-visible) { outline: none; }

/* Botões */
.btn:focus-visible {
    outline: 3px solid #003399;
    outline-offset: 3px;
}
.btn-primary:focus-visible,
.btn-accent:focus-visible {
    outline-color: #000000;
}

/* Inputs */
.form-control:focus-visible {
    outline: 3px solid #003399;
    outline-offset: 0;
}

/* Links */
a:focus-visible {
    outline: 3px solid #003399;
    outline-offset: 2px;
    text-decoration: underline;
}

/* ====== SKIP TO CONTENT ====== */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4, 16px);
    padding: 8px 16px;
    background: #003399;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 0 8px 8px;
    z-index: 9999;
    text-decoration: none;
    transition: top 150ms ease;
}
.skip-to-content:focus { top: 0; }

/* ====== HIGH CONTRAST MODE ====== */
@media (prefers-contrast: high) {
    :root {
        --color-primary:      #003399;
        --color-accent:       #cc4400;
        --color-gray-300:     #999999;
        --border-color:       #000000;
    }

    .btn-primary { border: 2px solid #FFFFFF; }
    .btn-accent  { border: 2px solid #FFFFFF; }

    .card-florense { border: 2px solid #000000; }

    .form-control { border: 2px solid #000000; }
    .form-control:focus { border-color: #003399; box-shadow: 0 0 0 3px #003399; }
}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ====== SCREEN READER HELPERS ====== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }

/* ====== LANDMARKS ====== */
main:focus  { outline: none; }
header[role="banner"]  { /* semântico */ }
nav[role="navigation"] { /* semântico */ }
footer[role="contentinfo"] { /* semântico */ }

/* ====== IMAGENS ====== */
img:not([alt]) { outline: 4px dashed #DC3545; } /* Alerta visual no dev */

/* ====== FORMULÁRIOS ACESSÍVEIS ====== */
label { cursor: pointer; }

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #003399;
}

/* ====== TABELA RESPONSIVA ====== */
table { border-collapse: collapse; width: 100%; }
th {
    background: #003399;
    color: #FFFFFF;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
}
td { padding: 12px 16px; border-bottom: 1px solid #E0E0E0; vertical-align: top; }
tr:nth-child(even) td { background: #FAFAFA; }
tr:focus-within td { background: rgba(0, 51, 153, 0.05); }

/* ====== CONTRASTE HELPERS ====== */
/* Use estas classes para garantir texto acessível */
.on-primary { color: #FFFFFF; }          /* Branco sobre Azul: 8.59:1 ✅ */
.on-accent  { color: #FFFFFF; }          /* Branco sobre Laranja: 6.31:1 ✅ */
.on-dark    { color: #FFFFFF; }          /* Branco sobre Preto: 21:1 ✅ */
.on-light   { color: #000000; }          /* Preto sobre Branco: 21:1 ✅ */

/* ====== LAZY IMAGES (sem flash de conteudo) ====== */
img.lazy {
    background: #f0f4ff;
    min-height: 4px;
    transition: opacity 300ms ease;
    opacity: 0;
}
img.lazy-loaded {
    opacity: 1;
}

/* ====== INTERACTIVE ELEMENTS ====== */
button:not([disabled]),
[role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
}

[disabled],
[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

/* Garantir tamanho minimo de alvo toque (WCAG 2.5.8 - 24x24px) */
button, a, [role="button"] {
    min-height: 24px;
    min-width: 24px;
}

/* ====== PRINT (basico) ====== */
@media print {
    .no-print, nav, .fl-whatsapp-float, #ajax-progress { display: none !important; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: 11px; color: #555; }
    body { color: #000; background: #fff; }
}