/* =====================================================================
   Appennino Tools - personalizzazioni front-end
   Palette ripresa dal sito: blu #264a88, blu scuro #1b3663, arancio #F29D48
   Le regole con !important sono quelle che devono vincere sul CSS
   del Personalizzatore, che WordPress stampa dopo i fogli in coda.
   ===================================================================== */

:root {
	--ac-blue: #264a88;
	--ac-blue-dark: #1b3663;
	--ac-orange: #F29D48;
	--ac-ad-bg: #eef1f6;
	--ac-ad-line: #c3ccdb;
}

/* ---------------------------------------------------------------
   PUNTO 1 - Nuvola dei tag a espansione nella colonna widget
   --------------------------------------------------------------- */
.mg-sidebar .widget_tag_cloud .tagcloud,
.mg-sidebar .widget_tag_cloud .wp-block-tag-cloud {
	position: relative;
	max-height: 7.5em;
	overflow: hidden;
	transition: max-height .35s ease;
}
.mg-sidebar .widget_tag_cloud.ac-tags-open .tagcloud,
.mg-sidebar .widget_tag_cloud.ac-tags-open .wp-block-tag-cloud {
	max-height: 200em;
}
/* sfumatura che segnala il contenuto tagliato */
.mg-sidebar .widget_tag_cloud.ac-tags-collapsible .tagcloud::after,
.mg-sidebar .widget_tag_cloud.ac-tags-collapsible .wp-block-tag-cloud::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.6em;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
	pointer-events: none;
	transition: opacity .25s ease;
}
.mg-sidebar .widget_tag_cloud.ac-tags-open .tagcloud::after,
.mg-sidebar .widget_tag_cloud.ac-tags-open .wp-block-tag-cloud::after {
	opacity: 0;
}
.ac-tags-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--ac-blue);
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: background .2s ease;
}
.ac-tags-toggle:hover,
.ac-tags-toggle:focus {
	background: var(--ac-blue-dark);
	color: #fff;
}
.ac-tags-toggle::after {
	content: "\25BE";
	font-size: 11px;
	transition: transform .25s ease;
}
.ac-tags-open .ac-tags-toggle::after {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------
   PUNTO 3 - Niente piu' foto tagliate nella home
   I riquadri del tema hanno altezza fissa e background-size:cover,
   quindi ritagliano la foto. Passiamo a "contain" (foto sempre
   intera) e riempiamo lo spazio residuo con la stessa foto sfocata,
   presa con background-image:inherit dal pseudo-elemento.
   --------------------------------------------------------------- */
.mg-blog-post.lg.back-img,
.mg-blog-post-3.minh.back-img,
.mg-post-thumb.back-img.md {
	background-color: var(--ac-blue-dark);
}
/* strato 1: la stessa foto sfocata, riempie tutto il riquadro */
.mg-blog-post.lg.back-img::before,
.mg-blog-post-3.minh.back-img::before,
.mg-post-thumb.back-img.md::before {
	content: "";
	position: absolute;
	top: -10%;
	right: -10%;
	bottom: -10%;
	left: -10%;
	background-image: inherit;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(24px) brightness(.62) saturate(1.15);
	z-index: 0;
}
/* strato 2: la foto nitida per intero, senza alcun ritaglio */
.mg-blog-post.lg.back-img::after,
.mg-blog-post-3.minh.back-img::after,
.mg-post-thumb.back-img.md::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: inherit;
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}
/* i figli del tema sono tutti in posizione assoluta: basta alzarli sopra i due strati */
.mg-blog-post.lg.back-img > *,
.mg-blog-post-3.minh.back-img > *,
.mg-post-thumb.back-img.md > * {
	z-index: 2;
}

/* Sul segnaposto (notizia senza foto) l'icona fotocamera del tema
   annuncerebbe una foto inesistente: la togliamo. */
.back-img.ac-is-placeholder .post-form {
	display: none;
}

/* ---------------------------------------------------------------
   PUNTO 7 - Testo della barra "Ultime notizie" in blu
   --------------------------------------------------------------- */
.mg-latest-news .mg-latest-news-slider a,
.mg-latest-news .mg-latest-news-slider a span {
	color: var(--ac-blue) !important;
}
.mg-latest-news .mg-latest-news-slider a:hover span {
	color: var(--ac-blue-dark) !important;
}
.mg-latest-news .mg-latest-news-slider a::before {
	color: var(--ac-orange) !important;
}

/* ---------------------------------------------------------------
   PUNTO 8 - Firma dell'articolo sotto il testo
   --------------------------------------------------------------- */
.ac-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 32px 0 8px;
	padding: 18px 20px;
	background: #f5f7fa;
	border-left: 4px solid var(--ac-orange);
	border-radius: 4px;
}
.ac-byline .mg-author-pic img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
}
/* tondo con le iniziali al posto del segnaposto grigio di Gravatar */
.ac-byline .ac-initials {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--ac-blue);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .5px;
	text-decoration: none;
}
.ac-byline .ac-initials:hover {
	background: var(--ac-blue-dark);
	color: #fff;
}
.ac-byline .media-body {
	min-width: 0;
}
.ac-byline .media-heading {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 1.3;
}
.ac-byline .media-heading span {
	font-weight: 400;
	color: #6b7280;
}
.ac-byline .mg-blog-date,
.ac-byline .newsup-tags {
	display: inline-block;
	margin-right: 14px;
	font-size: 13px;
	color: #6b7280;
}
.ac-byline .newsup-tags a {
	color: var(--ac-blue);
}

/* ---------------------------------------------------------------
   PUNTO 9 - Foto dell'articolo piu' contenuta
   --------------------------------------------------------------- */
.ac-featured {
	max-width: 68%;
	margin: 0 auto 10px;
	padding: 20px 0 0;
	text-align: center;
}
.ac-featured img {
	width: 100%;
	height: auto;
	border-radius: 3px;
}
.ac-featured .featured-image-caption {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: italic;
	color: #6b7280;
}
@media (max-width: 991px) {
	.ac-featured { max-width: 92%; }
}
@media (max-width: 575px) {
	.ac-featured { max-width: 100%; }
}

/* ---------------------------------------------------------------
   PUNTO 6 - Footer nei colori del sito
   --------------------------------------------------------------- */
footer.footer,
footer {
	background-color: var(--ac-blue) !important;
}
footer.footer .overlay {
	background-color: transparent !important;
}
/* Il logo della testata ha la scritta "L'Appennino" in blu: sul nuovo fondo
   blu sparirebbe. Lo appoggiamo su una targhetta bianca, cosi' il marchio
   resta nei suoi colori originali e lo stemma mantiene i dettagli. */
footer .mg-footer-bottom-area .site-logo {
	display: inline-block;
	padding: 12px 20px;
	background: #fff;
	border-radius: 6px;
	line-height: 0;
}
footer .mg-footer-bottom-area .site-logo img {
	display: block;
	width: auto;
	max-width: 240px;
	height: auto;
}

footer .mg-footer-bottom-area .divide-line {
	border-top: 1px solid rgba(255,255,255,.18);
	margin: 8px 0 22px;
}
footer .ac-copy p {
	margin: 0;
	color: rgba(255,255,255,.8);
	font-size: 13px;
}
footer .ac-footer-menu .info-right {
	margin: 0;
	padding: 0;
	list-style: none;
}
footer .ac-footer-menu .info-right li {
	display: inline-block;
	margin: 0;
}
footer .ac-footer-menu .info-right li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	margin: 0 4px 0 0;
	background: rgba(255,255,255,.3);
	vertical-align: -1px;
}
footer .ac-footer-menu .info-right li a {
	display: inline-block;
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,.85);
	transition: color .2s ease;
}
footer .ac-footer-menu .info-right li a:hover {
	color: var(--ac-orange);
}
@media (max-width: 767px) {
	footer .ac-copy,
	footer .ac-footer-menu {
		text-align: center;
	}
	footer .ac-footer-menu { margin-top: 10px; }
}

/* ---------------------------------------------------------------
   PUNTI 5 e 11 - Spazi pubblicitari
   --------------------------------------------------------------- */
/* Il riquadro porta la misura nominale ma non supera mai la larghezza
   disponibile: su mobile si restringe da solo senza sfondare la pagina. */
.ac-ad {
	width: var(--ac-ad-w);
	max-width: 100%;
	margin: 0 auto;
	line-height: 0;
}
.ac-ad img {
	max-width: 100%;
	height: auto;
}
.ac-ad iframe,
.ac-ad ins {
	max-width: 100%;
}
/* bande orizzontali che interrompono la pagina (soprattutto da mobile) */
.ac-ad-band {
	margin: 30px 0;
}
.ac-ad-band--inline {
	margin: 34px 0;
	clear: both;
}
.ac-footer-ad {
	padding: 26px 0 6px;
}

/* Bande laterali verticali: solo su schermi larghi.
   Ogni lato ospita fino a 4 riquadri distribuiti sull'intera altezza della
   pagina, cosi' la colonna resta coperta invece di avere un solo banner in
   alto. Lo spazio in pagina viene riservato solo dal lato che ha davvero
   un banner: senza pubblicita' il sito resta a tutta larghezza. */
.ac-rail {
	display: none;
}

@media (min-width: 1400px) {
	body {
		position: relative;
	}
	.ac-rail {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 120px;
		bottom: 40px;
		width: 160px;
		z-index: 40;
	}
	.ac-rail--left  { left: 14px; }
	.ac-rail--right { right: 14px; }

	/* La colonna e' divisa in tratti di uguale altezza, uno per riquadro.
	   Dentro il suo tratto il banner resta agganciato in vista: scorrendo
	   la pagina la banda laterale non e' mai vuota, e a ogni tratto
	   subentra l'inserzionista successivo. */
	.ac-rail .ac-railslot {
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	.ac-rail .ac-ad {
		position: sticky;
		top: 120px;
		width: 160px;
		margin: 0;
	}
	body.admin-bar .ac-rail .ac-ad { top: 152px; }

	body.ac-rail-left-on  #page { padding-left: 190px; }
	body.ac-rail-right-on #page { padding-right: 190px; }
}

/* Sotto i 1400 px i riquadri delle bande laterali vengono spostati dal
   JavaScript dentro la pagina, distribuiti fra i contenuti: da telefono
   la pubblicita' si vede lo stesso, sotto forma di striscia orizzontale. */
.ac-railslot--inline {
	display: block;
	margin: 30px 0;
	clear: both;
}
.ac-railslot--inline .ac-ad {
	width: auto;
	max-width: 340px;
	margin: 0 auto;
}
.ac-railslot--inline .ac-ad img {
	width: 100%;
}

/* Striscia agganciata in fondo allo schermo, solo da telefono. */
.ac-sticky {
	display: none;
}
@media (max-width: 991px) {
	.ac-sticky {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		padding: 6px 34px 6px 6px;
		background: rgba(255,255,255,.97);
		box-shadow: 0 -2px 10px rgba(0,0,0,.15);
	}
	.ac-sticky .ac-ad {
		margin: 0;
	}
	.ac-sticky__close {
		position: absolute;
		top: 50%;
		right: 6px;
		transform: translateY(-50%);
		width: 26px;
		height: 26px;
		padding: 0;
		font-size: 18px;
		line-height: 1;
		color: #555;
		background: #eceff3;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
	}
	/* lo spazio in fondo evita che la striscia copra il piede della pagina */
	body.ac-sticky-on #page {
		padding-bottom: 70px;
	}
}

/* ---------------------------------------------------------------
   PUNTO 2 - "Appennino online": ultimo numero al doppio su PC
   Sotto i 768 px non si tocca nulla, il mobile resta com'e'.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
	.pg-latest-issue {
		max-width: 960px !important;
		gap: 34px !important;
		padding: 44px 40px !important;
	}
	.pg-latest-issue__cover {
		width: 440px !important;
	}
	.pg-latest-issue__title {
		font-size: 34px !important;
	}
	.pg-latest-issue__badge {
		font-size: 15px !important;
		padding: 8px 26px !important;
		letter-spacing: 1px !important;
	}
	.pg-latest-issue__accedi {
		font-size: 19px !important;
		padding: 16px 40px !important;
	}
	.pg-latest-issue__overlay {
		font-size: 17px !important;
	}
}