/*
 * Fontinha — reset e tipografia base. Mobile first.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

body {
	background: var(--s-bg);
	color: var(--s-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-body);
	line-height: normal;
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* ---------- Títulos ---------- */

h1,
.h1,
h2,
.h2,
h3,
.h3 {
	font-family: var(--font-title);
	font-weight: var(--fw-display);
	text-transform: uppercase;
}

h1,
.h1 {
	font-size: var(--fs-h1);
	line-height: normal;
}

h2,
.h2 {
	font-size: var(--fs-h2);
	line-height: normal;
}

h3,
.h3 {
	font-size: var(--fs-h3);
	line-height: normal;

	/* Só o H1 e o H2 levam a LineTwo. O H3 é Baro Plain — "Baro 500" no
	   design-tokens.md, contra o "200" (LineTwo) do H1/H2. */
	font-family: var(--font-display);
	font-weight: var(--fw-display-strong);
}

.text-small {
	font-size: var(--fs-small);
	line-height: normal;
}

/* ---------- Links ---------- */

a {
	color: var(--s-link);
	text-decoration: none;
	transition: color var(--t-fast);
}

a:hover,
a:focus-visible {
	color: var(--s-link-hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--s-link);
	outline-offset: 3px;
}

/* ---------- Container ---------- */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--text {
	max-width: calc(var(--container-text) + var(--gutter) * 2);
}

.container--bar {
	max-width: none;
	padding-inline: var(--bar-gutter);
}

/* ---------- Secções ---------- */

.section {
	padding-block: var(--section-y);
}

.section--surface {
	background: var(--s-bg-alt);
}

.section--sand {
	background: var(--s-bg-sand);
}

.section--petrol {
	background: var(--s-bg-petrol);
	color: var(--s-text-paper);
}

.section--dark {
	background: var(--s-bg-dark);
	color: var(--s-text-on-dark);
}

/* ---------- Botões ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 28px;
	padding: var(--sp-2) var(--sp-6);
	border: 0;
	border-radius: var(--r-btn);
	background: var(--s-btn-bg);
	color: var(--s-btn-text);
	font-family: var(--font-display);
	font-size: var(--fs-btn);
	font-weight: var(--fw-display-strong);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast);
}

.btn:hover,
.btn:focus-visible {
	background: var(--s-btn-bg-hover);
	color: var(--s-btn-text);
	text-decoration: none;
}

.btn--ghost {
	background: transparent;
	color: var(--s-text-on-dark);
	box-shadow: inset 0 0 0 1px currentColor;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: var(--s-text-on-dark);
	color: var(--s-bg-dark);
}

/* Variante dos CTAs do header: cinzento sólido sobre a barra escura.
   No Figma o header não usa o petrol — esse é o botão primário do corpo. */
.btn--alt {
	background: var(--s-btn-alt-bg);
	color: var(--s-btn-alt-text);
}

.btn--alt:hover,
.btn--alt:focus-visible {
	background: var(--s-btn-alt-bg-hover);
	color: var(--s-btn-alt-text);
}

/* ---------- Imagens com zoom-out no hover (anotação do designer) ----------
   O repouso é scale(1): é o estado que se vê a maior parte do tempo e é o que
   está no Figma. O hover encolhe para 0.95. Estava ao contrário — repouso a
   1.06 e hover a 1 — o que punha a imagem sempre 6% ampliada e cortada face
   ao desenho. */

.media-zoom {
	overflow: hidden;
}

.media-zoom img {
	transform: scale(1);
	transition: transform var(--t-media);
	width: 100%;
}

.media-zoom:hover img,
.media-zoom:focus-within img {
	transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	/* Agora é o hover que se desliga: o repouso já é scale(1), e a regra
	   anterior tinha menos especificidade que a de :hover, por isso o
	   movimento acontecia na mesma. */
	.media-zoom img,
	.media-zoom:hover img,
	.media-zoom:focus-within img {
		transform: none;
	}
}

/* ---------- Carrossel ----------
   Componente único do tema, usado por todas as secções com carrossel.
   O deslocamento é scroll nativo com snap: o teclado e o gesto de arrastar
   funcionam sem JS, e o JS só acrescenta botões, anúncio e estado das pontas.
   Ver assets/js/carousel.js. */

.carousel {
	position: relative;
}

.carousel__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;

	/* A barra de scroll é escondida porque há botões e o snap dá a pista
	   visual; o scroll continua a funcionar em todos os dispositivos. */
	scrollbar-width: none;
}

.carousel__viewport::-webkit-scrollbar {
	display: none;
}

/* Arrastar com o rato. A classe é posta pelo JS e só quando há mesmo o que
   rolar — um cursor de agarrar num carrossel que não anda é promessa falsa.
   Ver ligarArrasto() em carousel.js. */
.carousel__viewport.is-arrastavel {
	cursor: grab;
}

.carousel__viewport.is-a-arrastar {
	cursor: grabbing;

	/* Sem isto o arrasto selecciona o texto dos cartões pelo caminho. */
	user-select: none;
}

.carousel__track {
	display: flex;
	gap: var(--card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.carousel__item {
	position: relative;
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Sem o `position: relative` acima, um descendente absoluto dentro de um item
   — por exemplo um .screen-reader-text — tem como bloco de contenção o
   .carousel e não a janela, por isso escapa ao recorte do scroll e vai
   posicionar-se fora dela, alargando a página. Apanhado nos reviews, onde as
   estrelas levam texto para leitores de ecrã; nos destaques não se via porque
   não há nenhum absoluto dentro dos cartões. */

.carousel__controls {
	display: flex;
	gap: var(--sp-2);
}

.carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44x44 é o alvo de toque mínimo recomendado. Os 40px que aqui estavam
	   eram valor meu, não do design. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--r-btn);
	background: transparent;
	color: inherit;
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
	cursor: pointer;
	transition: opacity var(--t-fast);
}

.carousel__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.carousel__viewport {
		scroll-behavior: auto;
	}
}

/* ---------- "Ler mais" (componente) ----------
   O triângulo que fecha um bloco de texto no desenho não é indicação de scroll:
   é "ler mais". O texto sai cortado ao número de linhas que a banda mostra e o
   triângulo abre o resto. Ver inc/helpers.php e assets/js/ler-mais.js.

   O CORTE VIVE NO JS, não aqui: sem JavaScript não há botão para o desfazer, por
   isso sem JavaScript o texto tem de aparecer inteiro. A classe `is-cortado` e a
   altura em `--ler-mais-altura` são postas pelo JS depois de medir.

   A geometria — posição, tamanho e qual é o triângulo — fica no CSS de cada
   secção: cada frame coloca a peça à sua maneira. Aqui só está o que é comum. */

.ler-mais__alvo.is-cortado {
	max-height: var(--ler-mais-altura);
	overflow: hidden;
}

.ler-mais {
	/* `relative` para o alvo de toque do ::after se ancorar ao botão. As secções
	   que o posicionam trocam isto por `absolute`, que serve na mesma. */
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* O glifo vai por MÁSCARA e não por `background-image`, para a cor vir do
   `color` da secção — os três ficheiros de triângulo do tema trazem a cor
   embutida, e a máscara só lhes usa o alfa.

   **O `mask-image` fica no CSS DE CADA SECÇÃO e não aqui, nem numa variável.**
   Um `url()` relativo dentro de uma custom property resolve-se contra a folha
   onde a variável é USADA — que seria esta — e não contra a folha onde foi
   declarada. Com `--ler-mais-glifo: url("../../img/…")` escrito em
   `sections/cards-destaques.css`, o browser pedia
   `themes/fontinha/img/icons/seta-scroll.svg`: sem o `assets/`. A máscara não
   carregava e o triângulo ficava invisível, com o computado todo certo. */
.ler-mais__glifo {
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentcolor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	transition: transform var(--t-fast);
}

.ler-mais[aria-expanded="true"] .ler-mais__glifo {
	transform: rotate(180deg);
}

/* O anel em `currentcolor`: cada secção põe a cor do seu triângulo, por isso o
   contorno tem sempre o contraste que o glifo já tem contra aquele fundo. */
.ler-mais:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 6px;
}

/* A caixa do botão é a do triângulo, que é miúdo; o alvo de toque de 44x44 vai
   num ::after invisível que pode transbordar. É o que os botões do carrossel e a
   paginação dos socials já fazem. */
.ler-mais::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	content: "";
	transform: translate(-50%, -50%);
}

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

/* ---------- Aviso de privacidade dos formulários ----------
   A linha de consentimento ao lado do botão de enviar. Ver
   fontinha_aviso_privacidade() em inc/helpers.php. O endereço vem da página
   designada em Definições -> Privacidade, nunca escrito à mão.

   Aqui fica só o que é comum; o espaçamento é de cada secção, porque cada
   formulário tem o seu. */

.aviso-privacidade {
	margin: 0;
	text-align: center;
}

/* O sublinhado é permanente e não só no hover: é a única coisa que distingue a
   ligação do resto da frase, que é toda da mesma cor e do mesmo tamanho. */
.aviso-privacidade a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Utilitários ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.text-gold {
	background: var(--g-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Com o menu mobile aberto a página por baixo não rola: o painel ocupa o ecrã
   inteiro e o toque arrastava o conteúdo atrás dele. */
body.tem-menu-aberto {
	overflow: hidden;
}

/* ============================================================
   O salto para o conteúdo

   Um link de salto que nunca se vê não serve a ninguém: quem carrega em Tab
   ao chegar à página fica com o foco num elemento invisível e não sabe onde
   está. Ao ganhar foco sai do esconderijo e assenta no canto superior
   esquerdo, por cima do header.

   A regra é desta classe e não do `.screen-reader-text` genérico — esse está
   dentro de dezenas de botões a dar-lhes nome acessível, e não é para
   aparecer nenhum deles.
   ============================================================ */

.salta-conteudo:focus {
	position: fixed;
	z-index: 300; /* acima do header (100) e do painel do menu (200) */
	top: var(--sp-2);
	left: var(--sp-2);

	width: auto;
	height: auto;
	padding: var(--sp-2) var(--sp-4);

	clip: auto;
	clip-path: none;

	color: var(--s-text-on-dark);
	font-family: var(--font-display);
	font-size: var(--fs-nav);
	text-decoration: underline;
	text-transform: uppercase;

	/* Petrol e não `--s-bg-dark`: a barra do header é `#3D3D3C` e o escuro é
	   `#3C3C3B`, ou seja o link assentava sobre um fundo da própria cor e só o
	   contorno o separava. Sobre petrol lê-se como peça à parte, e é o par de
	   cores que o botão primário do site já usa. Contraste 6.75:1. */
	background-color: var(--s-bg-petrol);
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* O `<main>` recebe o foco pelo salto, mas não é um controlo: o anel do
   browser à volta da página inteira lê-se como erro. O sinal de que o salto
   funcionou é o conteúdo ter mudado de sítio, não um contorno. */
.site-main:focus {
	outline: none;
}