/* =========================================================
   Popup "Preferências de cookies" — canto inferior esquerdo, sem
   overlay nem bloqueio de scroll (pedido do utilizador, 2026-09-04).
   Aparece na primeira visita, qualquer página, até o utilizador
   aceitar ou rejeitar — só deixou de tapar o resto do ecrã enquanto
   isso não acontece.

   Auto-contido: carrega em TODAS as páginas do frontend, incluindo
   as que não definem os tokens :root do tema (ver o bug documentado
   em site-header.css — aqui os valores da paleta vêm escritos à
   mão, sem depender de var(--x)).

   Marcação: template-parts/cookie-consent.php
   Comportamento: assets/js/cookie-consent.js
   ========================================================= */

.al-cookie {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 2000;
	width: 392px;
	max-width: calc(100vw - 32px);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.al-cookie[hidden] { display: none; }

.al-cookie__panel {
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 18px 48px rgba(10, 45, 77, 0.22), 0 2px 8px rgba(10, 45, 77, 0.08);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	animation: al-cookie-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes al-cookie-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.al-cookie__panel { animation: none; }
}

/* ---- Estado compacto (por omissão) ---- */
.al-cookie__compact {
	display: flex;
	gap: 12px;
	padding: 18px 20px;
}

/*
	`display: flex` acima tem a mesma especificidade que a regra
	`[hidden] { display: none }` da folha de estilos do browser, mas
	ganha sempre por ser de origem "autor" — sem isto, JS a pôr
	`hidden` neste elemento (para trocar para o painel expandido) não
	tinha efeito visual nenhum, ficando os dois estados visíveis ao
	mesmo tempo (apanhado a testar, 2026-09-04). `.al-cookie__expanded`
	não define `display` a mais nenhum sítio, por isso não precisa do
	mesmo reforço — mas fica aqui pelo mesmo motivo, para não voltar a
	partir se alguém lhe acrescentar um `display` no futuro.
*/
.al-cookie__compact[hidden],
.al-cookie__expanded[hidden] { display: none; }

.al-cookie__compact-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #e6f4fa;
	color: #008bbd;
}

.al-cookie__compact-icon svg { width: 18px; height: 18px; }

.al-cookie__compact-body { flex: 1; min-width: 0; }

.al-cookie__compact-text {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.55;
	color: #536373;
}

.al-cookie__personalize {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #008bbd;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.al-cookie__personalize:hover { color: #007caf; }

.al-cookie__compact-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---- Estado expandido (categorias) ---- */
.al-cookie__expanded { padding: 22px 22px 18px; }

.al-cookie__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: #0a2d4d;
}

.al-cookie__desc {
	margin: 0 0 16px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #536373;
}

.al-cookie__desc p { margin: 0 0 8px; }
.al-cookie__desc p:last-child { margin-bottom: 0; }

.al-cookie__desc a {
	color: #008bbd;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.al-cookie__desc a:hover { color: #007caf; }

/* ---- Grupos de cookies (acordeão) ---- */
.al-cookie__groups {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border-top: 1px solid rgba(10, 45, 77, 0.1);
}

.al-cookie__group { border-bottom: 1px solid rgba(10, 45, 77, 0.1); }

.al-cookie__group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
}

.al-cookie__group-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	padding: 2px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #0a2d4d;
	text-align: left;
	cursor: pointer;
}

.al-cookie__chevron {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: #6b7a89;
	transition: transform 0.2s ease;
}

.al-cookie__chevron svg { display: block; width: 100%; height: 100%; }

.al-cookie__group-trigger[aria-expanded="true"] .al-cookie__chevron { transform: rotate(180deg); }

.al-cookie__group-label { flex: 1; min-width: 0; }

.al-cookie__always {
	flex-shrink: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: #008bbd;
}

.al-cookie__group-body {
	padding: 0 0 14px 22px;
	font-size: 12px;
	line-height: 1.6;
	color: #536373;
}

.al-cookie__group-body[hidden] { display: none; }

/* ---- Interruptor ---- */
.al-cookie__switch {
	flex-shrink: 0;
	position: relative;
	width: 38px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c9d3dc;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.al-cookie__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(10, 45, 77, 0.35);
	transition: transform 0.2s ease;
}

.al-cookie__switch[aria-checked="true"] { background: #008bbd; }
.al-cookie__switch[aria-checked="true"]::after { transform: translateX(16px); }

.al-cookie__switch:focus-visible,
.al-cookie__group-trigger:focus-visible,
.al-cookie__personalize:focus-visible,
.al-cookie__back:focus-visible,
.al-cookie__reject:focus-visible,
.al-cookie__confirm:focus-visible {
	outline: 2px solid #008bbd;
	outline-offset: 2px;
	border-radius: 8px;
}

/* ---- Ações ---- */
.al-cookie__compact-actions,
.al-cookie__actions-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.al-cookie__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.al-cookie__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 2px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: #536373;
	cursor: pointer;
}

.al-cookie__back svg { width: 13px; height: 13px; }
.al-cookie__back:hover { color: #0a2d4d; }

/*
	Mesmo peso visual que .al-cookie__confirm de propósito (mesma altura,
	padding, cantos) — só a cor muda (contorno vs. gradiente cheio). A
	CNPD já penalizou sites onde "recusar" é visualmente mais fraco que
	"aceitar" (um "dark pattern" leve que dificulta a recusa); os dois
	têm de ser igualmente fáceis de escolher (RGPD/EDPB).
*/
.al-cookie__reject {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 9px 18px;
	border: 1px solid rgba(10, 45, 77, 0.18);
	border-radius: 9px;
	background: #ffffff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #0a2d4d;
	cursor: pointer;
	white-space: nowrap;
}

.al-cookie__reject:hover { background: #f4f9fc; border-color: rgba(10, 45, 77, 0.3); }

.al-cookie__confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 9px 18px;
	border: 0;
	border-radius: 9px;
	background-image: linear-gradient(135deg, #007ed4 0%, #008bbd 100%);
	color: #ffffff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 16px rgba(0, 139, 189, 0.22);
	white-space: nowrap;
}

.al-cookie__confirm:hover { filter: brightness(1.04); }

/*
	"Definições de cookies" no rodapé (todas as páginas, ver
	add_cookie_footer_link.py / grep data-al-cookie-reopen) — reabre o
	painel já escolhido antes para o utilizador poder mudar de ideias
	depois da 1ª visita, sem ter de limpar cookies do browser (RGPD:
	retirar consentimento tem de ser tão fácil como dá-lo). É um
	<button>, não um link, mas tem de herdar o aspeto de .footer__link
	de cada página — reset ao chrome nativo do <button> para isso.
*/
.al-cookie-reopen-btn {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

@media (max-width: 520px) {
	.al-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
	.al-cookie__compact { flex-direction: column; }
	.al-cookie__compact-icon { display: none; }
	.al-cookie__compact-actions { flex-direction: column-reverse; align-items: stretch; }
	.al-cookie__compact-actions .al-cookie__confirm,
	.al-cookie__compact-actions .al-cookie__reject { width: 100%; }
	.al-cookie__actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
	.al-cookie__actions-right { flex-direction: column-reverse; align-items: stretch; }
	.al-cookie__actions-right .al-cookie__confirm,
	.al-cookie__actions-right .al-cookie__reject { width: 100%; }
	.al-cookie__back { align-self: flex-start; }
}