/* =========================================================================
   LEGAL — Privacy & Cookie Policy
   Scope: body.bg-legal-page
   Registro operativo (Manrope) — documento informativo, non editoriale.
   Token: FOUNDATION (FONT_STACK v6.2, TYPE_SCALE v6.4, TEXT_COLOR v6.1.1,
   VERTICAL_RHYTHM v6.3, SPACING, COLOR_PALETTE).
   ========================================================================= */

/* ---------- Reset Astra container ---------- */
.bg-legal-page #content,
.bg-legal-page #content .ast-container,
.bg-legal-page .site-content,
.bg-legal-page #primary,
.bg-legal-page #main,
.bg-legal-page .site-main,
.bg-legal-page .entry-content {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.bg-legal-page .site-main { padding: 0; }

/* Nota: nessun override `overflow` su html/body/antenati. Il TOC è
   `position: fixed` (ancorato alla viewport), indipendente dallo scroll
   context — non richiede di toccare contenitori esterni. Masthead di
   custom-header.js (FROZEN) intatto. */

/* ---------- Article wrapper ----------
   container-type: inline-size → permette di attivare il grid 2-col in base
   alla LARGHEZZA EFFETTIVA del wrapper, non del viewport. Necessario perché
   custom-header.js al load (se scrollY > soglia) applica al body le classi
   `hide-main-header show-custom-sticky` → logo verticale laterale → padding
   sx aggiuntivo → body content si comprime sotto la soglia richiesta dal
   grid anche se viewport è ancora >1200px. Container queries risolvono
   questa classe di bug. Supporto: tutti i browser dal 2023.
*/
.bg-legal-page .bg-legal {
	background: var(--bg, #0C0C0B);
	color: var(--text, #F2F2F2);
	padding-block: var(--pad-section, clamp(60px, 8vw, 100px));
	padding-inline: var(--pad-x, clamp(20px, 4vw, 40px));
	container-type: inline-size;
	container-name: legal;
}

/* ---------- Hero ----------
   Default (container stretto, TOC va sopra il testo): bandiera a sinistra.
   Container ≥1080px (TOC laterale): centrato.
   Condizione sincronizzata col grid del body — header centrato sse grid attivo.
*/
.bg-legal-hero {
	max-width: var(--max-width-text, 720px);
	margin-inline: auto;
	text-align: left;
	padding-block-end: clamp(2rem, 4vw, 3.5rem);
	border-block-end: 1px solid var(--border, rgba(242, 242, 242, 0.08));
}

@container legal (min-width: 1080px) {
	.bg-legal-hero { text-align: center; }
}

.bg-legal-hero__eyebrow {
	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	font-weight: 600;
	font-size: clamp(0.64rem, 1vw, 0.68rem);
	line-height: 1;
	letter-spacing: var(--track-wider, 0.18em);
	text-transform: uppercase;
	color: var(--text-3, rgba(242, 242, 242, 0.35));
	margin: 0;
}

/* Titolo hero — Manrope 500 (h1-ops scale), registro operativo */
.bg-legal-hero__title {
	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	font-weight: 500;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: var(--track-hero, -0.02em);
	color: var(--text, #F2F2F2);
	margin: clamp(0.8rem, 1.5vw, 1.2rem) 0 0;
}

/* Meta — Manrope (registro operativo, coerente col resto del documento).
   Manrope non ha italic vero (font-synthesis: none lo blocca) — distinzione
   via color --text-3 e size ridotto. */
.bg-legal-hero__meta {
	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	font-weight: 400;
	font-size: clamp(0.85rem, 1.1vw, 0.95rem);
	line-height: 1.6;
	letter-spacing: var(--track-body, 0);
	color: var(--text-3, rgba(242, 242, 242, 0.35));
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
}

/* ---------- Body layout ----------
   Default: single-column block, TOC in flow sopra la prose (mobile, tablet,
   e anche desktop quando il body content è compresso da custom-sticky-header).
   Container ≥1080px: grid 2 colonne (TOC | prose).
   Condizione basata sulla larghezza del CONTAINER (.bg-legal), non del
   viewport — protegge dal collasso quando custom-header.js applica il logo
   verticale laterale al reload con scrollY preservato.
*/
.bg-legal-body {
	--toc-width: 220px;
	--toc-gap: clamp(32px, 5vw, 80px);
	display: block;
	max-width: var(--max-width-text, 720px);
	margin-inline: auto;
	padding-block-start: clamp(2.5rem, 5vw, 4rem);
}

.bg-legal-toc,
.bg-legal-prose {
	display: block;
	width: 100%;
	min-width: 0;
}

@container legal (min-width: 1080px) {
	.bg-legal-body {
		max-width: calc(var(--max-width-text, 720px) + var(--toc-width) + var(--toc-gap));
		display: grid;
		grid-template-columns: var(--toc-width) minmax(0, var(--max-width-text, 720px));
		gap: var(--toc-gap);
		align-items: start;
	}
	.bg-legal-toc {
		margin-bottom: 0;
		align-self: start;
	}
}

/* ---------- TOC ----------
   In flow naturale in entrambi i layout (single-col mobile-stack,
   grid 2-col desktop). Nessuno sticky/fixed: rimosso il JS che lo gestiva
   perché introduceva instabilità al reload con scrollY preservato e
   non aggiungeva valore percepibile (TOC è breve, sta tutta nella viewport).
*/
.bg-legal-toc {
	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.bg-legal-toc__label {
	font-weight: 600;
	font-size: 0.68rem;
	line-height: 1;
	letter-spacing: var(--track-wider, 0.18em);
	text-transform: uppercase;
	color: var(--text-3, rgba(242, 242, 242, 0.35));
	margin: 0 0 1.2rem;
}

.bg-legal-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--border, rgba(242, 242, 242, 0.08));
}

.bg-legal-toc__list li {
	margin: 0;
	padding: 0;
}

.bg-legal-toc__list a {
	display: block;
	padding: 0.55em 0 0.55em 1.1em;
	margin-left: -1px;
	border-left: 1px solid transparent;
	color: var(--text-2, rgba(242, 242, 242, 0.5));
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--track-body, 0);
	text-decoration: none;
	transition:
		color var(--dur-s, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		border-color var(--dur-s, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-legal-toc__list a:hover {
	color: var(--text, #F2F2F2);
	border-left-color: var(--border-hover, rgba(242, 242, 242, 0.38));
}

.bg-legal-toc__list a:focus-visible {
	outline: 2px solid var(--accent, #E63929);
	outline-offset: 2px;
	color: var(--text, #F2F2F2);
}

/* Sezione corrente — attivata via :target dopo click ancora */
.bg-legal-prose h2:target {
	scroll-margin-top: clamp(96px, 12vh, 140px);
}

/* Tutti gli h2 hanno scroll-margin per offset navbar */
.bg-legal-prose h2 {
	scroll-margin-top: clamp(96px, 12vh, 140px);
}

/* ---------- Prose body ---------- */
.bg-legal-prose {
	/* Fallback rhythm tokens */
	--rhythm-xs: 0.5em;
	--rhythm-s: 1em;
	--rhythm-m: 1.6em;
	--rhythm-l: 2.6em;

	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.8;
	letter-spacing: var(--track-body, 0);
	color: var(--text, #F2F2F2);
}

.bg-legal-prose > :first-child { margin-top: 0; }

/* Paragrafi */
.bg-legal-prose p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.8;
}

.bg-legal-prose p + p,
.bg-legal-prose ul + p,
.bg-legal-prose ol + p,
.bg-legal-prose .bg-legal-table-wrap + p {
	margin-top: var(--rhythm-s);
}

/* Strong */
.bg-legal-prose strong { font-weight: 600; color: var(--text, #F2F2F2); }

/* H2 — operativo Manrope 500 (h2-ops) */
.bg-legal-prose h2 {
	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: var(--track-tight, -0.015em);
	color: var(--text, #F2F2F2);
	margin: var(--rhythm-l) 0 0;
}

.bg-legal-prose h2 + p,
.bg-legal-prose h2 + ul,
.bg-legal-prose h2 + ol,
.bg-legal-prose h2 + .bg-legal-table-wrap {
	margin-top: var(--rhythm-s);
}

/* H3 — operativo Manrope 600, più compresso */
.bg-legal-prose h3 {
	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.35;
	letter-spacing: var(--track-tight, -0.015em);
	color: var(--text, #F2F2F2);
	margin: var(--rhythm-m) 0 0;
}

.bg-legal-prose h3 + p,
.bg-legal-prose h3 + ul,
.bg-legal-prose h3 + ol,
.bg-legal-prose h3 + .bg-legal-table-wrap {
	margin-top: 0.6em;
}

/* Liste */
.bg-legal-prose ul,
.bg-legal-prose ol {
	margin: var(--rhythm-s) 0 0;
	padding-left: 1.4em;
}

.bg-legal-prose li {
	margin: 0;
	padding: 0;
	line-height: 1.75;
}

.bg-legal-prose li + li { margin-top: 0.45em; }
.bg-legal-prose li::marker { color: var(--text-3, rgba(242, 242, 242, 0.35)); }

/* Link — Manrope 500 underline (no .link-op Lora, vietato in body Manrope) */
.bg-legal-prose a {
	color: var(--text, #F2F2F2);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--border-hover, rgba(242, 242, 242, 0.38));
	transition:
		color var(--dur-s, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		text-decoration-color var(--dur-s, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-legal-prose a:hover,
.bg-legal-prose a:focus-visible {
	color: var(--accent, #E63929);
	text-decoration-color: var(--accent, #E63929);
}

.bg-legal-prose a:focus-visible {
	outline: 2px solid var(--accent, #E63929);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Tabelle ---------- */
.bg-legal-table-wrap {
	margin: var(--rhythm-m) 0 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bg-legal-prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--f-sans, "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif);
	font-size: 0.92rem;
	line-height: 1.55;
}

.bg-legal-prose thead th {
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: var(--track-wide, 0.14em);
	text-transform: uppercase;
	color: var(--text-3, rgba(242, 242, 242, 0.35));
	text-align: left;
	vertical-align: bottom;
	padding: 0 1em 0.75em;
	border-bottom: 1px solid var(--border-hover, rgba(242, 242, 242, 0.38));
}

.bg-legal-prose tbody td {
	text-align: left;
	vertical-align: top;
	padding: 0.9em 1em;
	border-bottom: 1px solid var(--border, rgba(242, 242, 242, 0.08));
	color: var(--text, #F2F2F2);
}

.bg-legal-prose tbody tr:last-child td { border-bottom: none; }

.bg-legal-prose thead th:first-child,
.bg-legal-prose tbody td:first-child { padding-left: 0; }

.bg-legal-prose thead th:last-child,
.bg-legal-prose tbody td:last-child { padding-right: 0; }

/* ---------- Selezione ---------- */
.bg-legal-page ::selection {
	background: rgba(242, 242, 242, 0.35);
	color: var(--text, #F2F2F2);
}
.bg-legal-page ::-moz-selection {
	background: rgba(242, 242, 242, 0.35);
	color: var(--text, #F2F2F2);
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	/* Padding orizzontale 20px netti, come da token --pad-x mobile */
	.bg-legal-page .bg-legal { padding-inline: 20px; }

	/* Hero: titolo più contenuto, eyebrow più discreta */
	.bg-legal-hero { padding-block-end: 2rem; }
	.bg-legal-hero__title { font-size: clamp(1.75rem, 7vw, 2.25rem); }

	/* TOC mobile: meno pesante, separata dal contenuto */
	.bg-legal-body { padding-block-start: 2rem; }
	.bg-legal-toc {
		padding-block-end: 1.5rem;
		border-block-end: 1px solid var(--border, rgba(242, 242, 242, 0.08));
		margin-block-end: 1.5rem;
	}
	.bg-legal-toc__label { margin-bottom: 0.8rem; }
	.bg-legal-toc__list a {
		font-size: 0.82rem;
		padding-block: 0.4em;
	}

	/* Body */
	.bg-legal-prose { font-size: 0.95rem; line-height: 1.75; }
	.bg-legal-prose p { font-size: 0.95rem; line-height: 1.75; }

	/* Tabelle */
	.bg-legal-prose table { font-size: 0.85rem; }
	.bg-legal-prose thead th { font-size: 0.68rem; padding-bottom: 0.6em; }
	.bg-legal-prose tbody td { padding: 0.75em 0.6em; }
	.bg-legal-prose thead th:first-child,
	.bg-legal-prose tbody td:first-child { padding-left: 0; }
	.bg-legal-prose thead th:last-child,
	.bg-legal-prose tbody td:last-child { padding-right: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.bg-legal-prose a,
	.bg-legal-toc__list a { transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Smooth scroll (solo se preferenza utente lo consente) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}