/* =========================================================================
   Testata e impaginazione del sito.
   Un impianto solo: dal 09/11/2026 non ci sono piu' le varianti A/B/C, che
   erano lo strumento per far scegliere HEAD e in produzione non devono
   esistere. Qui sta quello che prima era il ramo in onda, senza prefissi.
   Agganciato dopo annunci.css, cosi' e' l'ultimo foglio a parlare.
   ========================================================================= */

/* --- etichetta "Pubblicita" su ogni annuncio -----------------------------
   Vale per qualsiasi .st-adv: elenco, articolo, barra laterale e quelli che
   verranno. Il banner in testata non e' un .st-adv (e' lo sfondo della
   fascia), quindi resta senza etichetta per costruzione. */
.st-adv {
	position: relative;
}
.st-adv::after {
	content: "Pubblicità";
	position: absolute;
	top: 0;
	right: 0;
	padding: 3px 8px;
	background: rgba(10, 24, 30, .62);
	color: #fff;
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --- menu su una riga sola ----------------------------------------------
   La ul del menu ha sia .nav sia .navbar-nav, e bootstrap mette
   flex-wrap: wrap su .nav: per questo va a capo. Qui si dice di no.
   Da 1200 px in su soltanto: sotto i 1200 il menu resta quello del tema (due
   righe, misure originali), perche' fra 992 e 1199 px il menu a una riga non
   ci sta e con nowrap sborda di lato (a 1024: pagina larga 1157 px su una
   finestra di 1024, l'ultima voce fuori dallo schermo). Sotto i 992 px resta
   il burger del tema. */
@media (min-width: 1200px) {
	.mg-headwidget .navbar-wp ul.nav.navbar-nav {
		flex-wrap: nowrap;
	}

	.mg-headwidget .navbar-wp .navbar-nav > li > a {
		white-space: nowrap;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 12px;
		letter-spacing: 0;
	}
}

/* --- la colonna dell'annuncio nella hero --------------------------------
   Le card editor hanno `min-height: 500px` (sporttales-custom.css:340-346) e
   il portrait (595x842) a questa larghezza e' piu' basso: tenendo il minimo
   resterebbe un buco sotto il poster. Vale solo per la cella dell'annuncio:
   le card vere restano a 500 px. */
.choosen.st-adv--hero {
	min-height: auto;
}

/* =========================================================================
   Testata nuova — 08/11/2026
   La fascia e' tutta del banner: 180 px da 992 in su, striscia 4:1 sotto. Ha
   due file serviti dal CSS degli annunci (`sporttales_adv_fascia_immagini`),
   uno per fascia di schermo: qui si dice solo quanto e' alta la banda, non che
   immagine contiene.
   ========================================================================= */

/* --- il collegamento sopra la fascia ------------------------------------
   La fascia e' uno sfondo, quindi il clic lo prende un collegamento
   trasparente steso su tutta la banda. Sta sopra al contenuto e non sposta
   niente: la fascia resta esattamente com'era. L'etichetta "Pubblicità" qui
   non c'e' (era cosi' anche prima, quando la fascia non era cliccabile). */
.mg-nav-widget-area-back {
	position: relative;
}
.st-adv--fascia {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	margin: 0;
}
.st-adv--fascia::after {
	content: none;
}

/* La banda si ferma a 180 px di altezza: oltre, il banner mangia la prima
   schermata (indicazione di Mattia, 09/11/2026: 200, poi 180). Il file resta
   7:1, quindi su schermi molto larghi il taglio e' verticale, come prima. */
@media (min-width: 992px) {
	.mg-nav-widget-area-back.st-fascia-adv {
		height: 180px;
		max-height: 180px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.mg-nav-widget-area-back.st-fascia-adv .inner,
	.mg-nav-widget-area-back.st-fascia-adv .mg-nav-widget-area {
		height: 180px;
		min-height: 180px;
		max-height: 180px;
		padding: 0;
	}
}

/* Sotto i 992 px la banda e' una striscia 4:1: il file mobile ha lo stesso
   rapporto, quindi non si taglia niente. */
@media (max-width: 991.98px) {
	.mg-nav-widget-area-back.st-fascia-adv {
		height: 0;
		padding-bottom: 25%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.mg-nav-widget-area-back.st-fascia-adv .inner,
	.mg-nav-widget-area-back.st-fascia-adv .mg-nav-widget-area {
		height: 0;
		min-height: 0;
		padding: 0;
	}
}

/* --- stessa griglia su tutte le pagine a elenco ------------------------
   Home, categoria, ricerca, tag, autore, data: il tema le disegna 8/12 + 4/12
   (66% + 33%), mentre l'articolo e' 9/12 + 3/12 (75% + 25%). Lo stesso
   annuncio quadrato veniva quindi di due misure diverse a seconda della
   pagina. Dal 09/11/2026 valgono per tutte 75/25, cosi' il contenuto e la
   colonna dell'annuncio sono uguali ovunque.
   La regola vale da 1200 px in su: sotto, il tema passa a una colonna sola e
   non c'e' niente da allineare. */
@media (min-width: 1200px) {
	#content .row > div.col-md-8 {
		flex: 0 0 75%;
		max-width: 75%;
	}
	#content .row > aside.col-md-4 {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* --- il blocco del logo al posto dei tab (09/11/2026) --------------------
   Il blocco e' alto 89 px, senza riempimento e senza margine in fondo: lo
   spazio sotto viene dalla sezione che segue, non da qui. I -6 px in alto
   avvicinano il logo alla barra del menu (indicazione di Mattia, 09/11/2026).
   Dentro: logo alto 70 px e la scritta di fianco. Il margine trasparente del
   file (1,3%) e' compensato con 1 px. */
.st-hero-logo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	height: 89px;
	padding: 0;
	margin: -6px 0 0;
}

.st-hero-logo .navbar-brand {
	display: block;
	line-height: 0;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.st-hero-logo img[width][height] {
	display: block;
	width: auto;
	height: 70px;
	margin: -1px 0 0 -1px;
	mix-blend-mode: multiply;
}

.st-hero-logo-testo {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 70px;
	letter-spacing: .3px;
	color: #5f9ea0;
	text-transform: lowercase;
	white-space: nowrap;
}

/* Distacco fra la barra del menu e il contenuto: 30 px (20 della sezione
   "ultime notizie" vuota + 10 di cuscinetto dell'hero). Non si tocca. */
.mg-fea-area > .overlay {
	padding-top: 10px;
}