/* ============================================================
   ACESSIBILIDADE, PARA TODAS AS PÁGINAS ESTÁTICAS

   **Por que este arquivo existe separado.**

   O `site/` tem quatro folhas de estilo independentes: a da landing,
   a dos sites de exemplo, a do exemplo de campanha e a do protótipo do
   painel. As regras abaixo precisam valer nas quatro, e copiá-las
   quatro vezes garantiria que um dia elas divergissem: alguém ajusta a
   cor do anel de foco na landing e os exemplos ficam para trás, sem
   ninguém perceber, porque anel de foco só é notado por quem depende
   dele e essa pessoa não está na sala.

   Um arquivo, carregado por todas as páginas, e um teste que confere
   que toda página o carrega.

   **O que está aqui e por quê.**

   A Lei 13.146, artigo 63, obriga acessibilidade em sites de agentes
   públicos. Os sites de exemplo são o que o vereador clica antes de
   comprar, e o modelo do que ele vai receber. Deixar os exemplos
   inacessíveis seria vender de forma inacessível um produto que a lei
   obriga a ser acessível.
   ============================================================ */

/* ------------------------------------------------------------
   FOCO VISÍVEL

   Quem navega por teclado, seja por limitação motora, seja com leitor
   de tela, só sabe onde está pelo anel de foco. Sem ele a página
   funciona e é intransitável.

   **`:focus-visible`, e não `:focus`.** O navegador só marca quando o
   foco veio do teclado, então quem usa mouse não vê anel nenhum. É a
   ausência dessa distinção que faz alguém escrever `outline: 0` e
   quebrar a página para o resto das pessoas.

   **`outline`, e não `box-shadow`.** No modo de alto contraste do
   Windows o navegador descarta sombra e preserva contorno. Um anel
   feito de sombra some exatamente para quem ligou o alto contraste
   porque precisa dele.

   A cor é fixa e não vem da identidade de ninguém: o anel de foco não
   pode depender da cor que um cliente escolheu no painel.
   ------------------------------------------------------------ */
:root {
  --foco-a11y: #0B57D0;
  --foco-a11y-claro: #fff;
}

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

/* Sobre fundo escuro o azul some. Os seletores cobrem os nomes usados
   pelas quatro folhas: `header` e `.topo` nos cabeçalhos, `.hero` e
   `.capa` nas capas, `.rodape` e `footer` nos rodapés. */
header :focus-visible,
.topo :focus-visible,
.hero :focus-visible,
.capa :focus-visible,
.capa-bairro :focus-visible,
.form-sec :focus-visible,
.campanha :focus-visible,
.passos :focus-visible,
footer :focus-visible,
.rodape :focus-visible {
  outline-color: var(--foco-a11y-claro);
}

/* ------------------------------------------------------------
   PULAR PARA O CONTEÚDO

   Primeiro elemento focável de cada página, escondido até receber
   foco. Sem ele, quem usa teclado atravessa o menu inteiro em toda
   página que abre, inclusive ao voltar do navegador.
   ------------------------------------------------------------ */
.pular-para-conteudo {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  background: #fff;
  color: #1B2430;
  border: 2px solid var(--foco-a11y);
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: top .15s;
}

.pular-para-conteudo:focus {
  top: 12px;
}

/* O alvo do salto não mostra anel: a pessoa não navegou até ele, ela
   pulou para dentro dele. */
main:focus {
  outline: none;
}

/* ------------------------------------------------------------
   TEXTO SÓ PARA LEITOR DE TELA

   Some da tela sem sair da árvore de acessibilidade. `display: none`
   e `visibility: hidden` fariam o oposto: sumiriam para todo mundo,
   inclusive para quem o texto foi escrito.
   ------------------------------------------------------------ */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   O CELULAR

   Quem compra este produto olha do celular, e quem visita o site de um
   vereador olha do celular. As duas regras abaixo existem por causa de
   defeitos que só aparecem no aparelho e em nenhum emulador de
   computador.
   ============================================================ */

/* ------------------------------------------------------------
   CAMPO DE FORMULÁRIO NUNCA ABAIXO DE 16 PIXELS NO TOQUE

   **O Safari do iPhone dá zoom na página quando o campo que recebe
   foco tem fonte menor que 16 pixels.** A tela salta, o teclado sobe
   por cima do formulário, e a pessoa perde de vista o campo que estava
   preenchendo. Ela não conclui que o site é pequeno demais: ela conclui
   que travou, e fecha.

   Era o caso de onze regras espalhadas por cinco folhas, incluindo o
   formulário de reserva da landing, que é o único formulário deste
   negócio que fatura.

   **Por que uma regra só, e não onze correções.** Corrigir campo a
   campo resolve os onze de hoje e não impede o décimo segundo. Vale a
   mesma lógica do resto do projeto: a barreira fica em um lugar, e
   bloco novo nasce coberto.

   **Por que `!important`, que normalmente é sintoma de desistência.**
   Aqui ele é o ponto. Isto é um piso de acessibilidade, e piso que uma
   folha de componente possa rebaixar sem querer não é piso. É o único
   `!important` do projeto fora do bloco de movimento reduzido, e está
   aqui pelo mesmo motivo que lá.

   **Por que `pointer: coarse` junto com a largura.** A largura sozinha
   erra o tablet em pé, e o dedo é grosso do mesmo jeito. `pointer:
   coarse` pergunta o que interessa de verdade, que é se quem aponta é
   um dedo. A largura fica como rede para navegador antigo.
   ------------------------------------------------------------ */
@media (max-width: 820px), (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------
   ALVO DE TOQUE DE 44 PONTOS

   O dedo cobre bem mais que o cursor, e a pessoa não vê o que está
   embaixo dele na hora de tocar. Alvo menor que 44 pontos erra, e quem
   erra duas vezes desiste da tarefa.

   Os que mais importam aqui: o botão do menu, que é o controle mais
   tocado de todo site em celular; os filtros de projeto; e os botões
   de endereço alternativo da landing, que aparecem no instante em que a
   pessoa acabou de perder o nome que queria e está escolhendo o
   substituto no dedo, com pressa.

   `min-height`, e não `height`: o botão pode crescer se o texto
   precisar, e nenhum deles encolhe abaixo do piso.
   ------------------------------------------------------------ */
@media (max-width: 820px), (pointer: coarse) {
  .btn,
  .btn-sm,
  .btn-topo,
  .filtro,
  .faq-q,
  .toggle button,
  .alternativas button,
  .menu button,
  .acoes-linha button {
    min-height: 44px;
  }

  /* Estes são quadrados, e precisam do piso nos dois lados. O do menu
     é o mais importante da lista inteira. */
  .menu-btn,
  .paleta-fechar,
  .paleta-cores button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ------------------------------------------------------------
   MOVIMENTO, PARA QUEM PEDIU MENOS MOVIMENTO

   Rolagem animada e transições passam mal para quem tem transtorno
   vestibular: provocam náusea de verdade, não incômodo estético. Quem
   tem esse problema já marcou a preferência no sistema operacional, e
   o navegador a repassa.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}