/* ──────────────────────────────────────────────────────────────────────
   SQUIZITO · cookie consent banner
   ──────────────────────────────────────────────────────────────────────
   Garante 10/06/2021 compliant · no X-close · explicit Accept + Reject
   buttons · symmetric hierarchy. Defaults to a bottom-anchored strip.
   On small screens the strip becomes a full-width block. The "manage"
   dialog is hidden today (we have nothing to toggle) but the markup is
   in place so we can flip it on when a non-essential cookie is added.
────────────────────────────────────────────────────────────────────── */

.sqz-cookie {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9000;
	font-family: 'Montserrat', system-ui, sans-serif;
	color: var(--ink);
	pointer-events: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.sqz-cookie[data-state="visible"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sqz-cookie[data-state="hidden"] {
	display: none;
}

/* When the banner is visible, push the page content up so the banner never
   overlaps interactive elements (form buttons, links). Without this, the
   banner sits on top of whatever is at the bottom of the viewport and steals
   clicks · which silently broke the /verify/ form's submit button.
   Generous values · the banner expands when text wraps on narrower viewports. */
body:has(.sqz-cookie[data-state="visible"]) {
	padding-bottom: 340px;
}
@media (max-width: 720px) {
	body:has(.sqz-cookie[data-state="visible"]) {
		padding-bottom: 460px;
	}
}

.sqz-cookie-inner {
	max-width: 1180px;
	margin: 14px auto;
	padding: 18px 22px;
	background: var(--paper);
	border: 2px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 22px;
	align-items: center;
}

.sqz-cookie-body {
	min-width: 0;
}

.sqz-cookie-eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 6px;
	line-height: 1;
}

.sqz-cookie-eyebrow::before {
	content: "· ";
	color: var(--ink);
}

.sqz-cookie-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: lowercase;
	margin: 0 0 8px;
	color: var(--ink);
}

.sqz-cookie-title em {
	font-style: normal;
	background: var(--acid);
	padding: 0 4px;
}

.sqz-cookie-text {
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
	color: var(--ink);
}

.sqz-cookie-text a {
	color: var(--ink);
	text-decoration: underline;
	font-weight: 600;
}

.sqz-cookie-text a:hover {
	background: var(--acid);
	text-decoration: none;
}

.sqz-cookie-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 200px;
}

.sqz-cookie-btn {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	padding: 11px 18px;
	border: 2px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: block;
	width: 100%;
	transition: background 120ms ease, transform 120ms ease;
}

.sqz-cookie-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 2px 2px 0 var(--ink);
}

.sqz-cookie-btn--primary {
	background: var(--acid);
	font-weight: 800;
}

.sqz-cookie-btn--primary:hover {
	background: var(--acid-l);
}

.sqz-cookie-btn--ghost {
	background: transparent;
}

.sqz-cookie-btn--link {
	background: transparent;
	border: 1px dashed var(--ink);
	font-size: 11px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.1em;
	padding: 8px 12px;
}

.sqz-cookie-btn--link:hover {
	background: var(--ink);
	color: var(--paper);
}

/* ── mobile ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
	.sqz-cookie-inner {
		margin: 0;
		grid-template-columns: 1fr;
		gap: 16px;
		box-shadow: none;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		padding: 16px 18px 18px;
	}

	.sqz-cookie-title {
		font-size: 18px;
	}

	.sqz-cookie-text {
		font-size: 12px;
	}

	.sqz-cookie-actions {
		flex-direction: row;
		min-width: 0;
		gap: 8px;
	}

	.sqz-cookie-actions .sqz-cookie-btn {
		font-size: 12px;
		padding: 11px 8px;
	}

	.sqz-cookie-actions .sqz-cookie-btn--link {
		display: none; /* on mobile we lean on the "Cookie policy" inline link in the body text */
	}
}

/* ── reduce-motion ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.sqz-cookie,
	.sqz-cookie-btn {
		transition: none;
	}

	.sqz-cookie-btn:hover {
		transform: none;
		box-shadow: none;
	}
}

/* ── "change your cookie choices" CTA inside the policy page ── */

a#sqz-reset-consent,
a#sqz-reset-consent-bottom {
	display: inline-block;
	padding: 12px 18px;
	border: 2px solid var(--ink);
	background: var(--acid);
	color: var(--ink);
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	text-transform: lowercase;
	text-decoration: none;
	letter-spacing: 0.04em;
}

a#sqz-reset-consent:hover,
a#sqz-reset-consent-bottom:hover {
	background: var(--acid-l);
}