/*
Theme Name: KRW Blocks
Theme URI: https://krw-tech.com
Author: KRW-TECH
Author URI: https://krw-tech.com
Description: Tema a blocchi di KRW-TECH. Sostituisce Hello Elementor + Elementor Pro Theme Builder. Token di design in theme.json, testata e pie pagina come template part, font self-hostati. Base riusabile per i siti cliente che richiedono davvero WordPress.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krw-blocks
Tags: block-theme, full-site-editing, business, one-column, wide-blocks, accessibility-ready
*/

/* I token stanno in theme.json. Qui solo i componenti che i blocchi core non coprono.
   Movimento: durate UI sotto i 300ms, mai ease-in, hover dietro @media (hover:hover),
   tutto spento da prefers-reduced-motion (regole in siti/gate-qualita.md, skill emil-motion). */

/* ---------- Testata ---------- */

.krw-testata {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--bordo);
}

.krw-testata .wp-block-site-logo img {
	height: 38px;
	width: auto;
}

.krw-testata .wp-block-navigation {
	font-size: var(--wp--preset--font-size--piccolo);
	font-weight: 500;
}

.krw-testata .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}

.krw-testata .wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--arancio);
}

@media (hover: hover) {
	.krw-testata .wp-block-navigation a {
		transition: border-color 160ms cubic-bezier(0.2, 0.6, 0.3, 1),
			color 160ms cubic-bezier(0.2, 0.6, 0.3, 1);
	}

	.krw-testata .wp-block-navigation a:hover {
		color: var(--wp--preset--color--arancio-testo);
		border-bottom-color: var(--wp--preset--color--arancio);
	}
}

/* ---------- Occhiello di sezione ---------- */

.krw-occhiello {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 105, 0, 0.08);
	color: #bd4e00;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}

/* L'occhiello e' inline-block: il text-align-center del markup non lo sposta (centra
   solo il testo DENTRO la pillola, che e' larga quanto il testo). Nelle sezioni con
   titolo centrato va centrata la pillola stessa: blocco largo quanto il contenuto,
   margini auto — cosi' il centraggio constrained del core torna a funzionare. */
.krw-occhiello.has-text-align-center {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

/* Su fondo scuro l'arancio pieno vibra: si schiarisce (brand/README.md) */
.krw-scuro .krw-occhiello {
	background: rgba(255, 122, 31, 0.08);
	color: var(--wp--preset--color--arancio-chiaro);
}

/* ---------- Sezioni scure ---------- */

.krw-scuro,
.krw-scuro p,
.krw-scuro li {
	color: #ffffff;
}

.krw-scuro :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--bianco);
}

.krw-scuro a:not(.wp-element-button) {
	color: var(--wp--preset--color--navy-testo);
}

.krw-scuro .krw-tenue {
	color: #a9b6d1;
}

.krw-tenue {
	color: var(--wp--preset--color--testo-tenue);
}

/* ---------- Schede ---------- */

.krw-scheda {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--card);
	background: var(--wp--preset--color--bianco);
	height: 100%;
}

/* La barra gradiente in cima che cresce al hover: era il custom CSS per-elemento
   delle card su TUTTE le pagine Elementor (0% → 100% in 400ms). */
.krw-scheda::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 4px;
	background: linear-gradient(90deg, #f97316, #fb923c);
	border-radius: var(--wp--custom--raggio--card) var(--wp--custom--raggio--card) 0 0;
	transition: width 400ms ease;
	z-index: 10;
}

/* Piu' schede impilate nella stessa colonna (home, Chi siamo): la colonna e' un flex item
   stretchato, quindi 100% CIASCUNA = N volte l'altezza della colonna e sfondano la banda.
   Il 100% resta solo dove la scheda e' figlia unica, cioe' nelle griglie a scheda-per-colonna. */
.krw-scheda:not(:only-child) {
	height: auto;
}

.krw-scuro .krw-scheda {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
}

@media (hover: hover) {
	.krw-scheda {
		transition: transform 200ms cubic-bezier(0.2, 0.6, 0.3, 1),
			box-shadow 200ms cubic-bezier(0.2, 0.6, 0.3, 1),
			border-color 200ms cubic-bezier(0.2, 0.6, 0.3, 1);
	}

	.krw-scheda:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	}

	.krw-scheda:hover::before {
		width: 100%;
	}
}

/* Etichetta tecnologica in fondo alla scheda */
.krw-etichetta {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 8px;
	background: rgba(36, 58, 106, 0.06);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	margin: 0;
}

.krw-scuro .krw-etichetta {
	background: rgba(255, 255, 255, 0.08);
	color: #cdd8ee;
}

/* ---------- Finestra terminale (hero home) ---------- */

.krw-terminale {
	display: flex;
	flex-direction: column;
	/* 420px: era il min-height del terminale sulla hero Elementor */
	min-height: 420px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	box-shadow: var(--wp--preset--shadow--rilievo);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--piccolo);
	line-height: 1.9;
	/* Tilt 3D al mouse, dal sito Elementor: assets/tilt.js scrive --tilt-x/--tilt-y,
	   qui si consumano. Senza JS (touch, reduced-motion) le var restano 0 = fermo. */
	transform-style: preserve-3d;
	transform: perspective(900px) rotateX(calc(var(--tilt-x, 0) * 1deg))
		rotateY(calc(var(--tilt-y, 0) * 1deg));
	will-change: transform;
}

.krw-terminale__corpo,
.krw-terminale > .krw-audit {
	flex: 1;
}

.krw-terminale__barra {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.28);
}

.krw-terminale__punto {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.krw-terminale__punto--rosso {
	background: #ff5f57;
}

.krw-terminale__punto--giallo {
	background: #febc2e;
}

.krw-terminale__punto--verde {
	background: #28c840;
}

.krw-terminale__titolo {
	margin: 0 0 0 0.5rem;
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--wp--preset--font-size--micro);
}

.krw-terminale__corpo {
	padding: 1.5rem 1.25rem 1.75rem;
	color: #d7e2f5;
	margin: 0;
	list-style: none;
}

.krw-terminale__corpo li {
	margin: 0;
}

.krw-terminale__prompt {
	color: var(--wp--preset--color--arancio-chiaro);
}

.krw-terminale__ok {
	color: #43d17f;
}

.krw-terminale__marchio {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	color: var(--wp--preset--color--bianco);
	letter-spacing: -0.02em;
	margin: 0.75rem 0 0.15rem;
}

.krw-terminale__paga {
	display: block;
	color: var(--wp--preset--color--navy-testo);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.krw-terminale__cursore {
	display: inline-block;
	width: 9px;
	height: 1.05em;
	background: var(--wp--preset--color--arancio-chiaro);
	vertical-align: text-bottom;
	margin-left: 4px;
	opacity: 0.85;
	/* Il cursore del terminale lampeggia come sul sito Elementor (blink 1s) */
	animation: krw-lampeggio 1s infinite;
}

@keyframes krw-lampeggio {
	0%,
	100% {
		opacity: 0.85;
	}

	50% {
		opacity: 0;
	}
}

/* ---------- Referto SEO (hero siti web) ---------- */

.krw-audit {
	padding: 1.25rem 1.25rem 1.5rem;
	color: #d7e2f5;
	font-family: var(--wp--preset--font-family--mono);
}

.krw-audit__stato {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #43d17f;
}

.krw-audit__pallino {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #43d17f;
	flex: 0 0 auto;
}

.krw-audit__griglia {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.krw-audit__voce {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}

.krw-audit__valore {
	margin: 0;
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--bianco);
}

.krw-audit__etichetta {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: #a9b6d1;
}

.krw-audit__totale {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
	padding: 1rem;
	border-radius: 12px;
	/* 0.10 e non 0.14: sul navy il composito con l'arancio #ff7a1f del numero deve
	   reggere 4.5:1 anche quando su mobile il numero scende sotto il large text */
	background: rgba(255, 105, 0, 0.1);
}

.krw-audit__media {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--arancio-chiaro);
}

.krw-audit__esito {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--bianco);
}

.krw-audit__nota {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: #a9b6d1;
}

.krw-audit__fonti {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: #8fa0c2;
}

@media (max-width: 420px) {
	.krw-audit__griglia {
		grid-template-columns: 1fr;
	}
}

/* ---------- Barra di avanzamento (agente IA) ---------- */

.krw-avanzamento {
	padding: 0 1.25rem 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
}

.krw-avanzamento__testa {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a9b6d1;
}

.krw-avanzamento__barra {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.krw-avanzamento__barra span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--wp--preset--color--arancio);
}

/* ---------- Passi del processo ---------- */

/* Design del sito Elementor: cerchio bianco con anello arancio al 20% (#FF6A0033),
   numero navy. Al hover l'anello si accende, il numero cresce e va in arancio —
   era il custom CSS per-elemento dei "passi", perso nella migrazione. */
.krw-passo__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--bianco);
	border: 2px solid rgba(255, 106, 0, 0.2);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--piccolo);
	margin: 0;
}

/* Fuori dalle schede (i passi del processo) il pallino e' quello grande originale: 72px */
.wp-block-column:not(.krw-scheda) > .krw-passo__numero {
	width: 72px;
	height: 72px;
	font-size: 1.125rem;
}

/* Nelle schede scure resta il badge pieno di oggi: il cerchio bianco stonerebbe e
   l'arancio pieno con contenuto navy regge il contrasto (4,66:1). */
.krw-scuro .krw-passo__numero {
	background: var(--wp--preset--color--arancio);
	border: none;
	color: var(--wp--preset--color--navy);
}

@media (hover: hover) {
	.krw-passo__numero {
		transition: transform 250ms ease, border-color 250ms ease,
			box-shadow 250ms ease, color 250ms ease;
	}

	:is(.wp-block-column, .wp-block-group):hover > .krw-passo__numero,
	.krw-scheda:hover .krw-passo__numero {
		transform: scale(1.12);
		border-color: var(--wp--preset--color--arancio);
		color: #bd4e00;
		box-shadow: 0 2px 8px rgba(255, 165, 0, 0.5);
	}

	.krw-scuro .krw-scheda:hover .krw-passo__numero,
	.krw-scuro :is(.wp-block-column, .wp-block-group):hover > .krw-passo__numero {
		color: var(--wp--preset--color--navy);
		box-shadow: none;
	}
}

/* ---------- Numeri chiave ---------- */

.krw-numero {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}

/* ---------- Mappa OpenStreetMap (pagina Contatti) ---------- */

/* Niente bordo: l'attribuzione di Leaflet sta per forza a filo dell'angolo, e il
   gate la leggerebbe come testo appiccicato a un confine visibile. I tile bastano. */
.krw-mappa .leaflet-control-attribution {
	margin: 0 10px 10px 0;
	padding: 3px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.92);
}

.krw-mappa {
	height: 430px;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	/* i pane di Leaflet hanno z-index fino a 700: senza un contesto proprio
	   galleggerebbero sopra la testata sticky (z-index 100) */
	isolation: isolate;
	z-index: 0;
}

/* ---------- Modulo contatti ---------- */

.krw-form {
	max-width: 640px;
	margin-inline: auto;
}

.krw-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--piccolo);
	color: var(--wp--preset--color--navy);
}

.krw-form p {
	margin: 0 0 1.1rem;
}

.krw-form input[type="text"],
.krw-form input[type="email"],
.krw-form textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--campo);
	background: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--testo);
	font: inherit;
}

.krw-form input:focus,
.krw-form textarea:focus {
	border-color: var(--wp--preset--color--arancio);
}

/* Campo esca antispam: fuori schermo, mai display:none (i bot piu' furbi lo saltano) */
.krw-form__esca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.krw-form__esito {
	margin-bottom: 1.1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.krw-form__esito--errore {
	border-color: rgba(255, 105, 0, 0.5);
	color: #bd4e00;
}

/* Turnstile: dentro c'e' un iframe di Cloudflare, da fuori si puo' solo distanziare e
   riservargli lo spazio. La min-height e' l'altezza dichiarata del widget: senza, la pagina
   sobbalza quando l'iframe arriva. `data-size="flexible"` lo allarga quanto il pulsante. */
.krw-form__turnstile {
	margin: 0 0 12px;
	min-height: 65px;
}

.krw-form__nota {
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--testo-tenue);
}

/* La scheda che ospita il modulo non e' un teaser: niente salto, glow o barra
   al passaggio del mouse mentre uno sta scrivendo. */
.krw-scheda--ferma::before {
	content: none;
}

@media (hover: hover) {
	.krw-scheda--ferma:hover {
		transform: none;
		box-shadow: none;
	}
}

/* ---------- Pagina Contatti: com'era sul sito Elementor ---------- */

/* Ricostruita il 2026-08-18 dal `_elementor_data` del post 73 (il modulo originale era un
   widget HTML grezzo, non un widget form: per questo i backup sembravano non averlo).
   Colori e misure vengono da li'; i testi sotto i 12px sono saliti a 12 per il gate. */

/* Hero su gradiente chiaro, come l'originale (160deg, #F8F9FC -> bianco al 55%).
   Il background-color solido sotto il gradiente serve al detector del gate: senza,
   la risalita degli antenati non trova uno sfondo pieno e le pillole alpha
   (occhiello, stato) escono come falsi low-contrast. */
.krw-contatti-hero {
	background-color: #f8f9fc;
	background-image: linear-gradient(160deg, #f8f9fc 0%, #ffffff 55%);
}

/* Mini-card dei canali (hero) e card grandi (sezione "altri canali") */
.krw-canali {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 1.75rem 0 1.25rem;
}

.krw-canale {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 20px;
	background: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--card);
	box-shadow: 0 2px 12px rgba(26, 45, 88, 0.06);
	text-decoration: none;
	color: inherit;
}

.krw-canale img {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}

.krw-canale__corpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.krw-canale__testa {
	display: flex;
	align-items: center;
	gap: 8px;
}

.krw-canale__tipo {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--testo-tenue);
}

.krw-canale__badge {
	padding: 1px 7px;
	border-radius: 5px;
	background: rgba(255, 106, 0, 0.09);
	border: 1px solid rgba(255, 106, 0, 0.2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	/* #bd4e00 sul fondo aranciato della pillola fa 4,48:1: un pelo sotto soglia */
	color: #b84a00;
}

.krw-canale__valore {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--piccolo);
	color: var(--wp--preset--color--navy);
	overflow-wrap: anywhere;
}

.krw-canale__nota {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--testo-tenue);
}

@media (hover: hover) {
	a.krw-canale {
		transition: transform 200ms cubic-bezier(0.2, 0.6, 0.3, 1),
			border-color 200ms cubic-bezier(0.2, 0.6, 0.3, 1),
			box-shadow 200ms cubic-bezier(0.2, 0.6, 0.3, 1);
	}

	a.krw-canale:hover {
		transform: translateY(-2px);
		border-color: rgba(255, 105, 0, 0.45);
		box-shadow: 0 8px 24px rgba(26, 45, 88, 0.1);
	}
}

.krw-canali-griglia {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.krw-canale--grande {
	padding: 25px 27px;
}

.krw-canale--grande .krw-canale__valore {
	font-size: var(--wp--preset--font-size--base);
}

/* Pillola di stato con la spia verde (statica: quella che lampeggia il gate la boccia) */
.krw-stato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	background: rgba(40, 200, 64, 0.08);
	border: 1px solid rgba(40, 200, 64, 0.2);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: #1d7a3a;
}

.krw-stato__spia {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #28c840;
	flex: 0 0 auto;
}

/* Nell'hero le pillole portano il colore GIA' composto su #f8f9fc, senza alpha:
   sul gradiente il detector del gate compone male i fondi alpha e boccia contrasti
   che dal browser sono 4,8:1 veri. Stessi colori all'occhio, zero falsi rilievi. */
.krw-contatti-hero .krw-occhiello {
	background: #faf1ea;
	/* #bd4e00 e' tarato sui fondi freddi: sul fondo aranciato della pillola scende a
	   4,3:1. Il gradino sotto (#b84a00) regge, stessa storia del #b84a00 dei mockup. */
	color: #b84a00;
}

.krw-contatti-hero .krw-stato {
	background: #e7f5eb;
	border-color: #ceefd5;
}

/* Finestra "contatto@krw-tech" (hero destra). Classe propria e NON .krw-terminale:
   tilt.js aggancia quella, e un modulo che balla sotto le dita mentre scrivi e' un
   fastidio, non un vezzo (gia' deciso in b4275ef). */
.krw-contatto-finestra {
	background: var(--wp--preset--color--navy);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--rilievo);
	padding: 24px 24px 18px;
	font-family: var(--wp--preset--font-family--mono);
}

.krw-contatto-finestra__testa {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

/* I tre punti veri della barra (riusano quelli del terminale della home): la webp
   originale li rendeva come tre ovali stirati, bocciata da Borghe. */
.krw-contatto-finestra__punti {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
}

.krw-contatto-finestra__nome {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.62);
}

.krw-contatto-finestra__online {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	background: rgba(255, 122, 31, 0.1);
	border: 1px solid rgba(255, 122, 31, 0.35);
	border-radius: 5px;
	font-size: 0.75rem;
	color: var(--wp--preset--color--arancio-chiaro);
}

.krw-contatto-finestra__spia {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--arancio-chiaro);
	flex: 0 0 auto;
}

.krw-contatto-finestra__init {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.03em;
	color: #8fa0c2;
}

/* La riga sta in <code> perche' wptexturize converte "--" in trattino lungo
   nel testo semplice, ma non tocca il contenuto di <code>. */
.krw-contatto-finestra__init code {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
}

/* Il modulo dentro la finestra: campi in card scure, etichette mono arancio,
   prompt "›" davanti a ogni campo — dal widget HTML del sito Elementor. */
.krw-form--terminale {
	max-width: none;
}

.krw-campo {
	background: var(--wp--preset--color--navy-scuro);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 12px 14px 10px;
	margin: 0 0 12px;
}

.krw-campo__coppia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0 0 12px;
}

.krw-campo__coppia .krw-campo {
	margin: 0;
}

.krw-form--terminale label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--arancio-chiaro);
}

.krw-campo__riga {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	padding-bottom: 5px;
}

.krw-campo__area {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	padding: 8px 10px;
}

.krw-campo__area .krw-campo__prompt {
	margin-top: 2px;
}

.krw-campo__prompt {
	color: var(--wp--preset--color--arancio-chiaro);
	font-size: 0.875rem;
	flex: 0 0 auto;
}

.krw-form--terminale input[type="text"],
.krw-form--terminale input[type="email"],
.krw-form--terminale input[type="tel"],
.krw-form--terminale select,
.krw-form--terminale textarea {
	width: 100%;
	padding: 0;
	border: none;
	background: transparent;
	color: #d7e2f5;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	line-height: 1.6;
}

.krw-form--terminale ::placeholder {
	color: #7d8fb5;
	opacity: 1;
}

.krw-form--terminale select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

/* Finche' non scegli, la select mostra "scegli una voce" col colore dei placeholder:
   vuota del tutto (com'era su Elementor) non si capiva che fosse una tendina. */
.krw-form--terminale select:required:invalid {
	color: #7d8fb5;
}

.krw-form--terminale select option {
	background: var(--wp--preset--color--navy-scuro);
	color: #d7e2f5;
}

.krw-form--terminale textarea {
	min-height: 120px;
	resize: vertical;
}

.krw-form--terminale .krw-form__esito {
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--wp--preset--color--bianco);
}

.krw-form--terminale .krw-form__esito--errore {
	border-color: rgba(255, 122, 31, 0.6);
	color: var(--wp--preset--color--arancio-chiaro);
}

.krw-form--terminale .krw-form__azioni {
	margin: 16px 0 12px;
}

/* Bottone pieno a tutta larghezza, mono come sull'originale */
.krw-form--terminale .wp-element-button {
	display: block;
	width: 100%;
	padding: 16px;
	border: none;
	cursor: pointer;
	text-align: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--piccolo);
	letter-spacing: 0.04em;
}

@media (hover: hover) {
	/* niente scale: a tutta larghezza il 5% sono trenta pixel che sobbalzano */
	.krw-form--terminale .wp-element-button:hover {
		transform: none;
	}
}

.krw-form--terminale .krw-form__nota {
	max-width: 60ch;
	margin: 0 auto;
	text-align: center;
	font-size: 0.75rem;
	color: #a9b6d1;
}

.krw-form--terminale .krw-form__nota a {
	color: #cdd8ee;
}

.krw-form--terminale .krw-form__nota a:hover,
.krw-form--terminale .krw-form__nota a:focus {
	color: var(--wp--preset--color--bianco);
}

/* Card navy "dove siamo" */
.krw-sede {
	background: var(--wp--preset--color--navy);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(15, 27, 54, 0.18);
	padding: 30px 28px 24px;
	color: #d7e2f5;
}

.krw-sede__voce {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.krw-sede__voce img {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

.krw-sede__voce > div {
	flex: 1 1 auto;
	min-width: 0;
}

.krw-sede__titolo {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--piccolo);
	color: var(--wp--preset--color--bianco);
}

.krw-sede__testo {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.6;
	color: #a9b6d1;
}

.krw-sede__riga {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 3px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: #a9b6d1;
}

.krw-sede__riga strong {
	color: #d7e2f5;
	font-weight: 600;
}

.krw-sede__filo {
	margin: 18px 0;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.krw-sede .krw-stato {
	background: rgba(40, 200, 64, 0.12);
	border-color: rgba(40, 200, 64, 0.28);
	color: #43d17f;
}

/* Cornice bianca attorno alla mappa, com'era attorno alla Google Map */
.krw-mappa-cornice {
	height: 100%;
	background: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 16px;
	padding: 6px;
	box-shadow: var(--wp--preset--shadow--carta);
}

/* Fascia delle garanzie in fondo */
.krw-garanzie-fascia {
	border-top: 1px solid var(--wp--preset--color--bordo);
}

.krw-garanzie {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 24px;
}

.krw-garanzia {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--piccolo);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.krw-garanzia img {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}

/* Com'era su Elementor: "dove siamo" e "altri canali" non esistono su mobile */
@media (max-width: 767px) {
	.krw-solo-desktop {
		display: none;
	}
}

@media (max-width: 480px) {
	.krw-campo__coppia {
		grid-template-columns: 1fr;
	}

	.krw-contatto-finestra {
		padding: 18px 16px 14px;
	}
}

/* ---------- Pulsante WhatsApp fisso ---------- */

.krw-whatsapp {
	position: fixed;
	left: clamp(14px, 3vw, 26px);
	bottom: clamp(14px, 3vw, 26px);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.15rem;
	border-radius: 999px;
	background: #1fab54;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--piccolo);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}

.krw-whatsapp svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	fill: currentColor;
}

.krw-whatsapp:active {
	transform: scale(0.97);
}

@media (hover: hover) {
	.krw-whatsapp {
		transition: transform 180ms cubic-bezier(0.2, 0.6, 0.3, 1),
			box-shadow 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
	}

	.krw-whatsapp:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	}
}

@media (max-width: 600px) {
	.krw-whatsapp__testo {
		display: none;
	}

	.krw-whatsapp {
		padding: 0.9rem;
	}
}

/* ---------- Pie pagina ---------- */

.krw-piepagina {
	background: var(--wp--preset--color--navy-scuro);
}

.krw-piepagina a {
	color: #cdd8ee;
	text-decoration: none;
}

.krw-piepagina a:hover,
.krw-piepagina a:focus {
	color: var(--wp--preset--color--bianco);
	text-decoration: underline;
}

/* ---------- Testata, contenuto e pie' pagina a filo ---------- */

/* WordPress mette il block-gap di radice (20px, bianchi) fra i figli diretti di
   .wp-site-blocks: testata->main e main->pie' pagina. Le bande devono toccarsi
   come sul sito Elementor; il gap DENTRO le sezioni non c'entra e resta. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Misura della riga ---------- */

/* Senza questo i paragrafi arrivano a ~119 caratteri per riga. In Outfit il "ch"
   e piu largo della media: 58ch rendono circa 76 caratteri, sotto la soglia di 80.
   ⚠️ MAI dentro le schede: sono gruppi constrained e il layout core centra ogni figlio
   piu stretto del contenitore — il paragrafo a 58ch diventerebbe una scatola centrata
   sotto un titolo a sinistra. Nelle schede le righe sono corte per larghezza di card. */
.wp-block-group:not(.krw-scheda) > p,
.wp-block-column > p,
.wp-block-details p,
.wp-block-details summary {
	max-width: 58ch;
}

/* Le pagine legali arrivano come HTML classico, non come blocchi: senza questa
   regola le righe vanno a 140 caratteri sull'intera larghezza del contenitore.
   margin-left 0 con !important: il constrained core centra col suo !important, e
   h2/h3/p hanno box di larghezze diverse — centrati vengono a scala, non in colonna. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > h2,
.wp-block-post-content > h3 {
	max-width: 58ch;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Il sommario del query loop non e figlio di post-content, quindi la regola sopra
   non lo prende. Si vedeva sulla pagina Guide: l'introduzione a 58ch e i sommari
   sotto a tutta larghezza, due misure diverse nella stessa colonna. Vale anche per
   l'elenco articoli di index.html, che usa lo stesso blocco. */
.wp-block-post-excerpt {
	max-width: 58ch;
}

.wp-block-group > p.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Focus visibile ovunque ---------- */

:where(a, button, .wp-element-button, summary, input, textarea, select):focus-visible {
	outline: 3px solid var(--wp--preset--color--arancio);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Bottoni: risposta al tocco ---------- */

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.97);
}

@media (hover: hover) {
	.wp-element-button,
	.wp-block-button__link {
		transition: background-color 160ms cubic-bezier(0.2, 0.6, 0.3, 1),
			transform 250ms ease, box-shadow 250ms ease;
	}

	/* Hover dei CTA sul sito Elementor: scale + alone arancio (custom CSS dei "Link") */
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 24px rgba(249, 115, 22, 0.35);
	}
}

/* ---------- Accordion ---------- */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.wp-block-details summary::marker {
	color: var(--wp--preset--color--arancio);
}

/* ---------- Chi chiede meno movimento, meno movimento ha ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.krw-scheda:hover,
	a.krw-canale:hover,
	.krw-whatsapp:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	:is(.wp-block-column, .wp-block-group):hover > .krw-passo__numero,
	.krw-scheda:hover .krw-passo__numero {
		transform: none;
	}

	.krw-scheda:hover::before {
		width: 0;
	}

}