/* -----------------------------------------------------------------------------
   Formulário da newsletter — The FormaHaus Journal

   PRINCÍPIO: o formulário HERDA a paleta e a tipografia de onde está inserido.
   Ele não decide cor nenhuma.

   Isso não é preguiça — é a correção de um erro. A primeira versão trazia
   paleta própria com um bloco @media (prefers-color-scheme: dark). O site é
   SEMPRE claro, independente do sistema operacional do visitante; então, para
   quem tinha o sistema em modo escuro, o título virava creme claro sobre fundo
   branco e sumia da tela. Um bloco embutido no conteúdo não tem como saber a
   cor do fundo em que caiu, e por isso não deve inventar uma.

   Daí: `inherit` para texto, `currentColor` para bordas e tons suaves. Funciona
   sobre qualquer fundo, hoje e depois de uma eventual troca de tema.

   Prefixo .fhn- em tudo porque isto convive com Strux, Elementor, trx_addons e
   Revolution Slider — nome genérico aqui vira conflito em algum canto do site
   que ninguém vai testar.
----------------------------------------------------------------------------- */

.fhn-bloco {
  margin: 2.5em 0;
  color: inherit;
  font-family: inherit;
}

.fhn-form { max-width: 32rem; }

/* Sem cor e sem família: o h2 do tema já sabe como se apresentar. Aqui só se
   ajusta a escala, para o título do formulário não competir com o do artigo. */
.fhn-bloco .fhn-titulo {
  margin: 0 0 .3em;
  font-size: 1.15em;
  line-height: 1.3;
}

.fhn-bloco .fhn-texto {
  margin: 0 0 1.1em;
  font-size: .95em;
  line-height: 1.55;
  opacity: .8;
}

.fhn-linha { display: flex; flex-wrap: wrap; gap: .5em; align-items: stretch; }

/* Rótulo visível só para leitor de tela: o placeholder sozinho não é rótulo
   acessível, mas um rótulo à mostra desequilibraria o bloco no rodapé. */
.fhn-rotulo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* currentColor com transparência: acompanha o texto herdado, seja ele escuro
   sobre claro ou o contrário. */
.fhn-bloco .fhn-email {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .7em .8em;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .95em;
  line-height: 1.3;
}

.fhn-bloco .fhn-email::placeholder { color: inherit; opacity: .5; }

.fhn-bloco .fhn-email:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  border-color: transparent;
}

/* O botão NÃO recebe cor de propósito: o tema já estiliza `button`, e no Strux
   o resultado é o vinho da marca. Aqui só se garante que ele não fique menor
   que o campo ao lado. Se um dia o tema deixar de estilizar botões, a regra de
   contorno abaixo evita que ele suma. */
.fhn-bloco .fhn-botao {
  flex: 0 0 auto;
  padding: .7em 1.4em;
  font: inherit;
  font-size: .95em;
  line-height: 1.3;
  cursor: pointer;
}

.fhn-bloco .fhn-botao:not([class*="elementor"]):not([style*="background"]) {
  border: 1px solid currentColor;
  border-radius: 2px;
}

.fhn-bloco .fhn-botao[disabled] { opacity: .55; cursor: default; }

.fhn-bloco .fhn-aviso {
  margin: .8em 0 0;
  font-size: .8em;
  line-height: 1.5;
  opacity: .7;
}

.fhn-bloco .fhn-aviso a { color: inherit; text-decoration: underline; }

.fhn-bloco .fhn-status {
  margin: .8em 0 0;
  font-size: .9em;
  line-height: 1.5;
}

.fhn-bloco .fhn-status:empty { margin: 0; }

/* O erro precisa se distinguir sem depender de cor — daí o peso, e não só o
   tom. `color-mix` com vermelho mantém o resultado legível tanto sobre fundo
   claro quanto escuro, porque parte da cor herdada. */
.fhn-bloco .fhn-status.fhn-erro {
  font-weight: 600;
  color: color-mix(in srgb, currentColor 45%, #c0392b);
}

/* Honeypot fora da tela, e não display:none: alguns robôs ignoram campo com
   display:none justamente por reconhecerem a armadilha. */
.fhn-armadilha {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 480px) {
  .fhn-bloco .fhn-email,
  .fhn-bloco .fhn-botao { flex: 1 1 100%; }
}