/*
 * LabService - base: tipografia, link, pulsanti, contenuto.
 *
 * Riproduce le regole di BeTheme con i valori di inc/design.php (variabili
 * --ls-*). Nessun colore scritto qui: se un valore va cambiato, si cambia la'.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ls-fondo);
	color: var(--ls-testo);
	font-family: var(--ls-font-testo);
	font-size: var(--ls-p-size);
	line-height: var(--ls-p-lh);
	font-weight: var(--ls-p-peso);
	-webkit-font-smoothing: antialiased;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- titoli */

h1, h2, h3, h4 {
	font-family: var(--ls-font-titoli);
	color: var(--ls-titoli);
	margin: 0 0 15px;
}

/* In BeTheme h5 e h6 hanno un carattere loro, il "titoli piccoli". */
h5, h6 {
	font-family: var(--ls-font-titoli-piccoli);
	color: var(--ls-titoli);
	margin: 0 0 15px;
}

h1 { font-size: var(--ls-h1-size); line-height: var(--ls-h1-lh); font-weight: var(--ls-h1-peso); }
h2 { font-size: var(--ls-h2-size); line-height: var(--ls-h2-lh); font-weight: var(--ls-h2-peso); }
h3 { font-size: var(--ls-h3-size); line-height: var(--ls-h3-lh); font-weight: var(--ls-h3-peso); }
h4 { font-size: var(--ls-h4-size); line-height: var(--ls-h4-lh); font-weight: var(--ls-h4-peso); }
h5 { font-size: var(--ls-h5-size); line-height: var(--ls-h5-lh); font-weight: var(--ls-h5-peso); }
h6 { font-size: var(--ls-h6-size); line-height: var(--ls-h6-lh); font-weight: var(--ls-h6-peso); }

/* I titoli grandi di BeTheme scendono sotto il telefono: senza questo un h2
   da 40px va a capo ogni due parole. */
@media (max-width: 767px) {
	h1 { font-size: 26px; line-height: 34px; }
	h2 { font-size: 30px; line-height: 32px; }
	h3 { font-size: 24px; line-height: 28px; }
	h4 { font-size: 20px; line-height: 24px; }
}

p {
	margin: 0 0 15px;
}

.ls-grande {
	font-size: var(--ls-grande-size);
	line-height: var(--ls-grande-lh);
}

blockquote {
	font-family: var(--ls-font-citazioni);
	margin: 0 0 15px;
}

/* ------------------------------------------------------------------ link */

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

a:hover {
	color: var(--ls-accento);
	text-decoration: underline;
}

hr {
	border: 0;
	border-top: 1px solid var(--ls-accento);
	margin: 30px 0;
}

::selection {
	background: var(--ls-accento);
	color: #fff;
}

/* --------------------------------------------------------------- pulsanti */

/* Due pulsanti come in BeTheme: quello normale grigio chiaro e quello "pieno"
   arancione (in BeTheme "highlighted", e nei pulsanti di WPBakery il colore
   "LabService"). */
a.ls-pulsante,
.ls-pulsante {
	display: inline-block;
	padding: var(--ls-pulsante-spazio);
	border: 0;
	border-radius: var(--ls-raggio);
	background: var(--ls-pulsante);
	color: var(--ls-pulsante-testo);
	font-family: var(--ls-font-testo);
	font-size: var(--ls-pulsante-size);
	font-weight: var(--ls-pulsante-peso);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a.ls-pulsante:hover,
.ls-pulsante:hover,
.ls-pulsante:focus-visible {
	background: var(--ls-pulsante-hover);
	color: var(--ls-pulsante-testo);
	text-decoration: none;
}

/* a.ls-pulsante e non solo .ls-pulsante: dentro il piede la regola dei link
   (.ls-piede a) vinceva e il testo del pulsante diventava blu. */
a.ls-pulsante.ls-pulsante--pieno,
.ls-pulsante--pieno {
	background: var(--ls-accento);
	color: #fff;
}

a.ls-pulsante.ls-pulsante--pieno:hover,
.ls-pulsante--pieno:hover,
.ls-pulsante--pieno:focus-visible {
	background: var(--ls-accento-scuro);
	color: #fff;
}

/* --------------------------------------------------------------- contenuto */

.ls-contenitore {
	width: 100%;
	max-width: var(--ls-contenitore);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Sopra la griglia i margini interni si tolgono: BeTheme usava tutti i
   1220px, e con i 20px per lato il contenuto partiva piu' a destra. */
@media (min-width: 1260px) {
	.ls-contenitore {
		padding-inline: 0;
	}
}

.ls-testo ul,
.ls-testo ol,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
	margin: 0 0 15px 30px;
	padding: 0;
}

/* Come BeTheme: 10px tra le voci degli elenchi. */
.ls-testo li,
.elementor-widget-text-editor li {
	margin-bottom: 10px;
}

/* Le classi di servizio del CSS personalizzato delle pagine di BeTheme. */
.hideThis {
	display: none !important;
}

/* Le gallerie di WordPress ([gallery]): il tema dichiara il supporto html5,
   quindi WordPress non stampa il suo CSS e le colonne vanno date qui. */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--ls-galleria, 3), minmax(0, 1fr));
	gap: 15px;
	margin: 0 0 15px;
}

.gallery-columns-1 { --ls-galleria: 1; }
.gallery-columns-2 { --ls-galleria: 2; }
.gallery-columns-4 { --ls-galleria: 4; }
.gallery-columns-5 { --ls-galleria: 5; }
.gallery-columns-6 { --ls-galleria: 6; }

.gallery-item {
	margin: 0;
}

.gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

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

.ls-singolo--elementor {
	padding-block: 0;
}

/* Gli allineamenti delle immagini di WordPress (alignright nei testi). */
.alignright {
	float: right;
	margin: 0 0 15px 20px;
}

.alignleft {
	float: left;
	margin: 0 20px 15px 0;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.elementor-widget-text-editor::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------------------------------------------------------- accessibilita' */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ls-salta:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100000;
	padding: 10px 15px;
	background: #fff;
	color: var(--ls-titoli);
}

/* Le immagini flottanti degli articoli (alignleft) restano dentro l'articolo:
   senza, il piede risaliva e passava sotto la locandina. */
.ls-singolo::after {
	content: "";
	display: table;
	clear: both;
}