/**
 * Consentimento: modal bloqueante.
 *
 * Em cinza-chumbo neutro, fora da paleta da campanha. Na cor da marca ele se
 * confundia com o rodapé, que é teal, e o aviso desaparecia dentro do site.
 * Aqui ele se lê como o que é: um aviso do sistema, não mais uma faixa da
 * página.
 *
 * Era uma barra fixa no rodapé. Barra de rodapé mede 9,6% de interação em campo
 * (Utz et al., CCS 2019), ou seja, nove em cada dez pessoas passavam direto. Num
 * site que não carrega nada sem clique, passar direto tem o mesmo efeito de
 * recusar, e a escolha não chegava a ser feita. O modal existe para que ela
 * seja.
 *
 * Não há mais compensação de altura no corpo da página: o modal flutua por cima
 * e não tapa o rodapé, então a variável --jw-consentimento-altura deixou de ser
 * escrita. Quem a lê (o botão flutuante do WhatsApp, em style.css) já tem 0px
 * como padrão no var(), então cai sozinho no lugar certo.
 *
 * Os dois botões têm o mesmo peso visual de propósito: aceitar não pode ser
 * mais fácil que recusar. Mesmo tamanho, mesmo peso de texto, e cores de
 * claridade parecida, para que nenhum dos dois salte na frente do outro. O
 * branco puro que o Recusar tinha antes brilhava mais que o verde do Aceitar
 * e desequilibrava a escolha para o lado errado.
 */

/* Texto só para leitor de tela: fora da vista, mas dentro da árvore de
   acessibilidade (nada de display:none, que o esconderia dos dois). */
.jw-so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A camada que escurece a página. É ela que faz a escolha acontecer, e é
   também ela que obriga o cuidado do outro lado: os DOIS botões a dispensam.
   Se só o Aceitar dispensasse, isto seria cookie wall. */
.jw-consentimento {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(6, 12, 14, 0.72);
}

.jw-consentimento[hidden] {
	display: none;
}

.jw-consentimento__caixa {
	width: 100%;
	max-width: 440px;
	/* Cores próprias, sem os tokens da marca: este é o único pedaço do site que
	   precisa não parecer parte do site. */
	background: #171e21;
	color: #eef2f3;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
	/* Numa tela baixa de celular, com o teclado aberto ou em paisagem, o texto
	   mais os dois botões passam da altura disponível. Sem isto a caixa cresce
	   para fora da janela e o Aceitar fica inalcançável, sem rolagem para
	   buscá-lo: o visitante trava sem conseguir decidir, que é o oposto do que
	   este modal existe para fazer. */
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}

/* A caixa só recebe foco por programa, na abertura, para o leitor de tela
   anunciar o aviso inteiro. Ninguém chega nela pelo teclado, então o anel aqui
   não orientaria nada e só apareceria como uma moldura sem motivo. Os botões
   mantêm o deles, que é o que importa. */
.jw-consentimento__caixa:focus {
	outline: none;
}

.jw-consentimento__texto {
	margin: 0 0 20px;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.jw-consentimento__texto a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Grade de duas colunas iguais, e não flex.
   Com flex os botões partem do próprio texto e "Apenas os necessários" ficaria
   maior que "Aceitar tudo"; dava para corrigir com base zero, mas aí a largura
   passa a depender de um truque que a próxima pessoa desfaz sem perceber. Em
   1fr 1fr a igualdade é da grade, não do ajuste: rótulo nenhum consegue
   desequilibrar os dois. */
.jw-consentimento__acoes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Abaixo disto os dois rótulos não cabem lado a lado sem quebrar em três
   linhas. Empilhados e com a largura inteira, continuam idênticos, e o de
   recusar fica por cima. */
@media (max-width: 419px) {
	.jw-consentimento__acoes {
		grid-template-columns: 1fr;
	}
}

.jw-consentimento__botao {
	padding: 0.7rem 1rem;
	/* 2px transparentes nos DOIS, e não 1px: a borda entra na caixa, então dar
	   contorno só ao Recusar o deixaria dois pixels maior que o Aceitar. Igual
	   por acidente não serve, tem de ser igual por construção. */
	border: 2px solid transparent;
	border-radius: 4px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.18s ease;
	/* texto escuro sobre fundo claro nos dois */
	color: #171e21;
}

/* Aceitar é a ação principal e parece: pílula lime cheia. O de recusar é
   contorno, claramente secundário, e continua do MESMO tamanho, na MESMA
   célula da grade e com o MESMO alcance de dedo e de teclado.

   A linha que separa hierarquia de padrão escuro está aí. Diferença de peso é
   desenho normal; diferença de esforço é o que a CNIL multou no Google e na
   Meta em 2022, e é o que a LGPD questiona na palavra "livre" do art. 5º, XII.
   Aqui pesa mais que num site comum: visitar site de candidato revela convicção
   política, dado sensível pelo art. 5º, II, e o art. 11, I pede consentimento
   específico e destacado.

   Por isso o contorno tem 2px e o texto é branco cheio: sobre o quase preto do
   banner, contorno fino e texto acinzentado transformariam "secundário" em
   "apagado", que é justamente o que não pode. */
.jw-consentimento__botao--nao {
	background: transparent;
	border-color: #d5dcdf;
	color: #ffffff;
}

.jw-consentimento__botao--sim {
	background: var(--wp--preset--color--lime, #85e234);
}

.jw-consentimento__botao--nao:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #ffffff;
}

.jw-consentimento__botao--sim:hover {
	filter: brightness(1.08);
}

.jw-consentimento__botao:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.jw-consentimento__botao {
		transition: none;
	}
}

@media (max-width: 599px) {
	.jw-consentimento__caixa {
		padding: 18px;
	}
}