/*
 * Fontinha — as duas páginas legais.
 *
 * Aviso legal          4005:39306   banda 95..1169   escura
 * Política Privacidade 4005:39454   banda 95..2645   clara
 *
 * Medidas dos nós:
 *
 *   AVISO LEGAL
 *   título     4005:39259  y 244.83   Baro LineTwo 42.289px  #FEE2BD
 *   corpo      4005:39260+ x 150.29   1134 de largura, CENTRADO, #EAE3DC
 *
 *   PRIVACIDADE
 *   título     4005:39605  y 213.56   Baro LineTwo 36.229px  #4E8599
 *   ícones     4005:39675  y 318.61   cinco, 57.58 de altura, gradiente dourado
 *   rótulos    4005:39606+ y 389.90   11 de caixa
 *   valores    4005:39611+ y 424.81   21 de caixa
 *   régua      4005:39616  y 417.17   776.04 de largura
 *   subtítulo  4005:39617  y 531.16   Baro LineTwo 36.229px
 *   secções    4005:39618+ Baro Plain 15.171px  #4E8599
 *   corpo      4005:39619+ Gill Sans Light 15.702px  #3C3C3B, coluna de 1018
 *
 * Mobile first: não há frame de telemóvel para nenhuma das duas, e não é
 * preciso — são páginas de texto corrido. A coluna encolhe com a goteira e a
 * fila dos cinco passa a grelha de duas.
 */

.legal.section {
	padding-block: 0;
}

.legal__palco {
	/* **O topo difere entre as duas.** O título do Aviso legal está a 149.83 do
	   frame interno e o da Privacidade a 118.56 — e o frame interno já começa
	   nos 95 do header, por isso os 95 não se descontam duas vezes. */
	padding-block: 118.56px 176px;
	padding-inline: var(--gutter);

	text-align: center;
}

/* ============================================================
   Os dois temas
   ============================================================ */

.legal--claro {
	background: var(--s-bg);
}

.legal--escuro {
	background: var(--s-bg-dark);
}

.legal--escuro .legal__palco {
	padding-top: 149.83px; /* nó 4005:39259 */
}

/* ============================================================
   Títulos
   ============================================================ */

.legal__titulo,
.legal__subtitulo {
	margin: 0 auto 34.48px; /* 309.31 - 274.83, do fim do título ao corpo */

	font-family: var(--font-title);
	font-weight: var(--fw-display);
	line-height: 0.7;
	text-transform: uppercase;
}

.legal--claro .legal__titulo,
.legal--claro .legal__subtitulo {
	color: var(--s-text-petrol-mid);
	font-size: 36.229px;
}

.legal--escuro .legal__titulo {
	color: var(--s-text-on-dark);
	font-size: 42.289px;
}

/* 531.16 - 424.81, do fim da fila dos cinco ao subtítulo. */
.legal__subtitulo {
	margin-top: 106.35px;
}

/* ============================================================
   A fila de política — só na Privacidade
   ============================================================ */

/*
 * Cinco colunas iguais com uma régua por baixo dos rótulos. No desenho a régua
 * (4005:39616) tem 776.04 e atravessa as cinco, a 322.17 — ou seja **por baixo
 * do rótulo e por cima do valor**, não no fim do bloco.
 */
/*
 * **Três em cima e dois em baixo, centrados**, e não 2+2+1. Medido: a 375 a
 * caixa tem 335, o que dá colunas de 101 com o intervalo de 16 — e os cinco
 * rótulos cabem todos em duas linhas a 15.29px (o mais longo, "Idade das
 * crianças", pede 155 e parte em 78 + 70). Com duas colunas o quinto ficava
 * sozinho numa terceira linha.
 *
 * É `flex` e não `grid` porque uma grelha não centra a última linha quando ela
 * tem menos itens que as colunas.
 */
.legal__politicas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 85.05px auto 0; /* 318.61 - 233.56, do fim do título aos ícones */
	max-width: 776.04px;
	padding: 0;

	gap: var(--sp-8) var(--sp-4);
	list-style: none;
}

.legal__politica {
	flex: 0 0 calc((100% - var(--sp-4) * 2) / 3);
}

.legal__politica {
	display: grid;
	grid-template-rows: 57.58px auto auto;
	justify-items: center;
	align-content: start;
}

/*
 * **Os ícones são o gradiente dourado, um por ícone.** Medido o perfil da tinta
 * da esquerda para a direita dentro de cada um: #A26850 → #F2CAA0, que são as
 * duas pontas do `--g-gold`. Não é um gradiente a atravessar a fila — o ícone
 * mais à direita começa no mesmo escuro que o da esquerda.
 *
 * Entra por máscara sobre o gradiente, como a moldura dos itens do menu de
 * telemóvel: assim é mesmo o gradiente e não uma cor aproximada.
 */
.legal__politica-icone {
	display: block;

	background: var(--g-gold);
	mask-image: var(--icone);
	mask-position: center bottom;
	mask-repeat: no-repeat;
	mask-size: contain;
}

/*
 * Sem suporte de máscara o gradiente pintava um rectângulo cheio, que é pior do
 * que ícone nenhum: aí não sai nada e fica o rótulo, que é quem diz o que é.
 */
@supports not (mask-image: url("")) {
	.legal__politica-icone {
		display: none;
	}
}

.legal__politica-rotulo {
	margin-top: 13.71px; /* 389.90 - 376.19, do fim do ícone ao rótulo */
	padding-bottom: 12.99px; /* 417.17 - 404.18, do rótulo à régua */

	/* **A régua é UMA só, contínua, e não uma por item.** No desenho o nó 39616
	   atravessa as cinco colunas com 776.04. Com o rótulo a encolher ao texto,
	   as bordas ficavam soltas com buracos pelo meio; a largura total junta-as. */
	width: 100%;

	border-bottom: 1px solid var(--s-line);
	color: var(--s-text);
	font-family: var(--font-body);
	/* Aferido pela tinta: 139 de largura e 11 de altura de maiúscula no frame,
	   contra 100 e 8 aos 11px da caixa do nó. */
	font-size: 15.29px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
}

.legal__politica-valor {
	margin-top: 7.64px; /* 424.81 - 417.17, da régua ao valor */

	color: var(--s-text);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.2;
}

/*
 * **O rótulo ocupa sempre duas linhas abaixo dos 1200.** Com a fila em 3+2, o
 * "Animais" cabe numa linha e os vizinhos precisam de duas — e a régua, que é a
 * borda de baixo do rótulo, deixava de alinhar entre colunas. Reservar as duas
 * linhas põe as réguas todas à mesma altura. Em desktop cabem todos numa e a
 * regra não se aplica.
 */
@media (max-width: 1199px) {

	.legal__politica-rotulo {
		/* 30.58 das duas linhas MAIS os 12.99 do recuo até à régua: com
		   `box-sizing: border-box` a `min-height` conta o `padding`, e sem
		   isso o rótulo de uma linha ficava 30.6 contra os 44.6 do de duas. */
		min-height: 43.57px;
	}
}

/* ============================================================
   O corpo, que vem do editor
   ============================================================ */

.legal__conteudo {
	margin: 0 auto;
	max-width: 1018px; /* a coluna do desenho: x 247..1265 */

	font-family: var(--font-body);
	font-size: 15.702px; /* nó 4005:39619 */
	font-weight: 300;
	line-height: 1.35;
}

/*
 * **O Aviso legal é todo centrado e a Privacidade é justificada.** No desenho
 * andam com o tema: lá cada linha é um nó centrado, aqui o corpo é uma mancha
 * de 1018 justificada com os títulos centrados por cima. O tema arrasta o
 * alinhamento porque é assim que o desenho os emparelha.
 */
.legal--claro .legal__conteudo {
	color: var(--s-text);
	text-align: justify;
}

.legal--escuro .legal__conteudo {
	max-width: 1134px; /* a coluna do Aviso legal: x 150.29..1284.29 */

	color: var(--s-text-argila);
	text-align: center;
}

.legal__conteudo > * {
	margin-block: 0 var(--sp-4);
}

.legal__conteudo > :last-child {
	margin-bottom: 0;
}

/* Os subtítulos de secção: Baro Plain, petrol-mid, centrados e em caixa alta. */
.legal__conteudo h2,
.legal__conteudo h3 {
	margin-block: var(--sp-12) var(--sp-6);

	font-family: var(--font-display);
	font-size: 15.171px;
	font-weight: var(--fw-display);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.legal--claro .legal__conteudo h2,
.legal--claro .legal__conteudo h3 {
	color: var(--s-text-petrol-mid);
}

/*
 * No Aviso legal o realce é a linha "em caso de litígio…", que o desenho põe em
 * creme contra o argila do corpo — são dois tons e não um.
 */
.legal--escuro .legal__conteudo h2,
.legal--escuro .legal__conteudo h3,
.legal--escuro .legal__conteudo strong {
	color: var(--s-text-on-dark);
}

/* As réguas entre secções: 993.61 de largura no desenho, centradas. */
.legal__conteudo hr {
	margin-block: var(--sp-12);

	border: 0;
	border-top: 1px solid var(--s-line);
}

.legal--escuro .legal__conteudo hr {
	border-top-color: var(--s-line-on-dark);
}

.legal__conteudo ul {
	margin-inline: 0;
	padding-inline: 0;

	list-style: none;
}

.legal__conteudo li {
	margin-block: var(--sp-4);
}

/*
 * O alinhamento por bloco do editor. No desenho a lista de cookies do meio é
 * **centrada** enquanto o resto é justificado, e o editor do WordPress já emite
 * estas classes quando se alinha um parágrafo — não é preciso inventar campo
 * nenhum para isso.
 */
.legal__conteudo .has-text-align-center {
	text-align: center;
}

.legal__conteudo .has-text-align-left {
	text-align: left;
}

.legal__conteudo a {
	color: inherit;
	text-underline-offset: 3px;
}

.legal--claro .legal__conteudo a {
	color: var(--s-text-petrol-mid);
}

/* ============================================================
   Desktop (1200px e acima)
   ============================================================ */

@media (min-width: 1200px) {

	.legal__politicas {
		gap: 0;
	}

	/* Em desktop são as cinco na mesma linha, e é o que junta as réguas
	   dos rótulos numa só, contínua, como o nó 4005:39616. */
	.legal__politica {
		flex: 0 0 20%;
	}
}