/*
 * LabService - struttura: testata, menu, sottotestata, briciole, piede.
 *
 * Servono alla riserva di inc/fallback.php e, con le stesse classi, ai
 * template del Theme Builder: chi li costruisce in Elementor aggiunge la
 * classe (ls-testata, ls-menu, ls-sottotestata...) e ottiene l'aspetto di
 * BeTheme senza rifare lo stile a mano in ogni widget.
 */

/* ---------------------------------------------------------------- testata */

/* La fascia: foto blu di sfondo, arancione dietro se la foto non carica.
   Nelle pagine interne la barra bianca sta in alto e sotto si vede la foto. */
.ls-testata {
	position: relative;
	min-height: var(--ls-testata-altezza);
	background: var(--ls-accento) var(--ls-testata-foto) no-repeat left top;
	background-size: cover;
}

.home .ls-testata,
.ls-con-slider .ls-testata {
	min-height: 0;
}

/* ---------------------------------------------------------------- apertura */

/* L'apertura della home e delle pagine per citta' (inc/fallback.php): era la
   slide "translator" di Slider Revolution. Stesse misure: 787px di altezza,
   griglia di 1260px, i pezzi posizionati dal centro verticale come i livelli
   dello slider (il centro di ogni livello a -204, -178, -141, -16 e +48
   dal centro; qui i bordi in alto). */
.ls-apertura {
	position: relative;
	height: 787px;
	overflow: hidden;
	background: var(--ls-accento) var(--ls-apertura-sfondo) no-repeat center top;
	background-size: cover;
	color: #fff;
}

.ls-apertura__griglia {
	position: relative;
	max-width: 1260px;
	height: 100%;
	margin-inline: auto;
}

.ls-apertura__testi::before,
.ls-apertura__testi::after {
	content: "";
	position: absolute;
	left: 18px;
	width: 151px;
	height: 8px;
	background: var(--ls-accento);
}

.ls-apertura__testi::before {
	top: calc(50% - 208px);
}

.ls-apertura__testi::after {
	top: calc(50% - 145px);
}

.ls-apertura__titolo,
.ls-apertura__sottotitolo {
	position: absolute;
	margin: 0;
	color: #fff;
	letter-spacing: 2px;
}

.ls-apertura__titolo {
	top: calc(50% - 203px);
	left: 19px;
	font-family: var(--ls-font-menu);
	font-size: 39px;
	line-height: 50px;
}

.ls-apertura__sottotitolo {
	top: calc(50% - 66px);
	left: 28px;
	width: 558px;
	font-family: var(--ls-font-testo);
	font-size: 29px;
	font-weight: 200;
	line-height: 50px;
}

.ls-apertura__immagine {
	position: absolute;
	top: calc(50% + 48px - 215px);
	right: 16px;
	width: 442px;
	height: auto;
}

/* L'entrata della slide, piu' sobria: i testi compaiono, l'immagine arriva
   da destra. Niente per chi ha chiesto meno movimento. */
@media (prefers-reduced-motion: no-preference) {
	.ls-apertura__testi {
		animation: ls-apertura-compare 1.2s ease-out both;
	}

	.ls-apertura__immagine {
		animation: ls-apertura-entra 1.2s ease-out 0.2s both;
	}
}

@keyframes ls-apertura-compare {
	from { opacity: 0; }
}

@keyframes ls-apertura-entra {
	from { opacity: 0; transform: translateX(200px); }
}

/* Come lo slider: l'immagine c'e' solo sugli schermi larghi, e sui telefoni
   l'apertura e' alta 400px con i testi in colonna. */
@media (max-width: 1023px) {
	.ls-apertura__immagine {
		display: none;
	}
}

@media (max-width: 767px) {
	.ls-apertura {
		height: 400px;
	}

	.ls-apertura__testi {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 16px;
		height: 100%;
		padding-inline: 20px;
	}

	.ls-apertura__testi::before,
	.ls-apertura__testi::after,
	.ls-apertura__titolo,
	.ls-apertura__sottotitolo {
		position: static;
		width: auto;
	}

	.ls-apertura__testi::before,
	.ls-apertura__testi::after {
		width: 100px;
		height: 6px;
	}

	.ls-apertura__testi::after {
		order: 1;
	}

	.ls-apertura__titolo {
		order: 0;
		font-size: 26px;
		line-height: 34px;
	}

	.ls-apertura__sottotitolo {
		order: 2;
		font-size: 20px;
		line-height: 30px;
	}
}

.ls-testata__riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	min-height: 90px;
	background: #fff;
	max-width: none;
	/* Il logo di BeTheme parte 32px dentro la griglia. */
	padding-inline: max(20px, calc((100% - var(--ls-contenitore)) / 2 + 32px));
}

.ls-testata__logo img {
	display: block;
	max-height: 60px;
	width: auto;
}

.ls-testata__nome {
	font-family: var(--ls-font-titoli);
	font-size: 24px;
	color: var(--ls-titoli);
}

/* Testata fissa bianca: allo scorrimento la barra resta in cima, piu' bassa
   (in BeTheme "sticky header, style white"). La classe la mette tema.js. */
.ls-testata--fissa .ls-testata__riga {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	min-height: 60px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.admin-bar .ls-testata--fissa .ls-testata__riga {
	top: 32px;
}

.ls-testata--fissa .ls-testata__logo img {
	max-height: 40px;
}

/* ------------------------------------------------------------------- menu */

.ls-menu__voci,
.ls-menu__voci .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ls-menu__voci {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.ls-menu__voci > li {
	position: relative;
}

.ls-menu__voci > li > a {
	display: block;
	padding: 13px 14px;
	border-radius: 2px;
	color: var(--ls-menu);
	font-family: var(--ls-font-menu);
	font-size: var(--ls-menu-size);
	font-weight: var(--ls-menu-peso);
	text-decoration: none;
}

/* Il menu "highlight" di BeTheme: la voce attiva e quella sotto il mouse
   sono arancioni su un grigio appena accennato. */
.ls-menu__voci > li > a:hover,
.ls-menu__voci > li.current-menu-item > a,
.ls-menu__voci > li.current-menu-ancestor > a,
.ls-menu__voci > li.current-menu-parent > a,
.ls-menu__voci > li.current-page-ancestor > a,
.ls-menu__voci > li.current-page-parent > a {
	background: var(--ls-menu-attivo-fondo);
	color: var(--ls-accento);
}

/* La freccia delle voci con sottomenu. */
.ls-menu__voci > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	opacity: 0.35;
}

.ls-menu__voci .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 950;
	min-width: 260px;
	padding: 5px 0;
	background: var(--ls-menu-attivo-fondo);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.ls-menu__voci li:hover > .sub-menu,
.ls-menu__voci li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

.ls-menu__voci .sub-menu a {
	display: block;
	padding: 9px 15px;
	color: var(--ls-sottomenu);
	font-family: var(--ls-font-menu);
	font-size: 14px;
	text-decoration: none;
}

.ls-menu__voci .sub-menu a:hover {
	color: var(--ls-sottomenu-hover);
	background: rgba(0, 0, 0, 0.03);
}

/* Il pulsante del menu: solo sotto i 1024px, dove il menu si apre a tendina. */
.ls-menu__apri {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ls-menu__icona,
.ls-menu__icona::before,
.ls-menu__icona::after {
	display: block;
	width: 24px;
	height: 2px;
	margin-inline: auto;
	background: var(--ls-menu);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ls-menu__icona {
	position: relative;
}

.ls-menu__icona::before,
.ls-menu__icona::after {
	content: "";
	position: absolute;
	left: 0;
}

.ls-menu__icona::before {
	top: -7px;
}

.ls-menu__icona::after {
	top: 7px;
}

.ls-menu__apri[aria-expanded="true"] .ls-menu__icona {
	background: transparent;
}

.ls-menu__apri[aria-expanded="true"] .ls-menu__icona::before {
	transform: translateY(7px) rotate(45deg);
}

.ls-menu__apri[aria-expanded="true"] .ls-menu__icona::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
	.ls-testata__riga {
		flex-wrap: wrap;
	}

	.ls-menu__apri {
		display: block;
	}

	/* Chiuso finche' non si tocca il pulsante; senza JavaScript resta aperto. */
	.js .ls-menu {
		display: none;
		flex-basis: 100%;
		padding-bottom: 15px;
	}

	.js .ls-menu--aperto {
		display: block;
	}

	.ls-menu__voci {
		flex-direction: column;
	}

	.ls-menu__voci .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		box-shadow: none;
		background: transparent;
		padding-left: 15px;
	}
}

/* ----------------------------------------------------------- sottotestata */

/* Fondo grigio chiaro, una lineetta arancione sopra il titolo, briciole di
   pane a destra (BeTheme: subheader "title left"). */
.ls-sottotestata {
	background: var(--ls-fondo-2);
}

/* Come BeTheme: il titolo (al massimo il 70%, va a capo) e sotto, sulla riga
   dopo, le briciole allineate a destra. 30px sopra e sotto: 140px in tutto. */
.ls-sottotestata__riga {
	display: block;
	padding-block: 30px;
}

.ls-sottotestata__titolo {
	position: relative;
	margin: 0;
	padding-top: 20px;
	font-family: var(--ls-font-titolo-pagina);
	font-size: var(--ls-titolo-pagina-size);
	line-height: var(--ls-titolo-pagina-lh);
	font-weight: var(--ls-titolo-pagina-peso);
	letter-spacing: 1px;
	color: var(--ls-sottotestata);
	max-width: 70%;
}

@media (max-width: 767px) {
	.ls-sottotestata__titolo {
		max-width: none;
	}
}

.ls-sottotestata__titolo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 7px;
	background: var(--ls-accento);
}

.ls-briciole {
	font-size: 15px;
	color: rgba(136, 136, 136, 0.6);
	text-align: right;
}

.ls-briciole a {
	color: rgba(136, 136, 136, 0.6);
}

.ls-briciole a:hover {
	color: var(--ls-accento);
	text-decoration: none;
}

/* ------------------------------------------------------------------ piede */

.ls-piede {
	background: var(--ls-piede);
	color: var(--ls-piede-testo);
}

.ls-piede h1, .ls-piede h2, .ls-piede h3,
.ls-piede h4, .ls-piede h5, .ls-piede h6 {
	color: var(--ls-piede-titoli);
}

.ls-piede a {
	color: var(--ls-piede-link);
}

.ls-piede a:hover {
	color: var(--ls-piede-link-hover);
}

.ls-piede__finale {
	padding-block: 24px;
	background: var(--ls-fondo-finale);
	color: var(--ls-piede-nota);
	font-size: 15px;
	line-height: 23px;
}

/* --------------------------------------------------------------- archivio */

.ls-archivio {
	padding-block: 40px;
}

.ls-archivio__voce {
	padding-bottom: 25px;
	margin-bottom: 25px;
	border-bottom: 1px solid var(--ls-linea);
}

.ls-archivio__titolo {
	font-size: var(--ls-h4-size);
	line-height: 1.3;
}

.ls-archivio__data {
	color: var(--ls-nota);
	font-size: 13px;
}

.ls-vuoto {
	padding-block: 60px;
}

/* ------------------------------------------------------ briciole (elenco) */

.ls-briciole ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Il separatore di BeTheme: una freccina sottile tra le voci. */
.ls-briciole li + li::before {
	content: "\203A";
	margin: 0 10px;
	color: rgba(136, 136, 136, 0.6);
}

/* ----------------------------------------------------- piede: le colonne */

.ls-piede__colonne {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	padding-block: 50px 30px;
	font-size: 15px;
	line-height: 23px;
}

@media (max-width: 1023px) {
	.ls-piede__colonne {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.ls-piede__colonne {
		grid-template-columns: 1fr;
	}
}

.ls-piede__titolo {
	margin-bottom: 15px;
	font-family: var(--ls-font-titoli);
	font-size: 24px;
	line-height: 25px;
	font-weight: 500;
	color: var(--ls-piede-titoli);
}

/* Gli articoli recenti di BeTheme: riquadri un po' piu' scuri del piede,
   con una barra blu sul lato destro. */
.ls-piede__recenti {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-piede__recenti li {
	margin-bottom: 10px;
	padding: 10px 15px;
	background: rgba(0, 0, 0, 0.1);
	border-right: 3px solid var(--ls-piede-link);
}

.ls-piede__recenti a {
	display: block;
	color: var(--ls-piede-testo);
}

.ls-piede__recenti a:hover {
	color: #fff;
	text-decoration: none;
}

.ls-piede__data {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--ls-piede-nota);
}

.ls-piede__contatti {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.ls-piede__contatti li {
	margin-bottom: 8px;
}

.ls-piede__contatti a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #b0b0b0;
}

.ls-piede__contatti .ls-icona {
	flex: none;
	width: 16px;
	height: 16px;
	color: #fff;
}

/* Il logo in grigio, come nel piede di BeTheme. */
.ls-piede__icona {
	display: block;
	margin-top: 10px;
	filter: grayscale(1);
	opacity: 0.7;
}

/* ------------------------------------------------ piede: la barra finale */

.ls-piede__finale-riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ls-piede__finale p {
	margin: 0;
}

/* Il pulsante "torna su": un quadrato con la freccia in alto. */
.ls-su {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: var(--ls-raggio);
	background: #f7f7f7;
	color: #747474;
}

/* Piu' specifico di ".ls-piede a", che lo farebbe azzurro. */
.ls-piede a.ls-su,
.ls-piede a.ls-su:hover {
	color: #747474;

.ls-su span {
	width: 9px;
	height: 9px;
	border-left: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: translateY(2px) rotate(45deg);
}

.ls-su:hover {
	background: #fff;
	text-decoration: none;
}

/* Le colonne del piede partono come il contenuto, 12px dentro la griglia. */
.ls-piede__colonne {
	padding-inline: 12px;
}