/* ============================================================
   LiveSofia - restyle header (desktop) - aggiunto 2026-09-29
   Caricato su tutte le pagine da functions.php (lv-header).
   Le righe desktop del header builder sono .ax-hb-row-normal;
   quelle mobile (.ax-hb-row-mobile) solo per l'altezza del logo (in fondo).
   ============================================================ */

/* Riga principale (fissa in alto): sfondo scuro con sfocatura,
   così il contenuto che scorre sotto non si sovrappone al menu */
.ax-sticky-top-wrapper.ax-hb-row-2 {
	background: rgba(8, 8, 12, .86) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Logo più compatto: l'immagine è un quadrato con la "pillola" al centro */
.ax-hb-row-normal.ax-hb-row-2 .ax-id img {
	max-height: 96px !important;
	width: auto !important;
}

/* Menu centrato nello spazio tra logo e icone di destra:
   il contenitore sinistro del tema non cresce (flex 0 0 auto), lo faccio espandere */
.ax-hb-row-normal.ax-hb-row-2 .ax-bin-1 { flex: 1 1 auto !important; min-width: 0; }
.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-left { align-items: center; width: 100%; }
.ax-hb-row-normal.ax-hb-row-2 nav.ax-primary-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}
/* Su schermi larghi c'è spazio per centrarlo esattamente sulla pagina */
@media (min-width: 1600px) {
	.ax-hb-row-normal.ax-hb-row-2 nav.ax-primary-nav {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		flex: none;
	}
}
#ax-primary-nav-menu {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 4px;
}

/* Voci: più leggere, maiuscolo spaziato, mai a capo */
#ax-primary-nav-menu > li > a {
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	color: #e9eaef !important;
	padding: 10px 14px !important;
	position: relative;
	transition: color .15s;
}
#ax-primary-nav-menu > li > a:hover { color: #fff !important; }

/* Schermi medi: voci più compatte per stare su una riga */
@media (max-width: 1439px) {
	#ax-primary-nav-menu > li > a {
		font-size: 14px !important;
		letter-spacing: .06em !important;
		padding: 10px 10px !important;
	}
	.ax-hb-row-normal #ax-primary-nav-menu > li > a::before { left: 10px !important; right: 10px !important; }
}
@media (max-width: 1199px) {
	#ax-primary-nav-menu > li > a {
		font-size: 13px !important;
		letter-spacing: .04em !important;
		padding: 8px 8px !important;
	}
	.ax-hb-row-normal #ax-primary-nav-menu > li > a::before { left: 8px !important; right: 8px !important; }
	.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-right { gap: 8px; }
}
/* Fascia più stretta dell'header desktop (sotto 1025px il tema passa al mobile) */
@media (max-width: 1099px) {
	#ax-primary-nav-menu > li > a {
		font-size: 12px !important;
		letter-spacing: .02em !important;
		padding: 8px 6px !important;
	}
	.ax-hb-row-normal #ax-primary-nav-menu > li > a::before { left: 6px !important; right: 6px !important; }
	/* l'icona "Follow us" (social) lascia spazio al menu */
	.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-right > .ax-drop:has(.ax-socials-item-link) { display: none !important; }
}

/* Sottolineatura pink animata (sostituisce l'indicatore del tema) */
#ax-primary-nav-menu > li > a::before {
	content: "" !important;
	position: absolute !important;
	left: 14px !important;
	right: 14px !important;
	top: auto !important;
	bottom: 2px !important;
	width: auto !important;
	height: 2px !important;
	border-radius: 2px;
	background: #ef003b !important;
	opacity: 1 !important;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}
#ax-primary-nav-menu > li > a:hover::before { transform: scaleX(1); }

/* Voce attiva: bianca con sottolineatura piena (prima era grigia) */
#ax-primary-nav-menu > li.current-menu-item > a,
#ax-primary-nav-menu > li.current_page_item > a,
#ax-primary-nav-menu > li.current-menu-ancestor > a { color: #fff !important; }
#ax-primary-nav-menu > li.current-menu-item > a::before,
#ax-primary-nav-menu > li.current_page_item > a::before,
#ax-primary-nav-menu > li.current-menu-ancestor > a::before { transform: scaleX(1); }

/* Live in onda: pallino rosso pulsante (classe aggiunta da functions.php).
   Solo menu dell'header desktop e pannello mobile, non il footer. */
#ax-primary-nav-menu .lv-onair > a::after,
#ax-canvas-primary-nav-menu .lv-onair > a::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	vertical-align: middle;
	border-radius: 50%;
	background: #ff2d55;
	animation: lvHdrPulse 1.5s infinite;
}
@keyframes lvHdrPulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 45, 85, .7); }
	70%  { box-shadow: 0 0 0 8px rgba(255, 45, 85, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); }
}

/* Icone di destra: bianche, hover pink */
.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-right { align-items: center; gap: 12px; }
.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-right .ax-drop-toggle {
	color: #e9eaef !important;
	transition: color .15s;
}
.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-right .ax-drop-toggle:hover { color: #ef003b !important; }

/* Icona Login: il glifo del font icone non esiste (appariva un quadrato bianco).
   Sostituito con un'icona utente SVG che prende il colore del link. */
.ax-hb-row-normal .ax-drop-toggle.axplus-login-required .ax-drop-toggle-icon::before { content: "" !important; }
.ax-hb-row-normal .ax-drop-toggle.axplus-login-required .ax-drop-toggle-icon {
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	vertical-align: middle;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
	background: currentColor !important;
}

/* GET ACCESS: pillola con leggero glow */
.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-right .ax-button {
	border-radius: 999px !important;
	padding: 9px 20px !important;
	letter-spacing: .06em;
	box-shadow: 0 6px 20px rgba(239, 0, 59, .35);
	transition: transform .15s, box-shadow .15s;
}
.ax-hb-row-normal.ax-hb-row-2 .ax-bin-align-right .ax-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(239, 0, 59, .5);
}

/* Barra superiore (LOGIN / menu account): più discreta.
   Prima: viola #24003A con bordo grigio chiaro e testo a 20px. */
.ax-hb-row-normal.ax-hb-row-1 .ax-row-background {
	background: #0b0b10 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.ax-hb-row-normal.ax-hb-row-1 .ax-secondary-nav a {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	color: #b9bcc6 !important;
	transition: color .15s;
}
.ax-hb-row-normal.ax-hb-row-1 .ax-secondary-nav a:hover { color: #ef003b !important; }

/* ============================================================
   Barra "Prossimo show / In onda ora" in cima a tutte le pagine
   (markup: lv_header_countdown_html() in functions.php, stampata da header.php;
    conto alla rovescia: js/lv-countdown.js). Tutta la barra porta alla Live.
   ============================================================ */
.lv-topbar {
	position: relative;
	z-index: 6;
	background: linear-gradient(90deg, #0b0b10 0%, #22061a 50%, #0b0b10 100%);
	border-bottom: 1px solid rgba(239, 0, 59, .35);
}
.lv-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	min-height: 48px;
	padding: 6px 16px;
	box-sizing: border-box;
	color: #e9eaef !important;
	text-decoration: none !important;
}
.lv-tb-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #ff6b93;
	white-space: nowrap;
}
.lv-tb-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff2d55;
	animation: lvHdrPulse 1.5s infinite;
}
.lv-tb-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}
.lv-tb-title em {
	margin-left: 4px;
	font-style: normal;
	font-weight: 500;
	color: #b9bcc6;
}
.lv-tb-count { display: inline-flex; gap: 5px; }
.lv-tb-u {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 1px;
	min-width: 42px;
	padding: 4px 7px;
	box-sizing: border-box;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
}
.lv-tb-u b {
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.lv-tb-u i {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: #9aa0a8;
}
.lv-tb-u.lv-tb-u-zero { display: none; } /* giorni a zero: si nasconde la casella */
.lv-tb-cta {
	padding: 6px 14px;
	border-radius: 999px;
	background: #ef003b;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(239, 0, 59, .35);
	transition: background .15s, transform .15s;
}
.lv-topbar-inner:hover .lv-tb-cta { background: #c60031; transform: translateY(-1px); }

/* In onda: barra rossa, pallino bianco, pulsante "Guarda ora" bianco */
.lv-topbar.lv-topbar-live {
	background: linear-gradient(90deg, #4d0016 0%, #ef003b 50%, #4d0016 100%);
	border-bottom-color: #ff2d55;
}
.lv-topbar-live .lv-tb-label { color: #fff; }
.lv-topbar-live .lv-tb-dot { background: #fff; animation-name: lvTbPulseWhite; }
@keyframes lvTbPulseWhite {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
	70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.lv-topbar-live .lv-tb-title em,
.lv-topbar-live .lv-tb-count { display: none; }
.lv-topbar-live .lv-tb-cta {
	background: #fff;
	color: #ef003b;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.lv-topbar-live .lv-topbar-inner:hover .lv-tb-cta { background: #ffe3ea; }

/* Cellulare: etichetta + conto alla rovescia su una riga (tocco = pagina Live) */
@media (max-width: 760px) {
	.lv-topbar-inner {
		flex-wrap: nowrap;
		gap: 10px;
		min-height: 44px;
		padding: 6px 10px;
	}
	.lv-tb-title,
	.lv-tb-cta { display: none; }
	.lv-tb-u { min-width: 0; padding: 3px 6px; }
	.lv-tb-u b { font-size: 14px; }
	.lv-topbar-live .lv-tb-title {
		display: block;
		min-width: 0;
		flex: 1 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
	}
	.lv-topbar-live .lv-tb-cta { display: inline-block; padding: 5px 10px; font-size: 11px; }
}

/* ---------- Header mobile più compatto (aggiunto 2026-09-29, con le card delle scene) ----------
   Il logo è un'immagine quadrata 140x140 con la "pillola" al centro: la ritaglio in altezza
   invece di rimpicciolirla, così la riga passa da ~154px a ~64px e il logo resta leggibile */
.ax-hb-row-mobile.ax-hb-row-2 .ax-id img {
	width: 140px !important;
	height: 60px !important;
	object-fit: cover;
	object-position: center;
}
.ax-hb-row-mobile.ax-hb-row-2 .ax-row-inner { min-height: 0 !important; padding-top: 2px; padding-bottom: 2px; }