/* =============================================================================
   GVN Base — Componenti condivisi.
   Usano SOLO i token di tokens.css. Le skin ridefiniscono i token, non queste
   regole. Ogni skin può comunque aggiungere ritocchi nel proprio foglio.
   ========================================================================== */

/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	/* Ancore (#cosa, #robotica…) sotto una barra che resta in cima: senza questo
	   la sezione atterra a filo schermo e il titolo finisce NASCOSTO dietro
	   l'header. Il browser si ferma un'altezza-header prima. */
	scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--leading-normal);
	color: var(--text-primary);
	background: var(--surface-page);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
button { font: inherit; cursor: pointer; }
:where(h1, h2, h3, h4) { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--text-primary); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.section { padding-block: var(--section-gap); }
.section--sm { padding-block: var(--section-gap-sm); }
.section--alt { background: var(--surface-muted); }
.section--sunken { background: var(--surface-sunken); }
.section--dark {
	background: var(--surface-dark);
	color: var(--on-surface-dark);
}
.section--dark :where(h1, h2, h3, h4) { color: var(--on-surface-dark); }
.section--brand {
	background: var(--gradient-hero);
	color: var(--text-on-dark);
}
.section--action {
	background: var(--gradient-primary);
	color: var(--text-on-dark);
}
.section--action :where(h1, h2, h3, h4) { color: var(--text-on-dark); }
.section__head { max-width: 720px; margin-bottom: var(--space-10); }
.section__head--center { margin-inline: auto; text-align: center; }

/* Archivio News (griglia di card) */
.newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6); }
.newscard { display: flex; flex-direction: column; }
.newscard__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); display: block; }
.newscard__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.newscard__meta .eyebrow { margin-bottom: 0; }
.newscard h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.newscard h3 a { color: inherit; text-decoration: none; }
.newscard h3 a:hover { color: var(--color-action); }
.newscard__more { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-semibold); font-size: var(--fs-caption); color: var(--color-action); margin-top: auto; }
.newscard__more .icon { width: 1em; height: 1em; }
@media (max-width: 900px) { .newsgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .newsgrid { grid-template-columns: 1fr; } }

/* Singolo contenuto (news / post) */
.single-entry__head { padding-block: var(--space-16) var(--space-6); }
.single-entry__meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.single-entry__meta .eyebrow { margin-bottom: 0; }
.single-entry__date { font-family: var(--font-accent); font-size: var(--fs-caption); color: var(--text-muted); }
.single-entry__title { font-size: var(--fs-h1); line-height: var(--leading-tight); max-width: 24ch; }
/* Copertina della singola news: si vede INTERA. Niente aspect-ratio + cover
   (ritagliava sopra e sotto le immagini verticali): la forma la decide la foto.
   Le proporzioni restano quelle vere perché non fissiamo mai due lati insieme;
   max-height evita che un verticale molto alto spinga il testo fuori schermo. */
.single-entry__cover .media-slot {
	width: auto; height: auto;
	max-width: 100%; max-height: 80vh;
	aspect-ratio: auto;
	object-fit: contain;
	margin-inline: auto;
	border-radius: var(--radius-lg);
}
.single-entry__body { padding-block: var(--space-10) var(--space-16); }
.single-entry__content { max-width: 720px; font-size: var(--fs-body-lg); }
.single-entry__content > * + * { margin-top: var(--space-4); }
.single-entry__back { margin-top: var(--space-10); }

.skip {
	position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
	background: var(--surface-card); color: var(--text-link);
	padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* ---------- Tipografia ---------- */
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
.display { font-size: var(--fs-display); line-height: var(--leading-none); letter-spacing: var(--tracking-tight); }
.lead { font-size: var(--fs-body-lg); color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.hl { color: var(--color-action); } /* parola evidenziata nei titoli */

/* Eyebrow: kicker mono sopra i titoli di sezione. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-accent);
	font-size: var(--fs-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-action); /* kicker = accento azione (arancione nel brand) */
	margin-bottom: var(--space-4);
}
.eyebrow .icon { width: 1.1em; height: 1.1em; }

/* Etichetta a lozenge (es. "LUXEMBOURG"). */
.lozenge {
	display: inline-block;
	font-family: var(--font-accent);
	font-size: var(--fs-micro);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-accent);
	border: var(--border-width) solid var(--border-brand);
	border-radius: var(--radius-full);
	padding: 2px 10px;
}

/* ---------- Sfondo immagine (cover + velo scuro per leggibilità) ---------- */
.section--image {
	position: relative;
	isolation: isolate;
	background-size: cover;
	background-position: center;
	color: var(--on-surface-dark);
}
.section--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(8, 35, 64, 0.72), rgba(8, 35, 64, 0.72));
}

/* ---------- Contrasto su fondo scuro / brand / immagine ----------
   Sui fondi scuri gli accenti "da fondo chiaro" (eyebrow navy, testo secondario
   grigio, titoli scuri) non si leggono. Qui li rendiamo leggibili una volta per
   tutte, per OGNI blocco che usa questi sfondi condivisi.

   Nota: lo sfondo "CSS personalizzato" con "testo chiaro" riusa `.section--dark`
   e ci sovrascrive sopra il proprio `background` inline (lo style batte sempre
   la classe). Così eredita gratis tutte le regole di contrasto qui sotto e
   quelle dei blocchi, senza duplicare selettori. */
.section--brand :where(h1, h2, h3, h4),
.section--image :where(h1, h2, h3, h4) { color: var(--on-surface-dark); }

.section--dark .eyebrow, .section--brand .eyebrow, .section--image .eyebrow {
	color: var(--accent-warm);
}
.section--action .eyebrow { color: var(--on-surface-dark); }
.section--dark .lead, .section--brand .lead, .section--image .lead, .section--action .lead,
.section--dark .muted, .section--brand .muted, .section--image .muted, .section--action .muted {
	color: color-mix(in srgb, var(--on-surface-dark) 82%, transparent);
}
.section--dark a:not(.btn), .section--brand a:not(.btn), .section--image a:not(.btn) {
	color: var(--color-action);
}

/* ---------- Icone ----------
   Nessun fill/stroke forzato qui: il colore arriva da currentColor dichiarato
   nel file SVG (fill="currentColor" per le icone piene, stroke="currentColor"
   per quelle a tratto). Questa classe gestisce solo la dimensione. */
.icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.15em;
	flex: none;
}

/* ---------- Bottoni ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-body);
	line-height: 1;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		filter var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 1.15em; height: 1.15em; }

/* Pieni — nessun bordo, solo riempimento */
.btn--primary { background: var(--color-action); color: var(--on-action); }
.btn--primary:hover { background: var(--color-action-hover); color: var(--on-action); }

.btn--gradient { background: var(--gradient-primary); color: var(--on-action); }
.btn--gradient:hover { color: var(--on-action); filter: brightness(1.06); box-shadow: var(--shadow-md); }

.btn--secondary { background: var(--color-secondary); color: var(--on-secondary); }
.btn--secondary:hover { background: var(--color-secondary-hover); color: var(--on-secondary); }

/* Contorno / ghost — bordo via box-shadow inset (non altera la dimensione) */
.btn--outline { background: transparent; color: var(--color-action); box-shadow: inset 0 0 0 2px var(--border-strong); }
.btn--outline:hover { box-shadow: inset 0 0 0 2px var(--color-action); color: var(--color-action-hover); }

.btn--ghost { background: transparent; color: var(--text-primary); }
.btn--ghost:hover { background: var(--surface-muted); color: var(--text-primary); }

/* Su fondo scuro */
.btn--on-dark { color: var(--text-on-dark); box-shadow: inset 0 0 0 2px var(--border-on-dark); }
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.10); color: var(--text-on-dark); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }

/* Sul fondo "azione" (arancione) il bottone pieno-gradient sparirebbe (arancio
   su arancio): lo rendiamo navy pieno, come nel design. */
.section--action .btn--gradient { background: var(--color-secondary); color: var(--text-on-dark); box-shadow: none; }
.section--action .btn--gradient:hover { background: var(--color-secondary-hover); color: var(--text-on-dark); filter: none; }

.btn--sm { padding: 9px 16px; font-size: var(--fs-caption); }
.btn--lg { padding: 16px 28px; font-size: var(--fs-body-lg); }
.btn--block { display: flex; width: 100%; }

/* ---------- Card (primitiva condivisa) ---------- */
.card {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
}
.card--muted { background: var(--surface-muted); box-shadow: none; }
.card--dark { background: var(--surface-dark); color: var(--on-surface-dark); border-color: var(--border-on-dark); }
.card--interactive { transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.card--featured { border-color: var(--color-action); border-width: 2px; box-shadow: var(--shadow-card); }

/* ---------- Tag / Badge ---------- */
.tag {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font-family: var(--font-accent);
	font-size: var(--fs-micro); font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide); text-transform: uppercase;
	padding: 4px 10px; border-radius: var(--radius-full);
	background: var(--color-action-subtle); color: var(--color-action);
}
.tag--neutral { background: var(--surface-muted); color: var(--text-secondary); }
.tag--solid { background: var(--color-action); color: var(--on-action); }

/* ---------- Media slot (placeholder immagini) ---------- */
.media-slot {
	display: block; width: 100%; border-radius: var(--radius-lg);
	object-fit: cover; background: var(--surface-muted);
}
.media-slot--placeholder {
	display: grid; place-items: center;
	aspect-ratio: 4 / 3; padding: var(--space-10);
	border: var(--border-width) dashed var(--border-strong);
	color: var(--text-muted);
}

/* ---------- Annuncio (scorre via) + header (si aggancia) ----------
   L'annuncio sta nel flusso normale: scorrendo esce di scena. L'header è
   `sticky`, quindi lo segue finché non tocca il bordo e lì si ferma, restando
   in cima per tutta la pagina.
   Perché funzioni, header e annuncio devono essere FRATELLI (vedi header.php):
   sticky è vincolato al proprio genitore, e un contenitore alto quanto i due
   insieme lo scaricherebbe subito fuori schermo. */
:root { --header-h: 72px; }

.announce {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: var(--space-2) var(--space-4);
	width: 100%; min-height: 40px; padding: 6px var(--gutter);
	background: var(--gradient-primary); color: var(--text-on-dark);
	font-size: var(--fs-small); font-weight: var(--weight-semibold);
	text-align: center; text-decoration: none;
}
.announce:hover { color: var(--text-on-dark); filter: brightness(1.04); }
.announce__msg { display: inline-flex; align-items: center; gap: var(--space-2); }
.announce__more { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); }
.announce .icon { width: 1.05em; height: 1.05em; }

/* ---------- Header ---------- */
.header {
	position: sticky; top: 0; z-index: var(--z-header);
	background: color-mix(in srgb, var(--surface-page) 90%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: var(--border-width) solid var(--border-default);
	transition: background var(--duration-normal) var(--ease-standard),
		border-color var(--duration-normal) var(--ease-standard);
}
.header__inner { display: flex; align-items: center; gap: var(--space-8); min-height: var(--header-h); }
.header__logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.header__logo-img { display: inline-flex; }
.header__logo-img .logo-img, .header__logo-img img, .header__logo-img svg { height: 30px; width: auto; }
.header__logo-img--white { display: none; }
.header__loc {
	font-family: var(--font-accent); font-size: var(--fs-micro);
	letter-spacing: var(--tracking-wide); text-transform: uppercase;
	color: var(--color-action);
	padding-left: var(--space-3); border-left: var(--border-width) solid var(--border-default);
}
.nav { display: flex; align-items: center; gap: var(--space-6); flex: 1; }
.nav a {
	color: var(--text-secondary); font-weight: var(--weight-semibold);
	padding: var(--space-2) 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a.is-active { color: var(--text-primary); border-color: var(--color-action); }
/* margin auto, non il flex:1 della nav: su mobile la nav è display:none e senza
   questo le azioni (hamburger) restavano attaccate al logo invece che a destra. */
.header__actions { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.header__cta {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 9px 18px; border-radius: var(--radius-md);
	background: var(--color-action); color: var(--on-action);
	font-weight: var(--weight-semibold); font-size: var(--fs-caption);
	text-decoration: none; white-space: nowrap;
	transition: background var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.header__cta:hover { background: var(--color-action-hover); color: var(--on-action); }
.hamburger { display: none; background: transparent; border: 0; color: var(--text-primary); padding: var(--space-2); }
.hamburger .icon { width: 26px; height: 26px; }

/* Niente padding di compensazione su body.top-solid: l'header ora sta NEL
   flusso (sticky), lo spazio se lo prende da sé. Serviva con position:fixed,
   che invece lo toglieva dal flusso e faceva finire il contenuto sotto. */

/* ---------- Header overlay su prima sezione scura: trasparente, poi solido su scroll ----------
   Qui l'header deve galleggiare SOPRA la hero, quindi non deve occupare spazio:
   il margine negativo lo "smaterializza" dal flusso e la sezione seguente gli
   risale sotto (lo sfondo scuro passa dietro alla barra). Resta comunque sticky. */
body.top-overlay .header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; margin-bottom: calc(-1 * var(--header-h)); }
body.top-overlay .header .nav a { color: color-mix(in srgb, var(--text-on-dark) 85%, transparent); border-bottom-color: transparent; }
body.top-overlay .header .nav a:hover, body.top-overlay .header .nav a.is-active { color: var(--text-on-dark); border-bottom-color: var(--accent-warm); }
body.top-overlay .header .header__loc { color: var(--accent-warm); border-left-color: color-mix(in srgb, var(--text-on-dark) 30%, transparent); }
body.top-overlay .header .header__logo-img--color { display: none; }
body.top-overlay .header .header__logo-img--white { display: inline-flex; }
body.top-overlay .header .hamburger { color: var(--text-on-dark); }
body.top-overlay .header .header__cta { background: transparent; color: var(--text-on-dark); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-on-dark) 55%, transparent); }
body.top-overlay .header .header__cta:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-on-dark); }
/* In overlay la barra galleggia sopra il contenuto: la prima sezione recupera
   quello spazio, altrimenti il suo testo ci finisce sotto. Il suo sfondo passa
   invece dietro alla barra, che è l'effetto voluto. (Solo l'header: l'annuncio
   ora sta nel flusso e lo spazio se l'è già preso.) */
body.top-overlay #main > .section:first-child { padding-top: calc(var(--header-h) + var(--section-gap)); }

/* Stato scrolled: header solido (anche in overlay). */
.header.is-scrolled,
body.top-overlay .header.is-scrolled {
	background: color-mix(in srgb, var(--surface-page) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom-color: var(--border-default);
}
body.top-overlay .header.is-scrolled .nav a { color: var(--text-secondary); }
body.top-overlay .header.is-scrolled .nav a:hover, body.top-overlay .header.is-scrolled .nav a.is-active { color: var(--text-primary); border-bottom-color: var(--color-action); }
body.top-overlay .header.is-scrolled .header__loc { color: var(--color-action); border-left-color: var(--border-default); }
body.top-overlay .header.is-scrolled .header__logo-img--color { display: inline-flex; }
body.top-overlay .header.is-scrolled .header__logo-img--white { display: none; }
body.top-overlay .header.is-scrolled .hamburger { color: var(--text-primary); }
body.top-overlay .header.is-scrolled .header__cta { background: var(--color-action); color: var(--on-action); box-shadow: none; }

/* ---------- Drawer mobile ----------
   Apre e chiude in animazione: il pannello scorre da destra, la velatura sfuma.
   Non si usa display:none/block (non è animabile: il browser non ha stati
   intermedi fra "non c'è" e "c'è"). Si usa visibility, che invece si può
   RITARDARE: nascondi solo a fine corsa, altrimenti in chiusura il drawer
   sparirebbe di colpo senza far vedere l'uscita. */
.drawer {
	position: fixed; inset: 0; z-index: var(--z-drawer);
	visibility: hidden; pointer-events: none;
	transition: visibility 0s linear var(--duration-slow);
}
.drawer.is-open {
	visibility: visible; pointer-events: auto;
	transition-delay: 0s;   /* in apertura invece è subito visibile */
}
.drawer__overlay {
	position: absolute; inset: 0; background: rgba(16, 24, 40, 0.4);
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-standard);
}
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel {
	position: absolute; inset-block: 0; inset-inline-end: 0;
	width: min(360px, 86vw); background: var(--surface-card);
	padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5);
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform var(--duration-slow) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__head img, .drawer__head svg { height: 30px; }
.drawer__close { background: transparent; border: 0; color: var(--text-primary); }
.drawer__nav { display: flex; flex-direction: column; gap: var(--space-2); }
.drawer__nav a { font-size: var(--fs-h4); color: var(--text-primary); padding: var(--space-2) 0; }
.drawer__foot { margin-top: auto; }

/* ---------- Footer ---------- */
.footer { background: var(--surface-dark); color: var(--on-surface-dark); }
.footer :where(h4) {
	color: color-mix(in srgb, var(--on-surface-dark) 55%, transparent);
	font-size: var(--fs-micro); font-weight: var(--weight-bold);
	text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4);
}
.footer a { color: color-mix(in srgb, var(--on-surface-dark) 74%, transparent); text-decoration: none; }
.footer a:hover { color: var(--on-surface-dark); }
.footer__grid {
	display: grid; gap: var(--space-10);
	grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
	padding-block: var(--space-16) var(--space-10);
}
.footer__logo { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.footer__logo .logo-img, .footer__logo img, .footer__logo svg { height: 32px; width: auto; }
.footer__logo .header__loc { color: var(--accent-warm); border-left-color: color-mix(in srgb, var(--on-surface-dark) 28%, transparent); }
.footer__tag { margin: 0; display: flex; flex-direction: column; }
.footer__tag-line { font-family: var(--font-accent); font-size: var(--fs-caption); color: color-mix(in srgb, var(--on-surface-dark) 70%, transparent); }
.footer__tag-line--accent { color: var(--color-action); font-weight: var(--weight-bold); }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.footer__office p { color: color-mix(in srgb, var(--on-surface-dark) 74%, transparent); line-height: 1.7; margin: 0 0 var(--space-3); }
.footer .footer__email { color: var(--accent-warm); }
.footer__bar { border-top: var(--border-width) solid color-mix(in srgb, var(--on-surface-dark) 12%, transparent); }
.footer__bar-inner {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
	padding-block: var(--space-5);
	font-size: var(--fs-small); color: color-mix(in srgb, var(--on-surface-dark) 58%, transparent);
}

/* ---------- Segnaposto nell'editor (blocco vuoto) ---------- */
.gvn-ph {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-12) var(--space-6);
	margin: var(--space-4);
	border: 2px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	background: var(--surface-muted);
	color: var(--text-muted);
}
.gvn-ph strong { color: var(--text-secondary); font-size: var(--fs-h4); }

/* ---------- Reveal on scroll (hook JS) ----------
   Lo stato nascosto si applica SOLO quando il JS è attivo (classe .js su <html>,
   impostata nell'header). Senza JS — editor a blocchi e utenti no-JS — il
   contenuto resta sempre visibile, mai opacity:0. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
	.nav, .header__cta { display: none; }
	/* Il margine negativo recupera il padding del bottone (che serve al tocco):
	   così l'ICONA finisce a filo della colonna, in asse col logo a sinistra. */
	.hamburger { display: inline-flex; margin-inline-end: calc(-1 * var(--space-2)); }
	.announce { font-size: var(--fs-micro); }
	.announce__more { display: none; }
	/* Niente override dell'overlay: si accende solo sopra una sezione scura, che
	   regge logo e hamburger bianchi anche qui. La prima sezione recupera lo
	   spazio con la regola condivisa, su --section-gap già ridotto qui sotto. */
	.footer__grid { grid-template-columns: 1fr; }
	:root { --section-gap: var(--space-12); }
}

/* ---------- Widget WhatsApp: bottone flottante + popup ----------
   Il wrapper è l'elemento fisso; il bottone e il pannello vivono dentro, così
   il popup si àncora sopra al bottone senza calcoli di posizione. */
.wa {
  position: fixed;
  z-index: 2;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

/* Il pannello riusa la primitiva .card (fondo, bordo, raggio): qui azzeriamo
   il padding, perché la testata dev'essere a tutta larghezza. */
.wa__panel {
  width: min(320px, calc(100vw - 40px));
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  display: none; /* senza JS il popup non si può aprire: non esiste */
}
.js .wa__panel {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom right;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              visibility 0s linear var(--duration-normal);
}
.js .wa__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s; /* in apertura la visibility non aspetta */
}

.wa__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--gradient-primary);
  color: var(--text-on-dark);
}
.wa__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.wa__avatar .icon { width: 22px; height: 22px; }
.wa__title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-body-lg);
  line-height: var(--leading-tight);
}
.wa__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}
.wa__close:hover { background: rgba(255, 255, 255, 0.32); }
.wa__close .icon { width: 18px; height: 18px; }

.wa__body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-muted);
}
.wa__bubble {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
/* Codina del fumetto, allineata alla prima riga di testo. */
.wa__bubble::before {
  content: "";
  position: absolute;
  top: var(--space-4);
  left: -7px;
  border: 7px solid transparent;
  border-left: 0;
  border-right-color: var(--surface-card);
}
.wa__cta { justify-self: end; }

.whatsapp {
  position: relative;
  display: block;
  height: 60px;
  width: 60px;
  background: #25d366 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0s4.686 12.283 0 16.97a12 12 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12 12 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.85 9.85 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918s-10.075-3.843-13.918 0a9.85 9.85 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22zm6.534-7.003-.933 1.164a9.84 9.84 0 0 1-3.497-3.495l1.166-.933a.79.79 0 0 0 .23-.94L9.561 6.96a.79.79 0 0 0-.924-.445l-2.023.524a.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.79.79 0 0 0-.445-.923L14.6 13.327a.79.79 0 0 0-.94.23z'/%3E%3C/svg%3E") 50%/60% no-repeat;
  color: inherit;
  border-radius: 50%;
  box-shadow: 1px 6px 24px 0 rgba(7,94,84,.24);
  cursor: pointer;
  --wa-delay: 700ms;  /* attesa: entra a pagina assestata */
  --wa-dur:   640ms;  /* durata della molla */
  transition: background-color .2s ease-in-out,
              transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
  animation: gvn-whatsapp-in var(--wa-dur) var(--wa-delay) backwards,
             gvn-whatsapp-fade 180ms var(--ease-out) var(--wa-delay) backwards;
}
.whatsapp:hover { transform: scale(1.06); box-shadow: 1px 10px 30px 0 rgba(7,94,84,.32); }
.whatsapp:active { transform: scale(.96); }

/* Onda che si stacca dal bottone nell'istante in cui la molla tocca il picco. */
.whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0; /* niente fill-mode: fuori dall'animazione resta invisibile */
  pointer-events: none;
  animation: gvn-whatsapp-ring 900ms var(--ease-out)
             calc(var(--wa-delay) + var(--wa-dur) * .38);
}

/* Comparsa: molla smorzata (ζ≈0.5). I picchi 1.16 / 0.97 / 1.01 sono i rimbalzi
   successivi, sempre più piccoli. Ogni tappa porta la sua curva: la partenza è
   uno scatto che rallenta verso il picco, poi i tratti fra un'inversione e
   l'altra sono ease-in-out, perché lì la velocità è zero. `backwards` tiene lo
   stato iniziale durante il delay: niente lampeggio. */
@keyframes gvn-whatsapp-in {
	0%   { transform: scale(0);    animation-timing-function: cubic-bezier(.15,.9,.3,1); }
	38%  { transform: scale(1.16); animation-timing-function: cubic-bezier(.45,0,.55,1); }
	65%  { transform: scale(.97);  animation-timing-function: cubic-bezier(.45,0,.55,1); }
	86%  { transform: scale(1.01); animation-timing-function: cubic-bezier(.45,0,.55,1); }
	100% { transform: scale(1); }
}

@keyframes gvn-whatsapp-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes gvn-whatsapp-ring {
	from { opacity: .5; transform: scale(1); }
	to   { opacity: 0;  transform: scale(2); }
}

/* I token --duration-* azzerati non toccano le animation: serve l'override. */
@media (prefers-reduced-motion: reduce) {
	.whatsapp, .whatsapp::after { animation: none; }
	.whatsapp:hover, .whatsapp:active { transform: none; }
}