/*
 * 02_base.css — ONDA D
 * ═══════════════════════════════════════════════════════════════════════════
 * Reset curto, tipografia, formulário e foco. Só ELEMENTO: nenhuma classe
 * nasce aqui. Se um seletor precisa de `.`, ele é de 10_componentes.css.
 *
 * Três decisões que não são estética:
 *  · `font-size: 16px` em TODO controle de formulário. Abaixo disso o Safari
 *    do iPhone dá zoom ao focar o campo e o aluno perde o contexto da tela no
 *    meio do cadastro. É o bug de mobile web mais barato de evitar e o mais
 *    caro de descobrir depois.
 *  · `:focus-visible` com anel de 3px e offset. O motorista de luva erra o
 *    toque; quem usa teclado precisa ver onde está. O anel usa a cor da marca
 *    e é medido em ≥ 3:1 contra os quatro fundos.
 *  · `prefers-reduced-motion` desliga TUDO, inclusive o `scroll-behavior`.
 */

*, *::before, *::after { box-sizing: border-box }

html {
  -webkit-text-size-adjust: 100%;   /* o iOS não reflui o texto na rotação */
  scroll-behavior: smooth;
  /* O safe-area do iPhone com notch: o aluno assiste o vídeo deitado. */
  padding: env(safe-area-inset-top) 0 0;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--texto-md);
  line-height: var(--altura-normal);
  font-weight: var(--peso-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* "CONSCIENTIZAÇÃO" não estoura o cartão */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--esp-3);
  line-height: var(--altura-apertada);
  letter-spacing: var(--espacamento-titulo);
  font-weight: var(--peso-forte);
  text-wrap: balance;
}

h1 { font-size: var(--texto-2xl) }
h2 { font-size: var(--texto-xl) }
h3 { font-size: var(--texto-lg) }
h4, h5, h6 { font-size: var(--texto-md) }

@media (min-width: 48rem) {
  h1 { font-size: var(--texto-3xl) }
  h2 { font-size: var(--texto-2xl) }
}

p, ul, ol, dl, figure, table, pre, blockquote { margin: 0 0 var(--esp-4) }
p { text-wrap: pretty }
:where(h1, h2, h3, h4, p, ul, ol):last-child { margin-bottom: 0 }

small { font-size: var(--texto-sm) }
strong, b { font-weight: var(--peso-forte) }

a {
  color: var(--cor-marca);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transicao-rapida);
}
a:hover { color: var(--cor-marca-forte) }

/* Link que o tema claro/escuro não deve sublinhar: navegação e botões. */
:where(nav, .botao, .cartao__link) a, a:where(.botao) { text-decoration: none }

code, kbd, samp, pre {
  font-family: var(--fonte-mono);
  font-size: 0.9em;
  font-variant-ligatures: none;
}
code:not(pre code) {
  background: var(--fundo-fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  padding: 0.1em 0.35em;
}
pre {
  background: var(--fundo-fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  padding: var(--esp-4);
  overflow-x: auto;
}

kbd {
  background: var(--fundo-elevado);
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  border-radius: var(--raio-1);
  padding: 0.1em 0.45em;
  font-size: 0.85em;
}

hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--esp-6) 0;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block }
video { background: #000 }

/* Números que mudam (placar, prazo, contagem) não podem dançar. */
time, output, .tabular { font-variant-numeric: tabular-nums }

abbr[title] { text-decoration: underline dotted; cursor: help }

/* ── Formulário ──────────────────────────────────────────────────────────── */
button, input, select, textarea {
  font: inherit;
  font-size: var(--texto-md);   /* 16px: o iOS não dá zoom ao focar */
  color: inherit;
  margin: 0;
}
button { cursor: pointer; background: none; border: 0 }
button:disabled { cursor: not-allowed }
textarea { resize: vertical; min-height: 6rem }

/* O acento do "ô" não sobrevive a `text-transform: uppercase` em toda fonte;
   quando um rótulo precisa de caixa alta, é `font-variant-caps`, não capitais
   escritas no HTML — leitor de tela pronuncia sigla. */
label { display: block }

input[type="checkbox"], input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  accent-color: var(--cor-marca-forte);
  flex: none;
  cursor: pointer;
}

::placeholder { color: var(--texto-tenue); opacity: 1 }

/* Autofill do Chrome pinta o campo de amarelo e some com o tema escuro. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 100px var(--fundo-fundo) inset;
  caret-color: var(--texto);
}

/* Barra de progresso nativa: é o elemento certo para medidor porque a CSP do
   projeto (style-src com nonce) proíbe `style=` inline — largura dinâmica por
   atributo só existe aqui. Ver 10_componentes.css `.medidor`. */
progress { appearance: none; border: 0; display: block }

/* ── Foco ────────────────────────────────────────────────────────────────── */
:focus { outline: none }
:focus-visible {
  outline: 3px solid var(--cor-marca);
  outline-offset: 2px;
  border-radius: var(--raio-1);
}
/* Teclado navegando dentro de um cartão escuro: o anel precisa de folga. */
.cartao :focus-visible, .lista :focus-visible { outline-offset: 3px }

::selection { background: var(--cor-marca-tenue); color: var(--texto) }

/* ── Salta para o conteúdo ───────────────────────────────────────────────── */
.pular-para-conteudo {
  position: absolute;
  left: var(--esp-2);
  top: var(--esp-2);
  z-index: var(--z-aviso);
  padding: var(--esp-3) var(--esp-4);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  transform: translateY(-200%);
  transition: transform var(--transicao);
}
.pular-para-conteudo:focus-visible { transform: translateY(0) }

/* ── Só para leitor de tela ──────────────────────────────────────────────── */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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