/* ==========================================================================
   CarOffice: o que as secoes do site 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().
   ========================================================================== */

/* Variantes do selo: acento (destaque), ok ("Disponivel"), aviso ("No
   roteiro", "Em breve"). Todas leem os tokens, entao funcionam no papel. */
.selo--acento {
  border-color: var(--acento-linha);
  background: var(--acento-vidro);
  color: var(--acento);
}

.selo--ok {
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
}

.selo--aviso {
  border-color: color-mix(in srgb, var(--aviso) 40%, transparent);
  background: color-mix(in srgb, var(--aviso) 10%, transparent);
  color: var(--aviso);
}

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

   Usado pelo formulario da secao #contato e pelo do heroi (que tem a sua
   propria casca em css/site/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 :is(input, textarea)::placeholder {
  color: var(--tenue);
  opacity: 1;
}

.campo :is(input, select, textarea):hover {
  border-color: var(--acento);
}

.campo :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-vidro);
}

/* Estado de erro devolvido pela validacao. --erro vira --erro-tinta
   sozinho no papel (tokens.css). */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erro) 14%, transparent);
}

/* Spinner que js/site.js injeta no botao enquanto o formulario envia.
   Mora aqui, junto do .campo, para chegar a qualquer pagina que tenha
   formulario, e nao so a home. */
.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);
  /* A volta do anel se escreve a partir da escala de duracoes. */
  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;
  }
}