/*
 * ON Televideo: una pagina del Televideo (scene.css .tele, righe 21-39 e 917-919 del prototipo).
 * Mobile first: le misure del telefono senza media query, quelle del desktop da 901 px.
 *
 * Il testo segue la larghezza del widget (4.35cqi) e non quella della finestra: a 390 px
 * vale i 3.9vw del prototipo, sopra i 900 px i suoi 2vw nelle due colonne affiancate
 * (massimo 28 px). Il minimo in rem cresce con il testo scelto dall'utente; le righe
 * conservano gli spazi ma vanno a capo se non ci stanno (zoom, spaziatura del testo):
 * nessuna altezza fissa, niente overflow nascosto. La versione testo resta l'alternativa.
 *
 * Il widget misura la propria larghezza (container-type: inline-size): va in un contenitore
 * a griglia o a colonna; in una riga flessibile serve una larghezza al widget.
 */

.on-televideo {
	/* Effetti dello schermo, presi dal prototipo: decorativi, non di brand */
	--on-televideo-bordo: color-mix(in srgb, var(--on-white) 12%, transparent);
	--on-televideo-ombra: 0 40px 80px -40px color-mix(in srgb, var(--on-shade) 80%, transparent);
	--on-televideo-righe: color-mix(in srgb, var(--on-shade) 28%, transparent);

	container-type: inline-size;
}

.on-televideo__schermo {
	position: relative;
	border: 1px solid var(--on-televideo-bordo);
	background: var(--on-tv-black);
	box-shadow: var(--on-televideo-ombra);
	color: var(--on-white);
	font-family: var(--on-font-tv);
	font-size: clamp(.875rem, 4.35cqi, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
}

/* Le righe del tubo catodico sopra la pagina */
.on-televideo__schermo::after {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, var(--on-televideo-righe) 0 2px, transparent 2px 5px);
	content: "";
	pointer-events: none;
}

.on-televideo__testata {
	display: flex;
	border-bottom: 2px solid var(--on-tv-green);
	background: var(--on-tv-black);
}

.on-televideo__testata > span {
	min-width: 0;
	padding: 5px 9px;
	overflow-wrap: anywhere;
}

.on-televideo__pagina {
	flex: none;
	background: var(--on-tv-green);
	color: var(--on-tv-black);
}

.on-televideo__titolo {
	flex: 1;
	color: var(--on-tv-yellow);
}

.on-televideo__marchio {
	flex: none;
	color: var(--on-tv-cyan);
}

.on-televideo__corpo {
	padding: 10px 8px 14px;
}

/* Una riga per riga: gli spazi restano (colonne), ma se non c'è posto si va a capo */
.on-televideo__riga {
	display: block;
	min-height: 1.15em;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.on-televideo__riga--w {
	color: var(--on-white);
}

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

.on-televideo__riga--c {
	color: var(--on-tv-cyan);
}

.on-televideo__riga--g {
	color: var(--on-tv-green);
}

.on-televideo__riga--m {
	color: var(--on-tv-magenta);
}

.on-televideo__riga--r {
	color: var(--on-tv-red);
}

/* Doppia altezza, come la prima riga di P.202 */
.on-televideo__riga--grande {
	margin: .15em 0;
	font-size: 1.9em;
	line-height: 1;
}

.on-televideo__evidenza {
	display: inline-block;
	padding: 0 .3em;
	background: var(--on-tv-cyan);
	color: var(--on-tv-black);
	font-style: normal;
}

/* Il cursore della battitura: lo aggiunge il JS e lo toglie appena le righe sono scritte */
.on-televideo__cursore {
	display: inline-block;
	width: .6em;
	height: 1em;
	background: var(--on-tv-green);
	vertical-align: -.15em;
	animation: on-televideo-cursore .8s steps(2) infinite;
}

@keyframes on-televideo-cursore {
	50% {
		opacity: 0;
	}
}

/*
 * La battitura: le righe si nascondono solo con il movimento attivo (html.on-motion) e solo
 * quando il modulo ha deciso di scriverle (is-battitura): senza JS restano tutte visibili.
 */
.on-motion .on-televideo.is-battitura .on-televideo__riga:not(.is-scritta) {
	opacity: 0;
}

/* ---------- Versione testo ---------- */

/* Due classi: battono gli stili dei bottoni e dei titoli del kit (.elementor-kit-N button, h3) */
.on-televideo .on-televideo__interruttore {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: var(--on-font-text);
	font-size: var(--on-fs-small);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 3px;
	cursor: pointer;
}

.on-televideo .on-televideo__interruttore:hover,
.on-televideo .on-televideo__interruttore:focus {
	background: none;
	color: inherit;
	text-decoration-thickness: 2px;
}

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

.on-televideo .on-televideo__interruttore[aria-pressed="true"] {
	font-weight: 700;
}

/*
 * Nel prototipo il pulsante non c'è (raduno-ferrara-2023.html:69-97, Ancona 105-152): resta
 * invisibile e compare solo quando lo si raggiunge con il Tab, o quando la versione testo è
 * aperta (per richiuderla). La versione testo resta sempre letta dagli screen reader.
 */
.on-televideo .on-televideo__interruttore:not(:focus-visible):not([aria-pressed="true"]) {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.on-televideo__testo {
	margin-top: 8px;
	padding: 16px 0 0;
	border-top: 1px solid currentColor;
	font-family: var(--on-font-text);
	font-size: var(--on-fs-body);
	line-height: 1.5;
}

.on-televideo .on-televideo__testo-titolo {
	margin: 0 0 8px;
	color: inherit;
	font-family: var(--on-font-text);
	font-size: var(--on-fs-body);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}

.on-televideo__testo-righe {
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-televideo__testo-righe li {
	margin: 0;
	padding: 2px 0;
}

/* Colori forzati: lo sfondo dell'evidenza sparisce, resta un contorno */
@media (forced-colors: active) {
	.on-televideo__evidenza {
		outline: 1px solid CanvasText;
	}
}

@media (min-width: 901px) {
	.on-televideo__testata > span {
		padding: 6px 14px;
	}

	.on-televideo__corpo {
		padding: 18px 16px 22px;
	}
}