/* =============================================================================
 * CORRECOES DO TEMA — carregada por ultimo, depois das tres folhas compiladas.
 * =============================================================================
 * Este arquivo NAO faz parte do build do Next. Ele existe para consertos que
 * so podem ser feitos aqui, e cada regra tem de trazer o numero que a
 * justifica. Sem medicao, nao entra.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. A TROCA BARRA <-> HAMBURGUER ESTAVA PULANDO A ESCALA
 * -----------------------------------------------------------------------------
 * Sintoma relatado pelo dono: "ao rolar, o menu FLICA a escala — diminui num
 * flash de segundo e depois some".
 *
 * CAUSA. Os dois elementos declaram
 *     transition-property: opacity, transform, visibility
 * mas o Tailwind v4 NAO escreve a escala em `transform`. Ele emite a
 * propriedade autonoma `scale` (`.scale-75 { scale: var(--tw-scale-x) … }`).
 * Como `transform` fica em `none` o tempo inteiro, ele nao tem o que animar, e
 * `scale` — que muda de verdade — nao esta na lista. Entao a escala troca de
 * valor em UM FRAME enquanto a opacidade leva 420ms/600ms.
 *
 * MEDIDO no tema servido, rolando de 0 para 400px:
 *
 *     tempo     barra: scale / opacity      hamburguer: scale / opacity
 *      0ms        1     / 1.00                0.75  / 0.00
 *     60ms        0.97  / 0.99   <- ja pulou   1     / 0.01   <- ja pulou
 *    220ms        0.97  / 0.80                 1     / 0.58
 *    700ms        0.97  / 0.08                 1     / 1.00
 *
 * A escala chega ao destino em 60ms; a opacidade so termina em 700ms. O olho
 * le isso como um solavanco seguido de um desaparecimento lento.
 *
 * ⚠️ ISTO E HERDADO, NAO FOI A EXPORTACAO QUE CAUSOU. A mesma lista de
 * propriedades esta no `Header.tsx` do projeto Next, entao o site em producao
 * hoje tem o mesmo defeito. Corrigir la e trocar `transform` por `scale` nas
 * duas classes `transition-[...]`.
 *
 * A correcao troca a propriedade errada pela certa e mantem todo o resto — as
 * duracoes, o easing e o `visibility` (que e o que faz o fade rodar inteiro
 * antes de o elemento sumir) continuam vindo das utilitarias do Tailwind.
 *
 * Os seletores sao os mesmos que o `assets/js/modules/header.js` usa, para os
 * dois nunca discordarem sobre quem e a barra e quem e o hamburguer.
 * -------------------------------------------------------------------------- */
header .tj-container > button {
  transition-property: opacity, scale, background-color, visibility;
}

header .tj-container > div {
  transition-property: opacity, scale, visibility;
}

/* Movimento reduzido continua mandando: as utilitarias `motion-reduce:` do
 * Tailwind zeram a transicao por `transition: none`, que vence esta regra por
 * ser shorthand. Confirmado no CSS compilado. */

/* -----------------------------------------------------------------------------
 * 2. O WIDGET DO hCAPTCHA DENTRO DOS FORMULARIOS
 * -----------------------------------------------------------------------------
 * O script do Web3Forms injeta um iframe de ~303x78px dentro de
 * `div.h-captcha`. Sem regra nenhuma ele entra como item do grid/flex do
 * formulario e desarruma as duas formas:
 *
 *   - em `/map-a-process` o form e `grid-cols-2` a partir de 768px; o widget
 *     viraria a metade de uma linha, colado num campo;
 *   - nas duas newsletters o form e uma LINHA flex (campo + botao); o widget
 *     entraria no meio dos dois.
 *
 * `grid-column: 1 / -1` resolve o primeiro (ocupa a linha inteira) e nao tem
 * efeito no segundo, que nao e grid. A `basis: 100%` resolve o segundo
 * forcando quebra de linha no flex, e nao tem efeito no grid. Uma regra so
 * serve aos dois casos sem precisar de seletor por pagina.
 *
 * `min-height` reserva a altura ANTES de o iframe chegar: sem isso a pagina
 * salta quando o script de terceiro termina de carregar, que e exatamente o
 * tipo de deslocamento de layout que o resto do site evita. 78px e a altura do
 * widget normal do hCaptcha.
 * -------------------------------------------------------------------------- */
.gs-captcha {
  flex-basis: 100%;
  grid-column: 1 / -1;
  min-height: 78px;
  margin-top: 4px;
}

/* O iframe do hCaptcha tem fundo proprio e cantos retos. Arredondar acompanha
 * o resto dos controles do site sem tocar no conteudo dele (que e de terceiro
 * e nao pode ser estilizado por dentro). */
.gs-captcha iframe {
  border-radius: 8px;
}

/* -----------------------------------------------------------------------------
 * RODAPE — cinco colunas
 * -----------------------------------------------------------------------------
 * Escrita a mao de proposito. A classe `min-[768px]:grid-cols-5` do Tailwind
 * NAO existe nas folhas compiladas: elas foram geradas quando o rodape tinha
 * quatro colunas, e o compilador so emite o que viu. Usa-la deixaria a grade
 * sem regra nenhuma acima de 768px — foi o que aconteceu, e o rodape caiu para
 * duas colunas em toda largura.
 *
 * TRES FAIXAS, e a do meio existe por medicao. Com cinco colunas ja a partir
 * de 768px, "Document-heavy operations" quebrava em TRES linhas e a faixa
 * inteira ficava espremida — visto na captura de 768px, nao deduzido. Entao o
 * tablet mantem as quatro colunas de sempre, com a goteira de 28px que ja
 * tinha, e "Legal" desce para a segunda linha ali. A quinta coluna so entra em
 * 992px, onde ha largura para ela.
 * -------------------------------------------------------------------------- */
.gs-footer-cols {
  column-gap: 24px;
}

@media (min-width: 768px) {
  .gs-footer-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
  }
}

@media (min-width: 992px) {
  .gs-footer-cols {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 24px;
  }
}