/*
Theme Name: Diadema
Theme URI: https://www.diademaservice.it
Author: Diadema Srl
Author URI: https://www.diademaservice.it
Description: Tema a blocchi realizzato su misura per Diadema Srl, Cleaning professionale per aziende, Borgoricco (PD). Palette e tipografia sono allineate al logo aziendale. Tutti i colori, i caratteri e le spaziature si governano dall'Editor del sito (Aspetto > Editor), senza toccare il codice.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diadema
Tags: business, block-templates, full-site-editing, custom-colors, custom-logo, custom-menu, accessibility-ready, translation-ready
*/

/* ==========================================================================
   Nota per chi mette mano al sito
   --------------------------------------------------------------------------
   Colori, caratteri, dimensioni del testo e spaziature sono definiti in
   theme.json e si modificano dall'Editor del sito. Qui sotto ci sono solo le
   classi "di servizio" usate dai blocchi (schede, icone, sezioni scure...)
   che l'editor a blocchi da solo non sa produrre.
   ========================================================================== */

:root {
	--dm-radius-sm: 8px;
	--dm-radius: 14px;
	--dm-radius-lg: 22px;
	--dm-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

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

/* Messa a fuoco sempre visibile: requisito di accessibilita'. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Salta al contenuto */
.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	z-index: 100000;
}

/* Testata, contenuto e pie' di pagina si toccano, senza strisce bianche. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Due fasce a tutta larghezza consecutive restano attaccate, mentre il testo
   normale mantiene la sua spaziatura. */
.wp-block-post-content > .alignfull + .alignfull,
main > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ==========================================================================
   Testata
   ========================================================================== */

.dm-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	/* fascia bianca: 101px su desktop, 89 su tablet, 77 su telefono */
	padding-top: 14px;
	padding-bottom: 14px;
}

.dm-header .wp-block-site-logo img {
	display: block;
	height: auto;
	max-height: 72px;
	width: auto;
}

/* Sotto i 1080px il menu si apre come pannello a schermo intero: il filtro di
   sfocatura della testata renderebbe la testata stessa il "contenitore" del
   pannello (position: fixed resta confinato dentro un elemento con
   backdrop-filter), schiacciandolo nella barra. Qui la testata e' bianca piena. */
@media (max-width: 1079px) {
	.dm-header {
		background-color: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* logo e hamburger sulla stessa riga, senza andare a capo */
	.dm-header > .alignwide { flex-wrap: nowrap; }
	.dm-header .wp-block-site-logo { flex: 0 1 auto; min-width: 0; }

	.dm-header { padding-top: 12px; padding-bottom: 12px; }
	.dm-header .wp-block-site-logo img { max-height: 64px; }
}

@media (max-width: 781px) {
	.dm-header { padding-top: 10px; padding-bottom: 10px; }
	.dm-header .wp-block-site-logo img { max-height: 56px; }
}

/* Voce di menu "Richiedi un sopralluogo": unica CTA in testata. Su desktop e'
   il pulsante accanto al menu; nel pannello mobile e' il pulsante in fondo. */
.dm-nav-cta a {
	background-color: var(--wp--preset--color--primary);
	color: #fff !important;
	padding: 0.7rem 1.25rem;
	border-radius: 10px;
	transition: background-color var(--dm-transition);
}

.dm-nav-cta a:hover { background-color: var(--wp--preset--color--navy); }

@media (min-width: 1080px) {
	.wp-block-navigation .dm-nav-cta { margin-left: 0.5rem; }
	.wp-block-navigation .dm-nav-cta a {
		padding: 0.85rem 1.4rem;
		font-size: 1rem;
		font-weight: 700;
	}
	.wp-block-navigation .dm-nav-cta a:hover { color: #fff !important; }
}

/* Il menu a tendina del blocco Navigazione (solo desktop, da 1080px) */
@media (min-width: 1080px) {
	.wp-block-navigation .wp-block-navigation-submenu__toggle { padding-right: 0.4rem; }

	.wp-block-navigation .wp-block-navigation__submenu-container {
		border: 1px solid var(--wp--preset--color--border) !important;
		border-radius: var(--dm-radius);
		box-shadow: var(--wp--preset--shadow--card);
		padding: 0.5rem;
		min-width: 280px;
		background-color: #fff;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		border-radius: var(--dm-radius-sm);
		padding: 0.7rem 0.9rem !important;
		font-size: 1.0625rem;
		transition: background-color var(--dm-transition);
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--surface);
	}

	/* Voce del menu a tendina evidenziata (mouse, tastiera, pagina corrente):
	   fondo chiaro e testo blu scuro. A riposo resta testo bianco su blu. */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"],
	.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--navy) !important;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus, :focus-visible, :active, [aria-current="page"]) svg,
	.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content svg {
		color: inherit;
		fill: currentColor;
	}
}

/* ==========================================================================
   Menu mobile e tablet a pannello (sotto i 1080px)
   --------------------------------------------------------------------------
   Il blocco Navigazione mostra da solo l'hamburger solo sotto i 600px: qui
   la soglia e' alzata a 1080px, cosi' il menu desktop non va mai su due righe
   (tablet 820px compreso). Il pannello e' a tutto schermo, chiaro, con voci
   grandi, accordion per Settori/Servizi/Zone e lavori e CTA blu in fondo.
   Aperture, chiusura, ESC e blocco dello scroll sono del blocco; l'accordion
   e' in assets/js/menu-mobile.js.
   ========================================================================== */

@media (max-width: 1079px) {
	/* hamburger visibile e menu in linea nascosto, anche fra 600 e 1079px */
	.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--navy) !important;
		cursor: pointer;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Il pannello */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		padding: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background-color: #fff !important;
		color: var(--wp--preset--color--contrast) !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		width: 100%;
		min-height: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		/* 6rem: la X (52px, a 1rem dal bordo del pannello che ha 1rem di padding)
		   finisce a 84px; l'elenco inizia a 112px e il testo di "Chi siamo" a
		   130px, cioe' ~46px di aria visiva sotto la X. */
		padding: 6rem 1.25rem 2rem;
		box-sizing: border-box;
	}

	/* Chiusura: pulsante grande in alto a destra */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 1rem;
		right: 1.25rem;
		width: 52px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--navy) !important;
		cursor: pointer;
	}

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

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		padding-top: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
		gap: 0 !important;
	}

	/* Voce principale: riga alta almeno 56px, testo 22px, divisore */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between;
		width: 100%;
		margin: 0 !important;
		text-align: left;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		flex: 1 1 0;
		box-sizing: border-box;
		min-height: 64px;
		display: flex;
		align-items: center;
		padding: 0.5rem 0 !important;
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 1.2;
		text-align: left;
		color: var(--wp--preset--color--navy) !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--primary) !important;
	}

	/* Freccia accordion: pulsante separato 52x52 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
		margin: 0 0 0 0.75rem;
		padding: 0 !important;
		border: 0;
		border-radius: 12px;
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--navy) !important;
		cursor: pointer;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		width: 20px;
		height: 20px;
		transition: transform var(--dm-transition);
	}

	.wp-block-navigation__responsive-container.is-menu-open .dm-sub-open > .wp-block-navigation-submenu__toggle {
		background-color: var(--wp--preset--color--accent-soft);
	}

	.wp-block-navigation__responsive-container.is-menu-open .dm-sub-open > .wp-block-navigation-submenu__toggle svg {
		transform: rotate(180deg);
	}

	/* Sottovoci: chiuse finche' la freccia non viene toccata, poi in elenco
	   sotto la voce, rientrate, 19px, riga alta almeno 52px */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: none !important;
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		margin: 0 0 0.75rem;
		padding: 0.25rem 0 0.25rem 1rem !important;
		border: 0 !important;
		border-left: 3px solid var(--wp--preset--color--accent-soft) !important;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
	}

	.wp-block-navigation__responsive-container.is-menu-open .dm-sub-open > .wp-block-navigation__submenu-container {
		display: block !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		display: block;
		border-bottom: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 54px;
		padding: 0.5rem 0 !important;
		font-size: 1.1875rem;
		font-weight: 500;
		color: var(--wp--preset--color--contrast) !important;
		border-radius: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: transparent;
		color: var(--wp--preset--color--primary) !important;
	}

	/* CTA in fondo al pannello: pulsante blu Diadema a larghezza piena */
	.wp-block-navigation__responsive-container.is-menu-open .dm-nav-cta {
		border-bottom: 0;
		margin-top: 1.5rem !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .dm-nav-cta a {
		display: flex;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 60px;
		padding: 0.9rem 1.25rem !important;
		border-radius: 12px;
		background-color: var(--wp--preset--color--primary);
		color: #fff !important;
		font-size: 1.1875rem;
		font-weight: 700;
	}

	.wp-block-navigation__responsive-container.is-menu-open .dm-nav-cta a:hover {
		background-color: var(--wp--preset--color--navy);
	}

	/* Messa a fuoco visibile dentro il pannello */
	.wp-block-navigation__responsive-container.is-menu-open :focus-visible {
		outline: 3px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}
}

/* Header compatto su desktop durante lo scorrimento verso l'alto (classi
   aggiunte da assets/js/menu-mobile.js alla testata vera). Circa 60px:
   logo 46px, CTA piu' bassa, stessi colori e stessi dropdown. */
@media (min-width: 1080px) {
	.dm-header.dm-header--compatto {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding-top: 7px;
		padding-bottom: 7px;
		background-color: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: 0 2px 14px rgba(5, 72, 117, 0.08);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0s linear 0.22s;
	}

	.dm-header.dm-header--compatto.dm-header--visibile {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.22s ease, visibility 0s;
	}

	.dm-header.dm-header--compatto .wp-block-site-logo img {
		max-height: 46px;
	}

	.dm-header.dm-header--compatto .wp-block-navigation .dm-nav-cta a {
		padding: 0.6rem 1.25rem;
	}
}

@media (min-width: 1080px) and (prefers-reduced-motion: reduce) {
	.dm-header.dm-header--compatto,
	.dm-header.dm-header--compatto.dm-header--visibile { transition: none; }
}

/* Barra compatta su smartphone durante lo scorrimento (creata da
   assets/js/menu-mobile.js): 54px, fondo bianco, logo ridotto e hamburger.
   Compare scorrendo verso l'alto quando la testata e' fuori schermo. */
.dm-minibar { display: none; }

@media (max-width: 781px) {
	.dm-minibar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 450; /* sotto la testata (500), che contiene il pannello del menu */
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		height: 54px;
		padding: 0 20px; /* stessi margini laterali della testata */
		background-color: #fff;
		border-bottom: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 4px 16px rgba(5, 72, 117, 0.08);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0s linear 0.22s;
	}

	.dm-minibar.is-visible {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.22s ease, visibility 0s;
	}

	.dm-minibar__logo { display: block; line-height: 0; }

	.dm-minibar__logo img {
		display: block;
		width: auto;
		height: 40px;
	}

	.dm-minibar__menu {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--navy);
		cursor: pointer;
	}

	.dm-minibar a:focus-visible,
	.dm-minibar__menu:focus-visible {
		outline: 3px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}
}

@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	.dm-minibar,
	.dm-minibar.is-visible { transition: none; }
}

/* A pannello aperto la barra fissa in basso sparisce e la pagina sotto non scorre */
html.has-modal-open .dm-mobile-bar,
body:has(.wp-block-navigation__responsive-container.is-menu-open) .dm-mobile-bar {
	display: none !important;
}

html.has-modal-open,
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden !important;
}

/* ==========================================================================
   Sezioni
   ========================================================================== */

/* I titoli che sono anche link restano titoli: stesso colore, niente sottolineatura. */
:where(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
	transition: color var(--dm-transition);
}

:where(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.dm-on-dark :where(h1, h2, h3, h4, h5, h6) a:hover { color: var(--wp--preset--color--accent); }

/* Intestazione di sezione: allineata a sinistra come le schede sotto,
   ma con la riga di testo di lunghezza leggibile. */
.dm-section-head { max-width: 800px; }

/* Elenco delle domande frequenti */
.dm-faq-list { max-width: 880px; }

/* Sopratitolo di sezione: e' un concetto (Metodo, Problem solving, Fiducia...),
   quindi deve leggersi da lontano, non essere un'etichettina decorativa. */
.dm-eyebrow {
	display: inline-block;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.5rem;
}

.dm-on-dark .dm-eyebrow { color: var(--wp--preset--color--accent); }

/* Sulle foto velate l'azzurro pieno si perde: etichetta piu' chiara */
.dm-cover .dm-eyebrow { color: #9fd6ff; }

/* Sezione scura: forza titoli e testi in chiaro */
.dm-on-dark,
.dm-on-dark p,
.dm-on-dark li {
	color: #eaf3fa;
}

.dm-on-dark h1,
.dm-on-dark h2,
.dm-on-dark h3,
.dm-on-dark h4,
.dm-on-dark h5,
.dm-on-dark h6 {
	color: #ffffff;
}

.dm-on-dark a:not(.wp-block-button__link) { color: #ffffff; }

/* Sfondo blu con alone luminoso */
.dm-glow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.dm-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 75% at 82% 8%, rgba(11, 152, 245, 0.40) 0%, rgba(11, 152, 245, 0) 62%),
		radial-gradient(50% 60% at 5% 95%, rgba(11, 152, 245, 0.22) 0%, rgba(11, 152, 245, 0) 65%);
	pointer-events: none;
}

/* Trama a puntini discreta */
.dm-dots::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	opacity: 0.5;
	pointer-events: none;
}

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

.dm-card {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--dm-radius);
	transition: transform var(--dm-transition), box-shadow var(--dm-transition), border-color var(--dm-transition);
}

/* Solo nelle griglie le schede si allineano in altezza. Dentro una colonna
   (es. riquadro laterale di un modulo) l'altezza segue il contenuto: con
   height:100% la scheda si allungava quanto l'intera colonna. */
.is-layout-grid > .dm-card {
	height: 100%;
}

.dm-card:hover {
	transform: translateY(-4px);
	border-color: #bcd9f2;
	box-shadow: var(--wp--preset--shadow--card);
}

/* Scheda cliccabile per intero: il link del titolo copre tutta la scheda */
.dm-card--link { position: relative; }

.dm-card--link a.dm-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Scheda "settore": barra colorata in alto */
.dm-sector {
	position: relative;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--dm-radius);
	transition: transform var(--dm-transition), box-shadow var(--dm-transition), border-color var(--dm-transition);
	height: 100%;
}

.dm-sector::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, #0b98f5 0%, #0770b5 100%);
	transform: scaleX(0.28);
	transform-origin: left;
	transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-sector:hover {
	transform: translateY(-5px);
	border-color: #bcd9f2;
	box-shadow: var(--wp--preset--shadow--lifted);
}

.dm-sector:hover::before { transform: scaleX(1); }

.dm-sector .dm-sector__num {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #9db8cd;
}

/* Scheda su fondo scuro */
.dm-card-dark {
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--dm-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	height: 100%;
}

/* ==========================================================================
   Icone
   ========================================================================== */

.dm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(140deg, #e7f3fd 0%, #d3e9fb 100%);
	color: var(--wp--preset--color--primary);
	flex: 0 0 auto;
}

.dm-icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

.dm-on-dark .dm-icon {
	background: rgba(11, 152, 245, 0.18);
	color: #9fd6ff;
}

/* ==========================================================================
   Elenchi con spunta
   ========================================================================== */

.dm-checks {
	list-style: none;
	padding-left: 0 !important;
	margin: 0;
}

.dm-checks li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.7rem;
	line-height: 1.55;
}

.dm-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230770b5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 0.8rem;
	background-position: center;
	background-repeat: no-repeat;
}

.dm-on-dark .dm-checks li::before {
	background-color: rgba(11, 152, 245, 0.25);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Elenco "cosa lasciate alle spalle": stesso impianto, ma con una crocetta grigia */
.dm-crosses {
	list-style: none;
	padding-left: 0 !important;
	margin: 0;
}

.dm-crosses li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.7rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.dm-crosses li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: #eef2f6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9db0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	background-size: 0.7rem;
	background-position: center;
	background-repeat: no-repeat;
}

/* Elenco a due colonne quando c'e' spazio */
.dm-checks--2col { columns: 2; column-gap: 2.5rem; }
.dm-checks--2col li { break-inside: avoid; }

@media (max-width: 781px) {
	.dm-checks--2col { columns: 1; }
}

/* ==========================================================================
   Numeri e passaggi
   ========================================================================== */

.dm-stat__num {
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.35rem;
}

.dm-on-dark .dm-stat__num { color: #ffffff; }

.dm-stat__label {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
	line-height: 1.45;
}

.dm-on-dark .dm-stat__label { color: #b9d6ea; }

/* Passaggi del metodo: il numero e' il protagonista, titolo e testo leggibili
   anche da chi scorre velocemente. */
.dm-step {
	position: relative;
	padding-top: 1.25rem;
	border-top: 3px solid var(--wp--preset--color--accent-soft);
	height: 100%;
}

.dm-step__num {
	display: block;
	font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.9rem;
}

.dm-step h3 {
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	margin: 0 0 0.6rem;
}

.dm-step p {
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: 1.55;
	margin: 0;
}

/* ==========================================================================
   Domande frequenti
   ========================================================================== */

.dm-faq {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--dm-radius);
	background-color: #fff;
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.dm-faq > summary {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 3.25rem 1.15rem 1.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	position: relative;
	transition: background-color var(--dm-transition);
}

.dm-faq > summary::-webkit-details-marker { display: none; }

.dm-faq > summary:hover { background-color: var(--wp--preset--color--surface); }

.dm-faq > summary::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	margin-top: -0.45rem;
	border-right: 2.5px solid var(--wp--preset--color--primary);
	border-bottom: 2.5px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform var(--dm-transition);
}

.dm-faq[open] > summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }

.dm-faq__body {
	padding: 0 1.35rem 1.3rem;
	color: var(--wp--preset--color--muted);
}

.dm-faq__body p:first-child { margin-top: 0; }
.dm-faq__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Recensioni
   ========================================================================== */

.dm-stars {
	color: #f5a623;
	letter-spacing: 0.15em;
	font-size: 1.05rem;
	line-height: 1;
}

.dm-review__author {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 0;
}

.dm-review__meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* ==========================================================================
   Fasce fotografiche (blocco Copertina di WordPress)
   --------------------------------------------------------------------------
   La foto si sostituisce dall'editor cliccando sulla copertina; la velatura
   scura viene dai colori del tema. Nessuna sezione dipende da una foto precisa.
   ========================================================================== */

.dm-cover {
	isolation: isolate;
}

.dm-cover .wp-block-cover__image-background {
	object-position: center;
}

/* La velatura: dal colore del tema, con una leggera sfumatura in basso
   per tenere leggibile il testo anche su foto chiare. */
.dm-cover .wp-block-cover__background {
	background-image: linear-gradient(180deg, rgba(4, 44, 72, 0) 0%, rgba(4, 44, 72, 0.35) 100%);
}

/* Hero: spazio generoso, testo a sinistra, larghezza di lettura contenuta.
   Altezza in pixel con un tetto: su telefono il titolo non deve occupare
   tutta la schermata, su desktop la foto resta importante. */
.dm-hero {
	min-height: clamp(480px, 62vh, 720px);
}

.dm-hero .wp-block-cover__inner-container {
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* Il blocco Copertina di WordPress imposta 430px di altezza minima:
   le fasce interne si dimensionano sul contenuto. */
.dm-cover:not(.dm-hero) {
	min-height: 0;
}

.dm-hero h1 {
	max-width: 15ch;
}

.dm-hero .dm-hero__lead {
	max-width: 44ch;
}

/* Pre-titolo della Hero ("Cleaning professionale per aziende"): dice subito
   cosa fa Diadema, quindi pieno e compatto, non un'etichetta sospesa.
   Sempre su una riga: 23px da tablet in su; sul telefono la dimensione segue
   la larghezza dello schermo (circa 15px a 390px) per non andare mai a capo.
   Ciano brillante della palette, ombra appena percettibile sulla velatura. */
.dm-hero .dm-eyebrow {
	color: #6fd3ff;
	text-shadow: 0 1px 3px rgba(3, 20, 36, 0.55);
	font-size: 1.4375rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.08em;
	white-space: nowrap;
	margin-bottom: 0.35rem;
}

@media (max-width: 781px) {
	.dm-hero .dm-eyebrow {
		/* spaziatura azzerata: larghezza del testo = circa 20,35 volte la
		   dimensione del carattere. 17px fino a circa 383px di schermo, poi
		   quanto entra davvero su una riga (circa 15,9px a 360px). */
		font-size: min(17px, calc((100vw - 36px) / 20.4));
		letter-spacing: 0;
	}
}

@media (max-width: 781px) {
	.dm-hero h1 { max-width: none; }
}

/* ==========================================================================
   Elementi in riga senza box (sezione "non dovrebbe essere un problema")
   ========================================================================== */

.dm-plain {
	padding-top: 1.1rem;
	border-top: 2px solid var(--wp--preset--color--accent-soft);
	height: 100%;
}

.dm-plain h3 {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}

.dm-plain p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   Frase grande (affermazione da valorizzare)
   ========================================================================== */

.dm-statement {
	font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--navy);
	max-width: 30ch;
}

.dm-on-dark .dm-statement { color: #ffffff; }

/* ==========================================================================
   Micro-concetti su fondo scuro (Priorita' / Frequenze / Budget)
   ========================================================================== */

.dm-concept {
	padding-top: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	height: 100%;
}

.dm-concept h3 {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.5rem;
}

.dm-concept p {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

/* ==========================================================================
   Esempi di problem solving: domanda in evidenza, risposta sotto
   ========================================================================== */

.dm-example {
	padding-left: 1.25rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	height: 100%;
}

.dm-example .dm-example__q {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 0.6rem;
	line-height: 1.3;
}

.dm-example .dm-example__a {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: #dbeaf6;
}

.dm-example .dm-example__a::before {
	content: "→ ";
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Schede servizi ampie e sobrie (senza icone)
   ========================================================================== */

.dm-service {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--dm-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: 100%;
	transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}

.dm-service:hover {
	border-color: #bcd9f2;
	box-shadow: var(--wp--preset--shadow--soft);
}

.dm-service h3 { margin: 0 0 0.6rem; }

.dm-service p { margin: 0; color: var(--wp--preset--color--muted); }

.dm-service .dm-service__link {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.dm-service .dm-service__link:hover { text-decoration: underline; }

/* Macro-aree settori: numero grande, niente icona, niente box */
.dm-area {
	padding-top: 1.1rem;
	border-top: 2px solid var(--wp--preset--color--border);
	height: 100%;
}

.dm-area .dm-area__num {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.75rem;
}

.dm-area h3 { margin: 0 0 0.5rem; }

.dm-area p { margin: 0; color: var(--wp--preset--color--muted); }

/* ==========================================================================
   Pulsanti secondari
   ========================================================================== */

/* Contorno: su chiaro bordo e testo blu Diadema (contrasto pieno) */
.wp-block-button.is-style-dm-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
	transition: border-color var(--dm-transition), background-color var(--dm-transition), color var(--dm-transition);
}

.wp-block-button.is-style-dm-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	color: #fff;
}

.dm-on-dark .wp-block-button.is-style-dm-ghost .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}

.dm-on-dark .wp-block-button.is-style-dm-ghost .wp-block-button__link:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--navy);
}

/* "Azzurro brillante" e' lo stile usato sulle fasce scure: diventa un
   pulsante bianco con testo blu Diadema (contrasto 12:1). Il vecchio
   azzurro con testo scuro arrivava a 3:1 e si leggeva male. */
.wp-block-button.is-style-dm-accent .wp-block-button__link {
	background-color: #fff;
	color: var(--wp--preset--color--navy);
	box-shadow: 0 6px 20px rgba(4, 44, 72, 0.25);
}

.wp-block-button.is-style-dm-accent .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--navy);
}

/* ==========================================================================
   Pie' di pagina
   ========================================================================== */

.dm-footer a { text-decoration: none; }
.dm-footer a:hover { text-decoration: underline; }

.dm-footer .wp-block-image img { max-height: 74px; width: auto; }

/* Logo del footer: elemento identitario, largo 300px (mai oltre la colonna),
   altezza proporzionale, allineato a sinistra come il testo sotto. */
.dm-footer .dm-footer-logo img {
	width: min(300px, 100%) !important;
	height: auto;
	max-height: none;
	display: block;
}

.dm-footer .dm-footer-logo { margin-bottom: 0.5rem; }

/* Link WhatsApp e Facebook del footer con icona (SVG in linea, nessuna risorsa esterna) */
.dm-footer a.dm-social {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	vertical-align: middle;
}

.dm-footer a.dm-social .dm-social__icona {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.dm-footer a.dm-social:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Riga "Visita il sito -> Omnipanel" in fondo al riquadro della pagina
   Fotovoltaico: piccola, secondaria, un unico link. */
.dm-omni-link-riga {
	margin: 0.5rem 0 0;
	text-align: right;
}

.dm-panel p.dm-omni-link-riga { font-size: var(--wp--preset--font-size--small); }

.dm-omni-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.25rem;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
}

.dm-omni-link__simbolo { width: 24px; height: 24px; margin-left: 0.15rem; }
.dm-omni-link__scritta { width: auto; height: 20px; }

.dm-omni-link:hover .dm-omni-link__testo { text-decoration: underline; }

.dm-omni-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Pulsante WhatsApp flottante: in basso a destra su tutte le pagine.
   Verde WhatsApp scuro gia' approvato (#0b7f37) con icona bianca. */
.dm-wa-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 450;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #0b7f37;
	color: #fff;
	box-shadow: 0 4px 14px rgba(3, 20, 36, 0.22);
	transition: transform var(--dm-transition), background-color var(--dm-transition);
}

.dm-wa-float:hover {
	background-color: #09692e;
	color: #fff;
	transform: translateY(-2px);
}

.dm-wa-float:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Sotto i 1080px c'e' la barra fissa in basso (Chiama | Sopralluogo, 62px):
   il pulsante sale sopra la barra, un po' piu' piccolo. */
@media (max-width: 1079px) {
	.dm-wa-float {
		right: 16px;
		bottom: calc(62px + 14px + env(safe-area-inset-bottom, 0px));
		width: 48px;
		height: 48px;
	}

	.dm-wa-float svg { width: 26px; height: 26px; }
}

/* a menu mobile aperto il pulsante non deve comparire sopra il pannello */
html.has-modal-open .dm-wa-float,
body:has(.wp-block-navigation__responsive-container.is-menu-open) .dm-wa-float {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.dm-wa-float { transition: none; }
}

.dm-footer-legal {
	font-size: 0.9375rem;
	color: #9dbdd4;
}

/* ==========================================================================
   Barra di contatto fissa su mobile
   ========================================================================== */

.dm-mobile-bar {
	display: none;
}

/* Stessa soglia del menu a pannello: finche' la CTA della testata sta nel
   pannello, la barra in basso tiene "Chiama" e "Richiedi un sopralluogo". */
@media (max-width: 1079px) {
	.dm-mobile-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 600;
		background-color: #fff;
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -4px 20px rgba(5, 72, 117, 0.10);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.dm-mobile-bar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 1rem 0.5rem;
		font-size: 1rem;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		color: var(--wp--preset--color--navy);
	}

	.dm-mobile-bar a + a {
		background-color: var(--wp--preset--color--primary);
		color: #fff;
	}

	.dm-mobile-bar svg { width: 20px; height: 20px; }

	/* spazio per non coprire il contenuto finale */
	body { padding-bottom: 62px; }
}

/* ==========================================================================
   Ritocchi vari
   ========================================================================== */

/* Le colonne del blocco Colonne vanno in pila sotto i 782px: recupera lo spazio */
@media (max-width: 781px) {
	.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column { flex-basis: 0 !important; }
}

/* Immagini con angoli morbidi nei contenuti */
.dm-round img { border-radius: var(--dm-radius); }

/* Mappa Google responsiva */
.dm-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--dm-radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
}

.dm-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Tabelle leggibili su mobile */
.wp-block-table { overflow-x: auto; }

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.7rem 0.9rem;
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	text-align: left;
}

/* Modulo di contatto: allinea l'aspetto dei campi al tema, qualunque
   plugin venga usato (Fluent Forms, Contact Form 7, WPForms...). */
.dm-form input[type="text"],
.dm-form input[type="email"],
.dm-form input[type="tel"],
.dm-form input[type="url"],
.dm-form input[type="number"],
.dm-form select,
.dm-form textarea {
	width: 100%;
	padding: 0.9rem 1rem;
	font-family: inherit;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}

.dm-form input:focus,
.dm-form select:focus,
.dm-form textarea:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(11, 152, 245, 0.18);
	outline: none;
}

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

.dm-form button[type="submit"],
.dm-form input[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 1.05rem 1.9rem;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--dm-transition);
}

.dm-form button[type="submit"]:hover,
.dm-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--navy);
}

/* Contact Form 7 (modulo candidature): stessa resa degli altri moduli */
.dm-form .wpcf7-form p { margin: 0 0 1.1rem; }
.dm-form .wpcf7-form label { margin-bottom: 0.35rem; }
.dm-form .wpcf7-form input[type="file"] {
	display: block;
	width: 100%;
	padding: 0.6rem 0;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}
.dm-form .wpcf7-form input[type="checkbox"] { margin-right: 0.4rem; }
.dm-form .wpcf7-form .wpcf7-list-item { margin-left: 0; }
.dm-form .wpcf7-form .dm-form__aiuto {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	margin-top: 0.3rem;
}
.dm-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: #b3261e;
}
.dm-form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 10px;
	background-color: var(--wp--preset--color--surface);
}
.dm-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: #9fd6ff !important;
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}
.dm-form .wpcf7-spinner { margin-left: 0.75rem; }

/* Ancore interne (#interventi-straordinari, #pulizie-di-fondo, ...):
   lasciano spazio all'header fisso invece di finirci sotto. */
[id] { scroll-margin-top: 6.5rem; }

/* ==========================================================================
   Revisione UX del 25/09/2026: composizione desktop e componenti leggibili
   --------------------------------------------------------------------------
   Principio: mobile = scorrimento verticale, desktop = composizione
   orizzontale. Il contenitore e' ampio (1280px), i paragrafi mantengono una
   riga di lettura contenuta.
   ========================================================================== */

/* Testi secondari: mai sotto i 16px nei contenuti; le note restano piccole. */
.dm-form .wpcf7-form .dm-form__aiuto,
.dm-form .wpcf7-not-valid-tip { font-size: 0.9375rem; }

/* Riga di lettura dei paragrafi dentro le composizioni larghe */
.dm-measure { max-width: 68ch; }

/* Griglie con numero di colonne deciso dal viewport (non dal blocco) */
.dm-grid-2,
.dm-grid-3 {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.dm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dm-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.dm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Scheda visuale: blocco Copertina (foto sostituibile dall'editor) con un
   solo link, quello del titolo, esteso a tutta la scheda. Titolo e freccia
   sono lo stesso link: nessun anchor annidato o concorrente. */
.wp-block-cover.dm-visual-card {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: stretch;
	padding: 0 !important;
	min-height: 0 !important;
	aspect-ratio: 4 / 3.2;
	border-radius: var(--dm-radius-lg);
	overflow: hidden;
	text-align: left;
	transition: transform var(--dm-transition), box-shadow var(--dm-transition);
}

.wp-block-cover.dm-visual-card--wide { aspect-ratio: 16 / 10; }

/* Dentro le griglie tutte le schede di una riga hanno la stessa altezza:
   il rapporto d'aspetto lascia il posto a un'altezza minima e allo stretch. */
.dm-grid-2 > .wp-block-cover.dm-visual-card,
.dm-grid-3 > .wp-block-cover.dm-visual-card {
	aspect-ratio: auto;
	height: 100%;
	min-height: clamp(240px, 24vw, 340px);
}

.dm-grid-2 > .wp-block-cover.dm-visual-card--wide {
	min-height: clamp(240px, 22vw, 320px);
}

@media (max-width: 599px) {
	.dm-grid-2 > .wp-block-cover.dm-visual-card,
	.dm-grid-3 > .wp-block-cover.dm-visual-card {
		min-height: 220px;
		aspect-ratio: 4 / 3;
	}
}

.wp-block-cover.dm-visual-card:hover,
.wp-block-cover.dm-visual-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.wp-block-cover.dm-visual-card .wp-block-cover__image-background {
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-cover.dm-visual-card:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* Velatura: leggera in alto, decisa in basso dove sta il titolo */
.wp-block-cover.dm-visual-card .wp-block-cover__background {
	background-image: linear-gradient(180deg, rgba(4, 44, 72, 0.05) 0%, rgba(4, 44, 72, 0.35) 45%, rgba(4, 44, 72, 0.88) 100%);
}

/* Senza foto: fondo blu del tema come segnaposto neutro */
.wp-block-cover.dm-visual-card:not(.has-background-dim) .wp-block-cover__background,
.wp-block-cover.dm-visual-card.dm-visual-card--neutro .wp-block-cover__background {
	background: linear-gradient(145deg, #0770b5 0%, #042c48 100%);
}

/* Foto e velatura stanno SOTTO il contenuto anche senza z-index sul
   contenitore interno: cosi' il link del titolo puo' estendersi a tutta la
   scheda (il suo ::after ha come riferimento la scheda stessa, non il
   contenitore), in qualunque browser. */
.wp-block-cover.dm-visual-card .wp-block-cover__image-background { z-index: -2 !important; }
.wp-block-cover.dm-visual-card .wp-block-cover__background { z-index: -1 !important; }

.wp-block-cover.dm-visual-card .wp-block-cover__inner-container {
	position: static;
	z-index: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	text-align: left !important;
	cursor: pointer;
}

/* Il blocco Copertina centra i figli (margini automatici del layout
   "constrained"): qui tutto resta allineato a sinistra. */
.wp-block-cover.dm-visual-card .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	text-align: left !important;
}

.wp-block-cover.dm-visual-card h3,
.wp-block-cover.dm-visual-card h2 {
	margin: 0;
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.wp-block-cover.dm-visual-card h3 a,
.wp-block-cover.dm-visual-card h2 a {
	display: block;
	color: #fff !important;
	text-decoration: none;
}

.wp-block-cover.dm-visual-card h3,
.wp-block-cover.dm-visual-card h2 { position: static; }

.wp-block-cover.dm-visual-card h3 a::after,
.wp-block-cover.dm-visual-card h2 a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	cursor: pointer;
}

.wp-block-cover.dm-visual-card .dm-visual-card__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: 0.9rem;
	border-radius: 50%;
	background-color: #fff;
	color: var(--wp--preset--color--navy);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
	transition: background-color var(--dm-transition), transform var(--dm-transition);
}

/* Foto, velatura e testi non intercettano il click: tutto passa al link */
.wp-block-cover.dm-visual-card .wp-block-cover__image-background,
.wp-block-cover.dm-visual-card .wp-block-cover__background,
.wp-block-cover.dm-visual-card p { pointer-events: none; }

.wp-block-cover.dm-visual-card:hover .dm-visual-card__arrow {
	background-color: var(--wp--preset--color--accent-soft);
	transform: translateX(4px);
}

.wp-block-cover.dm-visual-card p {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	color: #dbeaf6;
}

/* Grande scheda editoriale su fondo chiaro (es. "Le parole contano") */
.dm-panel {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--dm-radius-lg);
	padding: clamp(1.75rem, 4vw, 3.5rem);
}

.dm-panel > :first-child { margin-top: 0; }
.dm-panel > :last-child { margin-bottom: 0; }

.dm-panel p { font-size: var(--wp--preset--font-size--large); line-height: 1.55; }

.dm-panel .dm-statement { max-width: 24ch; }
.dm-panel .dm-statement--wide,
.dm-statement--wide { max-width: 44ch; }

/* Frase manifesto: fascia autonoma, testo grande e centrato */
.dm-manifesto .dm-statement {
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
	max-width: 30ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Elenco di collegamenti leggibile (pagine provinciali, blocchi editoriali) */
.dm-linklist {
	list-style: none !important;
	padding: 0 !important;
	margin: 0;
}

.dm-linklist li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dm-linklist li a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.95rem 0;
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color var(--dm-transition);
}

.dm-linklist li a::after {
	content: "→";
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
	transition: transform var(--dm-transition);
}

.dm-linklist li a:hover { color: var(--wp--preset--color--primary); }
.dm-linklist li a:hover::after { transform: translateX(4px); }

.dm-linklist li a small {
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* Riquadro operativo (Contatti): contenitore chiaro con tre vere card
   operative una sotto l'altra, stesso peso. */
.dm-opblock {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--dm-radius-lg);
}

.dm-opblock__card {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--dm-radius);
	padding: clamp(1.5rem, 3vw, 2rem);
}

.dm-opblock__card h2 { margin: 0 0 0.6rem; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }
.dm-opblock__card p { margin: 0 0 1.1rem; }
.dm-opblock__card .wp-block-buttons { margin: 0; }

/* Pulsante WhatsApp: verde riconoscibile ma leggibile (5:1 con testo bianco) */
.wp-block-button.is-style-dm-whatsapp .wp-block-button__link {
	background-color: #0b7f37;
	color: #fff;
}

.wp-block-button.is-style-dm-whatsapp .wp-block-button__link:hover {
	background-color: #075e2a;
	color: #fff;
}

/* Collegamenti correlati compatti (fine pagina servizio/settore).
   La card E' il link: un unico <a> a blocco che contiene titolo, riga di
   testo e freccia (blocco HTML nei contenuti). Nessun link esteso o simulato. */
/* Niente height:100%: nella griglia la riga verrebbe calcolata piu' bassa del
   contenuto e la card sborderebbe sulla riga sotto. Con l'altezza automatica
   la griglia dimensiona la riga sul contenuto e allunga le card (stretch). */
a.dm-linkcard {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: auto;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--dm-radius);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--dm-transition), box-shadow var(--dm-transition), border-color var(--dm-transition);
}

a.dm-linkcard:hover,
a.dm-linkcard:focus-visible {
	transform: translateY(-3px);
	border-color: #bcd9f2;
	box-shadow: var(--wp--preset--shadow--soft);
}

a.dm-linkcard h3 {
	margin: 0;
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	transition: color var(--dm-transition);
}

a.dm-linkcard:hover h3 { color: var(--wp--preset--color--primary); }

a.dm-linkcard p {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--muted);
}

a.dm-linkcard .dm-linkcard__arrow {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	transition: transform var(--dm-transition);
}

a.dm-linkcard:hover .dm-linkcard__arrow { transform: translateX(4px); }

/* ==========================================================================
   Tessera settore/servizio (dm-tile): un unico <a> a blocco che contiene il
   titolo (sopra) e la fotografia (sotto). Nessun testo sopra la foto, nessuna
   descrizione. Usata in Home, negli indici Settori e Servizi e nei blocchi
   "settori collegati". Le card fotografiche con testo in sovrimpressione
   (dm-visual-card) restano solo per Zone e lavori.
   ========================================================================== */

a.dm-tile {
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--dm-radius-lg);
}

a.dm-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 6px;
}

a.dm-tile .dm-tile__title {
	display: block;
	margin: 0 0 0.85rem;
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
	transition: color var(--dm-transition);
}

a.dm-tile .dm-tile__media {
	display: block;
	margin-top: auto; /* con titoli di altezza diversa le foto della riga restano allineate */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--dm-radius-lg);
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 1px 2px rgba(5, 72, 117, 0.04);
	transition: box-shadow var(--dm-transition), transform var(--dm-transition);
}

a.dm-tile--wide .dm-tile__media { aspect-ratio: 16 / 10; }

a.dm-tile .dm-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity var(--dm-transition);
}

/* Hover sobrio sull'intero componente: titolo in blu primario, foto
   leggermente ingrandita e piu' luminosa, ombra sulla foto. */
a.dm-tile:hover .dm-tile__title,
a.dm-tile:focus-visible .dm-tile__title { color: var(--wp--preset--color--primary); }

a.dm-tile:hover .dm-tile__media,
a.dm-tile:focus-visible .dm-tile__media {
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-3px);
}

a.dm-tile:hover .dm-tile__media img { transform: scale(1.03); opacity: 0.94; }

.dm-grid-2 > a.dm-tile,
.dm-grid-3 > a.dm-tile { height: auto; } /* la griglia allunga le tessere alla riga (stretch) */

/* Nelle griglie il gruppo "a flusso" di WordPress aggiungerebbe un margine
   superiore a ogni figlio dopo il primo: qui le righe restano allineate. */
.dm-grid-2 > *,
.dm-grid-3 > * { margin-block-start: 0 !important; }

/* Blocco evidenza: pannello chiaro con bordo azzurro */
.dm-panel--evidenza {
	border-left: 6px solid var(--wp--preset--color--accent);
	border-radius: var(--dm-radius);
}

/* Immagine nelle sezioni 50/50: angoli morbidi, altezza coerente */
.dm-split .dm-photo-slot { aspect-ratio: 4 / 3; }
.dm-split .dm-photo-slot--alta { aspect-ratio: 3 / 4; }

/* Area fotografica predisposta (segnaposto neutro finche' non c'e' la foto) */
.dm-photo-slot {
	aspect-ratio: 4 / 3;
	border-radius: var(--dm-radius-lg);
	background: linear-gradient(145deg, var(--wp--preset--color--surface) 0%, var(--wp--preset--color--accent-soft) 100%);
	overflow: hidden;
}

.dm-photo-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Blocchi 50/50: su desktop le colonne restano davvero ampie e allineate */
@media (min-width: 782px) {
	.wp-block-columns.dm-split { gap: clamp(2rem, 5vw, 4.5rem); }
}

/* Tablet: le griglie a tre voci del tema scendono a due colonne reali */
@media (min-width: 600px) and (max-width: 1023px) {
	.is-layout-grid.dm-tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Le voci "in riga senza box" e i concetti non scendono sotto una larghezza leggibile */
@media (max-width: 599px) {
	.dm-step, .dm-plain, .dm-concept, .dm-example { height: auto; }
}