@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 solo logo e hamburger: i due bottoni (area utente e "Acquista il
		biglietto") sono già dentro al menu, e ripeterli nella barra affolla la riga. Tornano
		visibili dal desktop (blocco min-width 1025px in fondo al file), dove il menu mobile non c'è.
		⚠️ Di conseguenza l'icona qui sotto NON si vede più su mobile: resta pronta se si decide di
		rimettere il bottone nella barra a quella larghezza. */
	.FdoHeaderActions .FdoBtn { display: none; }

	/*	BOTTONE AREA UTENTE — resta il bottone rosa (.FdoBtn--secondary) in tutto e per tutto:
		cambia SOLO il contenuto. Su MOBILE l'icona dell'account, dal desktop (min-width 1025px,
		sotto) l'etichetta di testo. Vale nei due stati, "Accedi / Registrati" e "Area utente";
		il nome resta comunque nell'aria-label dell'<a>, che il testo si veda o no.
		L'icona è dimensionata in em sulla riga del bottone (18px), così l'altezza della pillola
		resta identica a quella della versione con il testo e a quella del bottone accanto. */
	.FdoUserIcon { display: block; width: 1.35em; height: 1.35em; }
	.FdoUserIcon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
	.FdoUserLabel { display: none; }

	.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); }
	.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; }

	/*	Area utente: dal desktop dentro il bottone si vede l'etichetta al posto dell'icona
		(l'aspetto del bottone non cambia mai, in nessuno dei due casi). */
		.FdoUserIcon { display: none; }
		.FdoUserLabel { display: block; }
	}