/**
 * Acessibilidade - Agendly
 * Melhorias de acessibilidade conforme WCAG 2.1
 */

/* ============================================
   CONTRASTE E LEGIBILIDADE
   ============================================ */

/* Garantir contraste mínimo de 4.5:1 para texto normal */
body {
    color: var(--agendly-text-primary);
    background: var(--agendly-bg-primary);
}

/* Texto secundário com contraste adequado */
.text-secondary {
    color: var(--agendly-gray-700) !important;
}

/* Links com contraste adequado */
a {
    color: var(--agendly-primary);
    text-decoration: underline;
}

a:hover,
a:focus {
    color: var(--agendly-accent);
    text-decoration: underline;
}

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

/* Focus visível para todos os elementos interativos */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--agendly-primary);
    outline-offset: 2px;
    border-radius: var(--agendly-radius-sm);
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--agendly-primary);
    color: var(--agendly-white);
    padding: var(--agendly-spacing-sm) var(--agendly-spacing-md);
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 var(--agendly-radius-md) 0;
}

.skip-to-content:focus {
    top: 0;
}

/* ============================================
   SCREEN READERS
   ============================================ */

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

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--agendly-spacing-sm) var(--agendly-spacing-md);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   TEXTOS ALTERNATIVOS
   ============================================ */

/* Imagens decorativas devem ter alt vazio */
img[alt=""] {
    /* Já está correto se alt estiver vazio */
}

/* Imagens sem alt devem ser marcadas */
img:not([alt]) {
    border: 2px dashed var(--agendly-danger);
}

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

/* Labels obrigatórios */
.form-label.required::after {
    content: ' *';
    color: var(--agendly-danger);
    font-weight: var(--agendly-font-bold);
}

/* Mensagens de erro acessíveis */
.invalid-feedback {
    display: block;
    color: var(--agendly-danger);
    font-size: var(--agendly-font-sm);
    margin-top: var(--agendly-spacing-xs);
}

/* Associar feedback com campo */
.form-control[aria-invalid="true"] {
    border-color: var(--agendly-danger);
}

.form-control[aria-invalid="true"]:focus {
    outline-color: var(--agendly-danger);
}

/* ============================================
   ARIA LABELS
   ============================================ */

/* Botões sem texto visível devem ter aria-label */
.btn-icon {
    min-width: 44px;
    min-height: 44px;
}

.btn-icon[aria-label]::before {
    content: attr(aria-label);
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   ANIMAÇÕES E REDUÇÃO DE MOVIMENTO
   ============================================ */

@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;
    }
}

/* Pausar animações quando não estão em foco */
@media (prefers-reduced-motion: no-preference) {
    .pause-animations * {
        animation-play-state: paused !important;
    }
}

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

@media (prefers-contrast: high) {
    .btn {
        border-width: 3px;
    }
    
    .card {
        border-width: 2px;
        border-color: var(--agendly-text-primary);
    }
    
    .form-control {
        border-width: 2px;
    }
    
    /* Remover gradientes em alto contraste */
    .bg-gradient,
    .text-gradient {
        background: var(--agendly-primary) !important;
        -webkit-text-fill-color: var(--agendly-text-primary) !important;
        color: var(--agendly-text-primary) !important;
    }
}

/* ============================================
   TAMANHO DE FONTE
   ============================================ */

/* Respeitar preferências do usuário */
html {
    font-size: 16px;
}

/* Não reduzir tamanho mínimo de fonte */
body {
    font-size: 1rem;
    min-font-size: 14px;
}

/* ============================================
   LANDMARKS E ESTRUTURA
   ============================================ */

/* Headers e footers claramente identificados */
header[role="banner"],
footer[role="contentinfo"] {
    /* Estrutura semântica */
}

/* Navegação principal */
nav[role="navigation"] {
    /* Navegação principal */
}

/* Conteúdo principal */
main[role="main"] {
    /* Conteúdo principal */
}

/* ============================================
   ESTADOS E FEEDBACK
   ============================================ */

/* Estados de loading acessíveis */
[aria-busy="true"] {
    cursor: wait;
}

[aria-busy="true"]::after {
    content: ' (carregando...)';
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Estados desabilitados */
[aria-disabled="true"],
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Estados expandidos/colapsados */
[aria-expanded="true"]::before {
    content: ' (expandido)';
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

[aria-expanded="false"]::before {
    content: ' (colapsado)';
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   TABINDEX E ORDEM DE FOCO
   ============================================ */

/* Remover elementos não interativos do tab order */
[tabindex="-1"]:focus {
    outline: none;
}

/* Garantir ordem lógica de tab */
.tab-order-1 { order: 1; }
.tab-order-2 { order: 2; }
.tab-order-3 { order: 3; }

/* ============================================
   RESPONSIVIDADE E ACESSIBILIDADE
   ============================================ */

@media (max-width: 768px) {
    /* Aumentar área de toque */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Melhorar espaçamento para leitura */
    p,
    li {
        line-height: 1.75;
    }
}