/* =========================================================================
   Ruvy Tech - Scope 0: fondamenta
   -------------------------------------------------------------------------
   Ogni valore del tema esce dalle scale qui sotto: niente numeri sparsi
   nei componenti. Registro visivo: chiaro e aziendale di partenza, con una
   variante scura completa; la profondita' viene da gradienti appena
   percettibili. Il movimento c'e' e si sente, ma non si mette mai davanti
   al contenuto.

   I nomi dei token sono semantici (--c-fondo, --c-superficie, --c-testo),
   non descrittivi del colore: per questo i due temi si ottengono cambiando
   solo i valori qui sotto, senza toccare una riga dei componenti.
   ========================================================================= */

:root {
	color-scheme: light;

	/* --- Superfici -------------------------------------------------------
	   Bianco per il foglio, un grigio appena azzurrato per i piani rialzati:
	   i due si distinguono senza bisogno di bordi marcati ovunque. */
	--c-fondo: #ffffff;
	--c-fondo-alto: #f3f7fb;
	--c-superficie: #ffffff;
	--c-superficie-alta: #f7fafd;
	--c-bordo: #dae3ec;
	--c-bordo-tenue: #e8eef4;

	/* Fondo dell'intestazione fissa: semitrasparente, si appoggia al blur. */
	--c-fondo-velo: rgba(255, 255, 255, 0.82);

	/* --- Testo -----------------------------------------------------------
	   Il nero pieno su bianco affatica quanto il bianco pieno sul nero:
	   si parte da un blu-grigio molto scuro. */
	--c-testo: #16222e;
	--c-testo-tenue: #45596b;
	--c-testo-debole: #6b7e91;
	--c-titolo: #0a1721;

	/* Testo sopra il colore d'accento: bianco in entrambi i temi, ma va
	   nominato perche' i componenti non devono cablare #fff. */
	--c-su-accento: #ffffff;

	/* --- Marca -----------------------------------------------------------
	   Discende dal blu del sito attuale (#005277 / #1687dd). Su fondo chiaro
	   il #2f9bff del tema scuro darebbe 2.6:1 contro il bianco, sotto il
	   minimo AA: qui l'accento e' scurito fino a 4.7:1. */
	--c-accento: #0f6fb8;
	--c-accento-chiaro: #0a5793;
	--c-accento-cupo: #e7f1fa;
	--c-accento-velo: rgba(15, 111, 184, 0.10);
	--c-accento-bordo: rgba(15, 111, 184, 0.35);

	/* --- Gradienti -------------------------------------------------------
	   Poca ampiezza di proposito: servono a dare profondita', non a farsi
	   guardare. Un gradiente che si nota e' gia' troppo. */
	--grad-marca: linear-gradient(135deg, #0f6fb8 0%, #2f9bff 100%);
	--grad-superficie: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
	--grad-sezione: linear-gradient(180deg, #f3f7fb 0%, #eaf1f8 100%);
	--alone-marca: radial-gradient(60% 60% at 50% 0%, rgba(15, 111, 184, 0.10) 0%, transparent 70%);

	/* --- Tipografia ------------------------------------------------------
	   Scala fluida: nessuno scalino fra telefono e desktop, nessuna media
	   query da mantenere. */
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
	--t-xl: clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
	--t-2xl: clamp(1.8rem, 2.2vw + 1.2rem, 2.6rem);
	--t-3xl: clamp(2.3rem, 4vw + 1.2rem, 3.8rem);

	--font-testo: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-titoli: var(--font-testo);
	--interlinea: 1.7;
	--interlinea-titoli: 1.1;

	/* --- Spaziature (scala di 4px) --------------------------------------- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4.5rem;
	--s-9: 7rem;

	/* --- Forma -----------------------------------------------------------
	   Raggi generosi: e' quello che separa il "moderno" dal "software". */
	--raggio-sm: 8px;
	--raggio: 14px;
	--raggio-lg: 22px;
	--raggio-pill: 999px;

	/* --- Profondita' ------------------------------------------------------
	   Tinte di blu invece che nere: un'ombra grigia su fondo chiaro sporca,
	   una tinta fredda resta pulita. */
	--ombra-1: 0 1px 3px rgba(10, 30, 50, 0.07), 0 3px 10px rgba(10, 30, 50, 0.05);
	--ombra-2: 0 10px 28px rgba(10, 30, 50, 0.10), 0 24px 52px rgba(10, 30, 50, 0.08);
	--ombra-marca: 0 10px 28px rgba(15, 111, 184, 0.22);

	/* --- Movimento -------------------------------------------------------
	   Tre tempi: reazione al dito, transizione di stato, ingresso in scena.
	   La curva e' un'uscita morbida, non un rimbalzo: il rimbalzo e' la
	   differenza fra "curato" e "chiassoso". */
	--dur-rapida: 200ms;
	--dur-media: 340ms;
	--dur-ingresso: 700ms;
	--curva: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* --- Misure ----------------------------------------------------------- */
	--larghezza: 1200px;
	--larghezza-stretta: 780px;
	--larghezza-testo: 68ch;
}

/* =========================================================================
   Tema scuro
   -------------------------------------------------------------------------
   Sono i valori dello Scope 0, spostati sotto l'attributo che lo script in
   header.php mette sul <html> prima che il browser disegni.

   L'attributo e' sempre presente, quindi la scelta e' esplicita e non
   dipende da @media (prefers-color-scheme): un sito aziendale parte chiaro
   anche per chi ha il sistema in scuro, e chi vuole il buio lo chiede con
   l'interruttore. La preferenza di sistema resta comunque il valore di
   partenza suggerito la prima volta (vedi main.js).
   ========================================================================= */

[data-tema="scuro"] {
	color-scheme: dark;

	/* Non nero pieno: un blu-notte lascia spazio a piani piu' chiari e fa
	   sembrare il fondo profondo invece che spento. */
	--c-fondo: #070c13;
	--c-fondo-alto: #0b131e;
	--c-superficie: #101a27;
	--c-superficie-alta: #16222f;
	--c-bordo: #223244;
	--c-bordo-tenue: #18242f;
	--c-fondo-velo: rgba(7, 12, 19, 0.72);

	/* Bianco pieno sul buio abbaglia: si parte da un bianco freddo. */
	--c-testo: #e8eff7;
	--c-testo-tenue: #9aabbd;
	--c-testo-debole: #6d7f92;
	--c-titolo: #ffffff;

	/* Sul fondo scuro l'accento puo' tornare acceso: qui il contrasto lo
	   guadagna schiarendo, non scurendo. */
	--c-accento: #2f9bff;
	--c-accento-chiaro: #6cbcff;
	--c-accento-cupo: #00476a;
	--c-accento-velo: rgba(47, 155, 255, 0.12);
	--c-accento-bordo: rgba(47, 155, 255, 0.35);

	--grad-marca: linear-gradient(135deg, #1c74c4 0%, #2f9bff 100%);
	--grad-superficie: linear-gradient(180deg, #16222f 0%, #101a27 100%);
	--grad-sezione: linear-gradient(180deg, #070c13 0%, #0b131e 100%);
	--alone-marca: radial-gradient(60% 60% at 50% 0%, rgba(47, 155, 255, 0.16) 0%, transparent 70%);

	--ombra-1: 0 2px 8px rgba(0, 0, 0, 0.35);
	--ombra-2: 0 16px 40px rgba(0, 0, 0, 0.5);
	--ombra-marca: 0 10px 30px rgba(47, 155, 255, 0.18);
}

/* Il cambio tema e' l'unico momento in cui i colori devono sfumare. Al
   caricamento no: si vedrebbe l'intera pagina virare sotto gli occhi.
   Lo script mette questa classe solo per la durata dello scambio. */
.tema-in-transizione,
.tema-in-transizione *,
.tema-in-transizione *::before,
.tema-in-transizione *::after {
	transition:
		background-color var(--dur-media) var(--curva),
		background-image var(--dur-media) var(--curva),
		border-color var(--dur-media) var(--curva),
		color var(--dur-media) var(--curva),
		box-shadow var(--dur-media) var(--curva) !important;
}

/* =========================================================================
   Rivelazioni allo scroll
   -------------------------------------------------------------------------
   Lo stato nascosto si applica solo se il JS e' vivo (classe .js messa
   dallo script inline in header.php). Senza JS il contenuto e' visibile:
   non si nasconde mai del testo sperando che qualcosa lo riveli.
   ========================================================================= */

.js [data-rivela] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--dur-ingresso) var(--curva),
		transform var(--dur-ingresso) var(--curva);
	transition-delay: var(--ritardo, 0ms);
	will-change: opacity, transform;
}

.js [data-rivela="destra"] { transform: translateX(-28px); }
.js [data-rivela="sinistra"] { transform: translateX(28px); }
.js [data-rivela="scala"] { transform: scale(0.96); }

.js [data-rivela].e-visibile {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Chi ha disattivato le animazioni a sistema non deve vederne nessuna,
   e soprattutto non deve restare con del contenuto invisibile. */
@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;
	}

	.js [data-rivela] {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   Base
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-testo);
	font-size: var(--t-base);
	line-height: var(--interlinea);
	color: var(--c-testo);
	background: var(--c-fondo);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip e non hidden: hidden creerebbe un contenitore di scorrimento
	   e farebbe smettere di funzionare il position:sticky dell'header. */
	overflow-x: clip;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-titoli);
	line-height: var(--interlinea-titoli);
	color: var(--c-titolo);
	margin: 0 0 var(--s-4);
	letter-spacing: -0.02em;
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p {
	margin: 0 0 var(--s-4);
}

a {
	color: var(--c-accento);
	text-underline-offset: 0.2em;
	transition: color var(--dur-rapida) var(--curva);
}

a:hover {
	color: var(--c-accento-chiaro);
}

:focus-visible {
	outline: 2px solid var(--c-accento);
	outline-offset: 3px;
	border-radius: var(--raggio-sm);
}

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-bordo), transparent);
	margin: var(--s-7) 0;
}

::selection {
	background: var(--c-accento);
	color: var(--c-su-accento);
}

/* =========================================================================
   Utilita'
   ========================================================================= */

.container {
	width: min(100% - var(--s-5) * 2, var(--larghezza));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: var(--s-2);
	left: var(--s-2);
	z-index: 100;
	width: auto;
	height: auto;
	clip-path: none;
	padding: var(--s-3) var(--s-4);
	background: var(--c-superficie-alta);
	border-radius: var(--raggio-sm);
}

/* =========================================================================
   Intestazione e navigazione
   ========================================================================= */

.site-header {
	background: var(--c-fondo-velo);
	border-bottom: 1px solid var(--c-bordo-tenue);
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(14px);
	transition: background var(--dur-media) var(--curva), border-color var(--dur-media) var(--curva);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	padding-block: var(--s-3);
	flex-wrap: wrap;
}

/* Nel documento i comandi stanno prima della navigazione, perche' su mobile
   il pulsante del menu deve trovarsi accanto al logo e il menu aprirsi sotto,
   a tutta larghezza. Su desktop l'ordine che serve all'occhio e' l'altro:
   logo a sinistra, menu spinto a destra, interruttore in coda. */
.site-branding { order: 1; }

.site-nav {
	order: 2;
	margin-left: auto;
}

.site-header__comandi { order: 3; }

.site-title {
	margin: 0;
	font-size: var(--t-xl);
	font-weight: 800;
	letter-spacing: 0.01em;
}

.site-title a {
	color: var(--c-titolo);
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: var(--t-xs);
	color: var(--c-testo-debole);
}

.custom-logo {
	max-height: 46px;
	width: auto;
	transition: opacity var(--dur-rapida) var(--curva), filter var(--dur-media) var(--curva);
}

.custom-logo:hover {
	opacity: 0.85;
}

/* Il logo caricato e' il tratto blu notte su trasparenza. In tema scuro
   il filtro lo azzera e lo inverte: essendo monocromatico, il risultato
   e' esattamente la versione bianca, senza caricare una seconda immagine. */
[data-tema="scuro"] .custom-logo {
	filter: brightness(0) invert(1);
}

.site-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-5);
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	position: relative;
	color: var(--c-testo-tenue);
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding-block: var(--s-2);
	display: inline-block;
	transition: color var(--dur-media) var(--curva);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--c-titolo);
}

/* La sottolineatura cresce da sinistra: solo transform, nessun ridisegno. */
.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--grad-marca);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-media) var(--curva);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > li.current-menu-item > a::after,
.site-nav__list > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.site-nav__list li {
	position: relative;
}

.site-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--s-2);
	position: absolute;
	top: 100%;
	/* Allineato a destra della voce: la navigazione sta sul lato destro
	   dell'intestazione, quindi aprendosi verso sinistra il sottomenu non
	   esce mai dallo schermo (prima sforava di 13px). */
	right: calc(var(--s-3) * -1);
	left: auto;
	min-width: 230px;
	max-width: calc(100vw - var(--s-6));
	background: var(--grad-superficie);
	border: 1px solid var(--c-bordo);
	border-radius: var(--raggio);
	box-shadow: var(--ombra-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--dur-media) var(--curva),
		transform var(--dur-media) var(--curva),
		visibility var(--dur-media);
	z-index: 20;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__list .sub-menu a {
	display: block;
	padding: var(--s-2) var(--s-3);
	border-radius: var(--raggio-sm);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--t-sm);
	font-weight: 500;
	transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.site-nav__list .sub-menu a::after {
	display: none;
}

/* Il velo d'accento e' chiaro in tema chiaro: il testo bianco ci sparirebbe
   sopra. L'accento stesso regge su entrambi i fondi. */
.site-nav__list .sub-menu a:hover {
	background: var(--c-accento-velo);
	color: var(--c-accento);
}

.nav-toggle {
	display: none;
	/* 44x44 e' la misura minima perche' un dito lo colpisca senza sbagliare. */
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--c-bordo);
	border-radius: var(--raggio-sm);
	padding: var(--s-2);
	cursor: pointer;
	transition: border-color var(--dur-rapida) var(--curva);
}

.nav-toggle:hover {
	border-color: var(--c-accento);
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--c-testo);
	border-radius: 2px;
	content: "";
	transition: transform var(--dur-media) var(--curva), opacity var(--dur-rapida) var(--curva);
}

.nav-toggle__bar::before { transform: translateY(-6px); }
.nav-toggle__bar::after  { transform: translateY(4px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
	transform: translateY(0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
	transform: translateY(-2px) rotate(-45deg);
}

/* =========================================================================
   Interruttore chiaro / scuro
   -------------------------------------------------------------------------
   Un interruttore a slitta, non due pulsanti: si legge a colpo d'occhio in
   che stato sei. Il cursore scorre e le due icone si scambiano ruotando.
   ========================================================================= */

.site-header__comandi {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.tema-toggle {
	display: inline-flex;
	align-items: center;
	/* 44px di area sensibile anche se il disegno ne occupa 27: sotto questa
	   misura il dito sbaglia. */
	min-height: 44px;
	padding: var(--s-2) 0;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 0;
}

.tema-toggle__pista {
	position: relative;
	display: block;
	width: 52px;
	height: 27px;
	border-radius: var(--raggio-pill);
	background: var(--c-superficie-alta);
	border: 1px solid var(--c-bordo);
	transition:
		background var(--dur-media) var(--curva),
		border-color var(--dur-media) var(--curva);
}

.tema-toggle:hover .tema-toggle__pista {
	border-color: var(--c-accento);
}

.tema-toggle__cursore {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 21px;
	height: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--grad-marca);
	box-shadow: var(--ombra-1);
	/* Qui il rimbalzo ci sta: e' un comando fisico, non un ingresso in
	   scena, e la molla lo fa sentire come uno scatto. */
	transition: transform var(--dur-media) cubic-bezier(0.34, 1.4, 0.64, 1);
}

[data-tema="scuro"] .tema-toggle__cursore {
	transform: translateX(25px);
}

.tema-toggle__icona {
	position: absolute;
	width: 13px;
	height: 13px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	transition:
		opacity var(--dur-media) var(--curva),
		transform var(--dur-media) var(--curva);
}

.tema-toggle__icona--sole {
	opacity: 1;
	transform: rotate(0) scale(1);
}

.tema-toggle__icona--luna {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}

[data-tema="scuro"] .tema-toggle__icona--sole {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}

[data-tema="scuro"] .tema-toggle__icona--luna {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* =========================================================================
   Contenuto
   ========================================================================= */

.site-main {
	padding-block: var(--s-8);
	min-height: 60vh;
	position: relative;
}

/* Alone appena accennato dietro l'inizio del contenuto: da' profondita'
   senza che si riesca a dire da dove venga. */
.site-main::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 480px;
	background: var(--alone-marca);
	pointer-events: none;
	z-index: -1;
}

.page-header {
	margin-bottom: var(--s-7);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--c-bordo-tenue);
}

.page-title {
	margin-bottom: var(--s-2);
}

.entry-meta {
	margin: 0;
	color: var(--c-testo-debole);
	font-size: var(--t-sm);
}

.page-thumb {
	margin: 0 0 var(--s-7);
	border-radius: var(--raggio-lg);
	overflow: hidden;
	box-shadow: var(--ombra-2);
}

.entry-content > * + * {
	margin-top: var(--s-5);
}

.entry-content > h2,
.entry-content > h3 {
	margin-top: var(--s-8);
}

.entry-content p,
.entry-content li {
	max-width: var(--larghezza-testo);
	color: var(--c-testo-tenue);
}

/* Il limite di larghezza qui sopra non deve scentrare i blocchi centrati:
   senza margini automatici il testo resta centrato dentro una colonna
   incollata a sinistra, e a occhio sembra storto. */
.entry-content > .has-text-align-center,
.entry-content > .aligncenter,
.entry-content .has-text-align-center {
	margin-inline: auto;
}

/* Le immagini dei servizi sono state ridimensionate a mano nell'editor,
   ognuna con una misura diversa scritta come stile inline nel contenuto
   (width:180px, width:168px, nessuna...). Da qui la fila sfrangiata.
   Uno stile inline si batte solo con !important: e' il caso in cui serve
   davvero, non una scorciatoia. */
.wp-block-columns .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover;
	border-radius: var(--raggio);
}

/* Una delle quattro sta dentro un figure.aligncenter, che il core rende
   display:table: un contenitore che si stringe sul contenuto, quindi il
   width:100% dell'immagine non ha una misura su cui calcolarsi. */
.wp-block-columns .wp-block-image > figure,
.wp-block-columns figure.aligncenter {
	display: block !important;
	width: 100% !important;
	margin-inline: 0 !important;
}

.entry-content strong {
	color: var(--c-testo);
	font-weight: 600;
}

/* =========================================================================
   Ritocchi al contenuto scritto nell'editor
   -------------------------------------------------------------------------
   Regole che compensano com'e' stato composto il contenuto nelle pagine,
   senza doverlo riscrivere: paragrafi usati come titoli, gruppi usati come
   righe testo+immagine, blocchi HTML con colori fissi.
   ========================================================================= */

/* Paragrafi e heading vuoti lasciati dall'editor: non devono occupare
   spazio ne' creare buchi di ritmo. */
.entry-content p:empty,
.entry-content h1:empty,
.entry-content h2:empty,
.entry-content h3:empty,
.entry-content .wp-block-buttons:empty {
	display: none;
}

/* Un paragrafo fatto solo di grassetto e' il modo in cui nell'editor sono
   stati scritti i titoli di sezione: qui diventa un titolo a tutti gli
   effetti. Il :not(:has(a)) esclude le frasi con link, che sono richiami
   e non titoli. */
.entry-content p:has(> strong:only-child):not(:has(a)) {
	margin-top: var(--s-7);
	margin-bottom: var(--s-4);
}

.entry-content p:has(> strong:only-child):not(:has(a)) > strong {
	font-size: var(--t-xl);
	font-weight: 700;
	line-height: var(--interlinea-titoli);
	color: var(--c-titolo);
	letter-spacing: -0.01em;
}

/* Quelli centrati (QUANDO USARLO, APPLICAZIONI...) fanno da etichette di
   sezione: maiuscoletto distanziato con un filetto di marca sotto. */
.entry-content p.has-text-align-center:has(> strong:only-child):not(:has(a)) > strong {
	display: inline-block;
	font-size: var(--t-sm);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--c-accento);
	padding-bottom: var(--s-2);
	background: linear-gradient(90deg, transparent, transparent) no-repeat;
	border-bottom: 2px solid var(--c-accento-bordo);
}

/* Dentro le colonne quei paragrafi sono sottotitoli, non titoli di sezione:
   misura ridotta e niente trattamento da etichetta. La specificita' piu'
   alta qui e' voluta: deve battere entrambe le regole qui sopra. */
.entry-content .wp-block-column p:has(> strong:only-child):not(:has(a)):not(:first-child) {
	margin-top: var(--s-5);
	margin-bottom: var(--s-3);
}

.entry-content .wp-block-column p:has(> strong:only-child):not(:has(a)) > strong,
.entry-content .wp-block-column p.has-text-align-center:has(> strong:only-child):not(:has(a)) > strong {
	font-size: var(--t-lg);
	text-transform: none;
	border-bottom: 0;
	padding-bottom: 0;
	color: var(--c-titolo);
}

/* Dentro le schede della home il primo paragrafo resta il titolo della
   scheda: il ritmo da titolo di sezione qui non serve. */
.entry-content .wp-block-column > p:first-child {
	margin-top: 0;
}

/* --- Righe testo + immagine (pagina Servizi) ---------------------------
   Nell'editor sono gruppi flex "senza andare a capo": su schermo stretto
   schiacciano tutto. Qui diventano righe che respirano e che su mobile
   si impilano. L'ordine testo/immagine alternato viene dal contenuto. */
.entry-content > .wp-block-group.is-layout-flex:has(> .wp-block-image):has(> p) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(var(--s-5), 4vw, var(--s-7));
	padding-block: var(--s-4);
}

.entry-content > .wp-block-group.is-layout-flex:has(> .wp-block-image):has(> p) > .wp-block-image {
	flex: 1 1 300px;
	max-width: 440px;
	margin: 0;
	border-radius: var(--raggio);
	overflow: hidden;
	box-shadow: var(--ombra-1);
}

.entry-content > .wp-block-group.is-layout-flex:has(> .wp-block-image):has(> p) > .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--raggio);
	box-shadow: none;
}

.entry-content > .wp-block-group.is-layout-flex:has(> .wp-block-image):has(> p) > p {
	flex: 1 1 340px;
	margin: 0;
	font-size: var(--t-lg);
}

/* --- Blocco HTML con colori fissi (schede materiali e servizi) ---------
   Nel contenuto c'e' un riquadro scritto a mano con background:#f3f3f3
   inline: in tema scuro diventerebbe testo scuro su fondo chiaro.
   L'inline si batte solo con !important.

   Il selettore aggancia [style*="background"] e non il valore esatto:
   quando il JS delle rivelazioni scrive una custom property sull'elemento,
   il browser riserializza lo style inline e l'esadecimale #f3f3f3 diventa
   rgb(243, 243, 243), quindi cercare l'hex prendeva solo alcune pagine. */
.entry-content div[style*="background"] {
	background: var(--c-superficie-alta) !important;
	border: 1px solid var(--c-bordo-tenue);
	box-shadow: var(--ombra-1);
}

/* --- Immagini flottate (Materiali, schede materiale) -------------------
   Su schermo stretto un flottante da 160px strozza il testo a fianco:
   meglio impilare. */
@media (max-width: 640px) {
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		display: block;
		margin: var(--s-5) auto;
	}
}

/* =========================================================================
   Hero della home
   -------------------------------------------------------------------------
   I primi due paragrafi della front page sono titolo e sottotitolo:
   qui prendono il registro da apertura di sito.
   ========================================================================= */

.home .entry-content > p:first-child {
	margin: clamp(var(--s-5), 5vw, var(--s-7)) auto var(--s-4);
	max-width: var(--larghezza-stretta);
}

/* Il titolo e' anche un "paragrafo solo grassetto centrato": la regola delle
   etichette di sezione qui sopra lo catturerebbe. Questo selettore la batte
   in specificita' e deve continuare a batterla. */
.home .entry-content > p.has-text-align-center:first-child > strong,
.home .entry-content > p:first-child > strong {
	display: inline;
	text-transform: none;
	border-bottom: 0;
	padding-bottom: 0;
	font-size: var(--t-3xl);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--c-titolo);
	text-wrap: balance;
}

.home .entry-content > p:first-child + p {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: clamp(var(--s-6), 5vw, var(--s-8));
	font-size: var(--t-lg);
	color: var(--c-testo-tenue);
}

/* =========================================================================
   Schede servizio
   -------------------------------------------------------------------------
   In home i quattro servizi sono un blocco Colonne: dentro ogni colonna
   titolo, immagine, spaziatore e pulsante. Da qui diventano schede senza
   che nessuno debba rimettere mano al contenuto nell'editor.

   Il :has() limita il trattamento alle colonne che contengono un pulsante.
   Le colonne usate per impaginare testo (Contatti, schede materiali) non ne
   hanno e restano quello che sono. Per farne una scheda comunque, basta la
   classe "scheda" nelle impostazioni avanzate del blocco.
   ========================================================================= */

.entry-content .wp-block-column:has(.wp-block-buttons),
.entry-content .wp-block-column.scheda {
	display: flex;
	flex-direction: column;
	/* Il blocco in home e' impostato su "allineato in basso", che mette le
	   colonne in align-self: flex-end. Le schede devono invece riempire la
	   riga, altrimenti hanno altezze diverse e i bordi non si allineano. */
	align-self: stretch;
	padding: var(--s-5);
	background: var(--grad-superficie);
	border: 1px solid var(--c-bordo-tenue);
	border-radius: var(--raggio-lg);
	box-shadow: var(--ombra-1);
	position: relative;
	overflow: hidden;
	transition:
		transform var(--dur-media) var(--curva),
		border-color var(--dur-media) var(--curva),
		box-shadow var(--dur-media) var(--curva);
}

/* Filetto di marca che si stende sul bordo alto al passaggio. */
.entry-content .wp-block-column:has(.wp-block-buttons)::before,
.entry-content .wp-block-column.scheda::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--grad-marca);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-ingresso) var(--curva);
}

.entry-content .wp-block-column:has(.wp-block-buttons):hover,
.entry-content .wp-block-column.scheda:hover {
	transform: translateY(-5px);
	border-color: var(--c-accento-bordo);
	box-shadow: var(--ombra-2);
}

.entry-content .wp-block-column:has(.wp-block-buttons):hover::before,
.entry-content .wp-block-column.scheda:hover::before {
	transform: scaleX(1);
}

/* Il titolo della scheda e' un paragrafo in grassetto, non un heading:
   lo trattiamo come tale senza cambiare il markup. */
.entry-content .wp-block-column:has(.wp-block-buttons) > p:first-child,
.entry-content .wp-block-column.scheda > p:first-child {
	margin-bottom: var(--s-4);
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.entry-content .wp-block-column:has(.wp-block-buttons) > p:first-child strong,
.entry-content .wp-block-column.scheda > p:first-child strong {
	font-size: var(--t-lg);
	line-height: var(--interlinea-titoli);
	color: var(--c-titolo);
	letter-spacing: -0.01em;
}

/* Lo spaziatore da 100px scritto nel contenuto diventa lo spazio elastico
   che spinge il pulsante in fondo: cosi' i quattro pulsanti si allineano
   fra loro anche con titoli su una o due righe. Era la voragine che si
   vedeva fra le immagini e i pulsanti. */
.entry-content .wp-block-column:has(.wp-block-buttons) > .wp-block-spacer,
.entry-content .wp-block-column.scheda > .wp-block-spacer {
	height: var(--s-5) !important;
	flex: 1 1 auto;
}

.entry-content .wp-block-column:has(.wp-block-buttons) .wp-block-image,
.entry-content .wp-block-column.scheda .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--raggio);
}

.entry-content .wp-block-column:has(.wp-block-buttons) .wp-block-image img,
.entry-content .wp-block-column.scheda .wp-block-image img {
	box-shadow: none;
	transition: transform var(--dur-ingresso) var(--curva);
}

.entry-content .wp-block-column:has(.wp-block-buttons):hover .wp-block-image img,
.entry-content .wp-block-column.scheda:hover .wp-block-image img {
	transform: scale(1.05);
}

.entry-content .wp-block-column:has(.wp-block-buttons) .wp-block-buttons,
.entry-content .wp-block-column.scheda .wp-block-buttons {
	margin-top: auto;
}

/* Browser senza :has(): niente schede, ma almeno lo spaziatore gigante non
   deve restare. Il contenuto rimane leggibile. */
@supports not selector(:has(*)) {
	.entry-content .wp-block-column > .wp-block-spacer {
		height: var(--s-5) !important;
	}
}

/* Gli spaziatori fra una sezione e l'altra sono stati scritti a mano
   nell'editor con misure fisse (100px, 190px): su schermo largo lasciano
   voragini e su telefono buttano fuori il contenuto. Li riportiamo alla
   scala del tema, che e' fluida. */
.entry-content > .wp-block-spacer {
	height: var(--s-8) !important;
}

/* =========================================================================
   Gallery
   -------------------------------------------------------------------------
   Il layout a flex del core mette in fila immagini di proporzioni diverse e
   manda l'ultima a tutta larghezza. Qui diventa una griglia regolare: le
   foto sono di pezzi prodotti, contano come prova del lavoro e devono
   leggersi tutte con lo stesso peso.
   ========================================================================= */

.entry-content .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--s-4);
}

.entry-content .wp-block-gallery.has-nested-images > figure {
	position: relative;
	margin: 0;
	/* Il core scrive una width inline calcolata per il flex: senza questo
	   le celle della griglia resterebbero di misure diverse. */
	width: auto !important;
	overflow: hidden;
	border-radius: var(--raggio);
	box-shadow: var(--ombra-1);
	transition:
		transform var(--dur-media) var(--curva),
		box-shadow var(--dur-media) var(--curva);
}

.entry-content .wp-block-gallery.has-nested-images > figure img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--dur-ingresso) var(--curva);
}

/* Velo di marca che sale dal basso al passaggio: lega le foto all'identita'
   senza tingerle per sempre. */
.entry-content .wp-block-gallery.has-nested-images > figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 23, 33, 0.55), transparent 55%);
	opacity: 0;
	transition: opacity var(--dur-media) var(--curva);
	pointer-events: none;
}

.entry-content .wp-block-gallery.has-nested-images > figure:hover {
	transform: translateY(-4px);
	box-shadow: var(--ombra-2);
}

.entry-content .wp-block-gallery.has-nested-images > figure:hover img {
	transform: scale(1.06);
}

.entry-content .wp-block-gallery.has-nested-images > figure:hover::after {
	opacity: 1;
}

/* =========================================================================
   Carosello (gallery della home)
   -------------------------------------------------------------------------
   Il markup arriva dal blocco gallery: main.js lo avvolge in .carosello e
   trasforma la griglia in una traccia a scorrimento orizzontale con
   scroll-snap. Senza JS niente involucro: resta la griglia, che funziona.
   ========================================================================= */

.carosello {
	position: relative;
	border-radius: var(--raggio-lg);
	/* L'ombra sta sull'involucro e non sulle slide: e' il carosello a essere
	   un oggetto solo, le foto ci scorrono dentro. */
	box-shadow: var(--ombra-2);
}

.entry-content .carosello .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	border-radius: var(--raggio-lg);
	/* La barra di scorrimento sotto le foto tradirebbe il trucco. */
	scrollbar-width: none;
}

.entry-content .carosello .wp-block-gallery.has-nested-images::-webkit-scrollbar {
	display: none;
}

.entry-content .carosello .carosello__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Niente sollevamento all'hover: una slide che si alza mentre scorre
   romperebbe l'aggancio dello snap. */
.entry-content .carosello .carosello__slide:hover {
	transform: none;
	box-shadow: none;
}

.entry-content .carosello .wp-block-gallery.has-nested-images > figure.carosello__slide img {
	width: 100%;
	height: clamp(300px, 42vw, 540px);
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.entry-content .carosello .carosello__slide:hover img {
	transform: none;
}

/* Il velo scuro fisso in basso da' appoggio a frecce e pallini. */
.entry-content .carosello .carosello__slide::after {
	opacity: 1;
	background: linear-gradient(to top, rgba(10, 23, 33, 0.38), transparent 30%);
}

.carosello__freccia {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(10, 23, 33, 0.45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition:
		background var(--dur-rapida) var(--curva),
		transform var(--dur-rapida) var(--curva),
		opacity var(--dur-rapida) var(--curva);
	z-index: 2;
}

.carosello__freccia svg {
	width: 20px;
	height: 20px;
}

.carosello__freccia--prima { left: var(--s-4); }
.carosello__freccia--dopo  { right: var(--s-4); }

.carosello__freccia:hover {
	background: var(--c-accento);
	border-color: transparent;
	transform: translateY(-50%) scale(1.06);
}

.carosello__pallini {
	position: absolute;
	left: 50%;
	bottom: var(--s-4);
	transform: translateX(-50%);
	display: flex;
	gap: var(--s-2);
	z-index: 2;
}

.carosello__pallino {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: var(--raggio-pill);
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition:
		width var(--dur-media) var(--curva),
		background var(--dur-rapida) var(--curva);
}

.carosello__pallino:hover {
	background: #fff;
}

/* Il pallino attivo si allunga in una pillola: si vede a colpo d'occhio
   dove sei anche con la coda dell'occhio. */
.carosello__pallino.e-attivo {
	width: 26px;
	background: #fff;
}

@media (max-width: 640px) {
	.carosello__freccia {
		width: 40px;
		height: 40px;
	}

	.carosello__freccia--prima { left: var(--s-2); }
	.carosello__freccia--dopo  { right: var(--s-2); }
}

/* Le foto dei pezzi hanno fondo chiaro: raggio e ombra evitano che
   sembrino ritagli incollati sul buio. */
.entry-content img,
.entry-content figure img {
	border-radius: var(--raggio);
	box-shadow: var(--ombra-1);
}

.entry-content figure {
	margin: var(--s-7) 0;
}

.entry-content figcaption {
	margin-top: var(--s-3);
	font-size: var(--t-sm);
	color: var(--c-testo-debole);
	text-align: center;
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--s-5);
}

.entry-content li + li {
	margin-top: var(--s-2);
}

.entry-content blockquote {
	margin: var(--s-7) 0;
	padding: var(--s-5) var(--s-6);
	border-left: 3px solid transparent;
	border-image: var(--grad-marca) 1;
	background: var(--grad-superficie);
	border-radius: 0 var(--raggio) var(--raggio) 0;
	color: var(--c-testo);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
	margin: var(--s-6) 0;
	background: var(--c-superficie);
	border-radius: var(--raggio);
	overflow: hidden;
}

.entry-content th,
.entry-content td {
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--c-bordo-tenue);
	text-align: left;
}

.entry-content th {
	color: var(--c-titolo);
	font-weight: 600;
	background: var(--c-superficie-alta);
}

.entry-content tr:last-child td {
	border-bottom: 0;
}

.entry-content code {
	background: var(--c-superficie-alta);
	padding: 0.15em 0.45em;
	border-radius: var(--raggio-sm);
	font-size: 0.9em;
}

/* =========================================================================
   Schede
   ========================================================================= */

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--s-5);
}

.post-card {
	background: var(--grad-superficie);
	border: 1px solid var(--c-bordo-tenue);
	border-radius: var(--raggio-lg);
	overflow: hidden;
	padding-bottom: var(--s-5);
	transition:
		transform var(--dur-media) var(--curva),
		border-color var(--dur-media) var(--curva),
		box-shadow var(--dur-media) var(--curva);
}

.post-card:hover {
	transform: translateY(-5px);
	border-color: var(--c-accento-bordo);
	box-shadow: var(--ombra-2);
}

.post-card__thumb {
	display: block;
	overflow: hidden;
}

.post-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--dur-ingresso) var(--curva);
}

.post-card:hover .post-card__thumb img {
	transform: scale(1.04);
}

.post-card__title {
	font-size: var(--t-lg);
	margin: var(--s-5) var(--s-5) var(--s-2);
}

.post-card__title a {
	color: var(--c-testo);
	text-decoration: none;
	transition: color var(--dur-rapida) var(--curva);
}

.post-card__title a:hover {
	color: var(--c-accento);
}

.post-card__excerpt {
	margin-inline: var(--s-5);
	color: var(--c-testo-debole);
	font-size: var(--t-sm);
}

/* =========================================================================
   Pulsanti
   -------------------------------------------------------------------------
   Pieno a riposo, svuotato al passaggio: il bordo resta e regge la forma,
   cosi' il pulsante non "salta" di dimensione.
   ========================================================================= */

.button,
.wp-block-button__link,
.entry-content .wp-element-button,
input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-6);
	background: var(--c-accento);
	color: var(--c-su-accento);
	border: 2px solid var(--c-accento);
	border-radius: var(--raggio-pill);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--t-sm);
	line-height: 1.5;
	cursor: pointer;
	transition:
		background var(--dur-media) var(--curva),
		color var(--dur-media) var(--curva),
		transform var(--dur-rapida) var(--curva),
		box-shadow var(--dur-media) var(--curva);
}

.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: transparent;
	color: var(--c-accento-chiaro);
	transform: translateY(-2px);
	box-shadow: var(--ombra-marca);
}

.button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

/* Variante secondaria: vuota a riposo, si riempie al passaggio. */
.button--fantasma,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-testo);
	border-color: var(--c-bordo);
}

.button--fantasma:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--c-accento-velo);
	border-color: var(--c-accento);
	color: var(--c-accento);
}

/* =========================================================================
   Griglia dei materiali
   -------------------------------------------------------------------------
   Card-link della pagina MATERIALI: il markup arriva da blocchi HTML del
   contenuto (<div class="rt-griglia-materiali">). Ogni card porta alla
   scheda del materiale; stesso linguaggio delle schede della home.
   ========================================================================= */

.rt-griglia-materiali {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--s-4);
	margin: var(--s-5) 0 var(--s-7);
}

.rt-card-materiale {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-5);
	background: var(--grad-superficie);
	border: 1px solid var(--c-bordo);
	border-radius: var(--raggio);
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--dur-rapida) var(--curva),
		border-color var(--dur-media) var(--curva),
		box-shadow var(--dur-media) var(--curva);
}

.rt-card-materiale:hover {
	transform: translateY(-3px);
	border-color: var(--c-accento);
	box-shadow: var(--ombra-marca);
}

.rt-card-materiale__nome {
	font-size: var(--t-lg);
	font-weight: 700;
	color: var(--c-titolo);
}

.rt-card-materiale__testo {
	flex: 1;
	font-size: var(--t-sm);
	color: var(--c-testo-tenue);
	line-height: 1.55;
}

.rt-card-materiale__cta {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-accento);
}

.rt-card-materiale__cta::after {
	content: " \2192";
	transition: transform var(--dur-rapida) var(--curva);
	display: inline-block;
}

.rt-card-materiale:hover .rt-card-materiale__cta::after {
	transform: translateX(4px);
}

/* =========================================================================
   Chiusura delle schede materiale
   -------------------------------------------------------------------------
   Invito al preventivo stampato da page.php in coda a ogni scheda: card
   centrata sui toni della marca, con azione primaria piena e ritorno
   all'indice dei materiali in variante fantasma.
   ========================================================================= */

.scheda-chiusura {
	margin: var(--s-8) 0 var(--s-7);
	padding: var(--s-7) var(--s-6);
	text-align: center;
	background: var(--grad-sezione);
	border: 1px solid var(--c-bordo-tenue);
	border-radius: var(--raggio-lg);
}

.scheda-chiusura__titolo {
	margin: 0 0 var(--s-2);
	font-size: var(--t-xl);
	color: var(--c-titolo);
}

.scheda-chiusura__testo {
	margin: 0 auto var(--s-5);
	max-width: 46ch;
	color: var(--c-testo-tenue);
}

.scheda-chiusura__azioni {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
}

/* =========================================================================
   Valutazioni a tacche
   -------------------------------------------------------------------------
   Sostituiscono le stelline emoji delle schede materiali: il filtro
   the_content in functions.php converte ⭐⭐⭐☆☆ in questo markup.
   ========================================================================= */

.valutazione {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
	margin-left: var(--s-1);
}

.valutazione__tacca {
	width: 16px;
	height: 8px;
	border-radius: 2px;
	background: var(--c-bordo);
}

.valutazione__tacca.e-piena {
	background: var(--grad-marca);
}

/* =========================================================================
   Pagina Contatti
   -------------------------------------------------------------------------
   Le classi rt-contatto-* sono usate dal blocco HTML nel contenuto della
   pagina: schede con recapiti cliccabili accanto al modulo.
   ========================================================================= */

/* La specificita' con .entry-content e il tag e' voluta: la regola generica
   ".entry-content ul { padding-left }" vincerebbe su una classe sola e
   spingerebbe le schede a destra rispetto al titolo e alla mappa. */
.entry-content ul.rt-schede-contatto,
.rt-schede-contatto {
	display: grid;
	gap: var(--s-3);
	margin: 0 0 var(--s-5);
	padding: 0;
	list-style: none;
}

.entry-content .rt-schede-contatto > li {
	margin: 0;
}

.rt-scheda-contatto {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	background: var(--grad-superficie);
	border: 1px solid var(--c-bordo-tenue);
	border-radius: var(--raggio);
	box-shadow: var(--ombra-1);
	transition:
		transform var(--dur-rapida) var(--curva),
		border-color var(--dur-rapida) var(--curva);
}

.rt-scheda-contatto:hover {
	transform: translateY(-2px);
	border-color: var(--c-accento-bordo);
}

/* Icona in un quadrato con velo d'accento: stroke, come il resto del tema. */
.rt-scheda-contatto__icona {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--raggio-sm);
	background: var(--c-accento-velo);
	color: var(--c-accento);
}

.rt-scheda-contatto__icona svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rt-scheda-contatto__testo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rt-scheda-contatto__etichetta {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-testo-debole);
}

.rt-scheda-contatto__valore {
	font-size: var(--t-lg);
	font-weight: 600;
	color: var(--c-titolo);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.rt-scheda-contatto__valore:hover {
	color: var(--c-accento);
}

/* --- Mappa --------------------------------------------------------------
   L'iframe di Google Maps: proporzione fissa, angoli del tema, niente
   bordo bianco. In tema scuro una leggera desaturazione la ammorbidisce. */
.rt-mappa {
	margin-top: var(--s-5);
	border-radius: var(--raggio);
	overflow: hidden;
	border: 1px solid var(--c-bordo-tenue);
	box-shadow: var(--ombra-1);
	line-height: 0;
}

.rt-mappa iframe {
	width: 100%;
	height: 280px;
	border: 0;
}

[data-tema="scuro"] .rt-mappa iframe {
	filter: grayscale(0.25) brightness(0.92);
}

/* Prima del consenso al posto della mappa c'e' questo invito: stessa
   sagoma dell'iframe, cosi' il caricamento non sposta nulla. */
.rt-mappa__consenso {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	width: 100%;
	height: 280px;
	padding: var(--s-5);
	background: var(--grad-superficie);
	border: 0;
	cursor: pointer;
	font: inherit;
	line-height: var(--interlinea);
	color: var(--c-testo-tenue);
	text-align: center;
	transition: background var(--dur-rapida) var(--curva);
}

.rt-mappa__consenso:hover {
	background: var(--c-accento-velo);
}

.rt-mappa__consenso svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: var(--c-accento);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rt-mappa__consenso strong {
	color: var(--c-titolo);
	font-size: var(--t-base);
}

.rt-mappa__consenso small {
	font-size: var(--t-xs);
	color: var(--c-testo-debole);
	max-width: 34ch;
}

/* --- Modulo Contact Form 7 --------------------------------------------- */

.wpcf7 label {
	display: block;
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--c-titolo);
	margin-bottom: var(--s-4);
}

.wpcf7 input,
.wpcf7 textarea {
	margin-top: var(--s-1);
	font-weight: 400;
}

.wpcf7 input[type="file"] {
	padding: var(--s-2);
	font-size: var(--t-sm);
	color: var(--c-testo-tenue);
	cursor: pointer;
}

/* Il pulsante "Sfoglia" nativo stona col resto: qui prende la forma della
   variante secondaria dei pulsanti del tema. */
.wpcf7 input[type="file"]::file-selector-button {
	margin-right: var(--s-3);
	padding: var(--s-2) var(--s-4);
	background: transparent;
	color: var(--c-accento);
	border: 1.5px solid var(--c-accento-bordo);
	border-radius: var(--raggio-pill);
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	cursor: pointer;
	transition:
		background var(--dur-rapida) var(--curva),
		border-color var(--dur-rapida) var(--curva);
}

.wpcf7 input[type="file"]:hover::file-selector-button {
	background: var(--c-accento-velo);
	border-color: var(--c-accento);
}

/* La casella del consenso: riga compatta e discreta, non un altro campo. */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	margin-bottom: var(--s-4);
	font-size: var(--t-sm);
	font-weight: 400;
	color: var(--c-testo-tenue);
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 0.2em;
	accent-color: var(--c-accento);
	flex: 0 0 auto;
}

.wpcf7 input[type="submit"] {
	width: auto;
	margin-top: var(--s-2);
}

/* Feedback di invio: il velo del tema al posto dei bordi rossi/verdi. */
.wpcf7 form .wpcf7-response-output {
	margin: var(--s-4) 0 0;
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--c-bordo);
	border-radius: var(--raggio-sm);
	background: var(--c-superficie-alta);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--c-accento);
	background: var(--c-accento-velo);
}

.wpcf7-not-valid-tip {
	font-size: var(--t-xs);
	font-weight: 400;
	color: #c0392b;
	margin-top: var(--s-1);
}

[data-tema="scuro"] .wpcf7-not-valid-tip {
	color: #ff8a7a;
}

/* =========================================================================
   Campi modulo
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: var(--s-3) var(--s-4);
	background: var(--c-superficie);
	border: 1px solid var(--c-bordo);
	border-radius: var(--raggio-sm);
	color: var(--c-testo);
	font: inherit;
	font-size: var(--t-sm);
	transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--c-accento);
	box-shadow: 0 0 0 3px var(--c-accento-velo);
}

::placeholder {
	color: var(--c-testo-debole);
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
	background: var(--grad-sezione);
	border-top: 1px solid var(--c-bordo-tenue);
	color: var(--c-testo-tenue);
	padding-block: var(--s-8);
	margin-top: var(--s-9);
	font-size: var(--t-sm);
}

.site-footer a {
	color: var(--c-testo);
	transition: color var(--dur-rapida) var(--curva);
}

.site-footer a:hover {
	color: var(--c-accento);
}

.site-footer__griglia {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--s-6);
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-6);
	border-bottom: 1px solid var(--c-bordo-tenue);
}

@media (max-width: 860px) {
	.site-footer__griglia {
		grid-template-columns: 1fr;
	}
}

.site-footer__brand .custom-logo {
	max-height: 40px;
	width: auto;
}

.site-footer__descrizione {
	margin-top: var(--s-3);
	color: var(--c-testo-debole);
	max-width: 38ch;
}

.site-footer__menu,
.site-footer__contatti {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu li + li,
.site-footer__contatti li + li {
	margin-top: var(--s-2);
}

.site-footer__menu a {
	text-decoration: none;
	color: var(--c-testo-tenue);
}

.site-footer__menu a:hover {
	color: var(--c-accento);
}

.site-footer__contatti a {
	text-decoration: none;
}

.widget-title {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-testo-debole);
	margin-bottom: var(--s-3);
}

/* Riga di chiusura: copyright a sinistra, interruttore chiaro/scuro a
   destra. L'interruttore vive qui e non nell'header. */
.site-footer__fondo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
}

.site-footer__credits {
	margin: 0;
	color: var(--c-testo-debole);
	font-size: var(--t-xs);
}

.site-footer__credits a {
	color: var(--c-testo-tenue);
}

/* =========================================================================
   Paginazione
   ========================================================================= */

.pagination {
	margin-top: var(--s-8);
	display: flex;
	justify-content: center;
	gap: var(--s-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--s-2);
	border: 1px solid var(--c-bordo);
	border-radius: var(--raggio-sm);
	text-decoration: none;
	color: var(--c-testo-tenue);
	transition:
		border-color var(--dur-rapida) var(--curva),
		color var(--dur-rapida) var(--curva),
		background var(--dur-rapida) var(--curva);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	border-color: var(--c-accento);
	background: var(--c-accento-velo);
	color: var(--c-accento);
}

/* =========================================================================
   Mobile
   ========================================================================= */

@media (max-width: 860px) {
	.site-main {
		padding-block: var(--s-6);
	}

	.site-header__inner {
		gap: var(--s-3);
	}

	/* Logo a sinistra, pulsante del menu spinto tutto a destra: sono i due
	   soli comandi della barra, l'interruttore del tema sta nel footer. */
	.site-header__comandi {
		order: 2;
		margin-left: auto;
	}

	.nav-toggle {
		display: flex;
		/* Solo icona: il riquadro attorno lo faceva sembrare un campo. */
		border: 0;
	}

	.nav-toggle:hover .nav-toggle__bar,
	.nav-toggle:hover .nav-toggle__bar::before,
	.nav-toggle:hover .nav-toggle__bar::after {
		background: var(--c-accento);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
		background: transparent;
	}

	.site-nav {
		order: 3;
		margin-left: 0;
		flex-basis: 100%;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--dur-media) var(--curva);
	}

	.site-nav > * {
		overflow: hidden;
		/* A menu chiuso i link non devono essere raggiungibili col Tab:
		   l'altezza zero da sola non li toglie dalla tabulazione. */
		visibility: hidden;
		transition: visibility var(--dur-media);
	}

	.site-nav.is-open {
		grid-template-rows: 1fr;
	}

	.site-nav.is-open > * {
		visibility: visible;
	}

	/* Il menu aperto e' un pannello: una superficie con bordo e ombra,
	   voci larghe un dito, niente lista di righe sottolineate. */
	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		margin-block: 0 var(--s-4);
		padding: var(--s-2);
		background: var(--grad-superficie);
		border: 1px solid var(--c-bordo-tenue);
		border-radius: var(--raggio);
		box-shadow: var(--ombra-2);
		/* A menu chiuso il pannello non deve lasciare tracce d'ingombro. */
		opacity: 0;
		transform: translateY(-6px);
		transition:
			opacity var(--dur-media) var(--curva),
			transform var(--dur-media) var(--curva);
	}

	.site-nav.is-open .site-nav__list {
		opacity: 1;
		transform: none;
	}

	.site-nav__list > li {
		border: 0;
	}

	.site-nav__list a {
		display: block;
		width: 100%;
		padding: var(--s-3) var(--s-4);
		border-radius: var(--raggio-sm);
		font-size: var(--t-sm);
		transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
	}

	.site-nav__list a:hover,
	.site-nav__list a:focus-visible {
		background: var(--c-accento-velo);
		color: var(--c-accento);
	}

	.site-nav__list .current-menu-item > a {
		background: var(--c-accento-velo);
		color: var(--c-accento);
	}

	.site-nav__list > li > a::after {
		display: none;
	}

	/* La voce con figli e' una riga: link elastico + pulsante a freccia. */
	.site-nav__list .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.site-nav__list .menu-item-has-children > a {
		flex: 1 1 auto;
		width: auto;
	}

	.sottomenu-toggle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--c-testo-debole);
		cursor: pointer;
	}

	.sottomenu-toggle svg {
		width: 18px;
		height: 18px;
		transition: transform var(--dur-media) var(--curva);
	}

	.is-espanso > .sottomenu-toggle {
		color: var(--c-accento);
	}

	.is-espanso > .sottomenu-toggle svg {
		transform: rotate(180deg);
	}

	/* Sottomenu chiusi di partenza: con otto materiali il menu tutto aperto
	   occupava una schermata intera. Rientrati con un filetto che li lega
	   alla voce madre. */
	.site-nav__list .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		flex-basis: 100%;
		border: 0;
		box-shadow: none;
		background: transparent;
		margin: 0 0 var(--s-2) var(--s-4);
		padding: 0 0 0 var(--s-2);
		border-left: 2px solid var(--c-accento-bordo);
		border-radius: 0;
		min-width: 0;
	}

	.site-nav__list .is-espanso > .sub-menu {
		display: block;
	}

	.site-nav__list .sub-menu a {
		color: var(--c-testo-tenue);
		padding: var(--s-2) var(--s-3);
		text-transform: none;
	}
}

/* Su desktop i pulsanti a freccia dei sottomenu non servono: c'e' l'hover. */
@media (min-width: 861px) {
	.sottomenu-toggle {
		display: none;
	}
}