/**
 * Studio Pilates — Foglio di stile principale del tema.
 *
 * Contiene le variabili di design, le utility del tema (sp-*), gli stati
 * iniziali delle animazioni GSAP, gli stili dei blocchi core usati nei
 * pattern e tutte le regole responsive.
 *
 * Sommario
 *  01. Variabili e alias                 11. Marquee
 *  02. Reset e regole base               12. Numeri e contatori
 *  03. Stati iniziali delle animazioni   13. FAQ e accordion
 *  04. Riduzione del movimento           14. Badge, divider, contatti
 *  05. Header e navigazione              15. Stili di blocco registrati
 *  06. Menu mobile                       16. Blocchi core
 *  07. Hero                              17. Footer
 *  08. Sezioni e tipografia editoriale   18. Responsive
 *  09. Card                              19. Stampa
 *  10. Immagini e figure                 20. Accessibilita'
 *
 * @package studio-pilates
 */

/* ==========================================================================
   01. VARIABILI E ALIAS
   Gli alias rendono leggibile il resto del file: invece di ripetere
   var( --wp--preset--color--primary ) si usa var( --sp-c-primary ).
   Ogni alias porta con se' un fallback esadecimale, cosi' il CSS resta
   corretto anche fuori dal contesto di WordPress (iframe dell'editor).
   ========================================================================== */

:root {
	/* Colori --------------------------------------------------------------- */
	--sp-c-base: var( --wp--preset--color--base, #faf7f2 );
	--sp-c-surface: var( --wp--preset--color--surface, #ffffff );
	--sp-c-contrast: var( --wp--preset--color--contrast, #16211c );
	--sp-c-primary: var( --wp--preset--color--primary, #2f4f43 );
	--sp-c-primary-soft: var( --wp--preset--color--primary-soft, #e3eae4 );
	--sp-c-accent: var( --wp--preset--color--accent, #c08457 );
	--sp-c-sand: var( --wp--preset--color--sand, #efe6d9 );
	--sp-c-muted: var( --wp--preset--color--muted, #6c7a72 );
	--sp-c-line: var( --wp--preset--color--line, #e2dcd2 );

	/* Varianti calcolate a partire dalla palette --------------------------- */
	--sp-c-primary-dark: #1e3a30;
	--sp-c-accent-dark: #a86e45;
	--sp-c-ink-05: rgba( 22, 33, 28, 0.05 );
	--sp-c-ink-08: rgba( 22, 33, 28, 0.08 );
	--sp-c-ink-12: rgba( 22, 33, 28, 0.12 );
	--sp-c-ink-55: rgba( 22, 33, 28, 0.55 );
	--sp-c-light-24: rgba( 250, 247, 242, 0.24 );
	--sp-c-light-70: rgba( 250, 247, 242, 0.7 );
	--sp-c-light-85: rgba( 250, 247, 242, 0.85 );

	/* Tipografia ----------------------------------------------------------- */
	--sp-f-display: var( --wp--preset--font-family--display, "Fraunces", "Iowan Old Style", Georgia, serif );
	--sp-f-corpo: var( --wp--preset--font-family--corpo, "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif );

	--sp-t-piccolo: var( --wp--preset--font-size--piccolo, clamp( 0.82rem, 0.78rem + 0.2vw, 0.9rem ) );
	--sp-t-base: var( --wp--preset--font-size--base, clamp( 1rem, 0.96rem + 0.2vw, 1.075rem ) );
	--sp-t-medio: var( --wp--preset--font-size--medio, clamp( 1.15rem, 1.05rem + 0.45vw, 1.35rem ) );
	--sp-t-grande: var( --wp--preset--font-size--grande, clamp( 1.5rem, 1.3rem + 1vw, 2.1rem ) );
	--sp-t-xl: var( --wp--preset--font-size--xl, clamp( 2rem, 1.6rem + 2vw, 3.2rem ) );
	--sp-t-xxl: var( --wp--preset--font-size--xxl, clamp( 2.6rem, 1.9rem + 3.4vw, 4.6rem ) );
	--sp-t-display: var( --wp--preset--font-size--display, clamp( 3.2rem, 2rem + 5.4vw, 7rem ) );

	/* Spaziature ----------------------------------------------------------- */
	--sp-s-xs: var( --wp--preset--spacing--xs, clamp( 0.5rem, 0.45rem + 0.25vw, 0.75rem ) );
	--sp-s-s: var( --wp--preset--spacing--s, clamp( 0.9rem, 0.8rem + 0.5vw, 1.25rem ) );
	--sp-s-m: var( --wp--preset--spacing--m, clamp( 1.5rem, 1.2rem + 1.2vw, 2.5rem ) );
	--sp-s-l: var( --wp--preset--spacing--l, clamp( 2.5rem, 2rem + 2.4vw, 4rem ) );
	--sp-s-xl: var( --wp--preset--spacing--xl, clamp( 4rem, 3rem + 4vw, 7rem ) );
	--sp-s-xxl: var( --wp--preset--spacing--xxl, clamp( 6rem, 4rem + 7vw, 11rem ) );

	/* Layout --------------------------------------------------------------- */
	--sp-w-content: 720px;
	--sp-w-wide: 1240px;
	--sp-gutter: clamp( 1.25rem, 4vw, 3rem );

	/* Raggi ---------------------------------------------------------------- */
	--sp-r-s: 10px;
	--sp-r-m: 18px;
	--sp-r-l: 28px;
	--sp-r-xl: 44px;
	--sp-r-pill: 999px;

	/* Ombre ---------------------------------------------------------------- */
	--sp-shadow-s: 0 2px 8px rgba( 22, 33, 28, 0.05 );
	--sp-shadow-m: 0 14px 40px -18px rgba( 22, 33, 28, 0.22 );
	--sp-shadow-l: 0 40px 90px -40px rgba( 22, 33, 28, 0.35 );

	/* Movimento ------------------------------------------------------------ */
	--sp-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
	--sp-dur: 0.6s;
	--sp-dur-fast: 0.4s;
	--sp-dur-slow: 1.1s;
	--sp-anim-dur: var( --sp-dur );
	--sp-anim-delay: 0s;

	/* Header --------------------------------------------------------------- */
	/* Il logo e' un lockup impilato (figure, scritta, citta'): serve piu'
	   altezza di un marchio orizzontale, quindi l'intestazione e' piu' alta
	   di quella del modello. --sp-logo-h resta sempre almeno 20px sotto
	   --sp-header-h, altrimenti il logo farebbe crescere l'intestazione
	   oltre il valore su cui l'eroe calcola il proprio margine negativo. */
	--sp-header-h: 116px;
	--sp-header-h-small: 88px;
	--sp-logo-h: 92px;
	--sp-logo-h-small: 64px;
	--sp-z-header: 900;

	/* Icone vettoriali riusate come maschera CSS --------------------------- */
	--sp-icon-freccia: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--sp-icon-spunta: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5 5L20 6.6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   02. RESET E REGOLE BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-color: var( --sp-c-line ) transparent;
	scrollbar-width: thin;
}

body {
	background-color: var( --sp-c-base );
	color: var( --sp-c-contrast );
	font-family: var( --sp-f-corpo );
	font-size: var( --sp-t-base );
	line-height: 1.65;
	margin: 0;
	overflow-x: clip;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Barra di scorrimento sottile e discreta su WebKit. */
::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var( --sp-c-line );
	border-radius: var( --sp-r-pill );
}

::-webkit-scrollbar-thumb:hover {
	background-color: var( --sp-c-muted );
}

/* Selezione del testo coerente con la palette. */
::selection {
	background-color: var( --sp-c-primary );
	color: var( --sp-c-base );
}

::-moz-selection {
	background-color: var( --sp-c-primary );
	color: var( --sp-c-base );
}

/* Bilanciamento tipografico: titoli compatti, paragrafi senza orfane. */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title,
.wp-block-site-title {
	font-family: var( --sp-f-display );
	font-weight: 450;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
}

h3,
h4,
h5,
h6 {
	line-height: 1.15;
}

p,
li,
figcaption,
dd {
	text-wrap: pretty;
}

p:empty {
	display: none;
}

a {
	color: inherit;
	text-underline-offset: 0.22em;
	transition: color var( --sp-dur-fast ) var( --sp-ease );
}

a:hover {
	color: var( --sp-c-primary );
}

strong,
b {
	font-weight: 600;
}

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

img {
	height: auto;
}

hr {
	border: 0;
	border-top: 1px solid var( --sp-c-line );
	margin: 0;
}

small {
	font-size: var( --sp-t-piccolo );
}

/* Il contenuto non deve mai generare scorrimento orizzontale. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Ancore raggiunte via smooth scroll: lasciano spazio all'header sticky. */
:target {
	scroll-margin-top: calc( var( --sp-header-h ) + 1.5rem );
}

/* ==========================================================================
   03. STATI INIZIALI DELLE ANIMAZIONI
   Le classi sp-anim-* partono nascoste SOLO quando l'elemento <html> ha la
   classe "sp-js" (aggiunta da uno snippet inline in <head>): senza
   JavaScript il contenuto resta sempre visibile. La classe "sp-reduced",
   aggiunta da animations.js quando l'utente chiede meno movimento,
   disattiva ogni stato nascosto.
   ========================================================================== */

html.sp-js:not( .sp-reduced ) .sp-anim-fade,
html.sp-js:not( .sp-reduced ) .sp-anim-up,
html.sp-js:not( .sp-reduced ) .sp-anim-down,
html.sp-js:not( .sp-reduced ) .sp-anim-left,
html.sp-js:not( .sp-reduced ) .sp-anim-right,
html.sp-js:not( .sp-reduced ) .sp-anim-scale,
html.sp-js:not( .sp-reduced ) .sp-anim-blur,
html.sp-js:not( .sp-reduced ) .sp-anim-split {
	opacity: 0;
	/* Rete di sicurezza: se GSAP non parte, dopo 2,4s il contenuto compare. */
	animation: sp-reveal-fallback 0.01s linear 2.4s forwards;
	will-change: opacity, transform;
}

html.sp-js:not( .sp-reduced ) .sp-anim-up {
	transform: translate3d( 0, 44px, 0 );
}

html.sp-js:not( .sp-reduced ) .sp-anim-down {
	transform: translate3d( 0, -44px, 0 );
}

html.sp-js:not( .sp-reduced ) .sp-anim-left {
	transform: translate3d( -56px, 0, 0 );
}

html.sp-js:not( .sp-reduced ) .sp-anim-right {
	transform: translate3d( 56px, 0, 0 );
}

html.sp-js:not( .sp-reduced ) .sp-anim-scale {
	transform: scale( 0.92 );
}

html.sp-js:not( .sp-reduced ) .sp-anim-blur {
	filter: blur( 14px );
}

html.sp-js:not( .sp-reduced ) .sp-anim-mask {
	animation: sp-mask-fallback 0.01s linear 2.4s forwards;
	clip-path: inset( 0 0 100% 0 );
	will-change: clip-path;
}

/* I figli diretti entrano a cascata. */
html.sp-js:not( .sp-reduced ) .sp-anim-stagger > * {
	animation: sp-reveal-fallback 0.01s linear 2.4s forwards;
	opacity: 0;
	transform: translate3d( 0, 30px, 0 );
	will-change: opacity, transform;
}

/* Parole generate da animations.js per sp-anim-split. */
.sp-anim-split .sp-word,
.sp-anim-split .sp-parola {
	display: inline-block;
	white-space: pre-wrap;
	will-change: opacity, transform;
}

.sp-anim-split .sp-word-mask,
.sp-anim-split .sp-parola-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

/* Parallasse: nessuno stato nascosto, solo ottimizzazione del compositing. */
html.sp-js:not( .sp-reduced ) .sp-anim-parallax {
	will-change: transform;
}

/* Contatore: cifre a larghezza fissa per evitare sfarfallio dei numeri. */
.sp-anim-counter {
	font-variant-numeric: tabular-nums;
}

/* Disegno dei tratti SVG: la lunghezza reale la calcola animations.js. */
html.sp-js:not( .sp-reduced ) .sp-anim-draw svg path,
html.sp-js:not( .sp-reduced ) .sp-anim-draw svg line,
html.sp-js:not( .sp-reduced ) .sp-anim-draw svg polyline,
html.sp-js:not( .sp-reduced ) .sp-anim-draw svg circle,
html.sp-js:not( .sp-reduced ) .sp-anim-draw svg rect {
	animation: sp-draw-fallback 0.01s linear 2.4s forwards;
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
}

.sp-anim-draw svg [stroke] {
	vector-effect: non-scaling-stroke;
}

/* Modificatori: i valori sono dichiarati anche qui, cosi' restano
   disponibili ai fallback CSS e documentano il contratto con il JS. */
.sp-delay-1 {
	--sp-anim-delay: 0.08s;
}

.sp-delay-2 {
	--sp-anim-delay: 0.16s;
}

.sp-delay-3 {
	--sp-anim-delay: 0.24s;
}

.sp-delay-4 {
	--sp-anim-delay: 0.32s;
}

.sp-delay-5 {
	--sp-anim-delay: 0.4s;
}

.sp-delay-6 {
	--sp-anim-delay: 0.48s;
}

.sp-dur-fast {
	--sp-anim-dur: var( --sp-dur-fast );
}

.sp-dur-slow {
	--sp-anim-dur: var( --sp-dur-slow );
}

@keyframes sp-reveal-fallback {

	to {
		filter: none;
		opacity: 1;
		transform: none;
	}
}

@keyframes sp-mask-fallback {

	to {
		clip-path: inset( 0 0 0 0 );
	}
}

@keyframes sp-draw-fallback {

	to {
		stroke-dashoffset: 0;
	}
}

/* ==========================================================================
   04. RIDUZIONE DEL MOVIMENTO
   Regola non negoziabile: con prefers-reduced-motion tutto e' visibile,
   fermo e leggibile. Serve !important per vincere sugli stili inline
   scritti da GSAP.
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-delay: 0s !important;
		transition-duration: 0.001ms !important;
	}

	[class*="sp-anim-"],
	[class*="sp-anim-"] > *,
	[class*="sp-anim-"] .sp-word,
	[class*="sp-anim-"] .sp-parola {
		animation: none !important;
		clip-path: none !important;
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
		will-change: auto !important;
	}

	.sp-anim-draw svg path,
	.sp-anim-draw svg line,
	.sp-anim-draw svg polyline,
	.sp-anim-draw svg circle,
	.sp-anim-draw svg rect {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}

	.sp-marquee__track {
		animation: none !important;
		transform: none !important;
	}

	.sp-hero__scroll::after {
		animation: none !important;
	}
}

/* Stessa neutralizzazione quando animations.js marca html.sp-reduced. */
html.sp-reduced [class*="sp-anim-"],
html.sp-reduced [class*="sp-anim-"] > * {
	animation: none !important;
	clip-path: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   05. HEADER E NAVIGAZIONE
   ========================================================================== */

.sp-header {
	background-color: transparent;
	border-bottom: 1px solid transparent;
	left: 0;
	position: sticky;
	right: 0;
	top: 0;
	transition:
		background-color var( --sp-dur ) var( --sp-ease ),
		border-color var( --sp-dur ) var( --sp-ease ),
		box-shadow var( --sp-dur ) var( --sp-ease ),
		transform var( --sp-dur ) var( --sp-ease );
	width: 100%;
	z-index: var( --sp-z-header );
}

/* Sulla home l'intestazione e' trasparente e appoggia sulla fotografia
   dell'hero: il testo scuro spariva sui punti chiari o affollati (l'ulivo).
   Qui diventa chiaro, e l'hero riceve una velatura in cima che ne garantisce
   la leggibilita'. Quando l'intestazione si compatta e prende il fondo crema
   (.is-scrolled) il testo torna scuro. */
.sp-front .sp-header:not( .is-scrolled ),
.sp-front .sp-header:not( .is-scrolled ) a,
.sp-front .sp-header:not( .is-scrolled ) .wp-block-site-title a,
.sp-front .sp-header:not( .is-scrolled ) .wp-block-navigation__responsive-container-open {
	color: var( --sp-c-base );
}

.sp-front .sp-header:not( .is-scrolled ) .wp-block-navigation__responsive-container.is-menu-open,
.sp-front .sp-header:not( .is-scrolled ) .wp-block-navigation__responsive-container.is-menu-open a {
	color: var( --sp-c-contrast );
}

.sp-hero::after {
	background-image: linear-gradient(
		to bottom,
		rgba( 22, 33, 28, 0.5 ) 0%,
		rgba( 22, 33, 28, 0.28 ) 45%,
		rgba( 22, 33, 28, 0 ) 100%
	);
	content: "";
	height: 240px;
	inset: 0 0 auto 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sp-header.is-scrolled {
	-webkit-backdrop-filter: blur( 14px ) saturate( 130% );
	backdrop-filter: blur( 14px ) saturate( 130% );
	background-color: var( --sp-c-light-85 );
	border-bottom-color: var( --sp-c-line );
	box-shadow: var( --sp-shadow-s );
}

.sp-header.is-hidden {
	transform: translateY( -100% );
}

.sp-header__inner {
	align-items: center;
	display: flex;
	gap: var( --sp-s-m );
	justify-content: space-between;
	margin-inline: auto;
	max-width: var( --sp-w-wide );
	min-height: var( --sp-header-h );
	/* Lo spazio verticale sta qui e non piu' come padding del blocco: cosi'
	   l'altezza dell'intestazione dipende solo da --sp-header-h e resta
	   allineata al margine negativo dell'eroe. */
	padding-block: 10px;
	padding-inline: var( --sp-gutter );
	transition: min-height var( --sp-dur ) var( --sp-ease );
	width: 100%;
}

.sp-header.is-scrolled .sp-header__inner {
	min-height: var( --sp-header-h-small );
}

/* Titolo del sito ------------------------------------------------------- */

.sp-header .wp-block-site-title {
	font-family: var( --sp-f-display );
	font-size: clamp( 1.25rem, 1.1rem + 0.6vw, 1.6rem );
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1;
	margin: 0;
}

.sp-header .wp-block-site-title a {
	text-decoration: none;
}

.sp-header .wp-block-site-title a:hover {
	color: var( --sp-c-primary );
}

/* Logo del sito --------------------------------------------------------
   Il logo caricato dalla bacheca (Aspetto > Editor > Stili, oppure il
   blocco Logo del sito) e' la versione a colori. Su fondo scuro il blu e
   la barra sparirebbero: in quei casi l'immagine viene resa trasparente e
   al suo posto si dipinge la variante chiara come sfondo del contenitore.
   L'URL e' relativo a questo foglio di stile, quindi regge il cambio di
   dominio al momento della pubblicazione. */

/* Il blocco Logo del sito ha una larghezza propria (120px) che schiaccerebbe
   il marchio: qui comanda l'altezza e il contenitore si adatta. */
.sp-header .wp-block-site-logo,
.sp-footer .sp-footer__logo {
	line-height: 0;
	margin: 0;
	/* fit-content e non auto: nel pie' di pagina il contenitore e' un blocco
	   e si allargherebbe a tutta la colonna, sfalsando lo sfondo chiaro. */
	width: fit-content;
}

.sp-header .wp-block-site-logo .custom-logo-link,
.sp-footer .sp-footer__logo .custom-logo-link {
	display: block;
}

.sp-header .custom-logo,
.sp-header .wp-block-site-logo img {
	display: block;
	height: var( --sp-logo-h );
	max-width: none;
	transition: height var( --sp-dur ) var( --sp-ease );
	width: auto;
}

.sp-header.is-scrolled .custom-logo,
.sp-header.is-scrolled .wp-block-site-logo img {
	height: var( --sp-logo-h-small );
}

/* In cima alla home l'intestazione e' trasparente sopra l'eroe scuro. */
.sp-front .sp-header:not( .is-scrolled ) .wp-block-site-logo {
	background-image: url( "../img/logo-yogilates-chiaro.svg" );
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
}

.sp-front .sp-header:not( .is-scrolled ) .wp-block-site-logo img {
	opacity: 0;
}

/* Il pie' di pagina ha sempre fondo verde salvia scuro. */
.sp-footer .sp-footer__logo {
	background-image: url( "../img/logo-yogilates-chiaro.svg" );
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
}

.sp-footer .sp-footer__logo img {
	display: block;
	height: 108px;
	max-width: none;
	opacity: 0;
	width: auto;
}

/* Navigazione principale ------------------------------------------------ */

.sp-nav {
	font-family: var( --sp-f-corpo );
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.005em;
}

.sp-nav .wp-block-navigation__container {
	align-items: center;
	gap: clamp( 1.1rem, 2vw, 2.1rem );
}

.sp-nav .wp-block-navigation-item__content {
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	padding-bottom: 3px;
	text-decoration: none;
	transition:
		background-size 0.35s var( --sp-ease ),
		color 0.35s var( --sp-ease );
}

.sp-nav .wp-block-navigation-item__content:hover,
.sp-nav .wp-block-navigation-item__content:focus-visible {
	background-size: 100% 1px;
	color: var( --sp-c-primary );
}

.sp-nav .current-menu-item > .wp-block-navigation-item__content {
	background-size: 100% 1px;
	color: var( --sp-c-primary );
}

/* Sottomenu discreto, coerente con le card del sito. */
.sp-nav .wp-block-navigation__submenu-container {
	background-color: var( --sp-c-surface );
	border: 1px solid var( --sp-c-line );
	border-radius: var( --sp-r-m );
	box-shadow: var( --sp-shadow-m );
	min-width: 220px;
	padding: 0.5rem;
}

.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	background-image: none;
	border-radius: var( --sp-r-s );
	padding: 0.45rem 0.7rem;
	width: 100%;
}

.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var( --sp-c-primary-soft );
}

/* Bottone di conversione nell'header ------------------------------------ */

.sp-header__cta,
.sp-header__cta .wp-block-button__link {
	align-items: center;
	background-color: var( --sp-c-primary );
	border: 0;
	border-radius: var( --sp-r-pill );
	color: var( --sp-c-base );
	display: inline-flex;
	font-family: var( --sp-f-corpo );
	font-size: 0.92rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 0.85rem 1.5rem;
	text-decoration: none;
	transition:
		background-color var( --sp-dur-fast ) var( --sp-ease ),
		box-shadow var( --sp-dur-fast ) var( --sp-ease ),
		transform var( --sp-dur-fast ) var( --sp-ease );
	white-space: nowrap;
}

.sp-header__cta:hover,
.sp-header__cta .wp-block-button__link:hover {
	background-color: var( --sp-c-primary-dark );
	box-shadow: var( --sp-shadow-m );
	color: var( --sp-c-base );
	transform: translateY( -1px );
}

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

/* ==========================================================================
   06. MENU MOBILE (overlay di core/navigation)
   ========================================================================== */

/* Il pulsante del menu e' un elemento flessibile dentro l'intestazione:
   senza flex-shrink: 0 viene compresso dal bottone "Prenota" e l'icona si
   riduce a pochi pixel. 44px e' anche l'area toccabile minima consigliata.

   IMPORTANTE: qui non si dichiara "display". A decidere quando mostrare il
   pulsante e' WordPress, che lo nasconde con display: none oltre il punto di
   rottura dell'overlay. Dichiarandolo qui lo si terrebbe visibile anche da
   desktop, accanto al menu esteso. */
.sp-header .wp-block-navigation__responsive-container-open,
.sp-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	color: var( --sp-c-contrast );
	flex: 0 0 auto;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0.35rem;
}

.sp-header .wp-block-navigation__responsive-container-open svg,
.sp-header .wp-block-navigation__responsive-container-close svg {
	flex: 0 0 auto;
	height: 28px;
	width: 28px;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --sp-c-base );
	color: var( --sp-c-contrast );
	padding: clamp( 1.5rem, 5vw, 3rem );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	padding-top: clamp( 2rem, 8vh, 5rem );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: clamp( 0.75rem, 2.5vh, 1.4rem );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	background-image: none;
	font-family: var( --sp-f-display );
	font-size: clamp( 2rem, 9vw, 3.2rem );
	font-weight: 450;
	letter-spacing: -0.025em;
	line-height: 1.05;
	padding-bottom: 0;
}

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

/* Entrata a cascata delle voci del menu mobile. */
html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	animation: sp-menu-in 0.55s var( --sp-ease ) both;
}

html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child( 1 ) {
	animation-delay: 0.06s;
}

html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child( 2 ) {
	animation-delay: 0.12s;
}

html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child( 3 ) {
	animation-delay: 0.18s;
}

html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child( 4 ) {
	animation-delay: 0.24s;
}

html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child( 5 ) {
	animation-delay: 0.3s;
}

html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child( 6 ) {
	animation-delay: 0.36s;
}

html.sp-js:not( .sp-reduced ) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child( n + 7 ) {
	animation-delay: 0.42s;
}

@keyframes sp-menu-in {

	from {
		opacity: 0;
		transform: translate3d( 0, 24px, 0 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   07. HERO
   ========================================================================== */

/* Quando la pagina si apre con l'hero, il main non deve avere lo stacco
   (blockGap) che WordPress inserisce fra intestazione e contenuto: l'hero
   deve toccare il bordo superiore della finestra. */
.wp-site-blocks > .sp-main:has( > .entry-content > .sp-hero:first-child ),
.wp-site-blocks > .sp-main:has( > .sp-hero:first-child ) {
	margin-block-start: 0 !important;
}

/* L'hero scorre sotto l'header trasparente. Il valore di --sp-header-h e'
   pubblicato da site.js misurando l'header reale. Serve !important perche'
   il layout di WordPress impone il proprio margin-block-start ai figli
   diretti di post-content. */
.sp-hero,
.entry-content > .sp-hero,
.wp-block-post-content > .sp-hero {
	margin-block-start: calc( var( --sp-header-h, 88px ) * -1 ) !important;
}

.sp-hero {
	align-items: end;
	color: var( --sp-c-base );
	display: grid;
	isolation: isolate;
	min-height: 100svh;
	overflow: clip;
	position: relative;
}

/* L'immagine dell'hero deve coprire tutta la sezione. Il gruppo che la
   contiene usa il layout "constrained" di WordPress, che impone
   max-width: <content-size> e margin-inline: auto !important ai figli
   diretti: senza questi override l'immagine resterebbe una colonna
   centrata di 720px invece di riempire lo schermo. */
.sp-hero > .sp-hero__media,
.sp-hero > .wp-block-cover__image-background {
	height: 100%;
	inset: 0;
	margin: 0 !important;
	max-width: none;
	position: absolute;
	width: 100%;
	z-index: -2;
}

.sp-hero__media img,
.sp-hero__media video {
	display: block;
	/* La parallasse sposta l'immagine fra -4% e +6%: la rendiamo piu' alta
	   del contenitore e la alziamo, altrimenti in fondo all'hero comparirebbe
	   una striscia vuota di fondo pagina. */
	height: 116%;
	inset-inline: 0;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: -8%;
	width: 100%;
	will-change: transform;
}

/* Velo scuro per la leggibilita' del testo: uno solo, sull'elemento hero,
   cosi' non si somma a un eventuale overlay del blocco copertina. */
.sp-hero::before {
	background-image: linear-gradient(
		to top,
		rgba( 22, 33, 28, 0.55 ) 0%,
		rgba( 22, 33, 28, 0.4 ) 45%,
		rgba( 22, 33, 28, 0.15 ) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sp-hero > .sp-hero__inner,
.sp-hero__inner {
	margin-inline: auto;
	max-width: var( --sp-w-wide );
	padding-bottom: clamp( 5rem, 12vh, 9rem );
	padding-inline: var( --sp-gutter );
	padding-top: calc( var( --sp-header-h ) + var( --sp-s-l ) );
	position: relative;
	width: 100%;
	z-index: 1;
}

.sp-hero__inner > * {
	/* Il layout "constrained" applica margin-inline: auto !important ai figli:
	   senza questo override i blocchi piu' stretti del contenitore (occhiello,
	   paragrafo introduttivo) verrebbero centrati invece che allineati a sinistra. */
	margin-inline-end: 0 !important;
	margin-inline-start: 0 !important;
	max-width: 22ch;
}

.sp-hero__inner p,
.sp-hero__inner .sp-lead {
	max-width: 46ch;
}

.sp-hero h1,
.sp-hero .wp-block-heading {
	color: var( --sp-c-base );
	font-size: var( --sp-t-display );
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0 0 var( --sp-s-m );
	text-wrap: balance;
}

.sp-hero p {
	color: var( --sp-c-light-85 );
	font-size: var( --sp-t-medio );
	margin: 0 0 var( --sp-s-m );
}

.sp-hero .sp-eyebrow {
	color: var( --sp-c-light-70 );
	margin-bottom: var( --sp-s-s );
}

.sp-hero .sp-eyebrow::before {
	background-color: var( --sp-c-light-70 );
}

.sp-hero .wp-block-buttons {
	max-width: none;
}

/* Indicatore di scorrimento in basso. */
.sp-hero__scroll {
	align-items: center;
	bottom: clamp( 1.5rem, 4vh, 2.5rem );
	color: var( --sp-c-light-70 );
	display: flex;
	flex-direction: column;
	font-family: var( --sp-f-corpo );
	font-size: 0.7rem;
	gap: 0.85rem;
	left: 50%;
	letter-spacing: 0.22em;
	position: absolute;
	text-transform: uppercase;
	transform: translateX( -50% );
	z-index: 2;
}

.sp-hero__scroll::after {
	animation: sp-scroll-pulse 2.2s var( --sp-ease ) infinite;
	background-color: currentColor;
	content: "";
	display: block;
	height: 54px;
	transform-origin: top center;
	width: 1px;
}

@keyframes sp-scroll-pulse {

	0% {
		opacity: 0.2;
		transform: scaleY( 0.2 );
	}

	45% {
		opacity: 1;
		transform: scaleY( 1 );
	}

	100% {
		opacity: 0.2;
		transform: scaleY( 0.2 ) translateY( 54px );
	}
}

/* ==========================================================================
   08. SEZIONI E TIPOGRAFIA EDITORIALE
   ========================================================================== */

/* Respiro verticale delle sezioni.
   I preset xxl/xl del tema restano quelli che sono (l'utente li usa nei
   controlli di spaziatura dell'editor): qui si usano valori dedicati, piu'
   contenuti, altrimenti fra una sezione e l'altra si formano oltre 300px di
   vuoto. --sp-sezione e' esposta come variabile per poterla regolare in un
   punto solo. */
:root {
	--sp-sezione: clamp( 3.5rem, 2.2rem + 3.8vw, 6rem );
	--sp-sezione-stretta: clamp( 2.25rem, 1.5rem + 2.2vw, 3.75rem );
}

.sp-section {
	padding-block: var( --sp-sezione );
	position: relative;
}

.sp-section--tight {
	padding-block: var( --sp-sezione-stretta );
}

/* Le sezioni hanno gia' il proprio respiro interno: fra una e l'altra non
   serve anche lo stacco standard fra blocchi, che aggiungeva altri 36px.
   Le pagine di solo testo (privacy) non sono toccate. */
.entry-content > :is( .sp-hero, .sp-marquee, .sp-section, .sp-cta ) + :is( .sp-marquee, .sp-section, .sp-cta ),
.wp-block-post-content > :is( .sp-hero, .sp-marquee, .sp-section, .sp-cta ) + :is( .sp-marquee, .sp-section, .sp-cta ) {
	margin-block-start: 0;
}

.sp-section > .wp-block-group__inner-container,
.sp-section .sp-section__inner {
	margin-inline: auto;
	max-width: var( --sp-w-wide );
}

/* Etichetta piccola con trattino. */
.sp-eyebrow {
	align-items: center;
	color: var( --sp-c-muted );
	display: flex;
	font-family: var( --sp-f-corpo );
	font-size: 0.78rem;
	font-weight: 600;
	gap: 0.85rem;
	letter-spacing: 0.18em;
	line-height: 1.2;
	margin-bottom: var( --sp-s-s );
	text-transform: uppercase;
}

.sp-eyebrow::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	height: 1px;
	width: 28px;
}

.sp-eyebrow.has-text-align-center {
	justify-content: center;
}

/* Paragrafo introduttivo. */
.sp-lead {
	color: var( --sp-c-muted );
	font-size: var( --sp-t-medio );
	line-height: 1.6;
	max-width: 62ch;
}

.sp-lead.has-text-align-center {
	margin-inline: auto;
}

/* Titoli editoriali con impostazione ottica leggermente diversa. */
.sp-section h2 {
	font-size: var( --sp-t-xxl );
	margin-block: 0 var( --sp-s-m );
}

.sp-section h3 {
	font-size: var( --sp-t-grande );
	margin-block: 0 var( --sp-s-s );
}

/* Divisore sottile. */
.sp-divider {
	background-color: var( --sp-c-line );
	border: 0;
	height: 1px;
	margin-block: var( --sp-s-l );
	width: 100%;
}

/* ==========================================================================
   09. CARD
   ========================================================================== */

.sp-card {
	background-color: var( --sp-c-surface );
	border: 1px solid var( --sp-c-line );
	border-radius: var( --sp-r-l );
	color: var( --sp-c-contrast );
	display: flex;
	flex-direction: column;
	gap: var( --sp-s-s );
	height: 100%;
	padding: var( --sp-s-m );
	transition:
		border-color var( --sp-dur ) var( --sp-ease ),
		box-shadow var( --sp-dur ) var( --sp-ease ),
		transform var( --sp-dur ) var( --sp-ease );
}

.sp-card:hover {
	border-color: transparent;
	box-shadow: var( --sp-shadow-m );
	transform: translateY( -4px );
}

.sp-card > :first-child {
	margin-top: 0;
}

.sp-card > :last-child {
	margin-bottom: 0;
}

.sp-card h3,
.sp-card h4 {
	margin-block: 0 0.35rem;
}

.sp-card p {
	color: var( --sp-c-muted );
	margin-block: 0;
}

/* L'immagine dentro una scheda resta rientrata quanto i lati.
   La versione precedente usava margini negativi su tre lati per farla
   sanguinare fino ai bordi, ma il layout "constrained" di WordPress impone
   margin-inline: auto !important ai figli diretti: sopravviveva solo il
   margine negativo superiore e l'immagine risultava incollata al bordo alto
   e rientrata ai lati. */
.sp-card figure,
.sp-card .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.sp-card > figure:first-child img,
.sp-card > .wp-block-image:first-child img {
	display: block;
	width: 100%;
}

/* Variante su fondo salvia chiara. */
.sp-card--soft {
	background-color: var( --sp-c-primary-soft );
	border-color: transparent;
}

.sp-card--soft:hover {
	box-shadow: var( --sp-shadow-m );
}

.sp-card--soft p {
	color: var( --sp-c-primary-dark );
	opacity: 0.85;
}

/* Variante scura. */
.sp-card--dark {
	background-color: var( --sp-c-primary );
	border-color: transparent;
	color: var( --sp-c-base );
}

.sp-card--dark h2,
.sp-card--dark h3,
.sp-card--dark h4,
.sp-card--dark h5 {
	color: #ffffff;
}

.sp-card--dark p,
.sp-card--dark li {
	color: var( --sp-c-light-85 );
}

.sp-card--dark .sp-eyebrow {
	color: var( --sp-c-light-70 );
}

.sp-card--dark a:hover {
	color: var( --sp-c-sand );
}

/* Le card dentro colonne devono riempire la colonna. */
.wp-block-columns .wp-block-column > .sp-card,
.wp-block-columns .wp-block-column > .wp-block-group.sp-card {
	height: 100%;
}

.wp-block-column:has( > .sp-card ) {
	display: flex;
}

.wp-block-column:has( > .sp-card ) > .sp-card {
	flex: 1 1 auto;
}

/* ==========================================================================
   10. IMMAGINI E FIGURE
   ========================================================================== */

figure img,
.wp-block-image img {
	border-radius: var( --sp-r-m );
	display: block;
}

/* Zoom lento all'hover per tutte le figure con overflow controllato. */
.sp-media-arch,
.sp-media-round,
.sp-media-frame,
.sp-card figure,
.wp-block-image.is-style-arco,
.wp-block-image.is-style-cornice {
	overflow: hidden;
	position: relative;
}

.sp-media-arch img,
.sp-media-round img,
.sp-media-frame img,
.sp-card figure img,
.wp-block-image.is-style-arco img,
.wp-block-image.is-style-cornice img {
	transition: transform 1.2s var( --sp-ease );
}

.sp-media-arch:hover img,
.sp-media-round:hover img,
.sp-media-frame:hover img,
.sp-card:hover figure img,
.wp-block-image.is-style-arco:hover img,
.wp-block-image.is-style-cornice:hover img {
	transform: scale( 1.04 );
}

/* Arco morbido in alto. */
.sp-media-arch,
.sp-media-arch img,
.wp-block-image.is-style-arco img {
	border-radius: 50% 50% var( --sp-r-m ) var( --sp-r-m ) / 34% 34% var( --sp-r-m ) var( --sp-r-m );
}

/* Angoli molto arrotondati. */
.sp-media-round,
.sp-media-round img {
	border-radius: var( --sp-r-xl );
}

/* Cornice offset color terracotta. */
.sp-media-frame {
	overflow: visible;
}

.sp-media-frame img {
	border-radius: var( --sp-r-m );
	position: relative;
	z-index: 1;
}

.sp-media-frame::after,
.wp-block-image.is-style-cornice::after {
	border: 1px solid var( --sp-c-accent );
	border-radius: var( --sp-r-m );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translate( 16px, 16px );
	transition: transform var( --sp-dur ) var( --sp-ease );
	z-index: 0;
}

.sp-media-frame:hover::after,
.wp-block-image.is-style-cornice:hover::after {
	transform: translate( 10px, 10px );
}

.wp-block-image.is-style-cornice {
	overflow: visible;
}

figcaption,
.wp-element-caption {
	color: var( --sp-c-muted );
	font-size: var( --sp-t-piccolo );
	margin-top: 0.7rem;
	text-align: left;
}

/* ==========================================================================
   11. MARQUEE
   Il JS duplica il contenuto dentro .sp-marquee__track. Se GSAP non e'
   disponibile l'animazione CSS qui sotto garantisce comunque lo
   scorrimento.
   ========================================================================== */

.sp-marquee,
.sp-anim-marquee {
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	overflow: hidden;
	position: relative;
	width: 100%;
}

.sp-marquee__track,
.sp-marquee > .wp-block-group__inner-container {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: clamp( 2rem, 5vw, 4.5rem );
	white-space: nowrap;
	width: max-content;
}

.sp-marquee__track {
	animation: sp-scroll 34s linear infinite;
}

.sp-marquee:hover .sp-marquee__track {
	animation-play-state: paused;
}

/*
 * Con il JavaScript attivo la striscia la muove GSAP (animations.js): duplica
 * i figli e anima xPercent. L'animazione CSS qui sopra resta solo come
 * ripiego senza JS, altrimenti sovrascriverebbe la transform inline di GSAP.
 */
html.sp-js .sp-marquee__track {
	animation: none;
}

.sp-marquee__track > *,
.sp-marquee > .wp-block-group__inner-container > * {
	align-items: center;
	color: var( --sp-c-muted );
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var( --sp-f-display );
	font-size: var( --sp-t-grande );
	font-weight: 400;
	gap: clamp( 2rem, 5vw, 4.5rem );
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}

.sp-marquee__track > *::after,
.sp-marquee > .wp-block-group__inner-container > *::after {
	background-color: var( --sp-c-accent );
	border-radius: 50%;
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	height: 7px;
	opacity: 0.85;
	width: 7px;
}

@keyframes sp-scroll {

	from {
		transform: translate3d( 0, 0, 0 );
	}

	to {
		transform: translate3d( -50%, 0, 0 );
	}
}

/* ==========================================================================
   12. NUMERI E CONTATORI
   ========================================================================== */

.sp-numero {
	color: var( --sp-c-primary );
	display: block;
	font-family: var( --sp-f-display );
	font-size: var( --sp-t-display );
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 0.9;
	margin: 0 0 0.4rem;
}

/* Su fondo scuro il numero deve essere chiaro: senza questa eccezione
   .sp-numero resta del colore del marchio e su una sezione con sfondo
   "primary" risulta invisibile perche' identico allo sfondo. */
.has-primary-background-color .sp-numero,
.has-contrast-background-color .sp-numero,
.sp-card--dark .sp-numero,
.sp-cta .sp-numero,
.sp-footer .sp-numero {
	color: var( --sp-c-base );
}

.sp-numero + p,
.sp-numero + .sp-numero__label {
	color: var( --sp-c-muted );
	font-size: var( --sp-t-piccolo );
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

/* Su fondo scuro il grigio salvia dell'etichetta scende a 2:1 di contrasto,
   sotto il minimo WCAG AA di 4.5:1. La salvia chiara arriva a 7.4:1. */
.has-primary-background-color .sp-numero + p,
.has-contrast-background-color .sp-numero + p,
.sp-card--dark .sp-numero + p,
.sp-cta .sp-numero + p,
.sp-footer .sp-numero + p,
.has-primary-background-color .sp-numero + .sp-numero__label,
.has-contrast-background-color .sp-numero + .sp-numero__label,
.sp-card--dark .sp-numero + .sp-numero__label {
	color: var( --sp-c-primary-soft );
}

/* ==========================================================================
   13. FAQ E ACCORDION (core/details)
   ========================================================================== */

.sp-faq {
	border-top: 1px solid var( --sp-c-line );
	margin-inline: auto;
	max-width: 820px;
	width: 100%;
}

.sp-faq .wp-block-details,
.sp-faq details {
	border-bottom: 1px solid var( --sp-c-line );
	padding-block: clamp( 1.1rem, 2vw, 1.6rem );
}

.sp-faq summary,
.wp-block-details summary {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-family: var( --sp-f-display );
	font-size: var( --sp-t-grande );
	font-weight: 450;
	gap: var( --sp-s-s );
	justify-content: space-between;
	letter-spacing: -0.02em;
	line-height: 1.2;
	list-style: none;
	padding-right: 0.25rem;
	transition: color var( --sp-dur-fast ) var( --sp-ease );
}

.sp-faq summary::-webkit-details-marker,
.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.sp-faq summary::marker,
.wp-block-details summary::marker {
	content: "";
}

.sp-faq summary:hover,
.wp-block-details summary:hover {
	color: var( --sp-c-primary );
}

/* Il "+" che ruota a 45 gradi diventando una croce. */
.sp-faq summary::after,
.wp-block-details summary::after {
	align-items: center;
	border: 1px solid var( --sp-c-line );
	border-radius: 50%;
	color: var( --sp-c-primary );
	content: "+";
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var( --sp-f-corpo );
	font-size: 1.3rem;
	font-weight: 400;
	height: 38px;
	justify-content: center;
	line-height: 1;
	margin-top: 0.1em;
	transition:
		background-color var( --sp-dur ) var( --sp-ease ),
		border-color var( --sp-dur ) var( --sp-ease ),
		transform var( --sp-dur ) var( --sp-ease );
	width: 38px;
}

.sp-faq details[open] summary::after,
.wp-block-details[open] summary::after {
	background-color: var( --sp-c-primary-soft );
	border-color: transparent;
	transform: rotate( 45deg );
}

.sp-faq .wp-block-details__content,
.wp-block-details > :not( summary ) {
	color: var( --sp-c-muted );
	max-width: 68ch;
	padding-top: var( --sp-s-s );
}

html.sp-js:not( .sp-reduced ) .wp-block-details[open] > :not( summary ),
html.sp-js:not( .sp-reduced ) .sp-faq details[open] > :not( summary ) {
	animation: sp-details-in 0.45s var( --sp-ease ) both;
}

@keyframes sp-details-in {

	from {
		opacity: 0;
		transform: translate3d( 0, -8px, 0 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   14. BADGE, CONTATTI E UTILITY VARIE
   ========================================================================== */

.sp-badge {
	background-color: var( --sp-c-sand );
	border-radius: var( --sp-r-pill );
	color: var( --sp-c-contrast );
	display: inline-block;
	font-family: var( --sp-f-corpo );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 0.5rem 0.9rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.sp-badge + .sp-badge {
	margin-left: 0.4rem;
}

.sp-contatti {
	display: grid;
	gap: var( --sp-s-s );
}

.sp-contatti p {
	margin: 0;
}

.sp-contatti dt,
.sp-contatti .sp-contatti__etichetta {
	color: var( --sp-c-muted );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}

.sp-contatti dd,
.sp-contatti .sp-contatti__valore {
	font-family: var( --sp-f-display );
	font-size: var( --sp-t-medio );
	letter-spacing: -0.015em;
	margin: 0;
}

.sp-contatti a {
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	text-decoration: none;
	transition:
		background-size 0.35s var( --sp-ease ),
		color 0.35s var( --sp-ease );
}

.sp-contatti a:hover {
	background-size: 0% 1px;
	color: var( --sp-c-primary );
}

.sp-hidden-mobile {
	display: revert;
}

.sp-hidden-desktop {
	display: none;
}

/* ==========================================================================
   15. STILI DI BLOCCO REGISTRATI DAL TEMA
   ========================================================================== */

/* Bottoni: base comune ---------------------------------------------------- */

.wp-block-button__link {
	border-radius: var( --sp-r-pill );
	font-family: var( --sp-f-corpo );
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: 1rem 1.75rem;
	text-decoration: none;
	transition:
		background-color var( --sp-dur-fast ) var( --sp-ease ),
		border-color var( --sp-dur-fast ) var( --sp-ease ),
		box-shadow var( --sp-dur-fast ) var( --sp-ease ),
		color var( --sp-dur-fast ) var( --sp-ease ),
		transform var( --sp-dur-fast ) var( --sp-ease );
}

.wp-block-button:not( .is-style-outline ) .wp-block-button__link:not( .has-background ) {
	background-color: var( --sp-c-primary );
	color: var( --sp-c-base );
}

.wp-block-button .wp-block-button__link:hover {
	box-shadow: var( --sp-shadow-m );
	transform: translateY( -1px );
}

.wp-block-button:not( .is-style-outline ):not( .is-style-ghost ) .wp-block-button__link:not( .has-background ):hover {
	background-color: var( --sp-c-primary-dark );
	color: var( --sp-c-base );
}

/* is-style-ghost: contorno sottile che si riempie all'hover -------------- */

/* Le classi colore dei preset di WordPress (has-*-background-color,
   has-*-color) sono dichiarate con !important: senza !important anche qui,
   le varianti di bottone verrebbero riempite del colore del preset e
   perderebbero il loro aspetto. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent !important;
	border: 1px solid var( --sp-c-primary );
	color: var( --sp-c-primary ) !important;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible {
	background-color: var( --sp-c-primary ) !important;
	border-color: var( --sp-c-primary );
	color: var( --sp-c-base ) !important;
}

/* Sul fondo scuro il ghost diventa chiaro. */
.has-primary-background-color .wp-block-button.is-style-ghost .wp-block-button__link,
.sp-card--dark .wp-block-button.is-style-ghost .wp-block-button__link,
.sp-hero .wp-block-button.is-style-ghost .wp-block-button__link,
.sp-footer .wp-block-button.is-style-ghost .wp-block-button__link,
.sp-hero .wp-block-button.is-style-ghost .wp-block-button__link,
.sp-cta .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var( --sp-c-base ) !important;
}

.sp-footer .wp-block-button.is-style-ghost .wp-block-button__link {
	border-color: var( --sp-c-light-70 );
	color: var( --sp-c-base );
}

.has-primary-background-color .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.sp-card--dark .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.sp-hero .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.sp-footer .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: var( --sp-c-base );
	border-color: var( --sp-c-base );
	color: var( --sp-c-primary );
}

/* is-style-freccia: link testuale con freccia che scivola --------------- */

.wp-block-button.is-style-freccia .wp-block-button__link {
	align-items: center;
	background-color: transparent !important;
	border: 0;
	color: var( --sp-c-primary ) !important;
	display: inline-flex;
	gap: 0.6rem;
	padding: 0.35rem 0;
}

.wp-block-button.is-style-freccia .wp-block-button__link::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	height: 1.05em;
	-webkit-mask: var( --sp-icon-freccia ) center / contain no-repeat;
	mask: var( --sp-icon-freccia ) center / contain no-repeat;
	transition: transform var( --sp-dur-fast ) var( --sp-ease );
	width: 1.05em;
}

.wp-block-button.is-style-freccia .wp-block-button__link:hover {
	box-shadow: none;
	color: var( --sp-c-accent );
	transform: none;
}

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

/* is-style-arco e is-style-cornice: gia' definiti nella sezione 10 ------ */

.wp-block-image.is-style-arco figcaption {
	text-align: center;
}

/* is-style-sottolineato: pennellata sfumata dietro le parole enfatizzate -
   Uso previsto nei pattern: racchiudere in <em> le parole da evidenziare.
   Se il titolo non contiene enfasi, la pennellata viene disegnata
   comunque sotto la prima riga tramite ::after. */

.is-style-sottolineato {
	--sp-brush: linear-gradient( 180deg, transparent 58%, rgba( 192, 132, 87, 0.32 ) 58%, rgba( 192, 132, 87, 0.32 ) 92%, transparent 92% );
	position: relative;
}

.is-style-sottolineato em,
.is-style-sottolineato mark,
.is-style-sottolineato strong {
	background-color: transparent;
	background-image: var( --sp-brush );
	background-position: 0 0.06em;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: inherit;
	font-style: normal;
	font-weight: inherit;
	padding-inline: 0.06em;
}

.is-style-sottolineato:not( :has( em, mark, strong ) )::after {
	background-image: linear-gradient( 90deg, transparent, var( --sp-c-accent ) 12%, var( --sp-c-accent ) 88%, transparent );
	border-radius: var( --sp-r-pill );
	content: "";
	display: block;
	height: 3px;
	margin-top: 0.35em;
	opacity: 0.55;
	width: clamp( 90px, 22%, 200px );
}

/* is-style-scheda: gruppo con aspetto di card --------------------------- */

.wp-block-group.is-style-scheda {
	background-color: var( --sp-c-surface );
	border: 1px solid var( --sp-c-line );
	border-radius: var( --sp-r-l );
	height: 100%;
	padding: var( --sp-s-m );
	transition:
		box-shadow var( --sp-dur ) var( --sp-ease ),
		transform var( --sp-dur ) var( --sp-ease );
}

.wp-block-group.is-style-scheda:hover {
	box-shadow: var( --sp-shadow-m );
	transform: translateY( -4px );
}

/* is-style-spunte: elenco con spunta al posto del pallino --------------- */

.wp-block-list.is-style-spunte,
ul.is-style-spunte {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.wp-block-list.is-style-spunte li,
ul.is-style-spunte li {
	padding-left: 2rem;
	position: relative;
}

.wp-block-list.is-style-spunte li + li,
ul.is-style-spunte li + li {
	margin-top: 0.65rem;
}

.wp-block-list.is-style-spunte li::before,
ul.is-style-spunte li::before {
	background-color: var( --sp-c-primary );
	content: "";
	height: 1.05em;
	left: 0;
	-webkit-mask: var( --sp-icon-spunta ) center / contain no-repeat;
	mask: var( --sp-icon-spunta ) center / contain no-repeat;
	position: absolute;
	top: 0.28em;
	width: 1.05em;
}

.sp-card--dark .wp-block-list.is-style-spunte li::before,
.sp-footer .wp-block-list.is-style-spunte li::before {
	background-color: var( --sp-c-sand );
}

/* is-style-grande: citazione ampia in font display ---------------------- */

.wp-block-quote.is-style-grande {
	border: 0;
	margin-inline: auto;
	max-width: 22ch;
	padding: 0;
}

.wp-block-quote.is-style-grande p {
	font-family: var( --sp-f-display );
	font-size: var( --sp-t-xl );
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.14;
	margin-block: 0 var( --sp-s-s );
	text-wrap: balance;
}

.wp-block-quote.is-style-grande cite {
	color: var( --sp-c-muted );
	display: block;
	font-family: var( --sp-f-corpo );
	font-size: 0.8rem;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ==========================================================================
   16. BLOCCHI CORE USATI NEI PATTERN
   ========================================================================== */

/* Colonne ---------------------------------------------------------------- */

.wp-block-columns {
	gap: var( --sp-s-m );
}

.wp-block-columns.is-not-stacked-on-mobile {
	gap: var( --sp-s-s );
}

/* Bottoni ---------------------------------------------------------------- */

.wp-block-buttons {
	gap: 0.75rem;
}

/* Separatore ------------------------------------------------------------- */

.wp-block-separator {
	background-color: transparent;
	border: 0;
	border-top: 1px solid var( --sp-c-line );
	margin-block: var( --sp-s-l );
	opacity: 1;
	width: 100%;
}

.wp-block-separator.is-style-dots {
	border: 0;
	color: var( --sp-c-accent );
}

/* Social links ----------------------------------------------------------- */

.wp-block-social-links .wp-social-link {
	transition: transform var( --sp-dur-fast ) var( --sp-ease );
}

.wp-block-social-links .wp-social-link:hover {
	transform: translateY( -2px );
}

.wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var( --sp-c-muted );
}

.sp-footer .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var( --sp-c-light-85 );
}

/* Immagini a piena larghezza --------------------------------------------- */

.wp-block-image.alignfull img,
.wp-block-cover.alignfull {
	border-radius: 0;
}

/* Cover ------------------------------------------------------------------ */

.wp-block-cover {
	border-radius: var( --sp-r-l );
	overflow: hidden;
}

.wp-block-cover.alignfull {
	border-radius: 0;
}

.wp-block-cover .wp-block-cover__inner-container {
	max-width: var( --sp-w-wide );
}

/* Query loop (blog disattivato, ma il markup resta valido) --------------- */

.wp-block-query .wp-block-post-template {
	gap: var( --sp-s-m );
}

.wp-block-post-title {
	font-size: var( --sp-t-grande );
	margin-block: 0 0.5rem;
}

.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var( --sp-c-primary );
}

.wp-block-post-excerpt__excerpt {
	color: var( --sp-c-muted );
}

.wp-block-post-featured-image img {
	border-radius: var( --sp-r-m );
}

.wp-block-query-pagination {
	font-size: var( --sp-t-piccolo );
	letter-spacing: 0.08em;
	margin-top: var( --sp-s-l );
	text-transform: uppercase;
}

/* Ricerca ---------------------------------------------------------------- */

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
	background-color: var( --sp-c-surface );
	border: 1px solid var( --sp-c-line );
	border-radius: var( --sp-r-s );
	color: var( --sp-c-contrast );
	font-family: var( --sp-f-corpo );
	font-size: var( --sp-t-base );
	padding: 0.8rem 1rem;
	transition:
		border-color var( --sp-dur-fast ) var( --sp-ease ),
		box-shadow var( --sp-dur-fast ) var( --sp-ease );
	width: 100%;
}

.wp-block-search__input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	border-color: var( --sp-c-primary );
	box-shadow: 0 0 0 3px rgba( 47, 79, 67, 0.12 );
	outline: none;
}

.wp-block-search__button {
	background-color: var( --sp-c-primary );
	border: 0;
	border-radius: var( --sp-r-s );
	color: var( --sp-c-base );
	font-family: var( --sp-f-corpo );
	font-weight: 600;
	padding: 0.8rem 1.3rem;
}

/* Tabelle ---------------------------------------------------------------- */

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

.wp-block-table td,
.wp-block-table th {
	border-bottom: 1px solid var( --sp-c-line );
	padding: 0.85rem 0.75rem;
	text-align: left;
}

.wp-block-table th {
	font-family: var( --sp-f-corpo );
	font-size: var( --sp-t-piccolo );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Il blocco tabella non deve mai sfondare il layout su mobile. */
.wp-block-table {
	overflow-x: auto;
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

/* Dentro la scheda scura tutto il testo diventa chiaro: il badge, che ha
   fondo sabbia, deve tornare scuro per restare leggibile. */
.sp-card--dark .sp-badge {
	background-color: var( --sp-c-base );
	color: var( --sp-c-contrast );
}

/* Due sezioni colorate consecutive devono combaciare: lo stacco standard
   fra blocchi lascerebbe in mezzo una striscia del fondo pagina. */
.wp-block-post-content > .has-background + .has-background,
.entry-content > .has-background + .has-background {
	margin-block-start: 0 !important;
}

/* Il piede segue subito il contenuto: lo stacco standard fra blocchi
   lascerebbe una striscia di fondo pagina fra la sezione finale e il piede. */
.wp-site-blocks > .sp-footer {
	margin-block-start: 0 !important;
}

.sp-footer {
	background-color: var( --sp-c-primary );
	color: var( --sp-c-base );
	padding-block: var( --sp-s-xl ) var( --sp-s-l );
}

.sp-footer > .wp-block-group__inner-container,
.sp-footer .sp-footer__inner {
	margin-inline: auto;
	max-width: var( --sp-w-wide );
	padding-inline: var( --sp-gutter );
}

.sp-footer h2,
.sp-footer h3,
.sp-footer h4,
.sp-footer .wp-block-site-title {
	color: #ffffff;
}

.sp-footer .wp-block-site-title {
	font-size: clamp( 1.6rem, 1.2rem + 1.6vw, 2.4rem );
	font-weight: 450;
}

.sp-footer p,
.sp-footer li,
.sp-footer address {
	color: var( --sp-c-base );
	font-style: normal;
	opacity: 0.85;
}

.sp-footer .sp-eyebrow {
	color: var( --sp-c-light-70 );
	opacity: 1;
}

.sp-footer a {
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	color: inherit;
	padding-bottom: 2px;
	text-decoration: none;
	transition: background-size 0.35s var( --sp-ease );
}

.sp-footer a:hover,
.sp-footer a:focus-visible {
	background-size: 100% 1px;
	color: var( --sp-c-sand );
}

.sp-footer .wp-block-separator,
.sp-footer hr {
	border-top-color: var( --sp-c-light-24 );
	margin-block: var( --sp-s-m );
	opacity: 0.4;
}

.sp-footer .wp-block-navigation {
	font-size: 0.95rem;
}

.sp-footer .wp-block-navigation .wp-block-navigation__container {
	gap: 0.9rem;
}

/*
 * Elenchi di collegamenti nelle colonne del piede: niente pallini, niente
 * rientro. Il pattern usa sp-footer__link, la parte modello sp-footer__menu.
 */
.sp-footer__link,
.sp-footer__menu {
	display: grid;
	gap: 0.55rem;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.sp-footer__link li,
.sp-footer__menu li {
	margin: 0;
}

.sp-footer__nota,
.sp-footer .sp-footer__nota p {
	font-size: var( --sp-t-piccolo );
	letter-spacing: 0.02em;
	opacity: 0.65;
}

.sp-footer :focus-visible {
	outline-color: var( --sp-c-sand );
}

/* ==========================================================================
   18. RESPONSIVE
   Breakpoint: 1200px, 900px, 782px, 600px.
   ========================================================================== */

@media ( max-width: 1200px ) {

	:root {
		--sp-header-h: 104px;
		--sp-header-h-small: 80px;
		--sp-logo-h: 80px;
		--sp-logo-h-small: 56px;
	}

	.sp-hero__inner > * {
		max-width: 24ch;
	}

	.sp-media-frame::after,
	.wp-block-image.is-style-cornice::after {
		transform: translate( 12px, 12px );
	}
}

@media ( max-width: 900px ) {

	.sp-section {
		padding-block: var( --sp-s-xl );
	}

	.sp-section--tight {
		padding-block: var( --sp-s-l );
	}

	.sp-hero {
		min-height: 92svh;
	}

	.sp-hero h1,
	.sp-hero .wp-block-heading {
		font-size: var( --sp-t-xxl );
	}

	.sp-hero__inner > * {
		max-width: none;
	}

	.sp-hero p {
		font-size: var( --sp-t-base );
	}

	.sp-marquee__track > *,
	.sp-marquee > .wp-block-group__inner-container > * {
		font-size: var( --sp-t-medio );
	}

	.sp-faq summary,
	.wp-block-details summary {
		font-size: var( --sp-t-medio );
	}

	.sp-numero {
		font-size: var( --sp-t-xxl );
	}

	.wp-block-quote.is-style-grande {
		max-width: 28ch;
	}
}

@media ( max-width: 782px ) {

	:root {
		--sp-header-h: 92px;
		--sp-header-h-small: 76px;
		--sp-logo-h: 68px;
		--sp-logo-h-small: 52px;
	}

	.sp-footer .sp-footer__logo img {
		height: 88px;
	}

	/* Le colonne si impilano: serve uno spazio verticale piu' generoso. */
	.wp-block-columns:not( .is-not-stacked-on-mobile ) {
		gap: var( --sp-s-m );
	}

	.wp-block-columns:not( .is-not-stacked-on-mobile ) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.sp-card {
		padding: var( --sp-s-s );
	}

	/* Come sopra: niente margini negativi, l'immagine resta rientrata
	   quanto i lati anche sugli schermi piccoli. */
	.sp-card figure,
	.sp-card .wp-block-image {
		margin: 0;
	}

	.sp-card:hover {
		box-shadow: var( --sp-shadow-s );
		transform: none;
	}

	.sp-header__cta,
	.sp-header__cta .wp-block-button__link {
		font-size: 0.85rem;
		padding: 0.7rem 1.15rem;
	}

	.sp-hidden-mobile {
		display: none !important;
	}

	.sp-hidden-desktop {
		display: revert;
	}

	.sp-media-frame::after,
	.wp-block-image.is-style-cornice::after {
		transform: translate( 8px, 8px );
	}

	.sp-footer {
		padding-block: var( --sp-s-l ) var( --sp-s-m );
	}

	.sp-faq summary::after,
	.wp-block-details summary::after {
		height: 32px;
		width: 32px;
	}
}

@media ( max-width: 600px ) {

	body {
		line-height: 1.6;
	}

	.sp-hero {
		min-height: 92svh;
	}

	.sp-hero h1,
	.sp-hero .wp-block-heading {
		font-size: clamp( 2.3rem, 10vw, 3rem );
		letter-spacing: -0.02em;
	}

	.sp-hero__inner {
		padding-bottom: clamp( 4rem, 14vh, 6rem );
	}

	.sp-hero__scroll {
		display: none;
	}

	.sp-eyebrow {
		font-size: 0.72rem;
		letter-spacing: 0.16em;
	}

	.sp-lead {
		font-size: var( --sp-t-base );
	}

	.sp-section h2 {
		font-size: var( --sp-t-xl );
	}

	.sp-numero {
		font-size: var( --sp-t-xl );
	}

	.wp-block-button__link {
		padding: 0.9rem 1.4rem;
		width: 100%;
	}

	.wp-block-buttons {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-button.is-style-freccia .wp-block-button__link {
		width: auto;
	}

	.sp-marquee__track {
		animation-duration: 24s;
	}

	.sp-media-round,
	.sp-media-round img {
		border-radius: var( --sp-r-l );
	}
}

/* ==========================================================================
   19. STAMPA
   ========================================================================== */

@media print {

	*,
	*::before,
	*::after {
		animation: none !important;
		background: transparent !important;
		box-shadow: none !important;
		color: #000000 !important;
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	body {
		font-size: 11pt;
		line-height: 1.45;
	}

	.sp-header,
	.sp-hero__scroll,
	.sp-marquee,
	.wp-block-navigation,
	.wp-block-search,
	.wp-block-social-links,
	.wp-block-buttons {
		display: none !important;
	}

	.sp-section,
	.sp-section--tight {
		padding-block: 1.2cm;
	}

	.sp-card,
	.wp-block-group.is-style-scheda {
		border: 1px solid #cccccc !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.sp-hero {
		margin-top: 0;
		min-height: 0;
	}

	a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	h1,
	h2,
	h3 {
		break-after: avoid;
		page-break-after: avoid;
	}

	img {
		max-height: 9cm;
	}
}

/* ==========================================================================
   20. ACCESSIBILITA'
   ========================================================================== */

:focus-visible {
	outline: 2px solid var( --sp-c-primary );
	outline-offset: 3px;
	border-radius: 2px;
}

.sp-hero :focus-visible {
	outline-color: var( --sp-c-base );
}

/* Nessun focus ring "fantasma" sul click del mouse. */
:focus:not( :focus-visible ) {
	outline: none;
}

/* Link di salto al contenuto fornito da WordPress. */
.skip-link.screen-reader-text {
	background-color: var( --sp-c-surface );
	border-radius: var( --sp-r-s );
	box-shadow: var( --sp-shadow-m );
	color: var( --sp-c-primary );
	font-family: var( --sp-f-corpo );
	font-weight: 600;
	left: 1rem;
	padding: 0.85rem 1.25rem;
	top: 1rem;
	z-index: 1000;
}

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

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	margin: 0;
	position: fixed;
	width: auto;
}

/* Aree cliccabili sempre di dimensione confortevole al tocco. */
@media ( pointer: coarse ) {

	.sp-nav .wp-block-navigation-item__content,
	.sp-footer a,
	.sp-contatti a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Contrasto elevato: rafforza bordi e separatori. */
@media ( prefers-contrast: more ) {

	.sp-card,
	.wp-block-group.is-style-scheda,
	.wp-block-search__input,
	input,
	select,
	textarea {
		border-color: var( --sp-c-muted );
	}

	.sp-lead,
	.sp-card p,
	.sp-eyebrow {
		color: var( --sp-c-contrast );
	}
}