/*
Theme Name: AIAQUA
Theme URI: https://aiaqua.tech
Author: AIAQUA
Description: Tema a blocchi su misura per AIAQUA — software per la gestione intelligente delle reti idriche. Design system tecnico, accessibile e completamente responsive.
Version: 1.0.7
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aiaqua
Tags: block-theme, full-site-editing, one-column, accessibility-ready
*/

/* =========================================================
   1. BASE
   ========================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Larghezza di lettura confortevole per i paragrafi lunghi del sito */
.entry-content > p,
.aq-testo p {
	max-width: 68ch;
}

img { height: auto; max-width: 100%; }

::selection {
	background: var(--wp--preset--color--ciano);
	color: var(--wp--preset--color--navy);
}

/* =========================================================
   2. ACCESSIBILITÀ
   ========================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--ciano);
	outline-offset: 3px;
	border-radius: var(--wp--custom--raggio--s);
}

.aq-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.9rem 1.4rem;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--wp--custom--raggio--m) 0;
}

.aq-skip-link:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@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;
	}
}

html { scroll-behavior: smooth; }
:target { scroll-margin-top: calc(var(--wp--custom--altezza--header) + 24px); }

/* =========================================================
   3. TESTATA
   ========================================================= */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 900;
}

/* Il contenuto principale aderisce subito sotto la testata, senza lo
   spazio verticale che WordPress inserisce di default tra le sezioni. */
.wp-site-blocks > main {
	margin-top: 0;
}

/* Stessa cosa tra la hero (video/gif) e la sezione subito dopo: nessuno
   spazio automatico, la sezione successiva porta già il suo spazio interno. */
.wp-block-cover + * {
	margin-top: 0 !important;
}

/* Il banner con la gif in home segue sempre le proporzioni naturali del
   filmato (16:9), a qualunque larghezza: niente più altezza fissa in
   pixel solo per il desktop. Un valore fisso avrebbe richiesto una soglia
   per passare alle proporzioni naturali su schermi stretti, e proprio in
   corrispondenza di quella soglia l'altezza sarebbe cambiata di colpo
   (scatto visibile) mentre si ridimensiona la finestra. Con un'unica
   regola valida ovunque il ridimensionamento resta sempre fluido, e la
   gif (con la scritta "AIAQUA" che contiene) non viene mai tagliata. */
.aq-hero-gif {
	min-height: auto !important;
	aspect-ratio: 16 / 9 !important;
}

/* Il logo sopra il video: il blocco immagine di WordPress resta largo
   quanto il banner, e senza questa regola l'immagine (più stretta)
   resta incollata al bordo sinistro invece di stare al centro. */
.aq-hero-gif__logo {
	text-align: center;
}

/* Su desktop c'è più spazio nel banner: il logo può crescere. Sotto i
   1024px (tablet e mobile) resta alla dimensione base impostata nel
   blocco, che lì è già corretta. */
@media (min-width: 1024px) {
	.aq-hero-gif__logo img {
		width: 660px !important;
	}
}

/* Le pagine prodotto e progetto (Prodotti e servizi, Ricerca e sviluppo,
   AquaNET, Studio e modellazione, Idroelettrico) usano come sfondo del
   banner una foto molto panoramica (circa 2400x700). Con un'altezza fissa
   uguale a ogni larghezza, su schermi stretti l'immagine viene ingrandita
   parecchio e si vede solo una fetta centrale stretta, tagliando ciò che
   sta vicino ai bordi. Un'altezza minore su mobile e tablet riduce
   l'ingrandimento necessario e mostra una porzione più ampia della foto. */
@media (max-width: 767px) {
	.wp-block-cover:not(.aq-hero-gif) {
		min-height: 200px !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-cover:not(.aq-hero-gif) {
		min-height: 260px !important;
	}
}

.aq-header {
	min-height: var(--wp--custom--altezza--header);
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--bordo);
	transition: box-shadow var(--wp--custom--transizione--base);
}

.aq-header.is-scrolled {
	box-shadow: 0 1px 20px rgba(8, 32, 63, 0.08);
}

.aq-header .wp-block-site-logo img {
	width: auto;
	max-height: 42px;
}

/* Struttura della testata: definita qui e non solo dal layout dei blocchi,
   così resta corretta anche se WordPress non genera il CSS di layout. */
.aq-header > .wp-block-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: clamp(1rem, 2vw, 2rem);
}

.aq-header > .wp-block-group > .wp-block-group {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(0.75rem, 1.6vw, 1.75rem);
	margin-left: auto;
}

.aq-header .wp-block-buttons {
	margin: 0;
	flex: none;
}

/* Sotto i 1200px la barra è troppo affollata: lingua e demo scendono nel menu.
   Si nasconde tutto il selettore (bottone incluso, non solo il pannello):
   sotto quella soglia le lingue si trovano già in fondo al menu mobile. */
@media (max-width: 1199px) {
	.aq-header .aq-selettore-lingua,
	.aq-header .wp-block-buttons {
		display: none;
	}
}

/* Il pannello blu a tutto schermo (il menu "mobile" del blocco Navigazione
   di WordPress) di suo si attiva solo sotto i 600px: da lì fino a 1023px
   il menu restava quello disteso in riga, che con tante voci ("Ricerca e
   sviluppo" compresa) va stretto e va a capo in modo scomodo. Qui si
   sposta la soglia a 1023px, cioè fino alla fine della fascia "tablet"
   del progetto: il pulsante ☰ resta visibile e il pannello resta chiuso
   di default fino a quella larghezza, indipendentemente da come
   WordPress calcolerebbe da solo lo stato "nascosto di default". */
@media (max-width: 1023px) {
	.aq-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.aq-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Navigazione */
.aq-header .wp-block-navigation {
	gap: clamp(0.75rem, 1.6vw, 1.75rem);
}

.aq-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--testo);
	text-decoration: none;
	padding: 0.4rem 0;
	position: relative;
	display: inline-block;
	transition: color var(--wp--custom--transizione--veloce), transform var(--wp--custom--transizione--veloce), text-shadow var(--wp--custom--transizione--veloce);
}

/* Voce di primo livello al passaggio del mouse (o pagina corrente): si
   solleva leggermente e prende un bagliore blu, al posto della sottolineatura
   che scorre usata prima. */
.aq-header .wp-block-navigation-item__content:hover,
.aq-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blu);
	transform: translateY(-3px);
	text-shadow: 0 6px 14px rgba(18, 100, 200, 0.28);
}

/* Tendina */
.aq-header .wp-block-navigation__submenu-container {
	min-width: 280px;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--l);
	box-shadow: var(--wp--preset--shadow--lift);
	overflow: hidden;
}

.aq-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.7rem 0.9rem;
	border-radius: var(--wp--custom--raggio--m);
	width: 100%;
	transition: background var(--wp--custom--transizione--veloce);
}

.aq-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--blu-100);
}

.aq-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* Menu mobile a schermo intero. Il pannello (.aq-menu-mobile) viene spostato
   da aiaqua.js fuori dall'intestazione SOLO mentre è aperto — da chiuso
   torna dentro .aq-header, dove è anche il menu orizzontale del desktop.
   Per questo TUTTE le regole qui sotto richiedono anche ".is-menu-open" e
   non solo ".aq-menu-mobile" (che resta sul pannello sempre, aperto o no):
   senza quel doppio requisito, queste stesse regole si applicherebbero
   anche al menu desktop quando il pannello torna nella testata — è
   esattamente il bug che ha rotto il menu desktop la prima volta.
   Il padding di WordPress per questo pannello si basa su una variabile CSS
   (--wp--style--root--padding-top) che qui non è definita da nessuna parte:
   il suo clamp() risulta perciò un valore non valido, e viene ignorato —
   qui va quindi definito da capo, con !important per togliere ogni dubbio
   su quale regola vinca. */
.aq-menu-mobile.is-menu-open {
	padding: 0 !important;
	/* Il blocco Navigazione ha overlayBackgroundColor/overlayTextColor
	   impostati su bianco/testo scuro (per la vecchia versione bianca del
	   pannello): quelle classi native di WordPress hanno priorità alta,
	   servono !important per sostituirle con lo sfondo scuro nuovo. */
	background: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--bianco) !important;
}

/* Intestazione del pannello (creata da menuMobile() in aiaqua.js): logo a
   sinistra, pulsante di chiusura a destra, con un separatore sottile prima
   dell'elenco delle voci. */
.aq-menu-mobile.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Nascosta finché il pannello non è davvero aperto a schermo intero: sopra
   una certa larghezza WordPress mostra comunque il contenuto di questo
   contenitore, in riga, come il menu normale della testata — senza questa
   regola l'intestazione con logo e pulsante di chiusura (pensata solo per
   il pannello mobile) comparirebbe anche lì, sovrapposta al menu vero. */
.aq-menu-mobile__intestazione {
	display: none;
}

.aq-menu-mobile.is-menu-open .aq-menu-mobile__intestazione {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	/* Stesso padding verticale della testata normale (0.9rem, vedi
	   parts/header.html) e stesso padding orizzontale (1.25rem = 20px,
	   la stessa distanza dal bordo del logo nella testata) — cosi la barra
	   con logo e pulsante occupa esattamente lo stesso spazio, alla stessa
	   altezza, di quando il menu è chiuso: aprendolo sembra che l'intestazione
	   resti ferma e cambi solo colore, invece di spostarsi. */
	padding: 0.9rem 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.aq-menu-mobile__logo {
	/* Stessa altezza del logo a colori nella testata normale
	   (.aq-header .wp-block-site-logo img, max-height:42px) — cosi i due
	   loghi sono esattamente della stessa dimensione. */
	height: 42px;
	width: auto;
	/* L'intestazione centra i suoi contenuti (align-items:center) rispetto
	   al pulsante di chiusura, più alto (44px) del logo: quel
	   centraggio spingerebbe il logo qualche pixel più in basso del dovuto.
	   "flex-start" lo ancora invece subito sotto al padding superiore,
	   alla stessa distanza dall'alto del logo nella testata normale. */
	align-self: flex-start;
}

.aq-menu-mobile.is-menu-open .wp-block-navigation__responsive-container-close {
	position: static;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--bianco);
	flex: none;
}

.aq-menu-mobile.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 18px;
	height: 18px;
}

.aq-menu-mobile.is-menu-open .wp-block-navigation__responsive-container-content {
	/* padding-top forzato: WordPress core mette "calc(24px + 2rem)" ed è più specifico del nostro selettore.
	   Uguale al padding verticale di ogni voce (sotto), cosi lo spazio sopra "Prodotti e servizi"
	   è identico allo spazio tra le altre voci. */
	padding: 1.6rem 1.25rem 1.25rem !important;
	overflow-y: auto;
	flex: 1;
}

/* Il menu desktop è allineato a destra (contentPosition del blocco): la
   riga della lista eredita "align-items: flex-end", che nel pannello
   mobile spingeva ogni voce contro il bordo destro. Un elenco verticale
   si legge meglio allineato a sinistra, con le righe a piena larghezza. */
.aq-menu-mobile.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-item {
	text-align: left;
	width: 100%;
}

/* Le voci senza sottomenu (solo un link): stesso ragionamento della regola
   sopra per quelle con figli — si esce dal flex ereditato dal menu
   desktop invece di continuare a piegarlo con altre eccezioni. */
.aq-menu-mobile.is-menu-open .wp-block-navigation-item:not(.has-child) {
	display: block !important;
}

/* "Homepage" nascosta nel pannello mobile (vedi menuMobile() in
   aiaqua.js): il logo in alto porta già alla home. */
.aq-menu-mobile.is-menu-open .wp-block-navigation-item.aq-menu-mobile__nascosta {
	display: none !important;
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--l);
	font-weight: 700;
	/* !important: WordPress core ha una regola con altrettante classi
	   (".wp-block-navigation__responsive-container-content
	   .wp-block-navigation-item__content") che mette "padding:0" e vinceva
	   sulla nostra, azzerando lo spazio tra le voci. */
	padding: 1.6rem 0 !important;
	justify-content: flex-start;
	text-align: left;
	color: var(--wp--preset--color--bianco);
}

/* Sottolineatura animata delle voci di primo livello: pensata per il passaggio
   del mouse su desktop, sul tocco da mobile non serve. */
.aq-menu-mobile.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Ogni voce di primo livello con figli: la scritta a sinistra, la freccina
   a destra sulla stessa riga; il sottomenu (se aperto) sotto, rientrato.
   Le regole ereditate dal menu desktop (flex, allineato a destra) qui
   creavano più problemi di quanti ne risolvessero: si riparte da un
   layout semplice — riga di testo normale, freccina posizionata sopra
   con position:absolute — invece di continuare a piegare il flex
   ereditato con altre eccezioni. */
.aq-menu-mobile.is-menu-open .wp-block-navigation-item.has-child {
	display: block !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	display: block;
	/* "position:relative" qui e non sul <li> intero: il pulsante "+/×" (vedi
	   sotto) è spostato via JS dentro questo link, cosi resta ancorato solo
	   all'altezza della riga del titolo — anche quando il sottomenu sotto è
	   aperto e allunga il <li> che lo contiene. */
	position: relative;
	padding-right: 3rem;
}

/* Il divisore delle voci senza sottomenu: il "wp-block-navigation__container"
   (l'elenco di primo livello) e il "wp-block-navigation__submenu-container"
   (le sottovoci, quando aperte) hanno nomi di classe diversi, quindi questo
   selettore prende solo le voci di primo livello, non anche quelle già
   rientrate dentro un sottomenu aperto. */
.aq-menu-mobile.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Il pulsante dei sottomenu: WordPress lo nasconde di default nel pannello
   mobile (mostra invece tutti i sottomenu già aperti insieme). Qui serve
   per aprirli/chiuderli uno alla volta, quindi va reso visibile e cliccabile
   — con !important perché la regola di WordPress da annullare è scritta
   apposta con una specificità molto alta. L'icona a freccina di WordPress
   (un <svg>) viene sostituita da un "+" disegnato in CSS (due barre),
   che ruotando di 45° diventa una "×" quando il sottomenu è aperto. */
.aq-menu-mobile.is-menu-open .wp-block-navigation-submenu__toggle {
	display: block !important;
	position: absolute;
	/* Centrata sull'altezza della riga (che è quella del testo accanto,
	   non dei 2.75rem del pulsante): "top:50%" + "translateY(-50%)" la
	   tengono in centro qualunque sia l'altezza reale della riga, invece
	   di ancorarla al bordo superiore. */
	top: 50%;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	transform: translateY(-50%);
	transition: transform var(--wp--custom--transizione--base);
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-submenu__toggle svg {
	display: none;
}

/* Le due barre che disegnano il "+": centrate nel pulsante con
   "top/left:50%" + "translate(-50%,-50%)" invece di affidarsi
   all'allineamento flex del genitore, che non vale per elementi
   posizionati in modo assoluto come questi. */
.aq-menu-mobile.is-menu-open .wp-block-navigation-submenu__toggle::before,
.aq-menu-mobile.is-menu-open .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--wp--preset--color--ciano);
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-submenu__toggle::before {
	width: 16px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-submenu__toggle::after {
	width: 2px;
	height: 16px;
	transform: translate(-50%, -50%);
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-item.aq-sottomenu-aperto .wp-block-navigation-submenu__toggle {
	transform: translateY(-50%) rotate(45deg);
}

/* Il sottomenu resta chiuso finché non si tocca la freccina (vedi
   menuMobile() in aiaqua.js, che aggiunge/toglie questa classe). */
.aq-menu-mobile.is-menu-open .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	display: none !important;
}

.aq-menu-mobile.is-menu-open .wp-block-navigation-item.aq-sottomenu-aperto > .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	padding: 0 0 0.75rem 1rem !important;
	border-left: 2px solid rgba(255, 255, 255, 0.16);
	margin-left: 0.5rem;
}

.aq-menu-mobile.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--m);
	font-weight: 500;
	padding: 0.55rem 0;
	color: rgba(255, 255, 255, 0.68);
}

.aq-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--navy);
}

/* Il selettore di lingua, clonato in fondo al pannello (vedi menuMobile()
   in aiaqua.js). Niente bordo qui sopra: l'ultima voce dell'elenco ("Contatti")
   ha già il suo bordo sotto — un secondo bordo qui creava due righe vicine,
   quasi sovrapposte. Lo spazio prima delle bandiere basta da solo a separarle
   dall'elenco, senza bisogno di una riga in più. */
/* Nascosto di default per lo stesso motivo di ".aq-menu-mobile__intestazione"
   sopra: il pannello resta nel DOM anche da chiuso/su desktop (è la stessa
   lista che diventa il menu orizzontale), quindi senza questa regola le
   bandiere clonate comparivano una seconda volta, sempre, accanto a quelle
   vere della testata. */
.aq-menu-mobile__piede {
	display: none;
}

.aq-menu-mobile.is-menu-open .aq-menu-mobile__piede {
	display: block;
	flex: none;
	margin-top: 1.75rem;
}

.aq-menu-mobile__lingua {
	display: flex;
	gap: 0.75rem;
}

.aq-menu-mobile__lingua img {
	width: 26px;
	height: 26px;
}

/* Con il pannello del menu mobile aperto, il resto della pagina non scorre
   "dietro" di esso (vedi menuMobile() in aiaqua.js). */
body.aq-menu-mobile-aperto {
	overflow: hidden;
}

/* Selettore lingua (generato dal blocco Polylang: è una lista <ul>, non un div) */
.aq-lingua {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--testo-soft);
}

.aq-lingua a {
	color: inherit;
	text-decoration: none;
	padding: 0.3rem 0.4rem;
	border-radius: var(--wp--custom--raggio--s);
	display: flex;
	align-items: center;
}

.aq-lingua img {
	display: block;
	width: 20px !important;
	height: auto !important;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--wp--preset--color--bordo);
	opacity: 0.55;
	transition: opacity var(--wp--custom--transizione--veloce);
}

.aq-lingua li.current-lang img,
.aq-lingua a:hover img {
	opacity: 1;
}

.aq-lingua li.current-lang a,
.aq-lingua a:hover {
	color: var(--wp--preset--color--blu);
	background: var(--wp--preset--color--blu-100);
}

/* --- Selettore di lingua: icona a globo, apre un pannello a tendina.
   Il blocco Polylang (".aq-lingua") resta quello vero — dentro qui viene
   solo trasformato da riga di bandiere a pannello, così i link restano
   sempre corretti in automatico quando si aggiungono lingue o pagine. --- */
.aq-selettore-lingua {
	position: relative;
}

.aq-selettore-lingua__bottone {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--raggio--tondo);
	padding: 0.4rem 0.6rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--testo-soft);
	transition: background var(--wp--custom--transizione--veloce), color var(--wp--custom--transizione--veloce), border-color var(--wp--custom--transizione--veloce);
}

.aq-selettore-lingua__bottone svg {
	width: 16px;
	height: 16px;
	flex: none;
	display: block;
}

.aq-selettore-lingua__freccia {
	width: 11px;
	height: 11px;
	transition: transform var(--wp--custom--transizione--veloce);
}

.aq-selettore-lingua__bottone:hover,
.aq-selettore-lingua.is-aperto .aq-selettore-lingua__bottone {
	background: var(--wp--preset--color--blu-100);
	color: var(--wp--preset--color--blu);
	border-color: var(--wp--preset--color--blu-300);
}

.aq-selettore-lingua.is-aperto .aq-selettore-lingua__freccia {
	transform: rotate(180deg);
}

/* Chiusa di default: solo su schermi larghi, dov'è disegnata per stare
   nella testata. Sotto i 1200px il bottone va nel menu mobile (vedi
   sezione 9) e lì il blocco Polylang resta la riga di bandiere di sempre. */
.aq-header .aq-selettore-lingua .aq-lingua {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 175px;
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--l);
	box-shadow: var(--wp--preset--shadow--lift);
	padding: 0.4rem;
	display: none;
	z-index: 20;
}

.aq-header .aq-selettore-lingua.is-aperto .aq-lingua {
	display: flex;
}

.aq-header .aq-selettore-lingua .aq-lingua a {
	padding: 0.6rem 0.7rem;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--corpo);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 500;
}

.aq-header .aq-selettore-lingua .aq-lingua img {
	opacity: 1;
}

.aq-header .aq-selettore-lingua .aq-lingua li.current-lang a::after {
	content: "✓";
	margin-left: auto;
	color: var(--wp--preset--color--blu);
	font-weight: 700;
}

/* =========================================================
   4. PULSANTI
   ========================================================= */

.wp-block-button__link {
	transition: background var(--wp--custom--transizione--base),
		transform var(--wp--custom--transizione--veloce),
		box-shadow var(--wp--custom--transizione--base);
	will-change: transform;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(18, 100, 200, 0.22);
}

/* Variante: contorno */
.is-style-aq-contorno .wp-block-button__link,
.wp-block-button.is-style-aq-contorno .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 1.5px solid var(--wp--preset--color--bordo);
	box-shadow: none;
}

.is-style-aq-contorno .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--blu);
	color: var(--wp--preset--color--blu);
	background: var(--wp--preset--color--blu-100);
	box-shadow: none;
}

/* Variante: contorno su fondo scuro */
.is-style-aq-contorno-chiaro .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	box-shadow: none;
}

.is-style-aq-contorno-chiaro .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.7);
	box-shadow: none;
}

/* Variante: link con freccia */
.is-style-aq-freccia .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--blu);
	padding-left: 0;
	padding-right: 0;
	box-shadow: none;
}

.is-style-aq-freccia .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.5rem;
	transition: transform var(--wp--custom--transizione--base);
}

.is-style-aq-freccia .wp-block-button__link:hover {
	transform: none;
	box-shadow: none;
	color: var(--wp--preset--color--navy);
}

.is-style-aq-freccia .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

/* =========================================================
   5. COMPONENTI
   ========================================================= */

/* --- Eyebrow: etichetta monospazio sopra i titoli --- */
.aq-eyebrow {
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blu);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.aq-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	flex: none;
}

.has-navy-background-color .aq-eyebrow,
.aq-scuro .aq-eyebrow {
	color: var(--wp--preset--color--ciano);
}

/* --- Card --- */
.aq-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--l);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: 100%;
	transition: border-color var(--wp--custom--transizione--base),
		box-shadow var(--wp--custom--transizione--base),
		transform var(--wp--custom--transizione--base);
}

.aq-card:hover {
	border-color: rgba(18, 100, 200, 0.4);
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-3px);
}

.aq-card h3 {
	margin-top: 0.9rem;
	margin-bottom: 0.6rem;
}

.aq-card p {
	font-size: var(--wp--preset--font-size--m);
	margin-bottom: 1.25rem;
}

/* Card su fondo scuro */
.aq-card--scura {
	background: rgba(255, 255, 255, 0.045);
	border-color: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.aq-card--scura:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(49, 195, 240, 0.5);
	box-shadow: none;
}

.aq-card--scura h3 { color: #fff; }

/* Card azzurra: usata per le tre aree di offerta, su sfondo bianco */
.aq-card--azzurro {
	background: var(--wp--preset--color--blu-200);
	border-color: var(--wp--preset--color--blu-300);
}

.aq-card--azzurro:hover {
	border-color: var(--wp--preset--color--blu);
	box-shadow: var(--wp--preset--shadow--lift);
}

.aq-card--azzurro .aq-card__icona {
	color: var(--wp--preset--color--navy-800);
}
.aq-card--scura p { color: rgba(255, 255, 255, 0.72); }

/* Icona della card: solo il segno, senza riquadro colorato dietro */
.aq-card__icona {
	color: var(--wp--preset--color--blu);
	display: block;
}

.aq-card__icona svg { width: 24px; height: 24px; display: block; }

/* --- Barra dei numeri --- */
.aq-numeri {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 1px;
	background: var(--wp--preset--color--bordo);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--l);
	overflow: hidden;
}

.aq-numero {
	background: #fff;
	padding: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 0 !important;
}

.aq-numero__valore {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.aq-numero__etichetta {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--testo-soft);
}

/* Variante scura: barra dei numeri su fondo navy, per le sezioni di respiro.
   Niente scatola/riquadro: i numeri poggiano direttamente sul fondo della
   sezione, separati solo da una sottile riga verticale. */
.aq-numeri--scura {
	background: transparent;
	border: none;
	border-radius: 0;
}

.aq-numeri--scura .aq-numero {
	background: transparent;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.aq-numeri--scura .aq-numero:first-child {
	border-left: none;
}

.aq-numeri--scura .aq-numero__valore {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	color: var(--wp--preset--color--ciano);
}

.aq-numeri--scura .aq-numero__etichetta {
	color: rgba(255, 255, 255, 0.7);
}

/* --- Cornice "schermo": mette in scena gli screenshot delle dashboard --- */
.aq-schermo {
	border-radius: var(--wp--custom--raggio--l);
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(8, 32, 63, 0.12);
	box-shadow: var(--wp--preset--shadow--scena);
}

/* Su questa mappa il bordo chiaro risalta troppo contro i colori della foto */
#distrettualizzazione .aq-schermo {
	border: none;
}

.aq-schermo__barra {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.9rem;
	background: #F2F5F9;
	border-bottom: 1px solid var(--wp--preset--color--bordo);
}

.aq-schermo__punto {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #CFD9E4;
	flex: none;
}

.aq-schermo__titolo {
	margin-left: 0.6rem;
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--testo-soft);
}

.aq-schermo img {
	display: block;
	width: 100%;
}

/* Su mobile le dashboard dense restano leggibili con scorrimento orizzontale */
@media (max-width: 781px) {
	.aq-schermo--denso .aq-schermo__corpo {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.aq-schermo--denso .aq-schermo__corpo img {
		width: auto;
		max-width: none;
		height: 300px;
	}
}

/* --- Funzionalità di prodotto: screenshot + testo alternati --- */
.aq-funzionalita {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.aq-funzionalita--invertita {
	grid-template-columns: 0.9fr 1.1fr;
}

.aq-funzionalita--invertita > *:first-child {
	order: 2;
}

.aq-funzionalita__testo h3 {
	font-size: var(--wp--preset--font-size--xl);
	margin-bottom: 1rem;
}

.aq-funzionalita__testo p {
	font-size: var(--wp--preset--font-size--m);
}

.aq-funzionalita__testo p + p {
	margin-top: 0.8rem;
}

@media (max-width: 991px) {
	.aq-funzionalita,
	.aq-funzionalita--invertita {
		grid-template-columns: 1fr;
	}
	.aq-funzionalita--invertita > *:first-child {
		order: 0;
	}

	/* Sotto i 991px foto e testo diventano una colonna sola: l'immagine
	   (più stretta della colonna, per via del limite di 460px) va sempre
	   centrata. Senza questa regola, nelle sezioni con foto a destra
	   restava attivo il "justify-self: end" pensato per l'affiancamento
	   a due colonne, e l'immagine restava incollata al bordo destro.
	   Serve !important: la regola da annullare ha la stessa specificità
	   (due classi) e viene dopo nel file, quindi vincerebbe comunque. */
	.aq-schermo--compatto {
		justify-self: center !important;
	}
}

/* Variante più contenuta: usata per foto/schemi quasi quadrati (pagina Studio e modellazione),
   che altrimenti crescono a dismisura in altezza quando la colonna si allarga su schermi grandi */
.aq-schermo--compatto {
	width: min(460px, 100%);
	justify-self: start;
}

.aq-funzionalita--invertita .aq-schermo--compatto {
	justify-self: end;
}

/* --- Motivo a rete: la firma grafica, derivata dal logo --- */
.aq-rete {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.aq-rete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(49, 195, 240, 0.28) 1.5px, transparent 0);
	background-size: 34px 34px;
	mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 70%);
	pointer-events: none;
}

.aq-rete--chiara::before {
	background-image:
		radial-gradient(circle at 1px 1px, rgba(18, 100, 200, 0.16) 1.5px, transparent 0);
}

/* --- Muro dei loghi --- */
.aq-loghi {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
	align-items: center;
	justify-items: center;
}

.aq-loghi img {
	max-height: 84px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter var(--wp--custom--transizione--base), opacity var(--wp--custom--transizione--base);
}

.aq-loghi img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* --- Stemmi dei comuni --- */
.aq-comuni {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
	text-align: center;
}

.aq-comuni img {
	height: 82px;
	width: auto;
	margin: 0 auto 0.7rem;
}

.aq-comuni figcaption,
.aq-comuni .aq-comune__nome {
	font-family: var(--wp--preset--font-family--corpo);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.4;
	color: var(--wp--preset--color--testo-soft);
}

/* --- Indice laterale sticky delle pagine prodotto --- */
.aq-indice {
	position: sticky;
	top: calc(var(--wp--custom--altezza--header) + 24px);
	align-self: start;
}

.aq-indice ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--wp--preset--color--bordo);
}

.aq-indice a {
	display: block;
	padding: 0.55rem 0 0.55rem 1rem;
	margin-left: -1px;
	border-left: 2px solid transparent;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	color: var(--wp--preset--color--testo-soft);
	text-decoration: none;
	transition: color var(--wp--custom--transizione--veloce), border-color var(--wp--custom--transizione--veloce);
}

.aq-indice a:hover,
.aq-indice a.is-attivo {
	color: var(--wp--preset--color--blu);
	border-left-color: var(--wp--preset--color--blu);
}

/* Su tablet e mobile diventa una barra orizzontale scorrevole */
@media (max-width: 991px) {
	.aq-indice {
		position: sticky;
		top: var(--wp--custom--altezza--header);
		z-index: 100;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--wp--preset--color--bordo);
		margin-inline: calc(-1 * var(--wp--style--root--padding-left));
		padding-inline: var(--wp--style--root--padding-left);
		/* Elemento di una grid a 1 colonna: senza questo non si restringe
		   sotto la larghezza del contenuto e manda tutta la pagina in
		   scroll orizzontale invece di scorrere solo qui dentro. */
		min-width: 0;
	}
	.aq-indice ul {
		display: flex;
		gap: 0.25rem;
		overflow-x: auto;
		border-left: 0;
		scrollbar-width: none;
		padding-block: 0.25rem;
	}
	.aq-indice ul::-webkit-scrollbar { display: none; }
	.aq-indice a {
		white-space: nowrap;
		padding: 0.6rem 0.75rem;
		border-left: 0;
		border-bottom: 2px solid transparent;
		margin-left: 0;
	}
	.aq-indice a:hover,
	.aq-indice a.is-attivo {
		border-left-color: transparent;
		border-bottom-color: var(--wp--preset--color--blu);
	}
}

/* --- Badge istituzionale (cofinanziamenti) --- */
.aq-badge {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--nebbia);
	border: 1px solid var(--wp--preset--color--bordo);
	border-left: 3px solid var(--wp--preset--color--ciano);
	border-radius: var(--wp--custom--raggio--m);
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--testo-soft);
}

.aq-badge strong { color: var(--wp--preset--color--testo); font-weight: 600; }

/* --- Card pubblicazione scientifica --- */
.aq-pubblicazione {
	position: sticky;
	top: calc(var(--wp--custom--altezza--header) + 24px);
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--l);
	padding: 1.5rem;
	box-shadow: var(--wp--preset--shadow--soft);
}

.aq-pubblicazione img {
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--s);
	margin-bottom: 1rem;
}

.aq-pubblicazione__doi {
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--testo-soft);
	word-break: break-all;
}

@media (max-width: 991px) {
	.aq-pubblicazione { position: static; }
}

/* --- Card del team --- */
.aq-persona {
	text-align: left;
}

/* Griglia del team: le card si dimensionano da sole, niente spazio vuoto avanzato */
.aq-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 210px));
	justify-content: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: var(--wp--preset--spacing--40);
}

.aq-persona img {
	display: block;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	border-radius: var(--wp--custom--raggio--l);
	margin-bottom: 1rem;
}

/* Riquadro vuoto per le persone di cui non c'è ancora una foto: stessa
   forma e proporzione della foto, ma senza immagine segnaposto. */
.aq-persona__placeholder {
	aspect-ratio: 4 / 5;
	width: 100%;
	border-radius: var(--wp--custom--raggio--l);
	margin-bottom: 1rem;
	background: var(--wp--preset--color--nebbia);
	border: 1px dashed var(--wp--preset--color--bordo);
}

.aq-persona__ruolo {
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blu);
}

/* --- Banda CTA finale --- */
.aq-cta {
	background: var(--wp--preset--gradient--profondita);
	border-radius: var(--wp--custom--raggio--xl);
	color: #fff;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

.aq-cta h2, .aq-cta p { color: #fff; }
.aq-cta p { color: rgba(255, 255, 255, 0.78); }

/* --- Elenco di servizi a righe (es. "Bandi e finanziamenti"): titolo e
   introduzione centrati sopra, poi le voci in due colonne. Il filo che
   separa una riga dalla successiva è su ".aq-servizi__riga" (che occupa
   tutta la larghezza della griglia), non sulle singole voci: così la
   linea è unica e allineata da un capo all'altro, invece di spezzarsi in
   due tratti indipendenti uno per colonna. --- */
.aq-servizi__intro {
	max-width: 90ch;
	margin-inline: auto;
	text-align: center;
}

.aq-servizi__intro p {
	color: var(--wp--preset--color--testo);
	margin-top: 0.6rem;
}

.aq-servizi__griglia {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Idem tra una riga e la successiva: senza, la seconda riga avrebbe uno
   spazio sopra diverso dal filo che già la separa dalla prima. */
.aq-servizi__griglia > .aq-servizi__riga {
	margin-block-start: 0;
}

.aq-servizi__griglia .aq-servizi__riga {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(2rem, 5vw, 3.5rem);
	width: 100%;
}

/* Stesso margine automatico di WordPress tra blocchi impilati, qui sulla
   seconda voce di ogni riga (quella nella seconda colonna): la spingeva
   più in basso della prima, anche se le due sono affiancate nella stessa
   riga della griglia. */
.aq-servizi__griglia > .aq-servizi__riga > .aq-servizi__voce {
	margin-block-start: 0;
}

.aq-servizi__voce {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.35rem 0;
}

.aq-servizi__icona {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--blu-100);
	color: var(--wp--preset--color--blu);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.aq-servizi__icona svg { width: 17px; height: 17px; display: block; }

/* Il gruppo che contiene titolo e testo di ogni voce eredita dal tema un
   margine sopra (quello che WordPress aggiunge tra blocchi impilati): qui
   crea uno stacco indesiderato tra l'icona e il titolo, che così non
   restano allineati in cima. Lo si toglie solo per questo componente. */
.aq-servizi__voce > .wp-block-group {
	margin-block-start: 0;
}

.aq-servizi__voce h4 {
	font-size: var(--wp--preset--font-size--l);
	margin-bottom: 0.4rem;
}

.aq-servizi__voce p {
	color: var(--wp--preset--color--testo);
}

/* Sotto i 700px: una colonna sola, le quattro voci una via l'altra.
   Lo spazio tra le due voci di una stessa riga (gestito dalla riga) e
   quello tra una riga e la successiva (gestito dalla griglia) altrimenti
   si sommerebbero nel secondo caso: qui restano uguali, spostando tutta
   la spaziatura sulla griglia. */
@media (max-width: 700px) {
	.aq-servizi__griglia { gap: 1.5rem; }
	.aq-servizi__griglia .aq-servizi__riga { grid-template-columns: 1fr; gap: 0; }
	/* Ogni riga ha solo due voci: alla seconda (l'ultima) va lo stesso
	   spazio che la griglia mette già tra una riga e la successiva. */
	.aq-servizi__griglia .aq-servizi__riga .aq-servizi__voce:last-child {
		margin-block-start: 1.5rem;
	}
}

/* =========================================================
   6. PIÈ DI PAGINA
   ========================================================= */

.aq-footer {
	background: var(--wp--preset--color--navy);
	color: rgba(255, 255, 255, 0.72);
}

.aq-footer h2, .aq-footer h3, .aq-footer h4, .aq-footer strong { color: #fff; }

.aq-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--wp--custom--transizione--veloce);
}

.aq-footer a:hover { color: var(--wp--preset--color--ciano); }

.aq-footer .wp-block-navigation {
	flex-direction: column;
	gap: 0.6rem;
	align-items: flex-start;
}

.aq-footer__titolo {
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 1rem;
}

.aq-footer__fondo {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--xs);
	color: rgba(255, 255, 255, 0.5);
}

.aq-footer__indirizzo {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.aq-footer__indirizzo svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--wp--preset--color--ciano);
}

.aq-footer__indirizzo:hover,
.aq-footer__indirizzo:focus-visible {
	text-decoration: underline;
}

.aq-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--ciano);
	transition: background var(--wp--custom--transizione--veloce), color var(--wp--custom--transizione--veloce), transform var(--wp--custom--transizione--veloce);
}

.aq-footer__social svg {
	width: 17px;
	height: 17px;
}

.aq-footer__social:hover,
.aq-footer__social:focus-visible {
	background: var(--wp--preset--color--ciano);
	color: var(--wp--preset--color--navy);
	transform: translateY(-2px);
}

.aq-contatti-mail {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.aq-contatti-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--blu);
	color: #fff;
	transition: background var(--wp--custom--transizione--veloce), transform var(--wp--custom--transizione--veloce);
}

.aq-contatti-social svg {
	width: 19px;
	height: 19px;
}

.aq-contatti-social:hover,
.aq-contatti-social:focus-visible {
	background: var(--wp--preset--color--navy);
	transform: translateY(-2px);
}

/* =========================================================
   7. MODULI
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--m);
	color: var(--wp--preset--color--testo);
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--m);
	transition: border-color var(--wp--custom--transizione--veloce), box-shadow var(--wp--custom--transizione--veloce);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--blu);
	box-shadow: 0 0 0 3px rgba(18, 100, 200, 0.14);
	outline: none;
}

label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	color: var(--wp--preset--color--testo);
}

/* =========================================================
   8. ANIMAZIONE DI INGRESSO
   ========================================================= */

/* Il contenuto è sempre visibile di default: l'opacità a 0 si applica
   solo se .aq-js conferma che aiaqua.js è partito e potrà rimuoverla. */
.aq-anima {
	transition: opacity 500ms cubic-bezier(.16,1,.3,1), transform 500ms cubic-bezier(.16,1,.3,1);
}

.aq-js .aq-anima {
	opacity: 0;
	transform: translateY(14px);
}

.aq-js .aq-anima.is-visibile {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.aq-anima,
	.aq-js .aq-anima { opacity: 1; transform: none; }
}

/* =========================================================
   9. GRIGLIE RESPONSIVE
   ========================================================= */

/* Il blocco Colonne di WordPress va a capo solo sotto 782px:
   su tablet le griglie a 3-4 colonne diventano illeggibili. Il limite
   superiore arriva fino a 1024px (non 1023px) apposta: è la larghezza
   esatta di un iPad Pro 12.9" verticale, un caso reale molto comune
   che altrimenti restava escluso per un solo pixel. */
@media (min-width: 782px) and (max-width: 1024px) {
	.aq-griglia-3,
	.aq-griglia-4 {
		/* Senza questo, il contenitore resta "nowrap" e le colonne si
		   restringono per stare tutte su una riga invece di andare a
		   capo: il flex-basis al 50% da solo non basta. */
		flex-wrap: wrap !important;
	}
	/* Con 3 card una sola per riga: 2 card affiancate più una a capo
	   larga la metà sembra uno spazio vuoto ingiustificato. */
	.aq-griglia-3 > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 0 !important;
	}
	/* Con 4 card, invece, 2 per riga funziona bene (nessuna resta sola). */
	.aq-griglia-4 > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40) / 2) !important;
		flex-grow: 0 !important;
	}
	/* Stessa distinzione, ma per le griglie costruite con il blocco
	   "Griglia" nativo (elenco articoli del blog) invece del vecchio
	   blocco Colonne: la struttura è diversa (nessun .wp-block-column),
	   quindi va intercettata a parte. */
	.aq-griglia-3.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
	.aq-griglia-4.is-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	/* La barra dei numeri resta a 4 colonne come su desktop: qui non va
	   a capo, quindi non ha bisogno di diventare a 2 colonne. */
	.aq-loghi { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 781px) {
	.aq-comuni { grid-template-columns: repeat(3, 1fr); }
	.aq-loghi { grid-template-columns: repeat(2, 1fr); }
	.aq-griglia-3.is-layout-grid,
	.aq-griglia-4.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* La barra dei numeri segue il confine mobile/tablet del progetto (768px),
   non quello dei 782px usato sopra per il blocco Colonne di WordPress:
   da tablet in su resta identica al desktop (4 colonne). */
@media (max-width: 767px) {
	/* Su mobile: un numero sotto l'altro, con un divisore orizzontale
	   sottile al posto della griglia 2x2 — le etichette lunghe ("Progetti
	   ricerca e sviluppo finanziati") non vanno più a capo su 4 righe
	   lasciando un vuoto sotto ai numeri con etichetta corta. */
	.aq-numeri { grid-template-columns: 1fr; }
	.aq-numero { padding-top: 1.35rem; padding-bottom: 1.35rem; }

	/* La variante scura non usa lo sfondo nel gap della griglia per i
	   divisori, ma un bordo manuale a sinistra: in colonna singola serve
	   un bordo sopra, non a sinistra. */
	.aq-numeri--scura .aq-numero {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
	.aq-numeri--scura .aq-numero:first-child {
		border-top: none;
	}
}

@media (max-width: 480px) {
	.aq-comuni { grid-template-columns: repeat(2, 1fr); }
}

/* Layout a due colonne testo + laterale delle pagine prodotto e progetto */
.aq-layout-laterale {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.aq-layout-laterale--destra {
	grid-template-columns: minmax(0, 1fr) 320px;
}

@media (max-width: 991px) {
	.aq-layout-laterale,
	.aq-layout-laterale--destra {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* La "goccia" decorativa in cima a Contatti è larga il 34% affiancata al
   titolo su desktop: sotto i 600px il blocco Media e testo la impila a
   piena larghezza, e un'immagine quasi quadrata a piena larghezza diventa
   enorme, spingendo giù tutto il resto. Stessa dimensione mobile della
   goccia analoga nella sezione "Chi siamo" della homepage (220px). */
@media (max-width: 600px) {
	.aq-contatti-hero .wp-block-media-text__media {
		max-width: 220px;
		margin: 0 auto;
	}
}

/* =========================================================
   10. CONTENUTI EDITORIALI (blog)
   ========================================================= */

.entry-content > * + * { margin-top: 1.4em; }
.entry-content > h2 { margin-top: 2.4em; }
.entry-content > h3 { margin-top: 1.8em; }

.entry-content figure img { border-radius: var(--wp--custom--raggio--l); }

/* I loghi partner (es. NOI Techpark) non vanno arrotondati: sono disegni a
   contorno sottile che arrivano fino al bordo dell'immagine, e l'angolo
   arrotondato li taglia visibilmente. */
.entry-content figure img.wp-image-766,
.entry-content figure img.wp-image-231 {
	border-radius: 0;
}

/* =========================================================
   11. HOMEPAGE — SEZIONI ASIMMETRICHE
   ========================================================= */

/* --- Introduzione: titolo a sinistra, testo a destra --- */
.aq-intro-asimmetrica {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(2rem, 5vw, 4rem);
	/* Centrato invece che allineato in alto: con un titolo grande su più
	   righe a sinistra, un paragrafo breve allineato in alto a destra
	   restava "staccato", con un vuoto sotto fino alla fine del titolo. */
	align-items: center;
}

/* La colonna di sinistra ha in più la piccola etichetta "eyebrow" sopra
   al titolo, che la colonna di destra non ha: quello spazio extra faceva
   sì che il centraggio sopra allineasse i BLOCCHI (giusto), ma non il
   testo vero e proprio (titolo leggermente più in basso del paragrafo).
   Prima tentativo: staccare l'etichetta dal flusso e appoggiarla sopra
   al titolo — ma su una sezione con poco spazio sopra (subito dopo
   un'immagine, come "Ricerca e sviluppo") l'etichetta finiva per
   sconfinare nell'immagine. Soluzione più sicura: si lascia l'etichetta
   al suo posto, e si aggiunge alla colonna di destra uno spazio vuoto in
   cima, della stessa altezza dell'etichetta — così le due colonne
   restano ciascuna dentro il proprio spazio, ma il centraggio finisce
   comunque per allineare titolo e paragrafo (la matematica: se lo spazio
   vuoto aggiunto è alto esattamente quanto l'etichetta, il centro dei
   due blocchi di testo coincide sempre, qualunque sia la lunghezza di
   titolo o paragrafo). */
.aq-intro-asimmetrica > :last-child {
	padding-top: calc(0.8125rem * 1.65 + 0.75rem);
}

.aq-intro-asimmetrica p + p {
	margin-top: 1.1rem;
}

@media (max-width: 781px) {
	.aq-intro-asimmetrica { grid-template-columns: 1fr; }
	/* Impilate su mobile: qui l'etichetta è già al suo posto sopra al
	   titolo, quindi lo spazio vuoto compensativo andrebbe solo a creare
	   un vuoto inutile prima del paragrafo — si toglie. */
	.aq-intro-asimmetrica > :last-child {
		padding-top: 0;
	}
}

/* --- AquaNET in evidenza: testo a sinistra, cornice schermo a destra --- */
.aq-spotlight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	align-items: center;
}

@media (max-width: 781px) {
	.aq-spotlight { grid-template-columns: 1fr; }
}

/* --- Elenco funzionalità con segno di spunta (AquaNET in evidenza) --- */
.aq-lista-spunte {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.8rem;
}

.aq-lista-spunte li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s);
}

.aq-lista-spunte svg {
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--verde);
	flex: none;
}

/* --- Ricerca e sviluppo: testo a sinistra, diagramma a destra --- */
.aq-ricerca-asimmetrica {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2.5rem, 6vw, 4rem);
	align-items: center;
}

.aq-ricerca-diagramma {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--raggio--l);
	padding: 1.4rem;
	background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 781px) {
	.aq-ricerca-asimmetrica { grid-template-columns: 1fr; }
}

/* --- Pulsante "Scopri" delle card, allineato in fondo ovunque nel sito.
   Il pulsante è ancorato in basso con posizione fissa: il resto del testo
   (icona, titolo, paragrafo) resta impaginato esattamente come prima.
   Si applica solo alle card che hanno davvero un pulsante dentro, per non
   lasciare spazio vuoto nelle card senza pulsante (es. "Perché scegliere AIAQUA"). --- */
.aq-card:has(.wp-block-buttons) {
	position: relative;
	padding-bottom: 4.5rem;
}

.aq-card .wp-block-buttons {
	position: absolute;
	left: clamp(1.5rem, 3vw, 2.25rem);
	right: clamp(1.5rem, 3vw, 2.25rem);
	bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Pulsante "torna in cima": fisso in basso a destra su tutte le pagine --- */
.aq-torna-su {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 850;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--raggio--tondo);
	background: var(--wp--preset--color--navy);
	color: #fff;
	box-shadow: var(--wp--preset--shadow--lift);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity var(--wp--custom--transizione--base),
		transform var(--wp--custom--transizione--base),
		background var(--wp--custom--transizione--base);
}

.aq-torna-su:hover,
.aq-torna-su:focus-visible {
	opacity: 1;
	background: var(--wp--preset--color--blu);
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.aq-torna-su { width: 40px; height: 40px; }
}

/* --- Elenco delle sezioni della pagina (es. AquaNET): solo testo, non
   sono più link cliccabili --- */
.aq-elenco-sezioni {
	list-style: disc;
	padding-left: 1.2rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--testo-soft);
}

.aq-elenco-sezioni li + li { margin-top: 0.5rem; }

/* --- "Dove siamo": due sedi a scorrimento con frecce ---
   Senza JavaScript restano visibili entrambe, una sotto l'altra:
   il carosello vero e proprio si attiva solo con .aq-js. */
.aq-sedi {
	position: relative;
}

/* Indirizzo cliccabile: apre la sede in Google Maps in una scheda nuova. */
.aq-sedi__indirizzo a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--testo);
	text-decoration: none;
}

.aq-sedi__indirizzo a:hover,
.aq-sedi__indirizzo a:focus-visible {
	color: var(--wp--preset--color--blu);
	text-decoration: underline;
}

.aq-sedi__indirizzo svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--wp--preset--color--blu);
}

/* Le foto delle due sedi hanno proporzioni diverse (una più larga
   dell'altra): senza un rapporto fisso, la riga cambiava altezza passando
   da una sede all'altra e lo sfondo grigio "saltava" insieme a lei.
   Stessa proporzione per entrambe, con "cover" a riempire senza deformarsi.
   Solo per il carosello "di base" (homepage): in ".aq-sedi--dettaglio"
   (Contatti) le foto restano quelle originali, perché lì fuori da mobile
   la sezione non cambia rispetto a com'era. */
.aq-sedi:not(.aq-sedi--dettaglio) .aq-sedi__slide .wp-block-media-text__media {
	aspect-ratio: 1024 / 523;
	overflow: hidden;
}

.aq-sedi:not(.aq-sedi--dettaglio) .aq-sedi__slide .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le due sedi restavano comunque di altezza leggermente diversa (foto ora
   uguali, ma il blocco di testo — indirizzo e logo — no): la riga si
   adattava al contenuto visibile, quindi lo sfondo "saltava" comunque di
   qualche pixel passando da una sede all'altra. Le sovrapponiamo invece
   nello stesso punto della pagina (stessa cella della griglia): l'altezza
   del contenitore diventa cosi sempre quella della più alta delle due,
   indipendentemente da quale sia mostrata in quel momento.
   Anche qui: solo il carosello di base (homepage). Su Contatti
   (".aq-sedi--dettaglio") lo stesso comportamento si attiva più sotto,
   ma solo sotto i 768px — qui sopra resta tutto in flusso normale, con
   entrambe le sedi visibili una sotto l'altra come prima. */
.aq-js .aq-sedi:not(.aq-sedi--dettaglio) {
	display: grid;
}

.aq-js .aq-sedi:not(.aq-sedi--dettaglio) .aq-sedi__slide {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	visibility: hidden;
	pointer-events: none;
}

.aq-js .aq-sedi:not(.aq-sedi--dettaglio) .aq-sedi__slide.is-attiva {
	visibility: visible;
	pointer-events: auto;
}

.aq-sedi__freccia {
	display: none;
	/* Anche qui il margine automatico di WordPress tra blocchi impilati:
	   su un elemento posizionato "absolute" si somma comunque alla sua
	   posizione (non è nel flusso, ma il margine resta), spostando le
	   frecce più in basso di quanto calcolato via JavaScript. */
	margin-block-start: 0;
}

.aq-js .aq-sedi:not(.aq-sedi--dettaglio) .aq-sedi__freccia {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--raggio--tondo);
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo);
	box-shadow: var(--wp--preset--shadow--soft);
	cursor: pointer;
	color: var(--wp--preset--color--navy);
	padding: 0;
	transition: background var(--wp--custom--transizione--veloce), border-color var(--wp--custom--transizione--veloce);
}

.aq-sedi__freccia svg { width: 20px; height: 20px; }

.aq-sedi__freccia:hover,
.aq-sedi__freccia:focus-visible {
	background: var(--wp--preset--color--blu-100);
	border-color: var(--wp--preset--color--blu);
}

.aq-sedi__freccia--prec { left: calc(50% - var(--wp--style--global--wide-size) / 2 - 22px); }
.aq-sedi__freccia--succ { right: calc(50% - var(--wp--style--global--wide-size) / 2 - 22px); }

@media (max-width: 1300px) {
	.aq-sedi:not(.aq-sedi--dettaglio) .aq-sedi__freccia--prec { left: 0.5rem; }
	.aq-sedi:not(.aq-sedi--dettaglio) .aq-sedi__freccia--succ { right: 0.5rem; }
}

/* --- "Dove siamo" nella pagina Contatti: su desktop e tablet resta come
   prima (entrambe le sedi visibili, una sotto l'altra, nessuna freccia).
   Sotto i 768px diventa un carosello — una sede alla volta con le frecce
   per cambiarla — identico a quello della homepage. --- */
@media (max-width: 767px) {
	.aq-js .aq-sedi--dettaglio {
		display: grid;
	}
	.aq-js .aq-sedi--dettaglio .aq-sedi__slide {
		grid-column: 1;
		grid-row: 1;
		display: grid;
		visibility: hidden;
		pointer-events: none;
	}
	.aq-js .aq-sedi--dettaglio .aq-sedi__slide.is-attiva {
		visibility: visible;
		pointer-events: auto;
	}
	.aq-js .aq-sedi--dettaglio .aq-sedi__freccia {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--wp--custom--raggio--tondo);
		background: #fff;
		border: 1px solid var(--wp--preset--color--bordo);
		box-shadow: var(--wp--preset--shadow--soft);
		cursor: pointer;
		color: var(--wp--preset--color--navy);
		padding: 0;
	}
	.aq-sedi--dettaglio .aq-sedi__freccia--prec { left: 0.25rem; }
	.aq-sedi--dettaglio .aq-sedi__freccia--succ { right: 0.25rem; }
}

/* --- Chi siamo: pannello grafico + testo con badge di fatti --- */
.aq-chi-siamo {
	display: grid;
	/* minmax(0, ...) e non solo "0.85fr 1.15fr": senza il minimo a 0, una
	   colonna con contenuto che non va mai a capo (qui i tag di aq-fatti,
	   vedi sotto) impone alla griglia una larghezza minima pari al
	   contenuto stesso, non alla quota assegnata. Il risultato, su schermi
	   da laptop piccolo/tablet largo (circa 800-1300px), era una colonna
	   dei tag che restava larga il necessario e schiacciava l'altra
	   colonna — la goccia — fino a farla quasi sparire. */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2.5rem, 6vw, 4rem);
	align-items: center;
}

.aq-chi-siamo__lead {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: -0.012em;
}

.aq-chi-siamo p + p {
	margin-top: 1.1rem;
	font-size: var(--wp--preset--font-size--m);
}

.aq-fatti {
	display: flex;
	/* Può andare a capo appena serve: i tag stessi restano su una riga
	   ciascuno (white-space:nowrap sotto), ma la riga intera non deve mai
	   costringere .aq-chi-siamo ad allargare questa colonna oltre la
	   quota assegnata (vedi il commento su grid-template-columns sopra). */
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 1.6rem;
}

.aq-fatto {
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--blu-100);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: 999px;
	padding: 0.4rem 0.7rem;
	white-space: nowrap;
	flex: none;
}

@media (max-width: 781px) {
	.aq-chi-siamo { grid-template-columns: 1fr; }
	.aq-fatto { white-space: normal; }

	/* La goccia decorativa è pensata per stare in una colonna stretta
	   accanto al testo: lì misura circa 445px dentro un contenitore largo
	   quasi il doppio. Sotto i 782px quella colonna diventa larga come
	   tutto lo schermo, e l'immagine (che segue sempre la larghezza del
	   contenitore) la riempie per intero, apparendo enorme. Qui le si dà
	   una dimensione fissa e più contenuta, centrata sopra al testo. */
	.aq-chi-siamo .wp-block-image {
		max-width: 220px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* =========================================================
   9. BLOG — elenco articoli (query dinamica)
   I blocchi nativi di WordPress per titolo/estratto/immagine
   dell'articolo non hanno uno stile del tema di default: senza
   queste regole restano con l'aspetto grezzo del browser (link
   blu sottolineato, immagine non ritagliata).
   ========================================================= */

/* L'eyebrow generata da un blocco dinamico (post-terms, la
   categoria) è un link: eredita altrimenti il blu sottolineato
   di default del browser invece del colore ereditato da
   .aq-eyebrow. */
.aq-eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* Pagina Blog e pagine categoria (Idroelettrico, AquaNET, ecc.): stesso
   trattamento — sfondo grigio su tutta l'area del contenuto (non solo
   dietro l'elenco) e via il motivo a puntini di .aq-rete, che con lo
   sfondo pieno risultava un doppio riquadro poco pulito. Le singole
   voci restano card bianche sopra, così risaltano. */
.page-id-284 main.aq-rete,
.archive main#contenuto {
	background: var(--wp--preset--color--nebbia);
}

.page-id-284 main.aq-rete::before,
.archive main#contenuto .aq-rete::before {
	display: none;
}

/* La barra del filtro (.aq-indice), sotto i 991px, di norma è bianca
   apposta per restare leggibile mentre resta fissa in alto scorrendo
   una pagina bianca — qui invece la pagina è grigia (nebbia), quindi
   il bianco stonava. Stesso grigio della pagina, resta comunque letta
   bene grazie alla sfocatura sotto. */
@media (max-width: 991px) {
	.page-id-284 .aq-indice {
		background: rgba(244, 248, 252, 0.95);
	}
}

/* Etichetta "Blog" sopra al titolo della pagina, come nelle pagine
   categoria — qui aggiunta via contenuto generato perché il titolo
   arriva dal modello di pagina condiviso (page.html), non dal
   contenuto di questa pagina. */
.page-id-284 h1.wp-block-post-title {
	display: flex;
	flex-direction: column;
}

.page-id-284 h1.wp-block-post-title::before {
	content: "Blog";
	order: -1;
	font-family: var(--wp--preset--font-family--dati);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blu);
	margin-bottom: 0.75rem;
	/* Lineetta prima del testo, disegnata come sfondo: stessa
	   dimensione e stile del trattino di .aq-eyebrow::before,
	   qui non riusabile perché lo pseudo-elemento è già occupato
	   dal testo "Blog". */
	padding-left: 1.9rem;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 22px 1px;
	background-repeat: no-repeat;
	background-position: left center;
}

/* Attenzione: queste regole per l'elenco articoli sono scritte per la
   card orizzontale (immagine+testo affiancati) della sola pagina Blog
   (page-id-284) — le pagine categoria (archive.html) usano una card
   diversa, .aq-card, con il suo bordo. Senza lo scoping a .page-id-284
   qui sotto, il bordo di questa card si sommava a quello di .aq-card,
   risultando in un doppio bordo sulle pagine categoria. */
.page-id-284 .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-id-284 .wp-block-post-template > li {
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--raggio--m);
	padding: 1.25rem;
	margin-bottom: 1rem;
	transition: border-color var(--wp--custom--transizione--base),
		box-shadow var(--wp--custom--transizione--base),
		transform var(--wp--custom--transizione--base);
}

/* Stesso effetto al passaggio del mouse delle card .aq-card usate
   nelle pagine categoria, per coerenza. */
.page-id-284 .wp-block-post-template > li:hover {
	border-color: rgba(18, 100, 200, 0.4);
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-3px);
}

.page-id-284 .wp-block-post-template > li:last-child {
	margin-bottom: 0;
}

.page-id-284 .wp-block-post-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.4rem;
}

.page-id-284 .wp-block-post-template .wp-block-post-title a {
	color: var(--wp--preset--color--testo);
	text-decoration: none;
	transition: color var(--wp--custom--transizione--veloce);
}

.page-id-284 .wp-block-post-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--blu);
}

.page-id-284 .wp-block-post-template .wp-block-post-excerpt {
	margin: 0 0 0.5rem;
}

/* Miniatura dell'articolo (solo pagina Blog): dimensione fissa
   impostata dal blocco, qui solo il ritaglio (altrimenti l'immagine
   si deforma). */
.aq-blog-miniatura {
	border-radius: var(--wp--custom--raggio--m);
	overflow: hidden;
	flex: none;
}

.aq-blog-miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.page-id-284 .wp-block-post-template > li .wp-block-group {
		flex-wrap: wrap;
	}
}