/*
 * Barra del sito: striscia del Televideo, riga con logo, menu e azioni, pannello del telefono.
 * Mobile first: senza media query vale il telefono; 901px desktop, 1181px "prossimo raduno".
 * Il tono (data-tone sull'header) lo cambia on-site.js secondo la sezione che passa sotto.
 */

.on-bar {
	--on-focus: var(--on-white);
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--on-z-header);
	color: var(--on-white);
	font-family: var(--on-font-cond);
}

/* Sopra i 600px la barra di amministrazione di WordPress è fissa: la barra scende sotto di lei */
@media (min-width: 601px) {
	.admin-bar .on-bar {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

/* Nell'editor di Elementor una barra fissa coprirebbe la pagina che si sta modificando */
.elementor-editor-active .on-bar {
	position: relative;
}

/*
 * La barra è fissa e copre l'inizio della pagina. Le pagine Elementor a tutta larghezza
 * (main.on-main) lo prevedono già nelle sezioni; le pagine rese da PHP no.
 */
#content.site-main:not(.on-main) {
	padding-top: var(--on-bar-h);
}

/* ---------------------------------------------------------------------
 * Striscia del Televideo
 * ------------------------------------------------------------------ */

.on-bar__tv {
	position: relative;
	z-index: var(--on-z-raised);
	display: flex;
	align-items: center;
	height: var(--on-bar-tv-h);
	overflow: hidden;
	background: var(--on-tv-black);
	color: var(--on-tv-green);
	font-family: var(--on-font-tv);
	font-size: 1.125rem;
	letter-spacing: .01em;
	line-height: 1;
	white-space: nowrap;
}

.on-bar__page,
.on-bar__clock {
	display: flex;
	flex: none;
	align-items: center;
	height: 100%;
	padding: 0 14px;
}

.on-bar__page {
	background: var(--on-tv-green);
	color: var(--on-tv-black);
}

/* Finché nessuna sezione dichiara la sua pagina, il riquadro non si vede */
.on-bar__page:has([data-on-page]:empty) {
	display: none;
}

.on-bar__clock {
	color: var(--on-tv-yellow);
}

.on-bar__tape {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	scrollbar-width: none;
}

.on-bar__tape::-webkit-scrollbar {
	display: none;
}

/*
 * Nastro fermo (niente JS, focus dentro, pausa, movimento ridotto): riparte dall'inizio e
 * diventa una fascia scorrevole, così nessuna notizia resta tagliata o fuori vista
 * (WCAG 1.4.10) e il link con il focus si vede (2.4.7, 2.4.11).
 */
.no-js .on-bar__tape,
.on-bar__tape:focus-within,
.on-bar__tape.is-paused {
	overflow-x: auto;
	overflow-y: hidden;
}

.on-bar__tape-in {
	flex: none;
	margin: 0;
	padding-left: 16px;
}

/* Scorre solo con il JS, che porta anche il bottone per fermarlo */
.js .on-bar__tape-in {
	padding-left: 100%;
	animation: on-nastro var(--on-nastro-durata, 48s) linear infinite;
}

/* Sotto il mouse si ferma dov'è; con il focus o con il bottone torna all'inizio, scorrevole */
.on-bar__tape:hover .on-bar__tape-in {
	animation-play-state: paused;
}

.js .on-bar__tape:focus-within .on-bar__tape-in,
.js .on-bar__tape.is-paused .on-bar__tape-in {
	padding-left: 16px;
	animation: none;
}

.on-bar__intro,
.on-bar__voce {
	margin-right: 2.5em;
}

.on-bar__voce b {
	color: var(--on-white);
	font-weight: 400;
}

.on-bar__voce a {
	color: inherit;
	text-decoration: none;
}

.on-bar__voce a:hover {
	text-decoration: underline;
}

.on-bar__tv :focus-visible {
	outline-offset: -2px;
}

@keyframes on-nastro {
	to {
		transform: translateX(-100%);
	}
}

@media (min-width: 901px) {
	.on-bar__tv {
		font-size: 1.25rem;
	}
}

/* ---------------------------------------------------------------------
 * Bottone di pausa (nastro e sciarpa): due barre, che diventano un triangolo quando è fermo
 * ------------------------------------------------------------------ */

.on-pausa {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: var(--on-bar-tv-h);
	height: var(--on-bar-tv-h);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.on-pausa[hidden] {
	display: none;
}

/*
 * Lo stile bottoni del kit (Theme Style) vale per ogni <button> della pagina
 * (.elementor-kit-N button, anche :hover e :focus): i controlli della barra non sono
 * bottoni di quel tipo, quindi qui si riportano al loro aspetto con un selettore più forte.
 */
.on-bar button.on-pausa,
.on-bar button.on-pausa:hover,
.on-bar button.on-pausa:focus,
.on-bar button.on-bar__burger,
.on-bar button.on-bar__burger:hover,
.on-bar button.on-bar__burger:focus {
	background-color: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.on-bar button.on-bar__burger {
	border-radius: var(--on-radius-s);
}

.on-pausa__ico {
	display: block;
	box-sizing: border-box;
	width: 10px;
	height: 12px;
	border-right: 3px solid currentColor;
	border-left: 3px solid currentColor;
}

.on-pausa[aria-pressed="true"] .on-pausa__ico {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-right: 0;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
}

/* ---------------------------------------------------------------------
 * Riga: logo, menu, azioni
 * ------------------------------------------------------------------ */

.on-bar__row {
	position: relative;
	z-index: var(--on-z-raised);
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	/*
	 * Riga alta esattamente --on-bar-h meno la striscia (56 telefono, 72 desktop): il bottone
	 * del menu (44) più 6+6 di padding. Così padding delle pagine e scroll-padding tornano.
	 * on-site.js misura comunque la barra (zoom del testo) e aggiorna --on-bar-h.
	 */
	min-height: calc(var(--on-bar-h) - var(--on-bar-tv-h));
	padding: 6px var(--on-gutter);
	transition: background-color .4s, color .4s, box-shadow .4s;
}

/*
 * Fondo della riga secondo il tono della sezione sotto la barra: prototipo home.css:59 (carta),
 * 524 (nero) e 530 (verde), cioè lo stato body.past. Prima che la scena dell'apertura sia
 * passata la riga è trasparente: lo decide on-apertura-tv.css (html.on-apertura-montata).
 */
.on-bar[data-tone="dark"] .on-bar__row {
	background: color-mix(in srgb, var(--on-black) 82%, transparent);
	color: var(--on-white);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--on-white) 12%, transparent), 0 3px 0 var(--on-green);
}

.on-bar[data-tone="light"] {
	--on-focus: var(--on-green-ink);
}

/* La striscia del Televideo è sempre nera: anello bianco su ogni tono (il verde inchiostro sul nero dà 2,3:1) */
.on-bar__tv {
	--on-focus: var(--on-white);
}

/* A menu aperto la riga diventa nera anche sul tono chiaro: anello bianco */
.on-menu-aperto .on-bar {
	--on-focus: var(--on-white);
}

/* Sul telefono niente sfocatura dietro la barra (costa): fondo quasi pieno */
.on-bar[data-tone="light"] .on-bar__row {
	background: color-mix(in srgb, var(--on-paper) 97%, transparent);
	color: var(--on-ink);
	box-shadow: 0 1px 0 var(--on-line), 0 3px 0 var(--on-green);
}

/* Verde del campo come nel prototipo (home.css:530): rgba(0, 110, 40, .9) */
.on-bar[data-tone="green"] .on-bar__row {
	background: rgb(0 110 40 / .9);
	color: var(--on-white);
	box-shadow: 0 1px 0 var(--on-line-inv), 0 3px 0 var(--on-black);
}

.on-bar[data-tone="green"] :focus-visible {
	box-shadow: 0 0 0 4px var(--on-black);
}

.on-menu-aperto .on-bar .on-bar__row {
	background: color-mix(in srgb, var(--on-black) 96%, transparent);
	color: var(--on-white);
}

.on-menu-aperto {
	overflow: hidden;
}

@media (min-width: 901px) {
	.on-bar__row {
		grid-template-columns: 1fr auto 1fr;
		padding-block: 9px;
	}

	.on-bar[data-tone="light"] .on-bar__row {
		background: color-mix(in srgb, var(--on-paper) 92%, transparent);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

/* Logo: versione chiara sul nero e sul verde, a colori sulla carta */
.on-bar__brand {
	display: flex;
	align-items: center;
	justify-self: start;
}

.on-bar__logo {
	display: block;
	filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--on-shade) 18%, transparent));
	transition: transform var(--on-dur-3) var(--on-ease-out);
}

/*
 * Misure dello scudo (prototipo home.css:35 e 826-827: 54 px, 40 px sul telefono).
 * Selettore forte: .elementor img { height: auto } di Elementor (0,1,1) batteva .on-bar__logo
 * (0,1,0) e lo scudo usciva alto 216 px, con la barra che copriva l'inizio delle pagine.
 * Qui solo misure: display resta alle regole sotto, che scelgono la versione chiara o scura.
 */
.on-bar .on-bar__brand img.on-bar__logo {
	width: auto;
	max-width: none;
	height: 40px;
}

.on-bar__logo--scuro {
	display: none;
}

.on-bar[data-tone="light"] .on-bar__logo--chiaro {
	display: none;
}

.on-bar[data-tone="light"] .on-bar__logo--scuro {
	display: block;
}

/* A menu aperto il fondo è nero: torna lo scudo chiaro, con l'ombra piena (prototipo home.css:891) */
.on-menu-aperto .on-bar .on-bar__logo--chiaro {
	display: block;
	filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--on-shade) 40%, transparent));
}

.on-menu-aperto .on-bar .on-bar__logo--scuro {
	display: none;
}

@media (min-width: 901px) {
	.on-bar .on-bar__brand img.on-bar__logo {
		height: 54px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.on-bar__brand:hover .on-bar__logo {
		transform: rotate(-5deg) scale(1.05);
	}
}

/* Menu principale: una pillola con le voci, la voce della sezione corrente si accende */
.on-bar__nav {
	display: none;
}

.on-bar__menu {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 4px 6px;
	border: 1px solid color-mix(in srgb, var(--on-white) 22%, transparent);
	border-radius: var(--on-radius-pill);
	background: color-mix(in srgb, var(--on-white) 6%, transparent);
	list-style: none;
}

.on-bar__menu a {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px 7px;
	border-radius: var(--on-radius-pill);
	color: inherit;
	font-size: var(--on-fs-nav);
	letter-spacing: var(--on-ls-nav);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .25s, color .25s;
}

.on-bar__menu a:hover,
.on-bar__menu a:focus-visible {
	background: color-mix(in srgb, var(--on-white) 12%, transparent);
}

.on-bar__menu .current-menu-item > a,
.on-bar__menu a.is-active {
	background: color-mix(in srgb, var(--on-white) 14%, transparent);
}

.on-bar[data-tone="light"] .on-bar__menu {
	border-color: var(--on-line);
	background: color-mix(in srgb, var(--on-white) 45%, transparent);
}

/* Passata la scena il passaggio del mouse è sempre il velo scuro (prototipo home.css:44, body.past) */
.on-bar .on-bar__menu a:hover,
.on-bar .on-bar__menu a:focus-visible {
	background: color-mix(in srgb, var(--on-black) 6%, transparent);
}

.on-bar[data-tone="light"] .on-bar__menu .current-menu-item > a,
.on-bar[data-tone="light"] .on-bar__menu a.is-active {
	background: var(--on-white);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--on-shade) 8%, transparent);
	color: var(--on-ink);
}

.on-bar[data-tone="green"] .on-bar__menu {
	border-color: color-mix(in srgb, var(--on-white) 35%, transparent);
	background: color-mix(in srgb, var(--on-shade) 14%, transparent);
}

.on-bar[data-tone="green"] .on-bar__menu .current-menu-item > a,
.on-bar[data-tone="green"] .on-bar__menu a.is-active {
	background: var(--on-white);
	color: var(--on-green-ink);
}

@media (min-width: 901px) {
	.on-bar__nav {
		display: block;
		justify-self: center;
	}
}

/* Azioni: prossimo raduno, Biglietti, bottone del menu */
/* Sempre nell'ultima colonna, anche quando il menu non c'è e la riga ha solo due elementi */
.on-bar__tools {
	display: flex;
	grid-column: -2 / -1;
	align-items: center;
	justify-self: end;
	gap: 10px;
}

.on-bar__soon {
	display: none;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding-right: 18px;
	border-right: 1px solid color-mix(in srgb, var(--on-white) 22%, transparent);
	color: inherit;
	font-size: .8125rem;
	letter-spacing: .08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	opacity: .9;
}

/* Il pallino del prototipo (<i> dentro .soon) c'è ma non si vede: home.css:51 */
.on-bar__soon > i {
	display: none;
}

.on-bar__soon-x {
	margin-left: .4em;
	padding: 2px 6px 1px;
	border: 1px solid currentColor;
	border-radius: var(--on-radius-xs);
}

a.on-bar__soon:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.on-bar[data-tone="light"] .on-bar__soon {
	border-color: var(--on-line);
}

.on-bar[data-tone="green"] .on-bar__soon {
	border-color: color-mix(in srgb, var(--on-white) 35%, transparent);
}

/*
 * Biglietti: la pillola piena. Di base verde con il testo bianco (prototipo home.css:54 e 57),
 * com'è sulla scena dell'apertura e sulle sezioni chiare; bianca sul nero (524-529),
 * nera sul verde (535-536).
 */
.on-bar__act {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px 9px 16px;
	border: 1px solid var(--on-green);
	border-radius: var(--on-radius-pill);
	background: var(--on-green);
	color: var(--on-white);
	font-size: .8125rem;
	letter-spacing: .12em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--on-ease-out);
}

.on-bar__act:hover {
	border-color: #00a63c;
	background: #00a63c;
	color: var(--on-white);
}

/* Sul nero: bianca con il testo nero; al passaggio il verde (--green-soft, che scene.css:623 porta a #008D33) */
.on-bar[data-tone="dark"] .on-bar__act {
	border-color: var(--on-white);
	background: var(--on-white);
	color: var(--on-black);
}

.on-bar[data-tone="dark"] .on-bar__act:hover {
	border-color: var(--on-green);
	background: var(--on-green);
	color: var(--on-black);
}

.on-bar[data-tone="green"] .on-bar__act {
	border-color: var(--on-black);
	background: var(--on-black);
	color: var(--on-white);
}

.on-bar[data-tone="green"] .on-bar__act:hover {
	border-color: var(--on-white);
	background: var(--on-white);
	color: var(--on-green-ink);
}

@media (hover: hover) and (pointer: fine) {
	.on-bar__act:hover {
		transform: translateY(-1px);
	}
}

@media (min-width: 901px) {
	.on-bar__tools {
		gap: 18px;
	}

	.on-bar__act {
		padding: 10px 18px 8px;
		font-size: var(--on-fs-nav);
	}
}

@media (min-width: 1181px) {
	.on-bar__soon {
		display: flex;
	}
}

/* Bottone del menu: tre righe che diventano una X */
.on-bar__burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: var(--on-radius-s);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.on-bar__burger i {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform .3s, opacity .3s;
}

.on-bar__burger[aria-expanded="true"] i:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.on-bar__burger[aria-expanded="true"] i:nth-child(2) {
	opacity: 0;
}

.on-bar__burger[aria-expanded="true"] i:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Con il JS c'è il bottone, senza il link al pannello */
.no-js button.on-bar__burger,
.js .on-bar__burger--nojs {
	display: none;
}

@media (min-width: 901px) {
	.on-bar__burger {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Pannello del telefono: nero a tutto schermo, voci numerate come il Televideo
 * ------------------------------------------------------------------ */

.on-mnav {
	--on-focus: var(--on-white);
	position: fixed;
	inset: 0;
	z-index: 1;
	display: grid;
	align-content: center;
	gap: 4px;
	padding: calc(var(--on-bar-h) + 24px) var(--on-gutter) 40px;
	overflow-y: auto;
	background: color-mix(in srgb, var(--on-black) 96%, transparent);
	color: var(--on-white);
	overscroll-behavior: contain;
}

.on-mnav[hidden] {
	display: none;
}

/* Senza JS il link della barra porta a #id del pannello, che si apre con :target */
.no-js .on-mnav:target {
	display: grid;
}

.on-mnav__menu {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-mnav__menu a {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--on-white) 15%, transparent);
	color: var(--on-white);
	font-size: clamp(2.125rem, 9vw, 3rem);
	letter-spacing: 0;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
}

.on-mnav__menu .current-menu-item > a .on-mnav__t {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.on-mnav__n {
	color: var(--on-tv-green);
	font-family: var(--on-font-tv);
	font-size: 1.25rem;
}

/* Biglietti nel menu del telefono: verde (prototipo home.css:888, --green-soft che scene.css:623 porta a #008D33) */
.on-mnav__biglietti a {
	margin-top: 10px;
	border-bottom: 0;
	color: var(--on-green);
}

.js .on-mnav__menu > li {
	opacity: 0;
	transform: translateY(14px);
	animation: on-mnav-entra var(--on-dur-3) var(--on-ease-out) forwards;
}

.js .on-mnav__menu > li:nth-child(2) {
	animation-delay: .05s;
}

.js .on-mnav__menu > li:nth-child(3) {
	animation-delay: .1s;
}

.js .on-mnav__menu > li:nth-child(4) {
	animation-delay: .15s;
}

.js .on-mnav__menu > li:nth-child(5) {
	animation-delay: .2s;
}

.js .on-mnav__menu > li:nth-child(n+6) {
	animation-delay: .25s;
}

@keyframes on-mnav-entra {
	to {
		opacity: 1;
		transform: none;
	}
}

.on-mnav__chiudi {
	justify-self: start;
	margin-top: 24px;
	color: var(--on-white);
	font-size: var(--on-fs-nav);
	letter-spacing: var(--on-ls-nav);
	text-transform: uppercase;
}

.js .on-mnav__chiudi {
	display: none;
}

@media (min-width: 901px) {
	.on-mnav,
	.no-js .on-mnav:target {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Movimento ridotto: niente nastro che scorre, niente bottone che non serve
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.on-bar__tape {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.js .on-bar__tape-in {
		padding-left: 16px;
		animation: none;
	}

	.on-pausa {
		display: none;
	}

	.js .on-mnav__menu > li {
		opacity: 1;
		transform: none;
		animation: none;
	}
}