/* ISF — pagina semplice.
   Un'unica colonna costretta alla larghezza del testo. Le briciole stanno in
   sito.css, i bottoni e l'occhiello pure: qui c'e' solo l'impaginato. */

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

/* Il layout del nucleo centra ogni figlio piu' stretto del contenitore, e qui
   non lo vogliamo: stessa ragione dichiarata in articolo.css. */
.isf-pagina__testa > *,
.isf-pagina__corpo > * {
	margin-inline: 0 !important;
}

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

.isf-pagina .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.13;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--tertiary);
	margin: 0.75rem 0 0;
	text-align: left;
	max-width: 46rem;
}

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

.isf-pagina__corpo > * {
	max-width: 46rem;
}

.isf-pagina__corpo h2 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--tertiary);
	margin-block: var(--wp--preset--spacing--40) 0.75rem;
}

/* ── Recapiti ────────────────────────────────────────────────────────────
   Il blocco dei recapiti della pagina dei contatti. Non e' una copia di
   quello del piede: la' sono l'adempimento in corpo minimo su ogni pagina,
   qui sono l'informazione che il visitatore e' venuto a cercare, e la
   differenza si vede nella dimensione. */

.isf-recapiti-pagina {
	font-style: normal;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.75rem 2.5rem;
	background: var(--wp--preset--color--surface);
	border-block-start: 3px solid var(--wp--preset--color--primary);
	padding: 1.875rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

.isf-recapiti-pagina > div {
	min-width: 0;
}

.isf-recapiti-pagina dt {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-block-end: 0.375rem;
}

.isf-recapiti-pagina dd {
	margin: 0;
	color: var(--wp--preset--color--tertiary);
	overflow-wrap: break-word;
}

.isf-recapiti-pagina a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

.isf-recapiti-pagina a:hover {
	border-block-end-color: currentColor;
}

@media (max-width: 37.5rem) {
	.isf-recapiti-pagina {
		padding: 1.375rem;
		gap: 1.375rem;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   SEZIONI DELLE PAGINE SEMPLICI
   Impaginazione di «Chi siamo» e «Contatti» secondo la composizione di
   D-259. Le classi stanno qui e il contenuto nella pagina: chi redige
   governa il testo dal pannello, il tema governa la forma.
   ════════════════════════════════════════════════════════════════════════ */

.isf-sezione {
	margin-block-start: var(--wp--preset--spacing--50);
}

.isf-sezione > h2 {
	margin-block: 0 1rem;
}

/* ── La posizione ────────────────────────────────────────────────────────
   Riquadro a fondo scuro con l'affermazione che costa: e' il punto in cui la
   pagina alza la voce UNA VOLTA SOLA. Sta dentro la colonna, con i bordi
   allineati al testo sopra e sotto, come il riquadro dei recapiti: la colonna
   e' allineata a sinistra, e una fascia a tutta larghezza calcolata sul centro
   dello schermo usciva dal testo da un lato solo. */

.isf-pagina .isf-posizione {
	background: var(--wp--preset--color--tertiary);
	padding-block: var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--50);
}

.isf-posizione__dentro {
	padding-inline: 1.75rem;
}

.isf-posizione .isf-occhiello {
	color: var(--wp--preset--color--secondary);
}

.isf-posizione__claim {
	font-size: var(--wp--preset--font-size--headline);
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0 0 1.125rem;
	font-weight: 600;
}

.isf-posizione__glossa {
	color: #cddbe6;
	margin: 0;
}

/* ── La ricerca ──────────────────────────────────────────────────────────
   La pagina dei risultati usa l'impaginato delle pagine semplici: stessa
   testa, stessa colonna. I risultati stanno in gruppi per tipo, e ogni voce
   mostra titolo, indirizzo e sommario: l'indirizzo dice dove si arriva prima
   di arrivarci. */

.isf-cerca-pagina {
	display: flex;
	gap: 0.625rem;
	max-width: 46rem;
	margin-block-start: 1.25rem;
}

.isf-cerca-pagina input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

.isf-cerca-pagina .isf-bottone {
	border: 0;
	cursor: pointer;
}

.isf-ricerca__esito {
	color: var(--wp--preset--color--foreground-mute);
}

.isf-ricerca__gruppo h2 {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
}

.isf-ricerca__n {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--foreground-mute);
	letter-spacing: 0;
}

.isf-ricerca__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.125rem;
}

.isf-ricerca__voce {
	display: grid;
	gap: 0.125rem;
}

.isf-ricerca__titolo {
	font-weight: 700;
	color: var(--wp--preset--color--tertiary);
}

.isf-ricerca__indirizzo {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	overflow-wrap: anywhere;
}

.isf-ricerca__sommario {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-mute);
}

.isf-ricerca__nessuno {
	background: var(--wp--preset--color--surface);
	padding: 1.625rem 1.75rem;
	margin-block-start: 1.25rem;
}

.isf-ricerca__nessuno h2 {
	margin-block-start: 0;
}

.isf-ricerca__nessuno p:last-child {
	margin-block-end: 0;
}

/* ── Il motto ────────────────────────────────────────────────────────────
   Chiusura di «Chi siamo»: il nome, poi la frase dell'azienda, prima del
   richiamo al contatto. Tono di firma, non di titolo: la voce alta la pagina
   l'ha gia' usata nella posizione. */

.isf-pagina__motto {
	margin-block-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--tertiary);
	font-weight: 700;
}

.isf-pagina__motto span {
	display: block;
	font-weight: 400;
	color: var(--wp--preset--color--foreground-mute);
}

/* ── Dove siamo ──────────────────────────────────────────────────────────
   Mappa a sinistra, dati ufficiali a destra.

   La mappa e' un'IMMAGINE, non un riquadro incorporato: D-082 vieta codice
   di terze parti nel browser del visitatore, ed e' la condizione che tiene
   il sito senza banner di consenso. Il collegamento porta fuori, dove il
   consenso non e' piu' affare nostro. */

/* La sezione della mappa esce dalla colonna del testo e prende la larghezza
   piena del contenitore: una mappa stretta quanto un paragrafo non si legge,
   e questa e' l'informazione che il visitatore e' venuto a cercare. */
.isf-pagina__corpo > .isf-sezione--larga {
	max-width: none;
}

.isf-dove {
	margin-block-start: 1.25rem;
}

.isf-dove .isf-recapiti-pagina {
	margin-block-start: 1.25rem;
	border-block-start: 3px solid var(--wp--preset--color--primary);
}

.isf-mappa {
	margin: 0;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

/* Tutta la mappa e' il collegamento, non un bottone accanto: e' il gesto che
   chi guarda una mappa prova per primo. */
.isf-mappa__vai {
	display: block;
	position: relative;
	line-height: 0;
}

.isf-mappa img {
	display: block;
	width: 100%;
	height: auto;
}

.isf-mappa__lente {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	background: var(--wp--preset--color--tertiary);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	padding: 0.5rem 0.75rem;
	border-radius: 3px;
	box-shadow: 0 0.25rem 0.75rem rgba(5, 35, 64, 0.25);
}

.isf-mappa__vai:hover .isf-mappa__lente {
	background: var(--wp--preset--color--primary);
}

.isf-mappa__vai:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.isf-mappa figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--foreground-mute);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.isf-mappa figcaption a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.isf-mappa figcaption a:hover {
	text-decoration: underline;
}

@media (max-width: 56.25rem) {
	.isf-dove {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 37.5rem) {
	.isf-pagina .isf-posizione {
		padding-block: var(--wp--preset--spacing--40);
	}

	.isf-posizione__dentro {
		padding-inline: 1.25rem;
	}
}

/* ── Mappa del sito (T-012) ───────────────────────────────────────────────
   La pagina per le persone, non per i motori: un titolo per sezione, le
   schede raggruppate come nella pagina di materia. Le voci sono tante, e in
   colonna singola la pagina diventerebbe un rotolo: da schermo largo due
   colonne, che il browser riempie per conto proprio. */

.isf-mappa__sezione h2 a {
	color: inherit;
	text-decoration: none;
}

.isf-mappa__sezione h2 a:hover {
	text-decoration: underline;
}

.isf-mappa__sezione h3 {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--tertiary);
	margin-block: 1.25rem 0.5rem;
}

.isf-mappa__elenco {
	margin: 0;
	padding-inline-start: 1.25rem;
	line-height: 1.5;
}

.isf-mappa__elenco li {
	margin-block-end: 0.375rem;
	break-inside: avoid;
}

@media (min-width: 48rem) {
	.isf-mappa__elenco {
		columns: 2;
		column-gap: 2.5rem;
	}
}