/* ============================================================
   Acessibilidade — compartilhado entre o site institucional e a
   plataforma de cursos (mesmo padrão do cookie-consent.css: um
   arquivo só, incluído nos dois layouts).
   ============================================================ */

/* Utilitário: esconde visualmente mas mantém disponível para leitor de tela */
.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;
}

/* Link "pular para o conteúdo" — invisível até receber foco por teclado (Tab) */
.skip-link{
  position:absolute; top:-100px; left:12px; z-index:1000;
  background:var(--amber); color:#1b1204; font-weight:700; font-size:14px;
  padding:10px 18px; border-radius:8px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

/* Foco visível consistente em qualquer elemento navegável por teclado —
   os estilos anteriores só trocavam a cor da borda em inputs, o que é
   insuficiente pra quem navega por teclado enxergar onde está. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--amber) !important;
  outline-offset:2px !important;
  border-radius:4px;
}

/* Respeita a preferência do sistema por menos movimento — desliga
   transições/animações decorativas, mantém as que comunicam estado
   (ex.: barra de progresso) mas sem easing suave. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Mesmo efeito acima, mas via opt-in no painel (para quem não mudou a
   preferência do sistema operacional, mas quer menos movimento mesmo assim). */
html.a11y-force-reduce-motion *, html.a11y-force-reduce-motion *::before, html.a11y-force-reduce-motion *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}

/* Modo alto contraste (opt-in, ativado pelo painel) — reforça bordas e
   sublinha links, útil para baixa visão além do contraste de cor puro. */
html.a11y-high-contrast{
  --line: rgba(244,241,232,0.35) !important;
}
html.a11y-high-contrast a{ text-decoration:underline; }
html.a11y-high-contrast .card, html.a11y-high-contrast .lesson-animation{
  border-width:2px !important;
}

/* Espaçamento de leitura ampliado (opt-in) — ajuda leitores com dislexia */
html.a11y-readable .lesson-content, html.a11y-readable .prose-page{
  line-height:2 !important;
  letter-spacing:0.01em !important;
}
html.a11y-readable .lesson-content p, html.a11y-readable .prose-page p{
  margin-bottom:24px !important;
}

/* Escala de fonte (opt-in, 3 níveis) — aplicada na raiz, então todo o
   layout (que já usa rem/em em quase tudo) escala junto. */
html.a11y-font-m{ font-size:107.5%; }
html.a11y-font-l{ font-size:115%; }

/* ---------------- Painel de acessibilidade ---------------- */
#a11y-toggle{
  position:fixed; bottom:20px; right:20px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--amber); color:#1b1204; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
}
#a11y-toggle svg{ width:24px; height:24px; }

#a11y-panel{
  position:fixed; bottom:78px; right:20px; z-index:900;
  width:280px; max-width:calc(100vw - 40px);
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px; box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  display:none;
}
#a11y-panel.is-open{ display:block; }
#a11y-panel h2{ font-size:15px; margin:0 0 14px; color:var(--text); }
.a11y-row{ margin-bottom:14px; }
.a11y-row-label{ font-size:12.5px; color:var(--text-muted); margin-bottom:6px; display:block; }
.a11y-btn-group{ display:flex; gap:6px; }
.a11y-btn-group button{
  flex:1; background:var(--bg-alt); border:1px solid var(--line); color:var(--text);
  border-radius:7px; padding:7px 0; font-size:13px; cursor:pointer;
}
.a11y-btn-group button[aria-pressed="true"]{
  background:var(--amber-soft); border-color:var(--amber); color:var(--amber); font-weight:700;
}
.a11y-toggle-row{ display:flex; align-items:center; justify-content:space-between; }
.a11y-toggle-row span{ font-size:13.5px; color:var(--text); }
.a11y-switch{ position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
.a11y-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.a11y-switch .a11y-track{
  position:absolute; inset:0; background:var(--line); border-radius:20px; transition:background .15s;
}
.a11y-switch .a11y-thumb{
  position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:var(--text); transition:transform .15s;
}
.a11y-switch input:checked + .a11y-track{ background:var(--amber); }
.a11y-switch input:checked + .a11y-track + .a11y-thumb{ transform:translateX(16px); background:#1b1204; }
.a11y-reset{
  width:100%; margin-top:4px; background:none; border:1px solid var(--line); color:var(--text-muted);
  border-radius:7px; padding:7px 0; font-size:12.5px; cursor:pointer;
}