/* =========================================================================
   Varianti del sito (A, B, C): qui sta solo quello che cambia fra le versioni.
   Agganciato dopo annunci.css, cosi' e' l'ultimo foglio a parlare.
   Quello che vale per tutte le versioni non ha il prefisso .st-variante-*.
   ========================================================================= */

/* --- 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 (varianti A e B) ------------------------------
   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 di oggi (due
   righe, misure originali del tema), 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 di oggi, e la variante C resta a due righe com'e'. */
@media (min-width: 1200px) {
	.st-variante-a .mg-headwidget .navbar-wp ul.nav.navbar-nav,
	.st-variante-b .mg-headwidget .navbar-wp ul.nav.navbar-nav {
		flex-wrap: nowrap;
	}

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

/* --- fascia in testata assente (variante B) ------------------------------
   In B la fascia non c'e' piu': via l'immagine di fondo (banner o immagine
   di default del tema) e via la velatura. Il logo, che era l'unica cosa che
   conteneva, e' sceso nella barra del menu come in C: il div resta nel markup
   ma vuoto, e qui si dice di non occupare spazio.
   I 25 px sopra e sotto sono il padding di `.inner` (style.css:245): si
   azzerano come si fa gia' in C sotto i 992 px, quando anche li' il blocco
   logo + titolo esce dalla fascia. Senza, resterebbe una banda vuota di 50 px.
   Il filtro su theme_mod_header_image non basta: header.php ripiega
   sull'immagine di default del tema e la fascia resterebbe lo stesso. */
.st-variante-b .mg-nav-widget-area-back {
	height: auto;
	background-image: none !important;
}
.st-variante-b .mg-nav-widget-area-back .overlay .inner {
	background-color: transparent !important;
	padding-top: 0;
	padding-bottom: 0;
}

/* --- la colonna dell'annuncio nella hero (variante B) --------------------
   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, in A e C, restano a 500 px. */
.st-variante-b .choosen.st-adv--hero {
	min-height: auto;
}

/* --- banner in testata sotto i 992 px (varianti A e C) -------------------
   La fascia ha 150 px fissi e con background-size: cover il banner viene
   ingrandito fino a diventare illeggibile. Sotto i 992 px la fascia prende
   l'altezza del suo contenuto e il banner si prende una striscia a tutta
   larghezza, al suo rapporto naturale (8:1): in A sotto il logo, in C da sola
   perche' li' il logo e' gia' sceso nella barra del menu. Sopra i 992 px non si
   tocca niente: com'e' adesso va bene. */
@media (max-width: 991.98px) {
	.st-variante-a .mg-nav-widget-area-back,
	.st-variante-c .mg-nav-widget-area-back {
		height: auto;
		padding-bottom: 12.5%;
		background-size: 100% auto;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
}

/* --- C: il logo scende nella barra del menu ------------------------------
   In C il blocco logo + titolo non sta piu' nella fascia ma dentro
   .mg-menu-full, come primo figlio della barra: la fascia resta solo il banner
   dello sponsor. Li' la colonna del tema (col-md-3) non ha piu' una riga da
   dividere con nessuno: si prende la larghezza del logo, cosi' le voci del menu
   (che in C restano su due righe, come oggi) le scorrono accanto. Il logo e'
   1200x761: l'altezza dice anche la larghezza. */

/* da 992 px in su: logo a sinistra nella barra, voci accanto su due righe */
@media (min-width: 992px) {
	.st-variante-c .mg-menu-full .container-fluid.flex-row > :first-child {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		padding-left: 0; /* il logo parte dal bordo del container, come le voci */
	}
	.st-variante-c .mg-menu-full .site-logo img {
		display: block;
		max-height: 90px; /* 90 px di altezza = 142 px di larghezza */
		width: auto;
	}
}

/* --- C fra 992 e 1199,9 px: le voci entrano in due righe -----------------
   Con il logo a 142x90 nella barra, fra 992 e 1199 px il menu andava su TRE
   righe (a 1024: barra alta 157 px contro i 104 della barra a due righe).
   Qui il logo si ferma a 64 px di altezza (64 x 1200/761 = 101 px di
   larghezza: libera 41 px per le voci) e le voci respirano meno: padding
   orizzontale 12 px al posto dei 22 del tema e un punto di corpo in meno.
   Quanto basta perche' le voci entrino in due righe; da 1200 px in su la
   barra resta esattamente com'era. Il testo resta maiuscolo e nessuna voce
   viene nascosta: cambiano solo misura del logo e spaziatura del menu. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.st-variante-c .mg-menu-full .site-logo img {
		max-height: 64px; /* 64 px di altezza = 101 px di larghezza */
	}
	.st-variante-c .mg-menu-full .navbar-wp .navbar-nav > li > a {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 13px;
	}
}

/* lo span .navbar-brand che avvolge il logo porta con se' i margini che il tema
   gli da' per la barra del menu, dove un logo non c'e' mai stato: 15 px sopra e
   sotto (`.navbar-wp .navbar-brand`, style.css:394) e 50 px di margine a destra
   (`.navbar-brand`, style.css:262), che nella fascia sono gia' azzerati da
   `.mg-nav-widget-area .navbar-brand` (sporttales-custom.css:102). Qui dentro i
   primi gonfiano la riga del logo e con lei tutta la barra, il secondo lascia un
   buco fra il logo e le voci. Si tolgono tutti e tre. */
.st-variante-c .mg-menu-full .navbar-wp .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	margin-right: 0;
}

/* --- B: il logo scende nella barra del menu ------------------------------
   Come in C, con una differenza: in B il menu resta su UNA riga da 1200 px in
   su, quindi il logo non ha una riga sua da prendersi e compete con le voci e
   con la ricerca/campanella della barra. La colonna del tema (col-md-3) qui non
   ha nulla da dividere: si prende la larghezza del logo.
   Il logo e' 1200x761: l'altezza dice anche la larghezza (h x 1,577). */
@media (min-width: 992px) {
	.st-variante-b .mg-menu-full .container-fluid.flex-row > :first-child {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		padding-left: 0; /* il logo parte dal bordo del container, come le voci */
	}
	.st-variante-b .mg-menu-full .site-logo img {
		display: block;
		width: auto;
	}
	/* gli stessi margini che in C si tolgono allo .navbar-brand del logo */
	.st-variante-b .mg-menu-full .navbar-wp .navbar-brand {
		padding-top: 0;
		padding-bottom: 0;
		margin-right: 0;
	}
}

/* --- B da 1200 px in su: la misura del logo e' quella che ci sta ---------
   Misurato a 1200 e a 1280 con il menu a una riga: le voci occupano 1054 px,
   la ricerca + la campanella 105, il container mette 50 px per lato e non ha
   margine di riserva (in A a 1200 la ricerca finisce a 1192 su una finestra di
   1200). Con il padding di 8 px delle voci, a 1200 non ci sta nemmeno un logo
   di 8 px: la barra sborda. Da 1200 a 1439 px le voci respirano 4 px per lato
   invece di 8 (restano 8 px fra una voce e l'altra) e il logo ci sta: a 1200
   sono 63 px, a 1280 101 px, misurati con 18 e 60 px di margine.
   Da 1440 px in su lo spazio c'e' e si torna al padding di A (8 px) con il logo
   a 90 px di altezza, la stessa misura che ha in C da 1200 in su. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
	.st-variante-b .mg-headwidget .navbar-wp .navbar-nav > li > a {
		padding-left: 4px;
		padding-right: 4px;
	}
	.st-variante-b .mg-menu-full .site-logo img {
		max-height: 40px; /* 40 px di altezza = 63 px di larghezza */
	}
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
	.st-variante-b .mg-headwidget .navbar-wp .navbar-nav > li > a {
		padding-left: 4px;
		padding-right: 4px;
	}
	.st-variante-b .mg-menu-full .site-logo img {
		max-height: 64px; /* 64 px di altezza = 101 px di larghezza */
	}
}
@media (min-width: 1440px) {
	.st-variante-b .mg-menu-full .site-logo img {
		max-height: 90px; /* 90 px di altezza = 142 px di larghezza */
	}
}

/* --- B fra 992 e 1199,9 px: le voci entrano in due righe -----------------
   Qui il menu di B e' quello del tema (due righe, misure originali) e con il
   logo a 142x90 in barra andava su tre. Stessa ricetta di C a questa
   larghezza: logo a 64 px (101 px di larghezza) e voci piu' strette. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.st-variante-b .mg-menu-full .site-logo img {
		max-height: 64px; /* 64 px di altezza = 101 px di larghezza */
	}
	.st-variante-b .mg-menu-full .navbar-wp .navbar-nav > li > a {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 13px;
	}
}

/* --- B sotto i 992 px: il logo va nella riga del burger ------------------
   Come in C: logo a sinistra, burger, ricerca e campanella si prendono lo
   spazio che resta, senza sovrapporsi. */
@media (max-width: 991.98px) {
	.st-variante-b .mg-menu-full .container-fluid.flex-row > :first-child {
		flex: 0 0 auto;
		width: auto;
		max-width: 45%;
	}
	.st-variante-b .mg-menu-full .site-logo img {
		display: block;
		max-height: 40px; /* 40 px di altezza = 63 px di larghezza */
		width: auto;
	}
	.st-variante-b .mg-menu-full .m-header {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 0;
	}
}

/* sotto i 992 px: burger a destra nella sua riga e logo a sinistra; burger,
   ricerca e campanella si prendono lo spazio che resta, senza sovrapporsi */
@media (max-width: 991.98px) {
	.st-variante-c .mg-menu-full .container-fluid.flex-row > :first-child {
		flex: 0 0 auto;
		width: auto;
		max-width: 45%;
	}
	.st-variante-c .mg-menu-full .site-logo img {
		display: block;
		max-height: 40px; /* 40 px di altezza = 63 px di larghezza */
		width: auto;
	}
	.st-variante-c .mg-menu-full .m-header {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 0; /* ml-auto lo spingerebbe a destra, buco dopo il logo */
	}
	/* il blocco del logo non e' piu' dentro la fascia: i 25 px sopra e sotto
	   (`.mg-nav-widget-area-back .inner`, style.css:245) non contengono piu'
	   niente e resterebbero una banda vuota sopra la striscia del banner. */
	.st-variante-c .mg-nav-widget-area-back .overlay .inner {
		padding-top: 0;
		padding-bottom: 0;
	}
}