/*
 * Base comune a sito ed editor: tipografia, contenitore, stili del contenuto.
 * Valori presi dal sito statico.
 */
body,
.editor-styles-wrapper {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: #333;
}

.blue-3sense {
	color: #008fbe;
}

/* Contenitore: stesse larghezze del sito statico (Bootstrap 3 + override del tema). */
.trisense-container {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.trisense-container { width: 750px; }
}

@media (min-width: 992px) {
	.trisense-container { width: 970px; }
}

@media (min-width: 1200px) {
	.trisense-container { width: 1200px; }
}

/*
 * Contenuto delle pagine e blocchi nativi di WordPress (paragrafi, titoli, elenchi, colonne).
 * I selettori usano :where() per avere specificità minima: gli stili dei blocchi 3sense
 * (es. il pulsante LEARN MORE) prevalgono sempre su queste regole generiche.
 */
:where(.entry-content, .editor-styles-wrapper) p {
	margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	line-height: normal;
}

:where(.entry-content, .editor-styles-wrapper) h1 { font-size: 34px; }
:where(.entry-content, .editor-styles-wrapper) h3 { font-size: 18px; }
:where(.entry-content, .editor-styles-wrapper) h4 { font-size: 20px; font-weight: 500; }
:where(.entry-content, .editor-styles-wrapper) h5 { font-size: 14px; }
:where(.entry-content, .editor-styles-wrapper) h6 { font-size: 12px; }

/* Titoli di sezione (es. MONITORAGGIO REAL TIME CON ALERT): .title-paragraph del sito statico. */
:where(.entry-content, .editor-styles-wrapper) h2 {
	margin: 0 0 10px;
	color: #008fbe;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
}

:where(.entry-content, .editor-styles-wrapper) :is(strong, b) {
	font-weight: 600;
}

:where(.entry-content, .editor-styles-wrapper) a {
	color: #008fbe;
	text-decoration: none;
}

:where(.entry-content) a:hover {
	color: #00a4a0;
}

:where(.entry-content, .editor-styles-wrapper) ul {
	list-style: none;
	margin: 0 0 15px;
	padding: 0 0 0 40px;
}

:where(.entry-content, .editor-styles-wrapper) ul li {
	position: relative;
	padding: 2px 0 2px 15px;
}

:where(.entry-content, .editor-styles-wrapper) ul li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 6px;
	height: 6px;
	background: #5f5f5f;
}

:where(.entry-content, .editor-styles-wrapper) ol {
	list-style: decimal;
	margin: 0 0 15px;
	padding: 0 0 0 40px;
}

:where(.entry-content, .editor-styles-wrapper) figure {
	margin: 0;
}

/* Tabelle: specificità più alta per prevalere sui bordi predefiniti del blocco Tabella. */
.entry-content .wp-block-table,
.editor-styles-wrapper .wp-block-table {
	margin: 0 0 15px;
}

.entry-content table,
.editor-styles-wrapper .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 15px;
}

.entry-content table td,
.entry-content table th,
.editor-styles-wrapper .wp-block-table td,
.editor-styles-wrapper .wp-block-table th {
	padding: 5px 0;
	border: 0;
	border-bottom: 1px solid #f3f3f3;
	text-align: left;
	vertical-align: top;
}

.entry-content table th {
	font-weight: 500;
}

/*
 * Pagine composte a blocchi (dettaglio solutions, homepage): stile generale delle sezioni,
 * preso dalle pagine di dettaglio del sito statico.
 *
 *   Titolo (H2) da solo     → titolo di sezione: 46px, blu, centrato (.box-title-infos.medium)
 *   Titolo (H2) in colonna  → sottotitolo: 24px, blu (.title-paragraph)
 *   Paragrafi ed elenchi    → 17px, leggero, nero (.application-description)
 *   Colonne                 → spazio 30px, contenuto centrato in verticale
 */

/* Titolo di sezione: blocco Titolo inserito da solo, fuori dalle colonne. */
.site-main--blocks > h2,
.editor-styles-wrapper .is-root-container > h2 {
	margin: 0 0 60px;
	color: #008fbe;
	font-size: 46px;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
}

/* Colonne. */
.entry-content .wp-block-columns,
.editor-styles-wrapper .wp-block-columns {
	gap: 30px;
	align-items: center;
	margin: 0 auto 104px;
}

/* Spazio tra un blocco 3sense a tutta larghezza (es. Hero) e la prima sezione. */
.site-main--blocks > .trisense-fullwidth + :not(.trisense-fullwidth) {
	margin-top: 117px;
}

/* Testo: paragrafi ed elenchi nelle colonne e nelle pagine a blocchi. */
:where(.site-main--blocks, .editor-styles-wrapper) :where(.wp-block-column) p,
:where(.site-main--blocks) > p {
	margin-bottom: 19px;
	padding-bottom: 10px;
	color: #000;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
}

:where(.site-main--blocks, .editor-styles-wrapper) :where(.wp-block-column) :is(ul, ol),
:where(.site-main--blocks) > :is(ul, ol) {
	margin-bottom: 19px;
	color: #000;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
}

/* Paragrafo subito sotto un titolo di sezione: introduzione centrata a tutta larghezza
   (es. "Dall'analisi dello storico delle posizioni..."). */
.site-main--blocks > h2 + p,
.editor-styles-wrapper .is-root-container > h2 + p {
	margin-top: -2px;
	margin-bottom: 40px;
	text-align: center;
}

/* Paragrafo da solo tra due sezioni (es. "E' inoltre possibile raggiungere..."): centrato. */
.site-main--blocks > p {
	text-align: center;
}

/* Paragrafo subito dopo delle colonne: chiude la sezione, centrato. */
.site-main--blocks > .wp-block-columns + p {
	margin-top: -52px;
	margin-bottom: 80px;
}

/* Stile "Nota" del Paragrafo: testo piccolo tra parentesi (.box-subtitle del sito statico). */
:where(.entry-content, .editor-styles-wrapper) p.is-style-trisense-nota {
	margin-bottom: 0;
	padding-bottom: 0;
	color: #333;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}

.site-main--blocks > p.is-style-trisense-nota {
	margin-top: -20px;
	margin-bottom: 104px;
}

/* Stile "Titolo di sezione" del Titolo: titolo grande anche dentro una colonna
   (es. "CONTENUTO SU BASE POSIZIONE", allineato a sinistra). */
.entry-content .wp-block-column h2.is-style-trisense-sezione,
.editor-styles-wrapper .wp-block-column h2.is-style-trisense-sezione {
	margin-bottom: 20px;
	color: #008fbe;
	font-size: 46px;
	font-weight: 500;
	line-height: 1.1;
}

/*
 * Stile "Progetto" del Gruppo (pagina News): banner con angoli arrotondati e ombra,
 * titolo "Progetto Nome", testo, striscia dei loghi su fondo grigio chiaro.
 */
.wp-block-group.is-style-trisense-progetto {
	margin-bottom: 85px;
}

:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) > .wp-block-image:first-child img {
	border-radius: 15px;
	box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
}

:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) > .wp-block-image:last-child:not(:first-child) {
	margin-top: 40px;
	padding: 0;
	border-radius: 15px;
	background-color: #fafafa;
	overflow: hidden;
}

:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) .wp-block-image img {
	display: block;
	width: 100%;
}

:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) > :is(h1, h2) {
	margin: 39px 0 19px;
	color: #333;
	font-size: 34px;
	font-weight: 500;
	line-height: normal;
	text-align: left;
}

:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) > :is(h1, h2) strong {
	font-weight: 600;
}

:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) > :is(p, ul, ol) {
	margin: 0;
	color: #000;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	text-align: left;
}

:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) > :is(ul, ol) {
	padding-left: 40px;
}

/* Immagini: centrate nella colonna, mai più larghe della colonna. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-image {
	text-align: center;
}

:where(.entry-content, .editor-styles-wrapper) .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* Mobile: titolo di sezione più piccolo e meno spazio tra le sezioni. */
@media screen and (max-width: 767px) {
	.site-main--blocks > h2,
	.editor-styles-wrapper .is-root-container > h2 {
		margin-bottom: 30px;
		font-size: 32px;
	}

	.entry-content .wp-block-columns {
		margin-bottom: 60px;
	}

	.entry-content .wp-block-column h2.is-style-trisense-sezione {
		font-size: 32px;
	}

	:where(.wp-block-group.is-style-trisense-progetto, .wp-block-group.is-style-trisense-progetto > .wp-block-group__inner-container) > :is(h1, h2) {
		font-size: 28px;
	}

	.wp-block-group.is-style-trisense-progetto {
		margin-bottom: 60px;
	}

	.site-main--blocks > p.is-style-trisense-nota {
		margin-bottom: 60px;
	}

	.site-main--blocks > .trisense-fullwidth + :not(.trisense-fullwidth) {
		margin-top: 60px;
	}
}

/* Segnaposto dei blocchi vuoti nell'editor. */
.trisense-placeholder {
	padding: 30px;
	text-align: center;
	background: #f0f0f0;
	border: 1px dashed #999;
	color: #555;
	font-size: 15px;
}