/* INSCRIÇÃO DA NEWSLETTER NO RODAPÉ — 27/08/2026

   O QUE ESTAVA ACONTECENDO

   A regra original é de quando o formulário tinha DUAS peças:

       .rl-newsletter-form { display: flex; gap: 7px }

   Uma linha, campo de e-mail e botão lado a lado. Correto para o que
   existia então.

   Depois entrou o consentimento da LGPD — a caixinha "Autorizo o envio de
   novidades…" — no meio do formulário. Sendo mais um filho do flex, ele
   entrou NA MESMA LINHA e passou a disputar os 379 px de largura com os
   outros dois. Medido nesta data, antes de mexer:

       campo de e-mail ...... 115 × 105 px   (um quadrado branco)
       consentimento ........ 158 × 105 px   (o texto em SETE linhas)
       botão ................  92 × 105 px

   O campo de e-mail virou um quadrado branco de 115 px que parece imagem
   quebrada, e o texto do consentimento saiu quebrado em "Autorizo o envio
   / de novidades e / campanhas do / Relicário. Posso / cancelar a /
   qualquer / momento." No celular era pior: os mesmos três apertados em
   362 px.

   O CONSERTO

   O formulário vira uma grade de duas colunas com duas fileiras:

       [ e-mail ................ ] [ Receber ]
       [ caixinha + consentimento ............ ]

   O campo ocupa a largura que sobra, o botão fica do tamanho dele, e o
   consentimento ganha a linha inteira — que é onde texto de duas linhas
   cabe sem quebrar em sete.

   A grade é montada por TIPO de elemento (input[type=email], button,
   label), então o HTML de index.php não precisou mudar. O campo oculto do
   csrf não entra na conta: input[type=hidden] não é renderizado.

   Esta folha só trata GEOMETRIA. Cor, fonte e fundo continuam vindo das
   folhas que já existiam — inclusive as que usam !important. Por isso ela
   é carregada por último e não briga com ninguém. */

body.rl-public .rl-newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 8px;
  margin-top: 18px;
}

/* Fileira 1 — o e-mail e o botão, lado a lado. */
body.rl-public .rl-newsletter-form input[type="email"] {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  font-size: .85rem;
  line-height: 46px;
}

body.rl-public .rl-newsletter-form button {
  grid-column: 2;
  grid-row: 1;
  height: 46px;
  padding: 0 20px;
  white-space: nowrap;
}

/* Fileira 2 — o consentimento, com a linha inteira para ele. */
body.rl-public .rl-newsletter-form label {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: .72rem;
  line-height: 1.5;
  text-align: left;
}

/* A caixinha nao pode encolher quando o texto ao lado ocupa duas linhas —
   sem isto ela vira um retangulo achatado. O deslocamento de 2px alinha o
   quadrado com a primeira linha do texto, e nao com o topo da caixa. */
body.rl-public .rl-newsletter-form label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: #4a7762;
  cursor: pointer;
}

/* No celular o botão passa para baixo do campo: com 362 px de largura,
   campo e botão na mesma linha deixariam o e-mail estreito de novo. */
@media (max-width: 520px) {
  body.rl-public .rl-newsletter-form {
    grid-template-columns: minmax(0, 1fr);
  }
  body.rl-public .rl-newsletter-form input[type="email"] { grid-column: 1; grid-row: 1; }
  body.rl-public .rl-newsletter-form button { grid-column: 1; grid-row: 2; width: 100%; }
  body.rl-public .rl-newsletter-form label { grid-column: 1; grid-row: 3; }
}

/* O BOTÃO ERA INVISÍVEL — 27/08/2026.

   Medido: o fundo do botão e o fundo do rodapé são a MESMA cor,
   rgb(34, 55, 47). Razão de contraste entre os dois: 1,00. Só o texto
   branco aparecia; a peça não se lia como botão, e sim como mais um link
   solto ao lado do campo.

   A cor abaixo não é invenção minha: é a que brand-light-final-20260712
   já havia escolhido para este botão (#4a7762). Ela foi coberta depois por
   system-interface-palette-20260721, que pinta TODOS os botões do site com
   o verde da barra lateral — o que funciona sobre fundo claro e desaparece
   sobre o rodapé escuro. Aqui, e só aqui, a escolha original volta.

   O !important existe porque a folha da paleta também usa !important; sem
   ele esta regra seria ignorada. */
html body.rl-public .rl-newsletter .rl-newsletter-form button {
  background: #4a7762 !important;
  border: 1px solid #5d8d76 !important;
  border-radius: 5px;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .02em;
  transition: background .15s ease, border-color .15s ease;
}

html body.rl-public .rl-newsletter .rl-newsletter-form button:hover,
html body.rl-public .rl-newsletter .rl-newsletter-form button:focus-visible {
  background: #589076 !important;
  border-color: #74a992 !important;
}

/* O campo precisa da mesma altura e do mesmo canto do botão para os dois
   lerem como um par, e de uma borda visível para não parecer um retângulo
   branco colado no verde. */
html body.rl-public .rl-newsletter .rl-newsletter-form input[type="email"] {
  border: 1px solid #7ba493;
  border-radius: 5px;
}