/**
 * Corpo de Página de Política — Política de Privacidade, Termos, Cookies.
 *
 * Página jurídica é lida em bloco e consultada em pedaços. As duas medidas
 * que mais importam aqui são comprimento de linha e respiro entre seções:
 * texto longo em linha larga faz o olho perder o retorno, e seções coladas
 * viram uma parede cinza onde ninguém acha nada.
 *
 * Mobile-first. Zero hex literal — só var(--fjpn-*). As custom properties
 * `--fjpn-politica-*` são injetadas inline por widgets/pagina-politica.php.
 */

/* Sangria: a seção precisa ocupar a largura do wrapper do Elementor, senão o
   fundo da página vaza nas laterais. Ver a nota completa na seção 5 do
   base.css. */
.elementor-widget-fjpn-pagina-politica > .elementor-widget-container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.fjpn-pagina-politica {
	background: var(--fjpn-politica-bg, var(--fjpn-white));
	padding-block: var(--fjpn-space-section-py-md);
	color: var(--fjpn-politica-texto, var(--fjpn-slate-700));
}

/* 68ch em vez de uma largura em px: o limite confortável de leitura é medido
   em CARACTERES, não em pixels, então precisa acompanhar a fonte que a
   cliente escolher no controle de tipografia. Com `max-w-3xl` fixo, aumentar
   o corpo do texto aumentaria também a quantidade de caracteres por linha —
   exatamente o contrário do que se quer. */
.fjpn-pagina-politica__wrap {
	max-width: 68ch;
}

.fjpn-pagina-politica__cabecalho {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--fjpn-gap-hero-columns);
}

.fjpn-pagina-politica__titulo {
	margin-block: 0 var(--fjpn-gap-icon-text);
	color: var(--fjpn-politica-titulo, var(--fjpn-text-primary));
}

.fjpn-pagina-politica__data {
	margin-block: 0;
	color: var(--fjpn-text-muted);
	font-size: var(--fjpn-text-small);
}

.fjpn-pagina-politica__data-rotulo {
	font-weight: var(--fjpn-weight-bold);
}

.fjpn-pagina-politica__introducao {
	margin-top: var(--fjpn-gap-medium);
}

/* ==========================================================
 * ÍNDICE
 * ========================================================== */

.fjpn-pagina-politica__indice {
	margin-bottom: var(--fjpn-gap-hero-columns);
	padding: var(--fjpn-padding-card);
	border-inline-start: var(--fjpn-border-width-outline) solid var(--fjpn-politica-destaque, var(--fjpn-blue-primary));
	border-radius: var(--fjpn-radius-xl);
	background: var(--fjpn-politica-caixa, var(--fjpn-bg-soft));
}

.fjpn-pagina-politica__indice-titulo {
	margin-block: 0 var(--fjpn-gap-icon-text);
	color: var(--fjpn-politica-titulo, var(--fjpn-text-primary));
	font-weight: var(--fjpn-weight-bold);
}

.fjpn-pagina-politica__indice-lista {
	display: flex;
	flex-direction: column;
	gap: var(--fjpn-gap-icon-text);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fjpn-pagina-politica__indice-lista a {
	display: inline-flex;
	gap: var(--fjpn-gap-icon-text);
	/* 44px é o alvo de toque mínimo do guia da Apple e do Material. Numa
	   lista de links empilhados no celular, sem esse piso os itens ficam
	   colados e a pessoa erra o destino. */
	min-height: 44px;
	align-items: center;
	color: var(--fjpn-politica-destaque, var(--fjpn-blue-primary));
	text-decoration: none;
}

.fjpn-pagina-politica__indice-lista a:hover,
.fjpn-pagina-politica__indice-lista a:focus-visible {
	text-decoration: underline;
}

/* A partir de 768px a lista cabe em duas colunas sem apertar, e o índice
   deixa de empurrar o texto para baixo da dobra. */
@media (min-width: 768px) {
	.fjpn-pagina-politica__indice-lista {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.fjpn-pagina-politica__indice-lista a {
		min-height: 0;
	}
}

.fjpn-pagina-politica__numero {
	flex-shrink: 0;
	color: var(--fjpn-politica-destaque, var(--fjpn-blue-primary));
	font-weight: var(--fjpn-weight-bold);
}

/* ==========================================================
 * CORPO
 * ========================================================== */

.fjpn-pagina-politica__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--fjpn-gap-hero-columns);
}

/* `scroll-margin-top` é o que faz a âncora funcionar de verdade com header
   fixo: sem ele o navegador rola até o topo exato da seção, que fica ESCONDIDO
   atrás do cabeçalho, e a pessoa clica no índice e parece que nada aconteceu.
   O valor cobre a altura do header do site com folga. */
.fjpn-pagina-politica__secao {
	scroll-margin-top: 120px;
}

.fjpn-pagina-politica__secao-titulo {
	display: flex;
	gap: var(--fjpn-gap-icon-text);
	margin-block: 0 var(--fjpn-gap-medium);
	color: var(--fjpn-politica-titulo, var(--fjpn-text-primary));
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-sm);
	font-weight: var(--fjpn-weight-extrabold);
	line-height: var(--fjpn-leading-tight);
}

.fjpn-pagina-politica__texto {
	color: var(--fjpn-politica-texto, var(--fjpn-slate-700));
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
}

.fjpn-pagina-politica__texto > * + * {
	margin-top: var(--fjpn-gap-medium);
}

.fjpn-pagina-politica__texto a {
	color: var(--fjpn-politica-destaque, var(--fjpn-blue-primary));
}

.fjpn-pagina-politica__texto ul,
.fjpn-pagina-politica__texto ol {
	padding-inline-start: var(--fjpn-gap-hero-columns);
}

.fjpn-pagina-politica__texto li + li {
	margin-top: var(--fjpn-gap-icon-text);
}

/* ==========================================================
 * CONTATO DO ENCARREGADO
 * ========================================================== */

.fjpn-pagina-politica__contato {
	margin-top: var(--fjpn-gap-hero-columns);
	padding: var(--fjpn-padding-card-stat);
	border-radius: var(--fjpn-radius-xl);
	background: var(--fjpn-politica-caixa, var(--fjpn-bg-soft));
}

@media (min-width: 1024px) {
	.fjpn-pagina-politica {
		padding-block: var(--fjpn-space-section-py-lg);
	}
}