/*
 * Fontinha — header e footer.
 *
 * As folhas das secções estavam aqui em `@import` e passaram a enqueue próprio,
 * em fontinha_secoes_css() no functions.php: um `@import` não leva query string,
 * por isso não havia forma de invalidar a cache quando o CSS de uma secção
 * mudava. Uma secção nova acrescenta-se àquela lista, não aqui.
 */

/* ============================================================
   Header
   Figma: componente "Header", 1440 x 95, fundo #3D3D3C
   ============================================================ */

.site-header {
	background: var(--s-bg-dark);
	color: var(--s-text-on-dark);
	position: relative;
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);

	/* Altura fixa, não mínima: o header não cresce com o conteúdo. */
	height: var(--header-h);
}

.site-header__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.site-header__logo img,
.site-header__logo svg {
	width: 132px;
	height: auto;
}

.site-nav {
	display: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-8); /* 32px — medido no Figma */
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	color: var(--s-text-on-dark);
	font-family: var(--font-display);
	font-size: var(--fs-nav);
	font-weight: var(--fw-display-strong);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--c-cream);
	text-decoration: none;
}

.site-header__actions {
	display: none;
	gap: var(--sp-2);
}

.site-header__actions .btn {
	white-space: nowrap;

	/* Os dois CTAs têm largura fixa e igual — 154px medidos no Figma, com o
	   texto centrado dentro. Sem isto dimensionavam pelo conteúdo e ficavam
	   com larguras diferentes (175px e 212px).
	   O padding lateral do .btn sai: com largura fixa é o justify-content que
	   centra, e 24px de cada lado não deixavam caber o rótulo mais longo. */
	width: var(--header-cta-w);
	padding-inline: 0;

	/* Corpo próprio, mais pequeno que o botão primário. Ver tokens.css. */
	font-size: var(--fs-btn-header);
}

/* Botão hamburger — só em mobile.
   Figma: Group 41 (4003:2389), 16.384x12.896. A caixa do botão é a do desenho
   e o alvo de toque de 44x44 é um ::after invisível centrado, como nos outros
   controlos do tema — os 32x32 que aqui estavam alargavam a barra e
   empurravam o logótipo 1.7px para a esquerda. */
.nav-toggle {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 16.384px;
	height: 12.896px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
}

.nav-toggle::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	content: "";
	transform: translate(-50%, -50%);
}

.nav-toggle span:not(.screen-reader-text) {
	display: block;
	height: 1.5px;
	background: var(--s-text-on-dark);
	transition: transform var(--t-fast), opacity var(--t-fast);
}

/* O hamburger NÃO vira X. No desenho o fecho é o X dentro do painel, e o
   painel é um drawer de 142px que não tapa a barra — com os dois a virar X
   ficavam dois fechos à vista. O estado continua a ser anunciado pelo
   `aria-expanded`. */

/* ---------- Painel do menu mobile ----------
   Figma: frame "Menu 1" (4003:2391), 142.34x330.19 — um drawer estreito.
   **Divergimos de propósito:** num telemóvel um painel de 142px deixa alvos de
   toque pequenos de mais e desperdiça o ecrã. Ocupa o ecrã inteiro.

   Do desenho fica tudo o resto, medido: o fecho em cima à esquerda, o logótipo
   vertical, os sete itens com moldura em gradiente dourado e o estado de página
   actual a dourado cheio com texto escuro. Ver "Decisões assumidas". */
.mobile-panel {
	position: fixed;
	inset: 0;

	/* Acima do header, que tem z-index 100 — o painel cobre-o, e por isso o X
	   fica no lugar do hamburger em vez de haver dois controlos à vista. */
	z-index: 200;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-8);

	/* O topo abre espaço para o fecho, que fica na posição do hamburger. */
	padding: 72px var(--gutter) var(--sp-8);

	/* Em ecrãs curtos a lista passa dos limites: rola dentro do painel. */
	overflow-y: auto;
	overscroll-behavior: contain;

	background: var(--s-bg-dark);
}

.mobile-panel[hidden] {
	display: none;
}

/* O X fica onde estava o hamburger, para o controlo não saltar ao abrir: o
   centro do Group 41 é (15.556, 24.972) e a caixa de 44x44 centra-se nele.
   A cruz visível tem os 12.65x12.94 do nó 4003:2606. */
.mobile-panel__fechar {
	position: absolute;
	top: 2.972px;  /* 24.972 - 22 */
	left: -6.444px; /* 15.556 - 22 */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mobile-panel__fechar::before,
.mobile-panel__fechar::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12.65px;
	height: 1.2px;
	background: var(--s-text-on-dark);
	content: "";
}

.mobile-panel__fechar::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-panel__fechar::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* O logótipo vertical do desenho, a 1.5x: lá tem 38.05x66. Ao dobro (76x132),
   que é a mesma fracção da largura do painel, os sete itens de 44px já não
   cabiam num ecrã de 667 — o último passava 5px. Os alvos de toque são o
   motivo desta divergência toda, por isso quem cede é o logótipo, que é
   decoração. Centrado, como está praticamente no desenho. */
.mobile-panel__logo {
	display: block;
	flex: 0 0 auto;
	width: 57.07px;
	height: 99px;
	background-image: url("../img/logo/fontinha-vertical.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

.mobile-panel nav {
	width: 100%;
	max-width: 335px; /* 375 - 2x --gutter */
}

.mobile-panel .site-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: var(--sp-4);
}

.mobile-panel .site-nav__list li {
	display: block;
}

/* 44px de altura, que é o alvo de toque mínimo — no desenho a caixa tem 17.83,
   que serve num drawer para rato mas não num telemóvel. O corpo da letra é o
   --fs-nav de 16px e não os 8.23px do nó 4003:2476: esses são a proporção do
   painel de 142 e ficariam ilegíveis a esta largura. */
.mobile-panel .site-nav__list a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0;
	color: var(--s-text-on-dark);
	font-family: var(--font-display);
	font-size: var(--fs-nav);
	font-weight: var(--fw-display);
	line-height: normal;
	text-align: center;
	text-transform: uppercase;
}

/* A moldura de cada item é o gradiente dourado a 25%. Medido nas duas pontas
   da borda do desenho: (86,70,64) à esquerda e (105,94,82) à direita, que
   sobre o fundo escuro dão alfa 0.23–0.27 contra as paradas do --g-gold.
   Entra por máscara para a borda ser mesmo o gradiente, não uma cor lisa. */
.mobile-panel .site-nav__list a::before {
	position: absolute;
	inset: 0;
	padding: 1px;
	background: var(--g-gold);
	content: "";
	opacity: 0.25;
	-webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
	mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* A página actual leva o dourado cheio e o texto passa a escuro — nó 4003:2478,
   o único item com `text-[#3c3c3b]`. */
.mobile-panel .site-nav__list .current-menu-item > a,
.mobile-panel .site-nav__list .current_page_item > a {
	background: var(--g-gold);
	color: var(--s-text);
}

.mobile-panel .site-nav__list .current-menu-item > a::before,
.mobile-panel .site-nav__list .current_page_item > a::before {
	opacity: 1;
}

/* ---------- Barra em mobile (até 1439px) ----------
   Figma: Header - Mobile (4004:5883), 375x54. O conteúdo é o "Frame 39"
   (4003:2390): um flex com gap 9px em (7.364, 18.524), 359.958x26.796, e a
   ordem é hamburger, logótipo, CTAs — ao contrário do desktop.

     hamburger   16.384 x 12.896
     logótipo   104.208 x 26.612
     CTAs       108.136 x 16.587 cada, 6.864 entre eles

   Os CTAs estavam no painel e passam para a barra, que é onde o desenho
   mobile os põe. */
@media (max-width: 1439px) {
	.site-header__inner {
		align-items: flex-start;
		justify-content: flex-start;
		gap: 9px;
		height: var(--header-h);
		padding-block: 18.524px 0;
		padding-inline: 7.364px 7.678px;
	}

	.nav-toggle {
		order: 1;
	}

	.site-header__logo {
		order: 2;
	}

	.site-header__actions {
		order: 3;
		display: flex;
		gap: 6.864px; /* 260.956 - (145.956 + 108.136) */

		/* A 375 os três blocos enchem a barra e isto não faz diferença; acima
		   disso mantém os CTAs encostados à direita em vez de colados ao
		   logótipo. */
		margin-left: auto;
	}

	.site-header__logo img,
	.site-header__logo svg {
		width: 104.208px;
	}

	/* O .btn tem `min-height: 28px`, que é a altura do CTA de desktop; aqui o
	   desenho dá 16.587 e o min-height ganhava. */
	.site-header__actions .btn {
		height: var(--header-cta-h);
		min-height: 0;
		padding-block: 0;
	}
}

/*
 * Exceção ao breakpoint de 1200px do projeto: o menu horizontal só entra aos
 * 1440px. Sete links mais dois botões ocupam ~1357px e a 1200 só há 1148px
 * disponíveis — faltam 209px, e baixar o gap do menu a zero só liberta 144px.
 * Abaixo de 1440 fica o hamburger. Ver CLAUDE.md, secção Breakpoints.
 */
@media (min-width: 1440px) {
	.nav-toggle,
	.mobile-panel {
		display: none;
	}

	.site-nav,
	.site-header__actions {
		display: flex;
	}
}

/* ============================================================
   Footer
   Figma: componente "Footer", 1440 x 233, fundo #686969
   ============================================================ */

.site-footer {
	background: var(--s-bg-footer);
	color: var(--c-white);
	padding-block: var(--sp-8);
	text-align: center;
}

.site-footer a {
	color: var(--c-white);
}

.site-footer__cols {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

.site-footer__col h2 {
	font-size: var(--fs-small);
	font-weight: var(--fw-display-strong);
	margin-bottom: var(--sp-2);
}

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

.site-footer__social {
	display: flex;
	justify-content: center;
	gap: var(--sp-4);
	margin-top: var(--sp-8);
}

.site-footer__social-link svg {
	display: block;
	width: 17.6px;
	height: 17.597px;
}

.site-footer__legal {
	margin-top: var(--sp-4);
	font-size: var(--fs-xsmall);
	opacity: 0.85;
}

/* O logótipo do footer só aparece em mobile — ver o bloco de mobile. */
.site-footer__logo {
	display: none;
}

/* ---------- Footer em mobile (até 1199px) ----------
   Componente Footer - Mobile (4005:11751), 375.53 x 460.94. É outra composição:
   **alinhada à esquerda** a partir de x=29.44, numa coluna só, e com o logótipo
   no topo, que o footer de desktop não tem. O nosso era o de desktop centrado e
   reempilhado, e dava 425.59 contra os 460.94 do desenho.

   Coordenadas relativas ao topo do footer:

     logótipo      4002:1230  (29.444,  41.991)  161.074 x 41.139
     Horário       4002:1024  (31.580, 104.656)  Baro LineTwo 16.87px
     horário       4002:1025  (29.444, 131.120)  Avenir Book 12.885px
     Localização   4002:1028  (29.444, 179.320)
     morada        4002:1029  (29.444, 203.124)
     Contactos     4002:1229  (29.444, 240.662)
     email         4002:1030  (29.444, 265.996)
     social        4002:1031  (32.575, 314.941)  152.314 x 18.808
     legal         4002:1039  (29.443, 365.255)  280 x 30.085
     políticas     4002:1042  (29.444, 402.158)  206 x 28.247

   O Avenir continua a ser feito em Gill Sans, como no desktop — ver "Decisões
   assumidas". */
@media (max-width: 1199px) {
	.site-footer {
		padding-block: 41.991px 30.529px; /* 460.94 - 430.41 */
		text-align: left;
	}

	.site-footer > .container {
		padding-inline: 29.444px;
	}

	.site-footer__logo {
		display: block;
		width: 161.074px;
		aspect-ratio: 161.074 / 41.139;
		/*
		 * Variante branca. O nó do logótipo do footer é branco — amostrado no
		 * export, o pixel mais claro é (255,255,255) e os tons são todos
		 * neutros, sem laivo dourado — e o `fontinha-wordmark.svg` traz o
		 * gradiente embutido, como as etiquetas dos perks traziam.
		 *
		 * Derivada do mesmo ficheiro: 16 `fill="url(#...)"` passaram a
		 * `#FFFFFF` e os 16 `<linearGradient>` saíram. As cinco `<mask>` FICAM —
		 * na primeira tentativa apaguei o `<defs>` inteiro e deixei cinco
		 * `mask="url(#...)"` órfãs.
		 */
		background-image: url("../img/logo/fontinha-wordmark-branco.svg");
		background-repeat: no-repeat;
		background-size: contain;
	}

	.site-footer__cols {
		gap: 0;
		margin-top: 21.526px; /* 104.656 - 83.13 */
	}

	.site-footer__col h2 {
		margin-bottom: 14.464px; /* 131.120 - 116.656 */
		font-family: var(--font-title);
		font-size: 16.87px;
		font-weight: var(--fw-display);
		line-height: 0.71; /* caixa de 12, como o nó */
	}

	.site-footer__col p {
		font-size: 12.885px;
		line-height: 1.2;
	}

	/* 14.74 do fim do horário ao título seguinte, 19.54 antes de Contactos. O
	   valor do meio serve os dois: são 4.8px de diferença. */
	.site-footer__col + .site-footer__col {
		margin-top: 17.14px;
	}

	.site-footer__social {
		align-items: center;
		justify-content: flex-start;
		gap: 8.89px;  /* 59.591 - (32.575 + 18.122) */
		margin-top: 30.94px;
		margin-left: 3.131px; /* 32.575 - 29.444 */
	}

	/* O handle na mesma linha dos ícones. No nó os intervalos não são iguais:
	   8.89 entre os dois ícones e 10.49 do segundo (acaba em 78.399) ao handle
	   (88.889) — daí o 1.60 a somar ao gap. */
	.site-footer .text-small {
		margin: 0 0 0 1.60px;

		/*
		 * Fica nos 14px do .text-small, que dão caixa de 16 — a altura do nó
		 * 4002:1036. A largura não bate (78 contra 96) e não pode bater: o
		 * bloco social do desenho é Montserrat, que o projecto não tem, e está
		 * feito em Gill Sans. Ver "Para a designer".
		 */
		line-height: normal;
	}

	.site-footer__social-link svg {
		width: 18.808px;
		height: 18.808px;
	}

	.site-footer__legal {
		margin-top: 31.50px;
		font-size: 10.5px;
		line-height: 1.4;
		opacity: 1;
	}
}

/* ---------- Footer em desktop ----------
   Nó 4004:7736, 1440x233. As três colunas e o bloco social estão colocados à
   mão, cada um com o seu x, por isso vão em posição absoluta sobre um palco da
   altura da banda, como nos perks e nos socials.

   Os corpos são os do desenho: 16.201px nos títulos e 12.378 no texto, 12.257 no
   handle e 10.042 nas linhas legais. Nenhum está na escala — são medição.

   **As famílias do desenho não existem no projecto.** Os títulos são Baro
   LineTwo, que temos; mas o texto é Avenir e o bloco social é Montserrat, e o
   CLAUDE.md diz Baro e Gill Sans, sem Google Fonts. Ficam em Gill Sans, com os
   corpos do desenho — ver "Decisões assumidas". */
@media (min-width: 1200px) {
	.site-footer {
		height: 233px;
		padding-block: 0;
	}

	.site-footer > .container {
		position: relative;
		max-width: 1440px;
		height: 100%;
		padding-inline: 0;
	}

	.site-footer__cols {
		display: block;
		gap: 0;
	}

	.site-footer__col {
		position: absolute;
		text-align: center;
	}

	/* Horário — nó 4004:7731, x 205.1, y 41.0, 171.9 de largura */
	.site-footer__col:nth-child(1) {
		top: 17.6%;
		left: 14.24%;
		width: 11.94%;
	}

	/* Localização — nó 4004:7730, x 568.4, y 42.6, 240.9 */
	.site-footer__col:nth-child(2) {
		top: 18.27%;
		left: 39.47%;
		width: 16.73%;
	}

	/* Contactos — nó 4004:7732, x 990.0, y 41.0, 244.9 */
	.site-footer__col:nth-child(3) {
		top: 17.6%;
		left: 68.75%;
		width: 17.01%;
	}

	.site-footer__col h2 {
		margin-bottom: 13px; /* 14 no horário, 13 nos outros; fica o valor comum */
		font-family: var(--font-title);
		font-size: 16.201px;
		font-weight: var(--fw-display);
		line-height: normal;
	}

	.site-footer__col p {
		font-family: var(--font-body);
		font-size: 12.378px;
		line-height: normal;
	}

	/* Bloco social e legal — nó 4002:136, x 512.6, y 124.7, 377 de largura */
	/* O par de ícones do desenho mede 42.546x17.597 — nó 4002:134 — ou seja dois
	   de 17.6 com 7.35 de intervalo. */
	.site-footer__social {
		position: absolute;
		top: 53.52%;
		left: 35.6%;
		width: 26.18%;
		margin: 0;
		gap: 7.35px;
	}

	/* O handle passou a viver dentro do `.site-footer__social`, que aqui é
	   absoluto — por isso as coordenadas passam a ser relativas a ele. O `top:
	   100%` dá 124.7 + 17.597 = 142.30, contra os 142.29 que o 61.07% do palco
	   dava. */
	.site-footer .text-small {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		margin: 0;
		font-size: 12.257px;
		line-height: normal;
		text-align: center;
	}

	/* O nó 4002:132 vai de 179.3 a 207.3: duas linhas de 10.042px com 4 de
	   intervalo — o copyright e os links legais, estes numa linha só. */
	.site-footer__legal {
		position: absolute;
		top: 76.95%; /* 179.3 / 233 */
		left: 35.6%;
		width: 26.18%;
		margin: 0;
		font-size: 10.042px;
		line-height: normal;
		opacity: 1;
	}

	.site-footer__legal p {
		margin: 0 0 4px;
	}

	/* Os três links numa linha, como no desenho, e não empilhados. */
	.site-footer__legal ul {
		display: flex;
		justify-content: center;

		/* O intervalo entre as duas linhas é o `margin-bottom` de 4px do
		   parágrafo, que é o do desenho; o --sp-2 da regra base somava mais 8. */
		gap: 6px;
		margin: 0;
	}
}

.site-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-4);
	list-style: none;
	margin: var(--sp-2) 0 0;
	padding: 0;
}

/*
 * Em mobile o menu parte em duas linhas, dois itens e um, como o nó: "Privacy
 * Policy | Terms & Conditions" (206 de largura) e "Booking & Cancellation
 * Policy" (178).
 *
 * Os nossos três itens medem 55.22, 83.63 e 122.56 com 16 de intervalo: a
 * primeira linha dá 154.85 e a terceira só cabe a partir de 293.41. O
 * `max-width` de 206 é o do nó e cai no meio dos dois, por isso força o corte
 * onde o desenho o tem.
 *
 * `flex-start` porque o desenho alinha as duas linhas a 29.44, e não as centra;
 * e a linha de intervalo vai a zero porque a caixa de linha (14.7) já é o passo
 * do desenho (14.25).
 */
@media (max-width: 1199px) {
	.site-footer__legal ul {
		justify-content: flex-start;
		gap: 0 var(--sp-4);
		max-width: 206px;
	}
}

@media (min-width: 1200px) {
	.site-footer__cols {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-12);
	}
}