/*
 * Scheda di corso — layout and the blocks that build it from its fields.
 *
 * Follows the reference approved in D-212. Colours, type sizes and spacing come
 * from theme.json presets, never as literals: a hard-coded colour here would
 * survive a palette change and quietly contradict it, which is what D-219 was
 * about.
 *
 * The measure is the one invariant of the layout, and it is kept by the pair
 * (column width, body size) rather than by the width alone: 44rem at 18px is
 * 90 characters, measured on the real font over 40,000 characters of these
 * schede. That is past the 80 of WCAG 1.4.8 AAA, chosen knowingly: see D-224.
 */

/* ---------- impianto ---------- */

.isf-scheda .isf-testa,
.isf-scheda .isf-impianto {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.isf-testa {
	padding-block-start: var(--wp--preset--spacing--40);
}

/* The core's constrained layout centres every child narrower than its
   container, which put the title in the middle of the page while the body text
   below it started at the left edge. The head of the page shares the body's
   left edge instead: same column, same start. The !important is not a
   preference, it answers the core's own !important on those margins. */
.isf-testa > * {
	margin-inline: 0 !important;
}

.isf-impianto {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	align-items: start;
}

.isf-corpo,
.isf-lato {
	min-width: 0; /* lets the measure hold when the grid is a single column */
	max-width: var(--wp--style--global--content-size);
}

/* Two columns once both fit at their natural width: 44rem of body, 22rem of
   side column, plus the gap and the page padding. Below that the side column
   goes under, which is where it belongs on a phone. */
@media (min-width: 71.25rem) {
	.isf-impianto {
		/* The two columns add up to the page width, so the pair reads as one
		   block instead of a text column with something floating beside it. */
		grid-template-columns: 44rem 22rem;
	}
	.isf-lato {
		max-width: none;
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
	.isf-corpo {
		max-width: none;
	}
}

/* Everything in the body column runs to the full width of that column: prose,
   headings and the termini table share one left and one right edge, which is
   what makes the page read as built rather than assembled. The measure is held
   by the body size, not by narrowing the prose against the table. */
.isf-corpo > *,
.isf-corpo .wp-block-post-content > * {
	max-width: none;
	margin-inline: 0;
}

/* ---------- intestazione della pagina ---------- */

/* Le briciole stanno in sito.css: sono di tre sedi, non di questa. */

.isf-etichette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.isf-etichetta {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	border-radius: 3px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--tertiary);
}
.isf-etichetta--tenue {
	background: #edf2f6;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.isf-scheda .isf-sommario {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--foreground-alt);
	margin-block-start: var(--wp--preset--spacing--30);
}

.isf-scheda .isf-filetto {
	width: 4.75rem;
	height: 3px;
	border: 0;
	background: var(--wp--preset--color--secondary);
	margin-block: var(--wp--preset--spacing--40) 0;
	margin-inline: 0;
}

/* ---------- corpo ---------- */

.isf-corpo > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}
.isf-corpo h2 {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* ---------- tabella dei termini ---------- */

.isf-tabella-scorre {
	margin-block-start: var(--wp--preset--spacing--30);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* The region is focusable so a keyboard can scroll it; it must then show focus. */
.isf-tabella-scorre:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.isf-tabella {
	width: 100%;
	min-width: 38rem;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--wp--preset--font-size--small);
}
.isf-tabella thead tr {
	background: var(--wp--preset--color--primary);
}
.isf-tabella thead th {
	color: var(--wp--preset--color--background);
	font-weight: 600;
	text-align: center;
	padding: 0.7rem 0.5rem;
}
.isf-tabella thead th:first-child {
	text-align: left;
	padding-inline: 0.75rem 1.5rem;
}
/* The first two columns are what the reader looks up: which path, how many
   hours. They get the room, and the gap between them, that the mode columns
   were holding. Those still fit: their longest value is a condition set in the
   smallest size, which wraps without being cramped. */
.isf-col-percorso {
	width: 17rem;
}
.isf-col-ore {
	width: 3.5rem;
}

.isf-tabella .isf-gruppo th {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	padding: 0.55rem 0.75rem;
}
.isf-tabella tbody tr {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.isf-tabella tbody th[scope="row"] {
	text-align: left;
	padding: 0.75rem 1.5rem 0.75rem 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--tertiary);
}
.isf-tabella tbody td {
	text-align: center;
	padding: 0.75rem 0.35rem;
	font-weight: 600;
}
.isf-tabella .isf-ore {
	color: var(--wp--preset--color--tertiary);
	font-weight: 700;
}
.isf-tabella .isf-si {
	color: var(--wp--preset--color--positive);
}
.isf-tabella .isf-no {
	color: var(--wp--preset--color--negative);
}
/* The condition sits under the verdict, in the normal text colour: it is a
   qualification, not a second verdict, and colouring it would say otherwise. */
.isf-tabella .isf-condizione {
	display: block;
	margin-block-start: 0.2rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--foreground-mute);
}

/* Set in italics, one size down: this is the theme talking about the table,
   not another statement of the same rank as what the table says. */
.isf-nota-mista {
	margin-block-start: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	padding: 0.9rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	line-height: 1.6;
}

/* ---------- riferimenti normativi ---------- */

.isf-elenco-rif {
	margin: 0;
	padding-inline-start: 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.isf-elenco-rif li {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}
.isf-verifica {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-mute);
}
.isf-verifica strong {
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}
.isf-verifica .isf-punto {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
}

/* ---------- colonna laterale ---------- */

.isf-in-breve {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	padding: 1.25rem 1.375rem;
}
.isf-in-breve h2 {
	margin: 0 0 0.875rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.isf-in-breve dl {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.isf-in-breve dt {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-mute);
}
.isf-in-breve dd {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.isf-richiamo {
	margin-block-start: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary);
	border-radius: 5px;
	padding: 1.375rem 1.5rem;
}
.isf-richiamo__titolo {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--background);
}
.isf-richiamo__testo {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: #c9dbe8;
}
.isf-richiamo .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
}
/* WhatsApp come alternativa al modulo (D-398): una riga sotto il bottone, non
   un secondo bottone che gli faccia concorrenza. Bianco su blu, sottolineato,
   perche' sia riconoscibile come collegamento senza il colore. */
.isf-richiamo__alternativa {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: #c9dbe8;
}
.isf-richiamo__alternativa a {
	color: var(--wp--preset--color--background);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.isf-richiamo__alternativa a:hover {
	color: var(--wp--preset--color--secondary);
}
.isf-richiamo__alternativa a:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* ---------- stampa ---------- */

@media print {
	.isf-briciole,
	.isf-richiamo {
		display: none;
	}
	.isf-impianto {
		display: block;
	}
	.isf-lato {
		position: static;
		margin-block-start: 1.5rem;
	}
	.isf-tabella-scorre {
		overflow: visible;
	}
}

/* ---------- allineamento ----------
   Extendable centres the post title. A scheda is a document, not a poster: the
   eye must find every line's start in the same place, and a centred heading
   over left-aligned prose moves that start on every line. Undone explicitly
   rather than by accident of specificity. */

.isf-scheda .isf-testa,
.isf-scheda .isf-testa > *,
.isf-scheda .wp-block-post-title,
.isf-scheda .isf-sommario {
	text-align: left;
}

/* The separator is a rule under the title, not a divider across the column:
   it starts where the text starts. */
.isf-scheda .isf-filetto {
	margin-inline: 0 auto;
}

/* ---------- indice della pagina ---------- */

.isf-indice {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.isf-indice h2 {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-mute);
}
.isf-indice ol {
	margin: 0;
	padding-inline-start: 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.isf-indice a {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.isf-indice a:hover {
	text-decoration: underline;
}

/* ---------- nota in coda alla tabella ---------- */

.isf-nota-termini {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--wp--preset--color--foreground-alt);
}
.isf-nota-termini strong {
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

@media print {
	.isf-indice {
		display: none;
	}
}

/* ---------- elenchi e avvisi nel corpo ---------- */

/* The levels read as definitions, not as bullets: the label leads, the
   explanation follows. Removing the marker and hanging the label is what makes
   three long paragraphs scannable. */
.isf-corpo .isf-livelli {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.isf-corpo .isf-livelli li {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	padding-inline-start: 0.9rem;
	border-inline-start: 3px solid var(--wp--preset--color--secondary);
}
.isf-corpo .isf-livelli strong {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* A box that qualifies the section, in the accent colour's palest tint: it must
   catch the eye without competing with the table below it. */
.isf-corpo .isf-avviso {
	background: var(--wp--preset--color--surface-warm);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 4px;
	padding: 0.9rem 1.1rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}
.isf-corpo .isf-avviso strong {
	font-weight: 600;
}

/* Non applicabile: quel percorso non ha quella voce. Il grigio tenue lo
   distingue dal diniego, che e' rosso perche' e' una regola, mentre qui non
   c'e' nulla da decidere. */
.isf-tabella .isf-na {
	color: var(--wp--preset--color--foreground-mute);
}