/* Fundamentos: tokens, tipografia, formulários.
   O texto corrido usa Atkinson Hyperlegible, desenhada para leitores com
   baixa visão — num fórum sobre inclusão, a fonte é parte do argumento. */

:root {
  /* Paleta do Brasão de Armas de Ribeirão Preto, identidade oficial do
     município pelo Decreto nº 38 e pela Lei Municipal nº 6.057/1991.
     Valores lidos do logotipo institucional; conferir com o manual da
     Prefeitura antes de considerar homologados.

     Cada trilha tem dois tons: o `vivo`, para preencher áreas e traçar
     linhas, e o legível, para texto pequeno — só o segundo alcança o
     contraste mínimo da WCAG em corpo de texto. */
  --papel: #ffffff;
  --papel-fundo: #f1f7fc;
  --tinta: #1b3654;
  --tinta-media: #4a6076;
  --linha: #d7e3ee;

  --familia: #8f5a00;
  --escola: #16639f;
  --saude: #0f7344;
  --familia-vivo: #f0a128;
  --escola-vivo: #2e8fd8;
  --saude-vivo: #2bb673;
  --familia-tenue: #fdf3e2;
  --escola-tenue: #e9f3fb;
  --saude-tenue: #e6f7ee;

  /* Ação principal: o convite da página. Texto escuro sobre o âmbar. */
  --acao: #f5a623;
  --acao-escura: #e08900;

  /* Reservado a erro, para não competir com as trilhas. */
  --alerta: #c62828;
  --alerta-tenue: #fdeceb;

  --largura: 72rem;
  --prosa: 58ch;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3 {
  font-family: Archivo, "Arial Narrow", system-ui, sans-serif;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.25rem, 8.5vw, 4rem); line-height: 1.03; letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.3; }

p { margin: 0 0 1.1em; }
.prosa { max-width: var(--prosa); }
.abertura { font-size: 1.15rem; color: var(--tinta-media); max-width: var(--prosa); }

a { color: var(--escola); text-underline-offset: .18em; }
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--escola);
  outline-offset: 3px;
  border-radius: 2px;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: .8rem 1.1rem; z-index: 100; text-decoration: none;
}
.pular:focus { left: 1rem; top: 1rem; }

.envoltorio { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; }

/* ------------------------------------------------------------- botões */

.botao {
  display: inline-block;
  background: var(--acao);
  color: var(--tinta);
  font: 700 1rem/1 "Atkinson Hyperlegible", system-ui, sans-serif;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 2px solid var(--acao);
  border-radius: 6px;
  cursor: pointer;
}
.botao:hover { background: var(--acao-escura); border-color: var(--acao-escura); color: var(--tinta); }
.botao[disabled] { background: var(--linha); border-color: var(--linha); color: var(--tinta-media); cursor: not-allowed; }
.botao--largo { width: 100%; padding-block: 1.1rem; }

/* Aviso de que as inscrições ainda não abriram. Não é link, e o cursor
   avisa disso antes do clique. */
.botao--aguardando { cursor: default; }
.botao--aguardando:hover { background: var(--acao); border-color: var(--acao); }
.botao--vazado { background: transparent; color: var(--escola); border-color: var(--escola); }
.botao--vazado:hover { background: var(--escola-tenue); color: var(--escola); border-color: var(--escola); }

/* --------------------------------------------------------- formulários */

.formulario { max-width: 34rem; }

/* Cada grupo do formulário começa com respiro claro, para a pessoa
   perceber que mudou de assunto. */
.formulario h2 { margin: 2.75rem 0 .35rem; }
/* Título que vem DEPOIS de um formulário também precisa de respiro; ele é
   irmão do form, então a regra de cima não o alcança. */
form + h2, .formulario + h2 { margin-top: 2.75rem; }
.formulario > h2:first-child { margin-top: 0; }
.formulario h2 + p { color: var(--tinta-media); margin-bottom: 1.5rem; }

.campo { margin-bottom: 1.6rem; }
.campo > label { display: block; font-weight: 700; margin-bottom: .35rem; }
.campo__dica { display: block; font-weight: 400; font-size: .95rem; color: var(--tinta-media); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  padding: .7rem .8rem;
  border: 2px solid var(--linha);
  border-radius: 4px;
  background: #fff;
  color: var(--tinta);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-media); }
.campo textarea { min-height: 5.5rem; resize: vertical; }
.campo--marcar { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 2rem; }
.campo--marcar input { width: auto; flex: none; margin-top: .3rem; accent-color: var(--escola); }
.campo--marcar label { font-weight: 400; }
.obrigatorio { color: var(--alerta); font-weight: 700; }

/* Escolha da oficina: a cor da trilha aparece no próprio controle. */
.salas { display: grid; gap: .7rem; border: 0; padding: 0; margin: 2.2rem 0 2rem; }
.salas legend { font-weight: 700; padding: 0; margin-bottom: .6rem; }
.sala {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem;
  border: 2px solid var(--linha);
  border-left-width: 8px;
  border-radius: 4px;
  padding: .8rem .9rem;
  cursor: pointer;
}
.sala input { grid-row: span 2; align-self: center; }
.sala--familia input { accent-color: var(--familia-vivo); }
.sala--escola input  { accent-color: var(--escola-vivo); }
.sala--saude input   { accent-color: var(--saude-vivo); }
.sala strong { font-weight: 700; }
.sala span { font-size: .95rem; color: var(--tinta-media); }
.sala--familia:hover { background: var(--familia-tenue); }
.sala--escola:hover { background: var(--escola-tenue); }
.sala--saude:hover { background: var(--saude-tenue); }
.sala--familia { border-left-color: var(--familia-vivo); color: var(--familia); }
.sala--escola  { border-left-color: var(--escola-vivo);  color: var(--escola); }
.sala--saude   { border-left-color: var(--saude-vivo);   color: var(--saude); }
.sala--nenhuma { border-left-color: var(--linha); color: var(--tinta-media); }
.sala--nenhuma:hover { background: var(--papel-fundo); }
.sala--nenhuma:has(input:checked) { background: var(--papel-fundo); border-color: var(--tinta-media); }

/* Sala lotada: a opção continua visível, para a pessoa entender por que
   não pode escolhê-la. */
.sala--cheia { opacity: .55; cursor: not-allowed; }
.sala--cheia strong::after { content: " — lotada"; font-weight: 400; color: var(--tinta-media); }
.sala strong, .sala span { color: var(--tinta); }
.sala span { color: var(--tinta-media); }
.sala--familia:has(input:checked) { background: var(--familia-tenue); border-color: var(--familia-vivo); }
.sala--escola:has(input:checked)  { background: var(--escola-tenue);  border-color: var(--escola-vivo); }
.sala--saude:has(input:checked)   { background: var(--saude-tenue);   border-color: var(--saude-vivo); }

/* ------------------------------------------------------------- avisos */

.aviso {
  border: 2px solid;
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  max-width: 34rem;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso--erro     { background: var(--alerta-tenue); border-color: var(--alerta); }
.aviso--ok       { background: var(--saude-tenue); border-color: var(--saude); }
.aviso--atencao  { background: var(--familia-tenue); border-color: var(--familia-vivo); }
.aviso__codigo {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1.9rem; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  margin: .3rem 0 .6rem;
}

[hidden] { display: none !important; }

/* Mantém junto o que não deve ser separado por uma quebra de linha — o
   horário, por exemplo, para a data quebrar na vírgula e não no meio. */
.juntas { white-space: nowrap; }

/* Consulta de inscrição: assunto separado do formulário, e precisa parecer
   separado. Antes encostava no botão de confirmar. */
.consulta {
  margin: 4rem 0 0;
  padding: 2rem 1.5rem 2.25rem;
  background: var(--papel-fundo);
  border-radius: 8px;
  max-width: 34rem;
}
.consulta h2 { margin-top: 0; }
.consulta p { color: var(--tinta-media); }
.consulta .formulario { margin-top: 1.5rem; }
.consulta .campo:last-of-type { margin-bottom: 1.2rem; }