/**
 * Stili per il contenuto redazionale delle pagine.
 *
 * Il tema breakdance-zero non definisce stili per il testo lungo: i titoli
 * ereditano la scala pensata per le sezioni del builder (H2 a 51px e H3 a 39px
 * contro un paragrafo da 18px) e non esistono regole per tabelle ed elenchi
 * numerati.
 *
 * Ambito limitato a .mda-contenuto, il contenitore aggiunto da
 * inc/contenuto-wrapper.php: gli elementi costruiti in Breakdance non vengono
 * toccati.
 *
 * NB sul prefisso `.breakdance`: il builder carica il proprio global-settings.css
 * dopo questo foglio, con selettori di pari specificità (.breakdance h2).
 * A parità vince l'ultimo caricato, quindi qui serve un livello in più.
 */

/* Palette condivisa: la leggono sia .mda-contenuto sia il blocco FAQ
 * (css/faq.css), che vive fuori dal contenitore del contenuto. */
:root {
	--mda-accento: #f14307;
	--mda-testo: #333;
	--mda-titolo: #1a1f2b;
	--mda-bordo: #e6e6e6;
}

/* ---------------------------------------------------------------
 * Titoli
 *
 * Scala rapportata al paragrafo da 18px: H2 circa 1,7x e H3 circa 1,25x.
 * Prima erano rispettivamente 2,9x e 2,2x.
 *
 * Il margine superiore è molto maggiore dell'inferiore, così ogni titolo
 * risulta legato al testo che introduce e non a quello che lo precede.
 * ------------------------------------------------------------- */

.breakdance .mda-contenuto h2,
.mda-contenuto h2 {
	font-size: clamp(1.55rem, 1rem + 1.4vw, 1.95rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--mda-titolo);
	margin: 2.4em 0 0.7em;
	letter-spacing: -0.01em;
}

/* filetto breve sotto il titolo: segna la sezione senza appesantire */
.breakdance .mda-contenuto h2::after,
.mda-contenuto h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 0.5rem;
	background: var(--mda-accento);
	border-radius: 2px;
}

.breakdance .mda-contenuto h2:first-child,
.mda-contenuto h2:first-child {
	margin-top: 0;
}

.breakdance .mda-contenuto h3,
.mda-contenuto h3 {
	font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.32rem);
	line-height: 1.35;
	font-weight: 600;
	color: var(--mda-titolo);
	margin: 1.9em 0 0.5em;
}

/* ---------------------------------------------------------------
 * Testo
 * ------------------------------------------------------------- */

.breakdance .mda-contenuto p,
.mda-contenuto p {
	color: var(--mda-testo);
	line-height: 1.75;
	margin: 0 0 1.1em;
}

.breakdance .mda-contenuto strong,
.breakdance .mda-contenuto b,
.mda-contenuto strong,
.mda-contenuto b {
	color: var(--mda-titolo);
	font-weight: 600;
}

.breakdance .mda-contenuto a,
.mda-contenuto a {
	color: var(--mda-accento);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.breakdance .mda-contenuto a:hover,
.mda-contenuto a:hover {
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------
 * Elenchi
 * ------------------------------------------------------------- */

.breakdance .mda-contenuto ul,
.breakdance .mda-contenuto ol,
.mda-contenuto ul,
.mda-contenuto ol {
	margin: 1.1em 0 1.4em;
	padding-left: 1.4em;
	color: var(--mda-testo);
	line-height: 1.7;
}

.breakdance .mda-contenuto li,
.mda-contenuto li {
	margin-bottom: 0.55em;
}

.breakdance .mda-contenuto li p,
.mda-contenuto li p {
	margin: 0;
}

.breakdance .mda-contenuto ol > li::marker,
.mda-contenuto ol > li::marker {
	color: var(--mda-accento);
	font-weight: 700;
}

.breakdance .mda-contenuto ul > li::marker,
.mda-contenuto ul > li::marker {
	color: var(--mda-accento);
}

/* ---------------------------------------------------------------
 * Tabelle
 * ------------------------------------------------------------- */

.breakdance .mda-contenuto table,
.mda-contenuto table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0 1.8em;
	color: var(--mda-testo);
	line-height: 1.5;
	/* su schermi stretti scorre invece di deformare la pagina */
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
	.breakdance .mda-contenuto table,
	.mda-contenuto table {
		display: table;
		overflow-x: visible;
	}
}

.breakdance .mda-contenuto table th,
.mda-contenuto table th {
	text-align: left;
	font-weight: 600;
	color: var(--mda-titolo);
	padding: 0.75em 1em;
	border-bottom: 2px solid var(--mda-accento);
	white-space: nowrap;
}

.breakdance .mda-contenuto table td,
.mda-contenuto table td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--mda-bordo);
	vertical-align: top;
}

/* la colonna dei valori resta su una riga sola */
.breakdance .mda-contenuto table td:last-child,
.mda-contenuto table td:last-child {
	white-space: nowrap;
}

.breakdance .mda-contenuto table tbody tr:last-child td,
.mda-contenuto table tbody tr:last-child td {
	border-bottom: none;
}

.breakdance .mda-contenuto table tbody tr:hover,
.mda-contenuto table tbody tr:hover {
	background: #fafafa;
}

/* ---------------------------------------------------------------
 * Chiusura del blocco
 * ------------------------------------------------------------- */

.breakdance .mda-contenuto > *:last-child,
.mda-contenuto > *:last-child {
	margin-bottom: 0;
}