/* Site-wide rules: what the block markup cannot express.
   This sheet loads on every page, so it stays small on purpose. Anything that
   belongs to one template lives in that template's own sheet instead. */

/* ── Header ──────────────────────────────────────────────────────────────
   The block markup carries the colours, the layout and the sizes. What it
   cannot say is here: the standing height, the gold on hover, and the rule
   that sets the contact link apart from the four subject areas. */

.isf-testata {
	min-height: 5.875rem;            /* 94px — the reference's standing height */
	display: flex;
	align-items: center;
}

/* The constrained layout centres the inner group but does not stretch it, so
   without this the flex row packs in the middle and space-between has nothing
   to distribute: the navigation ends up glued to the site title instead of
   sitting at the right edge. Measured, not assumed. */
.isf-testata > .wp-block-group {
	width: 100%;
}

.isf-testata .wp-block-navigation-item__content {
	font-weight: 600;
	text-decoration: none;
}

/* Gold marks the hovered and the focused item alike: a keyboard user gets the
   same signal a pointer user gets. The focus ring stays on top of it. */
.isf-testata .wp-block-navigation-item__content:hover,
.isf-testata .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--secondary);
}

/* Contacts is not a subject area, and the rule says so. It hangs on an explicit
   class and not on :last-child, which today would single out Consulenza — a
   subject area like the other three. The entry itself arrives with T-012, when
   the plain pages exist; until then this rule is inert, which is intended.
   Only while the menu is a row: inside the mobile overlay a vertical rule
   would separate nothing. */
@media (min-width: 56.25rem) {
	.isf-testata .wp-block-navigation-item.isf-voce-contatti {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
		padding-inline-start: 1.4375rem;
	}
}

/* The search field of the header (D-107, T-015): the same mechanism as the
   front-page block, smaller. Compact next to the menu on wide screens; on a
   phone the menu folds into its button and the field takes its own row, full
   width, so it is never a tap target too small to use. */
.isf-cerca-testata {
	width: 11rem;
	margin: 0;
}

.isf-cerca-testata .wp-block-search__inside-wrapper {
	background: #fff;
	border: 0;
	border-radius: 6px;
	padding: 2px;
}

.isf-cerca-testata .wp-block-search__input {
	border: 0;
	font-size: 0.875rem;
	padding: 0.4375rem 0.625rem;
	min-width: 0;
}

.isf-cerca-testata .wp-block-search__button {
	margin: 0;
	padding: 0.375rem;
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 0;
}

@media (max-width: 37.5rem) {
	.isf-testata__destra {
		flex-wrap: wrap !important;
		width: 100%;
	}

	.isf-cerca-testata {
		order: 3;
		width: 100%;
	}
}

/* The site title must not behave like a heading: it is a name, and the theme's
   heading colour would fight the blue background. */
.isf-testata .wp-block-site-title a {
	text-decoration: none;
}

/* ── News card ───────────────────────────────────────────────────────────
   The same component appears on the front page and under an article, so it
   lives here rather than in either sheet: two copies would eventually differ,
   and a news item must be recognisable the same way wherever it shows up.
   The image is optional and the card stands without it. */

.isf-news__elenco {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Tre misure alleggeriscono la scheda, e nessuna la rimpicciolisce davvero:
   l'effetto «mattone» viene dalla massa piena e dagli spigoli vivi, non dalla
   larghezza. Angoli raccordati, fotografia piu' bassa (16/10 invece di 3/2) e
   margini interni piu' stretti. La larghezza resta quella della griglia, che
   dipende dal contenitore e non dalla scheda. */
.isf-news__voce a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background: var(--wp--preset--color--surface);
	border-block-start: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 0 6px 6px;
	overflow: hidden;
}

.isf-news__figura {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	position: relative;
	background: var(--wp--preset--color--tertiary);
}

.isf-news__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Same treatment as every other photograph on the site (D-241). */
	filter: saturate(0.72) contrast(1.08) brightness(1.02);
}

.isf-news__figura::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary);
	opacity: 0.14;
	mix-blend-mode: color;
	pointer-events: none;
}

.isf-news__testo {
	display: block;
	padding: 0.9375rem 1.0625rem 1.125rem;
}

.isf-news__titolo {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--tertiary);
	line-height: 1.35;
}

.isf-news__elenco time {
	display: block;
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-mute);
}

@media (hover: hover) and (pointer: fine) {
	.isf-news__voce a {
		transition: transform 0.22s ease, box-shadow 0.22s ease;
	}

	.isf-news__voce a:hover,
	.isf-news__voce a:focus-visible {
		transform: translateY(-3px);
		box-shadow: 0 0.75rem 1.75rem rgba(5, 35, 64, 0.12);
	}

	.isf-news__voce a:hover .isf-news__titolo {
		text-decoration: underline;
	}
}

/* ── Comparsa delle schede ───────────────────────────────────────────────
   Le schede salgono di poco entrando nello schermo, sfalsate di colonna in
   colonna.

   La classe che le nasconde la mette lo script, mai il foglio: senza
   JavaScript, o senza IntersectionObserver, nessuno la mette e le schede sono
   semplicemente visibili. E' la stessa regola che il filtro gia' rispetta —
   chi non ha JavaScript perde il filtro, non le notizie — applicata qui: una
   scheda che si vede solo se un'animazione parte e' una scheda che qualcuno
   non vedra'.

   Lo scostamento e' piccolo di proposito. Su una griglia di schede l'ingresso
   serve a far capire che sono un elenco e non un muro; se si nota come
   animazione, e' gia' troppo. */

.isf-rivela > li {
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.isf-rivela > li.isf-rivelata {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.isf-news__voce a {
		transition: none !important;
		transform: none !important;
	}

	/* Cintura, oltre alle bretelle dello script: se la classe arrivasse
	   comunque, le schede restano ferme e visibili. */
	.isf-rivela > li {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

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

@media (max-width: 37.5rem) {
	.isf-testata {
		min-height: 4.75rem;         /* 76px — the reference's compact height */
	}
}

/* ── Genere del pezzo ────────────────────────────────────────────────────
   Notizia or approfondimento. It lives here, with the card, because it has
   to look identical on the card and on the article's featured image: someone
   who saw the badge on the front page finds it where they left it.

   Solid fills, not translucent ones: the badge sits on photographs, and a
   translucent chip reads differently over every image. Both pairings are the
   theme's own and clear AA — white on the deep blue, deep blue on the yellow
   the buttons already use. */

.isf-genere {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border-radius: 2px;
}

.isf-genere--approfondimento {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--tertiary);
}

/* Sospeso sulla fotografia della scheda. Il riquadro e' gia' position:
   relative, e il velo di colore vi sta sotto: senza z-index il marchio
   finirebbe sotto lo strato che tinge l'immagine. */
.isf-news__figura .isf-genere {
	position: absolute;
	z-index: 1;
	inset-block-start: 0.625rem;
	inset-inline-start: 0.625rem;
}

/* Senza fotografia scende nel testo, sopra il titolo: il marchio deve restare
   visibile, e appeso a un riquadro che non esiste non lo sarebbe. */
.isf-genere--in-linea {
	margin-block-end: 0.5rem;
}

/* ── Briciole ────────────────────────────────────────────────────────────
   Il percorso in testa alla pagina. Vive qui da quando le sedi sono tre —
   scheda, articolo, pagina semplice — e non due: stava copiato identico in
   scheda.css e articolo.css, e una terza copia sarebbe stata la terza da
   tenere in passo. Le due precedenti sono state tolte, non lasciate a
   sovrascrivere questa. */

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

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

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

.isf-briciole .isf-sep {
	padding-inline: 0.45em;
	opacity: 0.55;
}

.isf-briciole .isf-qui {
	color: var(--wp--preset--color--tertiary);
}

/* ── Shared bits ─────────────────────────────────────────────────────────
   The button and the eyebrow started on the front page and are now used by
   the article too. They move here rather than being copied: a second copy
   is a second thing to keep in step. */

.isf-bottone {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--tertiary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.9375rem 1.3125rem;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 3px;
}

.isf-bottone:hover {
	background: #e9ba00;
	color: var(--wp--preset--color--tertiary);
}

.isf-bottone--chiaro {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.44);
}

.isf-bottone--chiaro:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.isf-occhiello {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1rem;
}

/* ── Piede: i collegamenti della riga dei dati societari ─────────────────
   Il blocco dichiara il colore dei propri collegamenti, ma una regola del tema
   lo scavalcava: PEC, informativa e note legali uscivano in blu ISG sul blu
   profondo del piede, 1,68:1, quasi illeggibili. Misurato il 2026-09-23
   (D-277). Colore esplicito: 6,89:1, bianco al passaggio 15,90:1. */
.isf-piede__societari a {
	color: #8FAFC4;
}

.isf-piede__societari a:hover,
.isf-piede__societari a:focus-visible {
	color: #fff;
}

/* ── WhatsApp della segreteria ───────────────────────────────────────────
   Pulsante fisso in basso a destra, che si espande verso sinistra con la
   scritta (D-398). Compare solo dove la pagina non invita gia' al modulo, piu'
   la pagina iniziale (D-399): lo decide inc/whatsapp.php.

   Cerchio verde WhatsApp, #25D366, con il logo ufficiale bianco intatto, come
   l'icona dell'app (D-404): le linee guida del marchio vietano di cambiare i
   colori del logo (D-401), non di posarlo su un fondo. La scritta e' nel nero
   di WhatsApp, #111B21, il colore della versione nera del logo: 8,80:1 sul
   verde. Compromesso dichiarato e scelto dall'utente: il simbolo bianco sul
   verde e' 1,98:1, sotto il 3:1 delle icone; il nome del pulsante lo danno
   scritta ed etichetta accessibile (misure del 2026-10-04).

   La scritta si apre al passaggio del mouse solo dove il mouse c'e'
   (hover: hover); da tastiera si apre sempre, al fuoco. Su telefono resta
   il logo, e un tocco porta subito a WhatsApp: un'espansione al tocco
   chiederebbe due tocchi per scrivere. */

.isf-whatsapp {
	position: fixed;
	right: 1.5rem;
	bottom: max(1.5rem, env(safe-area-inset-bottom));
	z-index: 20;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 3.5rem;
	min-width: 3.5rem;
	padding: 0 0.875rem;
	border: 0;
	border-radius: 1.75rem;
	background: #25D366;
	color: #111B21;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(5, 35, 64, 0.28);
}

.isf-whatsapp__icona {
	display: block;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
}

.isf-whatsapp__testo {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

@media (hover: hover) {
	.isf-whatsapp:hover .isf-whatsapp__testo {
		max-width: 16rem;
		margin-inline-start: 0.625rem;
		opacity: 1;
	}
}

.isf-whatsapp:focus-visible .isf-whatsapp__testo {
	max-width: 16rem;
	margin-inline-start: 0.625rem;
	opacity: 1;
}

.isf-whatsapp:hover,
.isf-whatsapp:focus-visible {
	color: #111B21;
}

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

@media (prefers-reduced-motion: reduce) {
	.isf-whatsapp__testo {
		transition: none;
	}
}

/* Dove c'e' anche «torna all'inizio» — notizie, pagine semplici, elenco delle
   notizie — i due pulsanti si impilano: WhatsApp in basso, l'altro sopra,
   centrati sulla stessa verticale (3rem contro 3,5rem: 0,25rem di rientro). */
body:has(.isf-whatsapp) .isf-inizio {
	right: 1.75rem;
	bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 4.25rem);
}

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

/* ---------- torna all'inizio ---------- */

/* Schede (D-212) e articoli (D-508): qui e non in scheda.css, che negli
   articoli non si carica. */

/* Lo scorrimento morbido vale per tutti i salti interni, indice compreso, e si
   spegne per chi ha chiesto meno animazioni. */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.isf-inizio {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(5, 35, 64, 0.28);
	/* Nascosto finché il lettore non è sceso; senza JavaScript resta visibile,
	   che è il ripiego giusto: un collegamento in più, non uno in meno. */
	opacity: 1;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.isf-inizio svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}
.isf-inizio:hover {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--background);
}
.isf-inizio:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}

/* Lo script prende il comando e lo mostra solo oltre la piega. */
.isf-inizio.is-nascosto {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
}
.isf-inizio.is-visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
}

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