@charset "utf-8";

/*
	Header "Fdo" (ricostruito da zero dal bundle React di produzione, docs/dom/homepage.htm +
	.newlayout/assets/index-hyXwmGwt.css, hash modulo "ewjed"). Sostituisce integralmente
	l'header del precedente sistema "Nl*" (rollback 22/07/2026). Sticky, trasparente
	sull'hero (variante rosa, sfuma a "solida" allo scroll), blu solido sulle pagine senza hero.
	Struttura HTML: custom/frontend/layout/html/common/header.htm
*/

	.FdoHeader {
		--mobile-bar-height: calc(var(--space-3) * 2 + 44px);
		position: sticky;
		isolation: isolate;
		top: 0;
		z-index: 100;
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
		font-family: var(--font-body);
		background-color: var(--color-body);
		color: var(--color-button-secondary-text);
	}

	.FdoHeader--pink, .FdoHeader--pink .FdoHeaderInner { background-color: var(--color-body); color: var(--color-button-secondary-text); }
	.FdoHeader--pink:after {
		content: "";
		position: absolute;
		right: 0; bottom: 0; left: 0;
		z-index: 101;
		height: 48px;
		background: linear-gradient(to bottom, var(--color-body), transparent);
		pointer-events: none;
		transform: translateY(100%);
		opacity: 1;
		transition: opacity .25s ease;
	}
	.FdoHeader--pink.FdoHeader--pastHero:after { opacity: 0; }

	.FdoHeader--blue, .FdoHeader--blue .FdoHeaderInner { background-color: var(--color-navbar-blue-bg); color: var(--color-body); }
	.FdoHeader--blue .FdoDesktopLinks a, .FdoHeader--blue .FdoHamburger { color: var(--color-body); }

	.FdoHeaderInner {
		position: relative;
		z-index: 102;
		display: flex;
		align-items: center;
		gap: var(--space-3);
		width: 100%;
		min-width: 0;
		max-width: var(--container-max);
		margin: 0 auto;
		padding: var(--space-3) var(--space-4);
		background-color: var(--color-body);
	}

	.FdoBrand { flex: 0 0 auto; display: inline-flex; align-items: center; min-width: 0; }
	.FdoBrandLogo { display: block; width: 44px; height: 44px; object-fit: contain; }

	/*	Il menu è generato dal backend (MenuHeader): elenco puntato senza classi.
		Lo stile è applicato per STRUTTURA. .FdoDesktopLinks è il wrapper; l'<ul> interno
		è la lista. Nascosto sotto i 1025px (compare il drawer mobile). */
	.FdoDesktopLinks { display: none; }
	.FdoDesktopLinks ul { list-style: none; margin: 0; padding: 0; }

	.FdoHeaderActions { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-2); margin-left: auto; }

	/*	Su MOBILE la barra tiene logo, "Acquista il biglietto" e hamburger. Il bottone dell'area utente
		resta invece solo dentro al menu: in barra tre elementi più l'hamburger non stanno.
		⚠️ Di conseguenza l'icona .FdoUserIcon qui sotto NON si vede su mobile: resta pronta se un
		giorno si decide di rimettere anche quel bottone nella barra.
		Dal desktop (blocco min-width 1025px in fondo al file) tornano visibili entrambi.

		(05/08/2026) "Acquista il biglietto" RIMESSO nella barra mobile: era stato nascosto insieme
		all'altro. Non serve nessuna eccezione per il flusso d'acquisto: nelle pagine del flusso il
		bottone non viene nemmeno stampato, perché i template impostano HeaderNascondiAcquista
		(evento, acquista-biglietti/*, acquista-abbonamenti/*, prenota/*, utente/registrazione).
		L'etichetta intera sta in barra fino a 320px (verificato con screenshot a 380 e 320): non
		serve accorciarla. Se un giorno rientrasse anche il bottone utente, lo spazio finirebbe. */
	.FdoHeaderActions .FdoBtn { display: none; }
	.FdoHeaderActions .FdoBtn--primary { display: inline-flex; }

	/*	BOTTONE AREA UTENTE — dal 05/08/2026 NON è più la pillola rosa con il testo: è una semplice
		ICONA BIANCA, a tutte le larghezze. L'etichetta ("Accedi / Registrati" oppure "Area utente")
		non si stampa più, ma resta nel title e nell'aria-label dell'<a>: il nome accessibile e il
		tooltip continuano a distinguere i due stati.
		Il markup conserva le classi FdoBtn/FdoBtn--secondary (servono per l'allineamento nella riga),
		quindi qui vanno neutralizzati fondo, bordo e padding della pillola.
		⚠️ Il COLORE va forzato a specificità 0,2,1 con anche :visited/:hover/:active, altrimenti vince
		global.css:513 (":where(.FdoPage) a.FdoBtn--secondary:visited") e su un link già visitato
		l'icona tornerebbe del colore del bottone. Stessa tecnica dei .FdoBtn--* e delle pastiglie promo.
		⚠️ Il colore è "inherit", NON un #ffffff fisso: l'icona prende il colore della VARIANTE di header,
		esattamente come i link del menu e l'hamburger. Sulle pagine con header BLU esce chiara
		(--color-body #ffeaf3, quella che si legge come bianca); sulla HOME, dove l'header è rosa
		chiaro, esce navy (--color-button-secondary-text) — bianca lì sarebbe invisibile.
		Il padding resta per avere un'area di click decente senza disegnare una pillola.
		HOVER: uguale alle voci di menu testuali (opacity .9 -> 1), NON da bottone. Vanno quindi
		azzerati il fondo e il translateY che .FdoBtn--secondary:hover applica (global.css:504):
		la regola qui sotto ha la stessa specificità 0,1,1 ma header.css è caricato dopo, quindi vince.
		margin-right: 10px per staccare l'icona dal bottone "Acquista il biglietto" che le sta a destra
		(si somma agli 8px di gap di .FdoHeaderActions). */
	.FdoUserBtn { padding: 6px; margin-right: 10px; border: none; border-radius: var(--radius); background-color: transparent; opacity: .9; transition: opacity .15s ease; }
	.FdoUserBtn:hover { background-color: transparent; transform: none; opacity: 1; }
	.FdoPage a.FdoUserBtn,
	.FdoPage a.FdoUserBtn:visited,
	.FdoPage a.FdoUserBtn:hover,
	.FdoPage a.FdoUserBtn:active { color: inherit; }
	.FdoUserIcon { display: block; width: 26px; height: 26px; }
	.FdoUserIcon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
	.FdoUserLabel { display: none; }
/*	La stessa icona compare anche nel menu mobile, DENTRO la pillola rosa e accanto al testo
	("Accedi / Registrati" oppure "Area utente"). Lì è dimensionata in em sul testo del bottone,
	non a 26px fissi, e la spaziatura dal testo la dà il gap di .FdoBtn. */
	.FdoMobileFooter .FdoUserIcon { width: 1.2em; height: 1.2em; }

	.FdoDesktopLinks a {
		font-family: var(--font-body);
		font-size: var(--text-button-size);
		line-height: var(--text-button-line);
		font-weight: 400;
		text-align: center;
		white-space: normal;
		opacity: .9;
		transition: opacity .15s ease;
	}
	.FdoDesktopLinks a:hover { opacity: 1; }

	.FdoHamburger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		border: none;
		border-radius: var(--radius);
		background: none;
		color: var(--color-button-secondary-text);
	}
	.FdoHamburger span { display: block; height: 2px; width: 100%; background-color: currentColor; border-radius: 2px; }

	.FdoMobileBackdrop { display: none; }

	.FdoMobileMenu {
		display: none;
		position: fixed;
		top: var(--mobile-bar-height);
		right: 0; bottom: 0; left: 0;
		z-index: 103;
		background-color: var(--color-body);
		padding: var(--space-5) var(--space-5) var(--space-7);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.FdoMobileMenu--open { display: block; }

	/*	Menu mobile: stessa sorgente MenuHeader del desktop, stile per struttura.
		Il bordo di separazione sta sul <li> così funziona anche per le voci-contenitore
		(senza <a> proprio, quando hanno un sotto-menu). */
	.FdoMobileLinks ul { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
	.FdoMobileLinks li { position: relative; border-bottom: 1px solid #ffc7dd; }
	.FdoMobileLinks a {
		display: block;
		padding: var(--space-5) 0;
		font-family: var(--font-body);
		font-size: 16px;
		line-height: var(--text-body-line);
		font-weight: 400;
		color: var(--color-button-secondary-text);
	}

	/*	Accordion: sotto-menu (ul annidato) nascosto, mostrato quando il JS aggiunge
		.FdoSubOpen sul <li>. La freccia .FdoSubToggle è iniettata dal JS solo se c'è un
		sotto-menu (voce .FdoHasSub). Il menu attuale è piatto: qui non compare nulla. */
	.FdoMobileLinks li ul { display: none; padding-left: var(--space-4); }
	.FdoMobileLinks li.FdoSubOpen > ul { display: flex; }
	.FdoMobileLinks li li { border-bottom: none; border-top: 1px solid #ffe0ec; }
	.FdoMobileLinks li li a { padding: var(--space-3) 0; opacity: .85; }
	.FdoMobileLinks .FdoHasSub > a { padding-right: 40px; }
	.FdoSubToggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: calc(var(--space-5) * 2 + var(--text-body-line) * 16px);
		color: var(--color-button-secondary-text);
	}
	.FdoSubToggle:before {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.FdoMobileLinks li.FdoSubOpen > .FdoSubToggle:before { transform: rotate(-135deg); }

	.FdoMobileFooter { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-8); }
	.FdoMobileTicket { align-self: flex-start; justify-content: center; font-size: var(--text-subtitle-size); line-height: var(--text-subtitle-line); padding: var(--space-4) var(--space-5); }
/*	"Acquista il biglietto" nel menu mobile NASCOSTO (05/08/2026): da quando il CTA è tornato nella
	barra dell'header su mobile, qui era una ripetizione. Nel drawer resta la voce area utente.
	⚠️ Il selettore NON può essere .FdoMobileTicket: quella classe la portano ENTRAMBI i bottoni del
	drawer, area utente compresa. Il discriminante è .FdoBtn--menu, usata SOLO da questo bottone in
	tutto il layout. Nessuna media query: il drawer esiste solo sotto i 1025px.
	Il markup resta (lo stampa ancora Twig, gated su HeaderNascondiAcquista): per riattivarlo basta
	togliere questa regola. */
	.FdoMobileFooter .FdoBtn--menu { display: none; }
	.FdoPrivacyLink { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); color: var(--color-button-secondary-text); text-decoration: underline; text-underline-offset: 3px; }

	@media (max-width: 1024px) {
		.FdoHeader--menuOpen .FdoHeaderInner { position: fixed; top: 0; right: 0; left: 0; z-index: 104; max-width: none; margin: 0; }
		.FdoMobileBackdrop--open { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 102; background-color: var(--color-body); touch-action: none; }
	}

	@media (min-width: 1025px) {
		.FdoHeaderInner { max-width: none; padding: var(--space-4) var(--space-6); gap: var(--space-5); }
		.FdoHeaderActions { margin-left: 0; flex-shrink: 0; }
		.FdoDesktopLinks { display: block; flex: 1 1 auto; min-width: 0; }
		.FdoDesktopLinks > ul { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-evenly; gap: var(--space-5); min-width: 0; }
		.FdoDesktopLinks > ul > li { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); text-align: center; position: relative; }
		.FdoDesktopLinks a { display: block; overflow-wrap: normal; word-break: normal; -webkit-hyphens: none; hyphens: none; }

	/*	Dropdown desktop: sotto-menu (ul annidato) mostrato al hover / focus della voce
		principale. Sfondo chiaro, testo scuro anche sulla variante header blu (specificità
		alzata per battere .FdoHeader--blue .FdoDesktopLinks a). Menu attuale piatto: inerte. */
		.FdoDesktopLinks > ul > li > ul {
			display: none;
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			min-width: 220px;
			padding: var(--space-2) 0;
			background-color: var(--color-body);
			border-radius: var(--radius);
			box-shadow: 0 8px 24px rgba(0,0,0,.15);
			z-index: 105;
		}
		.FdoDesktopLinks > ul > li:hover > ul,
		.FdoDesktopLinks > ul > li:focus-within > ul { display: block; }
		.FdoDesktopLinks > ul > li > ul > li { flex: none; text-align: left; }
		.FdoDesktopLinks li ul a,
		.FdoHeader--blue .FdoDesktopLinks li ul a { padding: var(--space-2) var(--space-4); white-space: nowrap; opacity: 1; color: var(--color-button-secondary-text); }
		.FdoDesktopLinks li ul a:hover { background-color: rgba(0,0,0,.05); }
		.FdoHamburger { display: none; }
		.FdoBrandLogo { width: 48px; height: 48px; }
		.FdoMobileMenu, .FdoMobileBackdrop { display: none !important; }

	/*	Dal desktop i due bottoni della barra tornano (qui non esiste il menu mobile che li contiene) */
		.FdoHeaderActions .FdoBtn { display: inline-flex; }

	/*	(05/08/2026) Qui prima si scambiavano icona ed etichetta: dal desktop compariva il testo
		"Accedi / Registrati" / "Area utente" dentro la pillola rosa. Ora il bottone è un'ICONA
		BIANCA a tutte le larghezze, quindi non c'è più niente da scambiare: valgono le regole base
		(.FdoUserIcon visibile, .FdoUserLabel nascosta). */
	}