/**
 * Rodapé compartilhado — selo LULA 13, newsletter, linha legal e faixa tricolor.
 *
 * Par de `partials/rodape.php` e `js/rodape.js`. Os três andam juntos.
 *
 * Depende de `tokens.css` e de `base.css` (`.so-leitor`). Não depende do CSS
 * de nenhuma página.
 *
 * PSD y 4660→5198. Fundo #00279C, selo LULA 13 (376×226) à esquerda,
 * newsletter à direita: campo #001E76 e botão amarelo #FED500 com texto
 * #001E76. Linha de direitos autorais em #2259FF sobre o azul.
 */

.rodape {
  background: var(--cor-rodape);
  color: #fff;
}

.rodape__container {
  display: grid;
  grid-template-columns: minmax(0, 376fr) minmax(0, 433fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  justify-content: center;
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.rodape__selo {
  justify-self: end;
}

.rodape__selo img {
  width: clamp(180px, 24vw, 376px);
  height: auto;
}

/* ==========================================================================
   newsletter
   ========================================================================== */

.rodape__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
}

.rodape__texto {
  max-width: 26ch;
  margin-top: 0.75rem;
  font-family: var(--fonte-titulo);
  font-size: clamp(0.875rem, 1.1vw, 1.0625rem);
  line-height: 1.35;
}

.rodape__form {
  display: flex;
  margin-top: 1.25rem;
  max-width: 27rem;
}

.rodape__campo {
  flex: 1;
  min-width: 0;
  height: 57px;
  padding-inline: 1.25rem;
  color: #fff;
  background: var(--cor-rodape-campo);
  border: 0;
  font-family: var(--fonte-titulo);
  font-size: 0.8125rem;
}

.rodape__campo::placeholder {
  color: rgb(255 255 255 / 0.75);
}

.rodape__enviar {
  flex: 0 0 auto;
  min-width: 105px;
  height: 57px;
  padding-inline: 1.25rem;
  font-family: var(--fonte-titulo);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-rodape-campo);
  background: #fed500;
  transition: filter var(--dur-rapida) var(--ease-padrao);
}

.rodape__enviar:hover:not(:disabled) {
  filter: brightness(1.08);
}

.rodape__enviar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.rodape__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rodape__aviso {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.rodape__aviso[data-estado='erro'] {
  color: #ffd400;
}

/* ==========================================================================
   linha legal + faixa tricolor
   ========================================================================== */

/* O PSD usa #2259FF sobre #00279C — cerca de 1.9:1, reprova em WCAG AA.
   Clareamos até passar de 4.5:1. Registrado no DESIGN.md. */
.rodape__legal {
  padding: 0.75rem var(--gutter) 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #b9c9ff;
}

.rodape__legal a {
  color: inherit;
}

/*
 * Faixa tricolor do fim da página.
 *
 * No PSD são três retângulos de 17px de altura sobre o artboard de 1920, com
 * as divisões em x=883 e x=1403 — daí as paradas em 45.99% e 73.07%. As três
 * cores já existem como token, então nada de hex solto aqui.
 *
 * Gradiente em vez de imagem (ou SVG): é a mesma geometria, sem requisição,
 * sem arquivo para manter e nítido em qualquer densidade de tela.
 */
.rodape__barra {
  /* 17px no artboard de 1920; encolhe em tela pequena sem sumir */
  height: clamp(8px, 0.885vw, 17px);
  background: linear-gradient(
    to right,
    var(--cor-marca-primaria) 0 45.99%,
    var(--cor-marca-terciaria) 45.99% 73.07%,
    var(--cor-verde) 73.07% 100%
  );
}

/* ==========================================================================
   mobile
   ========================================================================== */

@media (width < 48rem) {
  .rodape__container {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .rodape__selo {
    justify-self: center;
  }

  .rodape__texto {
    margin-inline: auto;
  }

  .rodape__form {
    margin-inline: auto;
    width: 100%;
  }
}