/* Dislexia 33 - estilo acessível.
   Contraste mínimo 7:1 para texto normal (verificado, ver README do estilo no PR).
   Cores neutras provisórias. */

@font-face {
  font-family: "OpenDyslexic";
  src: url("../fonts/opendyslexic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("../fonts/opendyslexic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Cores (tema claro é o padrão) ---------- */
:root {
  /* TROCAR: cor final */
  --fundo: #ffffff;
  --fundo-2: #f4f6f9;
  --texto: #1a1a1a;          /* 17,4:1 sobre --fundo */
  --texto-suave: #3d3d3d;    /* 10,0:1 sobre --fundo-2 */
  --link: #0b3d91;           /* 10,0:1 sobre --fundo */
  --botao-fundo: #1f3a5f;    /* TROCAR: cor final */
  --botao-texto: #ffffff;    /* 11,5:1 sobre --botao-fundo */
  --borda: #5c6670;
  --foco: #b35c00;           /* 4,7:1 (mínimo exigido para foco: 3:1) */
  --fonte: Verdana, Geneva, sans-serif;
  color-scheme: light;
}

/* ---------- Tema escuro pelo sistema ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #121212;
    --fundo-2: #1e1e1e;
    --texto: #f2f2f2;        /* 16,7:1 */
    --texto-suave: #c9c9c9;  /* 10,1:1 sobre --fundo-2 */
    --link: #9ec5ff;         /* 10,6:1 */
    --botao-fundo: #9ec5ff;  /* TROCAR: cor final */
    --botao-texto: #121212;  /* 10,6:1 */
    --borda: #8a949e;
    --foco: #ffd24a;         /* 13,0:1 */
    color-scheme: dark;
  }
}

/* ---------- Tema escuro escolhido no botão ---------- */
:root[data-tema="escuro"] {
  --fundo: #121212;
  --fundo-2: #1e1e1e;
  --texto: #f2f2f2;
  --texto-suave: #c9c9c9;
  --link: #9ec5ff;
  --botao-fundo: #9ec5ff;
  --botao-texto: #121212;
  --borda: #8a949e;
  --foco: #ffd24a;
  color-scheme: dark;
}

/* ---------- Fonte escolhida no botão ---------- */
:root[data-fonte="opendyslexic"] {
  --fonte: "OpenDyslexic", Verdana, Geneva, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;           /* 16 px ou o que o leitor definiu no navegador */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
  text-align: left;          /* nunca justificado */
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.3; margin: 1.5em 0 0.5em; font-weight: 700; }
h1 { font-size: 1.75rem; margin-top: 0.5em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p, ul, ol { margin: 0 0 1em; max-width: 65ch; }
li { margin-bottom: 0.5em; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }

/* ---------- Foco visível ---------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Pular para o conteúdo ---------- */
.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--botao-fundo);
  color: var(--botao-texto);
  padding: 0.75rem 1rem;
  z-index: 20;
}
.pular:focus { top: 1rem; }

/* ---------- Topo e menu ---------- */
.topo {
  background: var(--fundo-2);
  border-bottom: 2px solid var(--borda);
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  z-index: 10;
}
@media (min-width: 48em) {
  .topo { position: sticky; top: 0; }   /* menu fixo no topo em telas grandes */
}
.marca {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--texto);
  text-decoration: none;
}
.topo nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.topo nav li { margin: 0; }
.topo nav a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  line-height: 1.75;
}
.topo nav a[aria-current="page"] {
  color: var(--texto);
  font-weight: 700;
  text-decoration-thickness: 3px;
}

/* ---------- Botões ---------- */
.ferramentas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
button {
  font: inherit;
  background: var(--botao-fundo);
  color: var(--botao-texto);
  border: 2px solid var(--botao-fundo);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  min-height: 44px;
  cursor: pointer;
}
button:hover { text-decoration: underline; }

/* ---------- Conteúdo ---------- */
main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
section {
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.5rem 1.25rem 0.25rem;
  margin-bottom: 1.5rem;
}
section > h2:first-child { margin-top: 0.75em; }

footer {
  border-top: 2px solid var(--borda);
  padding: 1rem;
  color: var(--texto-suave);
}
footer p { margin: 0 0 0.5em; }

/* ---------- Telas pequenas ---------- */
@media (max-width: 47.99em) {
  .ferramentas { margin-left: 0; width: 100%; }
  .ferramentas button { flex: 1 1 auto; }
}
img, video, svg { max-width: 100%; height: auto; }

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}