/*
 * ISF — the contact form and its windows.
 *
 * Moved out of pagina.css with T-065 (D-516): the form is no longer only on a
 * page, it opens in a window from the home page, the schede, the news and the
 * search results, which do not load pagina.css. Loaded by the form block and
 * by every call to action (isf_asset_modulo in inc/modulo-contatto.php).
 */

/* ── Il modulo di contatto ───────────────────────────────────────────────
   Il modulo vero ha preso il posto della simulazione il 2026-09-22 (T-017).
   Funziona senza JavaScript: tutte le protezioni girano sul servente. */

.isf-modulo {
	margin-block-start: 1.25rem;
	scroll-margin-top: 2rem;
}

.isf-modulo__form {
	border: 1px solid var(--wp--preset--color--rule);
	background: #fff;
	padding: 1.75rem;
	display: grid;
	gap: 1.25rem;
}

.isf-modulo__campo {
	display: grid;
	gap: 0.375rem;
}

.isf-modulo__campo label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--tertiary);
}

.isf-obbl { color: var(--wp--preset--color--negative); }

.isf-fac {
	font-weight: 400;
	color: var(--wp--preset--color--foreground-mute);
}

.isf-modulo input[type="text"],
.isf-modulo input[type="email"],
.isf-modulo input[type="tel"],
.isf-modulo textarea {
	/* border-box: without it width, padding and border add up, and the fields
	   ran past the right edge of the form by about 24 px — on «Contatti» since
	   Rev.0, hidden by the form's padding; seen in the window of T-065, which
	   has none. */
	box-sizing: border-box;
	font: inherit;
	width: 100%;
	border: 1px solid #c3d0d9;
	border-radius: 3px;
	padding: 0.6875rem 0.8125rem;
	background: #fff;
	color: var(--wp--preset--color--foreground);
}

.isf-modulo input:focus-visible,
.isf-modulo textarea:focus-visible,
.isf-modulo button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.isf-modulo textarea { resize: vertical; }

.isf-modulo__avvertenza {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--foreground-mute);
	line-height: 1.5;
}

/* Il campo esca. NON display:none e NON type=hidden: un campo nascosto per
   attributo non viene compilato nemmeno dai programmi automatici, e la
   protezione non proteggerebbe da nulla. Si toglie dal flusso visivo senza
   toglierlo dal documento; l'attributo aria-hidden e tabindex="-1" sul campo
   lo tengono fuori dalla portata di chi usa tastiera o lettore di schermo. */
.isf-esca {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* La riga dell'informativa. Sta SOPRA il pulsante e non sotto: informare
   dopo che qualcuno ha premuto non e' informare. */
.isf-modulo__informativa {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-mute);
	line-height: 1.55;
}

.isf-modulo__informativa a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.isf-modulo__azione { margin: 0; }

.isf-modulo__form button.isf-bottone {
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
}

/* ── L'esito ─────────────────────────────────────────────────────────────
   Tre toni per tre cose diverse, e la differenza non e' estetica: la presa in
   carico si dichiara SOLO quando la richiesta e' registrata (D-140). Il tono
   del guasto esiste perche' quel caso va detto, non attenuato. */

.isf-modulo__esito {
	padding: 1.25rem 1.375rem;
	margin-block-end: 1.25rem;
	border-inline-start: 4px solid;
}

.isf-modulo__esito-titolo {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--tertiary);
}

.isf-modulo__esito-corpo { margin-block-start: 0.5rem; }
.isf-modulo__esito-corpo p:last-child,
.isf-modulo__esito-corpo ul:last-child { margin-block-end: 0; }
.isf-modulo__esito-corpo ul { margin-block: 0; padding-inline-start: 1.25rem; }

.isf-modulo__esito--riuscito {
	background: #eef6f1;
	border-color: var(--wp--preset--color--positive);
}

.isf-modulo__esito--attenzione {
	background: var(--wp--preset--color--surface-warm);
	border-color: #E0B400;
}

.isf-modulo__esito--guasto {
	background: #f9efed;
	border-color: var(--wp--preset--color--negative);
}

/* ── La finestra dell'esito finale (D-277) ───────────────────────────────
   Finestra nativa aperta dallo script con showModal(): fuoco, Esc e sfondo
   inerte sono del browser. Porta lo stesso tono del messaggio in pagina, sul
   filetto in cima. */

.isf-finestra {
	/* border-box: senza, larghezza e margini interni si sommano e a 390px la
	   finestra usciva dallo schermo — misurata 404px. */
	box-sizing: border-box;
	width: min(30rem, calc(100vw - 2rem));
	margin: auto;
	padding: 1.75rem 1.75rem 1.5rem;
	border: 0;
	border-top: 5px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: #fff;
	color: var(--wp--preset--color--foreground);
	box-shadow: 0 1.5rem 3.5rem rgba(5, 35, 64, 0.28);
}

.isf-finestra--riuscito { border-top-color: var(--wp--preset--color--positive); }
.isf-finestra--guasto { border-top-color: var(--wp--preset--color--negative); }

.isf-finestra::backdrop {
	background: rgba(5, 35, 64, 0.55);
}

.isf-finestra .isf-modulo__esito-titolo {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.isf-finestra__azione {
	margin: 1.5rem 0 0;
	text-align: end;
}

.isf-finestra__azione .isf-bottone {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

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

.isf-modulo__recapiti {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 37.5rem) {
	.isf-modulo__form {
		padding: 1.25rem;
	}
}

/* ── The counter of the request (D-518) ─────────────────────────────────
   Under the field, quiet until the limit is passed: then red, with how much
   to remove, and the field gets a red edge. Without JavaScript the same line
   states the limit. */

.isf-modulo__conta {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--foreground-mute);
	font-variant-numeric: tabular-nums;
}

.isf-modulo__conta--oltre {
	color: var(--wp--preset--color--negative);
	font-weight: 600;
}

.isf-modulo textarea.isf-campo--oltre {
	border-color: var(--wp--preset--color--negative);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--negative);
}

/* Read by screen readers, not shown: the counter's announcements. */
.isf-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── La guida sopra il modulo ────────────────────────────────────────────
   Dettata dall'utente per «Scrivici» su «Contatti» (D-310); dal T-065 viaggia
   con il modulo, nella pagina del solo modulo e nella finestra. */

.isf-modulo__intro {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-mute);
	line-height: 1.55;
}

/* ── The form window (T-065, D-516) ──────────────────────────────────────
   The same native window as the outcome, wider, with a heading and a close
   button: focus, Esc and the inert background are the browser's. It scrolls
   inside when the screen is short, so the send button stays reachable, and
   the heading stays in sight while it does. A click on the backdrop does NOT
   close it: halfway through a request, one stray click would lose it. */

.isf-finestra--modulo {
	width: min(40rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	overflow: auto;
	overscroll-behavior: contain;
	padding: 0;
}

.isf-finestra__testa {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1rem 0.75rem 1.5rem;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.isf-finestra__titolo {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--preset--color--tertiary);
}

/* The heading takes the focus only while the form is loading, to give the
   screen reader a name; it is not a control, so no ring. */
.isf-finestra__titolo:focus { outline: none; }

/* 44 px: a target for the finger, like the other round buttons of the site. */
.isf-finestra__chiudi {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--tertiary);
	font: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.isf-finestra__chiudi:hover { background: var(--wp--preset--color--surface-warm); }

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

.isf-finestra__dentro {
	padding: 1.25rem 1.5rem 1.5rem;
}

.isf-finestra__attesa {
	margin: 0;
	color: var(--wp--preset--color--foreground-mute);
}

.isf-modulo--finestra { margin: 0; }

.isf-modulo--finestra .isf-modulo__form {
	border: 0;
	padding: 0;
}

@media (max-width: 37.5rem) {
	.isf-finestra__dentro {
		padding: 1rem 1.25rem 1.25rem;
	}
}