/**
 * Accessibility CSS - Escola + Segura
 * @package Escola_Mais_Segura
 * @version 2.0.0
 */

/* ==========================================================================
   SKIP TO CONTENT
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.skip-link:focus {
    left: var(--spacing-sm);
    top: var(--spacing-sm);
    outline: 3px solid white;
    outline-offset: 2px;
}

/* ==========================================================================
   FOCUS VISIBLE
   ========================================================================== */

:focus-visible {
    outline: 3px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

:focus:not(:focus-visible) {
    outline: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
    outline: 3px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3);
}

/* ==========================================================================
   BARRA DE ACESSIBILIDADE
   ========================================================================== */

.ems-accessibility-bar {
    background: #333;
    color: white;
    padding: var(--spacing-xs) 0;
    font-size: 0.9rem;
    position: relative;
    z-index: 1001;
}

.ems-accessibility-controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.accessibility-btn {
    background: none;
    border: 1px solid #666;
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.accessibility-btn:hover,
.accessibility-btn:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    outline: none;
}

.accessibility-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* ==========================================================================
   TAMANHOS DE FONTE
   ========================================================================== */

.ems-font-small {
    font-size: 14px;
}

.ems-font-medium {
    font-size: 16px;
}

.ems-font-large {
    font-size: 18px;
}

.ems-font-xlarge {
    font-size: 20px;
}

.ems-font-small body,
.ems-font-medium body,
.ems-font-large body,
.ems-font-xlarge body {
    font-size: inherit;
}

.ems-font-small h1 { font-size: 2.2rem; }
.ems-font-small h2 { font-size: 1.8rem; }
.ems-font-small h3 { font-size: 1.5rem; }

.ems-font-large h1 { font-size: 2.8rem; }
.ems-font-large h2 { font-size: 2.3rem; }
.ems-font-large h3 { font-size: 2rem; }

.ems-font-xlarge h1 { font-size: 3.2rem; }
.ems-font-xlarge h2 { font-size: 2.7rem; }
.ems-font-xlarge h3 { font-size: 2.3rem; }

/* ==========================================================================
   ALTO CONTRASTE
   ========================================================================== */

.ems-high-contrast {
    --primary-color: #ffff00 !important;
    --primary-dark: #cccc00 !important;
    --secondary-color: #00ffff !important;
    --text-color: #ffffff !important;
    --text-light: #cccccc !important;
    --border-color: #ffffff !important;
    --background-light: #000000 !important;
    --background-dark: #000000 !important;
    --error-color: #ff6b6b !important;
    --success-color: #6bff6b !important;
    --warning-color: #ffff00 !important;
    --info-color: #00ffff !important;
}

.ems-high-contrast body {
    background: black !important;
    color: white !important;
}

.ems-high-contrast a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

.ems-high-contrast a:hover,
.ems-high-contrast a:focus {
    color: #ffaa00 !important;
}

.ems-high-contrast button,
.ems-high-contrast .btn,
.ems-high-contrast .ems-btn {
    background: black !important;
    color: yellow !important;
    border: 2px solid yellow !important;
}

.ems-high-contrast input,
.ems-high-contrast select,
.ems-high-contrast textarea {
    background: black !important;
    color: white !important;
    border: 2px solid white !important;
}

.ems-high-contrast .site-header,
.ems-high-contrast .site-footer {
    background: black !important;
    border-color: yellow !important;
}

/* ==========================================================================
   MODO LEITURA
   ========================================================================== */

.ems-reading-mode {
    font-family: Georgia, 'Times New Roman', Times, serif !important;
}

.ems-reading-mode body {
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    line-height: 1.8 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    background: #faf9f8 !important;
}

.ems-reading-mode p {
    margin-bottom: 1.5em !important;
    font-size: 1.1em !important;
}

.ems-reading-mode .ems-container {
    max-width: 800px !important;
}

/* ==========================================================================
   ANIMAÇÕES REDUZIDAS
   ========================================================================== */

@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;
    }
    
    .ems-card:hover,
    .btn:hover,
    .accessibility-btn:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   ARIA LIVE REGIONS
   ========================================================================== */

.ems-aria-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   MENSAGENS DE ERRO E SUCESSO
   ========================================================================== */

.ems-error-message {
    color: #721c24;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 4px solid var(--error-color);
    background: #f8d7da;
    margin: var(--spacing-sm) 0;
    border-radius: var(--border-radius-sm);
}

.ems-success-message {
    color: #155724;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 4px solid var(--success-color);
    background: #d4edda;
    margin: var(--spacing-sm) 0;
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   TAMANHOS DE TOQUE (MOBILE)
   ========================================================================== */

@media (max-width: 768px) {
    button,
    .btn,
    .ems-btn,
    input[type="submit"],
    input[type="button"],
    .accessibility-btn,
    .menu-toggle {
        min-height: 48px;
        min-width: 48px;
    }
    
    select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"] {
        min-height: 48px;
        font-size: 16px !important;
    }
}

/* ==========================================================================
   FORMULÁRIOS ACESSÍVEIS
   ========================================================================== */

label {
    cursor: pointer;
}

label.required::after {
    content: " *";
    color: var(--error-color);
    font-weight: bold;
}

fieldset {
    border: 1px solid var(--border-color);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius);
}

legend {
    font-weight: 600;
    padding: 0 var(--spacing-xs);
}

/* ==========================================================================
   NAVEGAÇÃO POR TECLADO
   ========================================================================== */

.keyboard-nav *:focus {
    outline: 3px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

.keyboard-nav .accessibility-btn:focus,
.keyboard-nav .btn:focus,
.keyboard-nav a:focus {
    outline: 3px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3);
}

/* ==========================================================================
   IMPRESSÃO
   ========================================================================== */

@media print {
    .ems-accessibility-bar,
    .ems-support-button,
    .btn,
    .header-actions,
    .menu-toggle,
    .ems-progress-container {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        background: white;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
        font-weight: normal;
    }
}