/* ==========================================================================
   ChatISP: o que as secoes da home dividem entre si

   Carrega depois de css/tokens.css e css/site.css e ANTES dos arquivos
   css/sec-*.css. Cada secao da home tem o seu proprio arquivo; aqui mora
   somente o que mais de uma secao usa e que nao e primitivo geral do site.

   O sistema de divisa entre capitulos NAO mora mais aqui: virou regra unica
   em css/site.css (secao 05), derivada da vizinhanca com :has().
   ========================================================================== */

/* Variante verde do selo (rede.php: "Cadastro + financeiro"). */
.selo--verde {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Campo de formulario

   Usado pelo formulario da secao #contato e pelo do hero (que tem a sua
   propria casca em css/hero.css, mas herda daqui o comportamento de foco).
   Funciona nos dois temas: so var().
   -------------------------------------------------------------------------- */
.campo {
  display: grid;
  gap: var(--e2);
}

.campo label {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.5;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-md);
  background: var(--sup-2);
  color: var(--texto);
  font-size: var(--c2);
  line-height: 1.5;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.campo input::placeholder {
  color: var(--tenue);
  opacity: 1;
}

.campo input:hover {
  border-color: var(--verde);
}

.campo input:focus-visible {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-vidro);
}

/* Estado de erro devolvido pela validacao (js/site.js). Nao ha token
   vermelho no sistema: o erro se anuncia por peso e por um fio de acento,
   nunca por uma cor que nao existe na paleta. */
.campo input[aria-invalid="true"] {
  border-color: var(--texto);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--texto) 12%, transparent);
}

/* Spinner que js/site.js injeta no botao enquanto o formulario envia.
   Morava em css/hero.css, folha exclusiva da home. Entao em toda pagina
   interna que reaproveita componentes/contato.php ele renderizava com
   tamanho zero durante o envio. Aqui ele acompanha o .campo, que e o
   primitivo do mesmo formulario, e chega junto em qualquer pagina que peca
   uma folha sec-* (ver componentes/pagina.php). */
.form-girando {
  width: 15px;
  height: 15px;
  flex: none;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: var(--r-full);
  /* Era `.7s` escrito a mao, a unica duracao literal que restava no projeto.
     A volta do anel fica entre --dur-3 e --dur-4, entao ela se escreve a
     partir da escala em vez de ao lado dela: se um dia o ritmo do site mudar,
     o spinner muda junto. */
  animation: form-girando calc(var(--dur-3) * 1.35) linear infinite;
}

@keyframes form-girando {
  to {
    transform: rotate(1turn);
  }
}

/* Quem pediu menos movimento continua vendo que algo acontece: o anel para
   de girar, mas o botao ja troca de rotulo e o [role=status] anuncia. */
@media (prefers-reduced-motion: reduce) {
  .form-girando {
    animation: none;
  }
}