/* Override puntuali del progetto. Prima prova sempre a risolvere con i token (tokens-child.css):
   qui solo ciò che i token non possono esprimere. Il child parte dopo i CSS dei blocchi, quindi a parità di specificità vince. */

/* ============================================================
   HEADER — logo centrale, voci a sinistra e a destra (header.php + custom/header.php)
   Varianti decise dalla pagina tramite classi sul body:
   .has-header-overlay (home: trasparente sopra l'immagine) · .has-header-salvia (Servizi, Contatti) · di default nero.
   Il parent lo rende sticky e con bordo: il design è editoriale, quindi qui scorre con la pagina e non ha linee.
   ============================================================ */

.site-header {
	--logo-h: clamp(3.5rem, 6vw, 6.5rem);
	position: relative;
	background: var(--color-bg);
	border-bottom: 0;
	padding-block: var(--space-md);
}
.site-header__inner { position: relative; min-height: 0; }
.site-header__logo img { height: var(--logo-h); width: auto; max-height: none; }

/* voci di menu: piccole e leggere; l'hover è una sottolineatura (nessun cambio di colore) */
.site-header .nav-menu { gap: var(--space-lg); }
.site-header .nav-menu a {
	color: var(--color-ink);
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	text-decoration: none;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 1px;
}
.site-header .nav-menu a:hover,
.site-header .nav-menu .current-menu-item > a { color: var(--color-ink); text-decoration: underline; }

.nav-toggle { color: var(--color-ink); border-color: currentColor; font-size: var(--text-sm); letter-spacing: 0.04em; }

/* Varianti */
.has-header-salvia .site-header { background: var(--color-accent); }
.has-header-salvia .site-header :focus-visible { outline-color: var(--color-on-accent); }

.has-header-overlay .site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 70%, transparent), transparent);
}

/* Desktop: il logo sta al centro, i due menu si dividono i lati */
@media (min-width: 62.0625rem) {
	.site-header__logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	.site-header .site-nav { display: flex; justify-content: space-between; align-items: center; width: 100%; }
	.site-header .nav-toggle { display: none; }
}

/* Desktop: la sottolineatura delle voci scorre da sinistra (solo transform): entra da sinistra, esce a destra */
@media (min-width: 62.0625rem) {
	.site-header .nav-menu a { position: relative; text-decoration: none; }
	.site-header .nav-menu a::after {
		content: "";
		position: absolute;
		inset: auto 0 0.15em 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.6s var(--ease-out);
	}
	.site-header .nav-menu a:is(:hover, :focus-visible)::after,
	.site-header .nav-menu .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
	.site-header .nav-menu a:hover,
	.site-header .nav-menu .current-menu-item > a { text-decoration: none; }

	/* ── Sottomenu (es. Servizi → Hotellerie, Weddings…) ──
	   1) Si apre solo col mouse sopra o con la tastiera (focus visibile). Il parent lo teneva aperto anche per un semplice clic (:focus-within):
	      il pannello restava lì dopo l'uscita del mouse e, rientrando, era già aperto e non animava.
	   2) Apertura più curata: il pannello scende e si dissolve, le voci entrano una dopo l'altra (solo transform e opacità).
	      Da chiuso la visibilità cambia dopo la dissolvenza, così l'uscita non è mai a scatto. */
	.site-header .nav-menu .sub-menu {
		background: var(--color-bg);
		transform: translateY(-10px);
		transition: opacity 0.35s var(--ease), transform 0.5s var(--ease-out), visibility 0s linear 0.35s;
	}
	.has-header-salvia .site-header .nav-menu .sub-menu { background: var(--color-dark); }
	/* aperto: solo hover o tastiera */
	.site-header .nav-menu li:hover > .sub-menu,
	.site-header .nav-menu li:has(:focus-visible) > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out), visibility 0s;
	}
	/* focus arrivato col mouse (clic): non basta a tenerlo aperto */
	.site-header .nav-menu li:focus-within:not(:hover):not(:has(:focus-visible)) > .sub-menu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
	}
	/* Esc: il parent mette is-closed e il pannello deve chiudersi anche con il focus ancora dentro (contenuto dismissibile) */
	.site-header .nav-menu li.menu-item-has-children.is-closed > .sub-menu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
	}
	.site-header .nav-menu .sub-menu > li { opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
	.site-header .nav-menu li:hover > .sub-menu > li,
	.site-header .nav-menu li:has(:focus-visible) > .sub-menu > li {
		opacity: 1;
		transform: none;
		transition: opacity 0.6s var(--ease) calc(0.08s + var(--n, 0) * 0.06s), transform 0.8s var(--ease-out) calc(0.08s + var(--n, 0) * 0.06s);
	}
	.site-header .nav-menu .sub-menu > li:nth-child(1) { --n: 0; }
	.site-header .nav-menu .sub-menu > li:nth-child(2) { --n: 1; }
	.site-header .nav-menu .sub-menu > li:nth-child(3) { --n: 2; }
	.site-header .nav-menu .sub-menu > li:nth-child(4) { --n: 3; }
	.site-header .nav-menu .sub-menu > li:nth-child(5) { --n: 4; }
	.site-header .nav-menu .sub-menu > li:nth-child(6) { --n: 5; }
	/* le voci del sottomenu che puntano a ancore della stessa pagina sono tutte "pagina corrente" per WordPress: la sottolineatura
	   resta spenta e compare solo al passaggio, come per le altre voci */
	.site-header .nav-menu .sub-menu .current-menu-item > a::after { transform: scaleX(0); transform-origin: right; }
	.site-header .nav-menu .sub-menu li > a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; }
}
@media (min-width: 62.0625rem) and (prefers-reduced-motion: reduce) {
	.site-header .nav-menu .sub-menu,
	.site-header .nav-menu .sub-menu > li { transition: none !important; transform: none !important; }
}

/* ── MENU A SCHERMO INTERO (tablet e telefono) ──
   Hamburger a due linee → X. Si apre con due tendine che scendono (salvia, poi nero), le voci salgono una a una da dietro una
   maschera, i recapiti compaiono per ultimi. Solo transform e opacity. Si chiude al contrario (le tendine escono verso il basso).
   Il comportamento (scroll bloccato, resto della pagina inerte, Esc, focus) è in assets/js/main.js; qui solo l'aspetto. */
:root {
	--ease-io: cubic-bezier(0.76, 0, 0.24, 1);  /* partenza e arrivo morbidi: il movimento "da film" delle tendine */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* decelerazione lunga: le scritte si adagiano */
}
.nav-toggle__label--close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__label--open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__label--close { display: inline; }
.site-nav__info { display: none; }
.sub-toggle { display: none; } /* solo nel menu a schermo intero (tablet e telefono), vedi sotto */

@media (max-width: 62rem) {
	.site-header { --logo-h: 3.5rem; padding-block: var(--space-sm); }
	.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
	.site-header__logo { grid-column: 2; }

	/* hamburger: due linee sottili, la seconda più corta e allineata a destra; da aperto diventano una X */
	.site-header .nav-toggle {
		position: relative;
		z-index: 1001; /* sopra il menu a schermo intero: è lo stesso bottone che lo chiude */
		display: inline-flex;
		align-items: center;
		gap: 0.9rem;
		justify-self: start;
		padding: var(--space-xs) 0;
		border: 0;
		background: none;
		text-transform: uppercase;
		letter-spacing: 0.16em;
	}
	.nav-toggle__icon { position: relative; display: block; width: 1.75rem; height: 0.75rem; }
	.nav-toggle__icon i {
		position: absolute;
		top: 50%;
		right: 0;
		width: 100%;
		height: 1.5px;
		background: currentColor;
		transition: transform 0.7s var(--ease-io), width 0.5s var(--ease-out);
	}
	.nav-toggle__icon i:first-child { transform: translateY(-4px); }
	.nav-toggle__icon i:last-child { width: 60%; transform: translateY(2.5px); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:first-child { transform: translateY(-0.75px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:last-child { width: 100%; transform: translateY(-0.75px) rotate(-45deg); }
	/* se il menu si apre con la pagina già un po' scesa, il bottone resta dove lo si vede con la pagina in cima */
	.bobo-menu-open .site-header .nav-toggle { transform: translateY(var(--bobo-sy, 0px)); }

	/* il pannello: fisso a tutto schermo, invisibile da chiuso. Lo sfondo sono le due tendine (::before salvia, ::after nero) */
	.site-header .site-nav {
		counter-reset: bobo-nav;
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		max-height: none;
		padding: clamp(6rem, 20vh, 9rem) var(--space-md) var(--space-md);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: transparent;
		border: 0;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear 1.1s; /* resta visibile finché le tendine non sono uscite */
	}
	.site-header .site-nav.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

	.site-nav::before,
	.site-nav::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		transform: scaleY(0);
		transform-origin: bottom;
		transition: transform 0.8s var(--ease-io);
	}
	.site-nav::before { background: var(--color-accent); transition-delay: 0.12s; }
	.site-nav::after { background: var(--color-bg); }
	.site-nav.is-open::before,
	.site-nav.is-open::after { transform: scaleY(1); transform-origin: top; }
	.site-nav.is-open::before { transition-delay: 0s; }
	.site-nav.is-open::after { transition-delay: 0.14s; }

	/* le voci: grandi, leggere, numerate; ognuna sale da dietro la propria maschera (overflow nascosto) */
	.site-header .nav-menu { flex-direction: column; gap: 0; }
	.site-header .nav-menu--right { margin-bottom: var(--space-lg); }
	.site-header .nav-menu > li { overflow: hidden; padding-block: 0.03em 0.12em; }
	.site-header .nav-menu > li > a {
		display: flex;
		align-items: baseline;
		gap: 1.1rem;
		padding: 0;
		font-size: clamp(2.5rem, 11vw, 4.75rem);
		font-weight: 300;
		line-height: 1.1;
		letter-spacing: -0.01em;
		text-decoration: none;
		transform: translateY(110%);
		transition: transform 0.3s var(--ease), opacity 0.4s var(--ease), translate 0.6s var(--ease-out);
	}
	.site-nav.is-open .nav-menu > li > a {
		transform: none;
		transition: transform 1.1s var(--ease-out) calc(0.5s + var(--i, 0) * 0.075s), opacity 0.4s var(--ease), translate 0.6s var(--ease-out);
	}
	.site-header .nav-menu > li:not(.menu-item-language):not(.lang-item) { counter-increment: bobo-nav; }
	.site-header .nav-menu > li:not(.menu-item-language):not(.lang-item) > a::before {
		content: counter(bobo-nav, decimal-leading-zero);
		content: counter(bobo-nav, decimal-leading-zero) / ""; /* il numero è decorazione: gli screen reader leggono solo il nome della voce */
		min-width: 2.4em;
		color: var(--color-accent);
		font-size: var(--text-sm);
		letter-spacing: 0.16em;
	}
	.site-header .nav-menu > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-accent); }
	/* nel menu a schermo intero niente sottolineatura (il parent la mette su hover e sulla voce corrente) */
	.site-header .nav-menu > li > a:is(:hover, :focus-visible),
	.site-header .nav-menu > li:is(.current-menu-item, .current-menu-ancestor) > a { text-decoration: none; }
	/* l'anello di focus sta DENTRO la voce: la maschera (overflow nascosto) taglierebbe quello esterno */
	.site-header .nav-menu > li > a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
	/* selettore lingua (Polylang): piccolo, in fondo alla lista */
	.site-header .nav-menu > li:is(.menu-item-language, .lang-item) > a {
		margin-top: var(--space-sm);
		font-size: var(--text-sm);
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}
	/* Sottomenu: parte CHIUSO e si apre con la freccetta (main.js mette .is-sub-open sulla voce e --sub-h = altezza reale).
	   Il parent gli dava visibility: visible esplicito, che "bucava" il pannello nascosto e lo mostrava sopra la pagina a menu chiuso:
	   da chiuso è hidden, da aperto "inherit" (segue il pannello). */
	.site-header .nav-menu .sub-menu {
		grid-column: 1 / -1;
		padding: 0 0 0 3.5rem;
		overflow: hidden;
		max-height: 0;
		visibility: hidden;
		opacity: 0;
		transform: none;
		background: transparent;
		transition: max-height 0.7s var(--ease-io), opacity 0.35s var(--ease), visibility 0s linear 0.7s;
	}
	.site-header .nav-menu > li.is-sub-open > .sub-menu {
		max-height: var(--sub-h, 24rem);
		visibility: inherit;
		opacity: 1;
		padding-bottom: var(--space-xs);
		transition: max-height 0.8s var(--ease-io), opacity 0.7s var(--ease) 0.15s, visibility 0s;
	}
	.site-header .nav-menu .sub-menu a { padding: 0.25rem 0; font-size: var(--text-span); transform: none; text-decoration: none; } /* niente sottolineatura: sono tutte "pagina corrente" (ancore) */

	/* Voci con sottomenu: la "maschera" (overflow nascosto) è alta quanto voce + sottomenu, quindi la parola abbassata restava visibile sotto
	   la sua posizione. Per queste voci niente maschera: dissolvenza con una piccola salita. La freccetta entra insieme. */
	.site-header .nav-menu > li.menu-item-has-children { overflow: visible; display: grid; grid-template-columns: auto 1fr; align-items: center; }
	.site-header .nav-menu > li.menu-item-has-children > a { opacity: 0; transform: translateY(45%); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), translate 0.6s var(--ease-out); }
	.site-nav.is-open .nav-menu > li.menu-item-has-children > a {
		opacity: 1;
		transform: none;
		transition: transform 1.1s var(--ease-out) calc(0.5s + var(--i, 0) * 0.075s), opacity 0.9s var(--ease) calc(0.5s + var(--i, 0) * 0.075s), translate 0.6s var(--ease-out);
	}

	/* freccetta che apre il sottomenu (creata da main.js): bottone vero, area di tocco da 44 px */
	.site-header .sub-toggle {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-left: 0.5rem;
		padding: 0;
		background: none;
		border: 0;
		color: var(--color-ink);
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.3s var(--ease);
	}
	.site-nav.is-open .sub-toggle { opacity: 1; transition: opacity 0.9s var(--ease) calc(0.8s + var(--i, 0) * 0.075s); }
	.sub-toggle svg { width: 1.4rem; height: 1.4rem; transition: transform 0.6s var(--ease-out); }
	.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	.site-header .sub-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

	/* col mouse (tablet con puntatore): la voce sotto il cursore avanza, le altre si abbassano di tono */
	@media (hover: hover) {
		.site-header .nav-menu > li > a:hover { translate: 1rem 0; }
		.site-nav:has(.nav-menu > li > a:hover) .nav-menu > li > a:not(:hover) { opacity: 0.35; }
	}

	/* recapiti: linea che si disegna, poi il testo; ultimi ad arrivare */
	.site-header .site-nav__info {
		position: relative;
		display: grid;
		gap: var(--space-xs) var(--space-lg);
		margin-top: auto; /* i recapiti vanno in fondo; le due liste di voci restano attaccate (numerazione continua) */
		padding-top: var(--space-md);
		font-size: var(--text-sm);
		opacity: 0;
		transform: translateY(1rem);
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
	}
	.site-nav__info::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 1px;
		background: var(--color-line);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 1.2s var(--ease-io);
	}
	.site-nav__info address { font-style: normal; }
	.site-nav__info span, .site-nav__info a { display: block; }
	.site-nav__info p { margin: 0; }
	.site-nav__info a { color: var(--color-ink); text-decoration: none; }
	.site-nav__info a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
	/* WhatsApp: una riga sobria sotto telefono e mail, in salvia con sottolineatura sottile (a riposo) */
	.site-nav__info .site-nav__wa-riga { grid-column: 1 / -1; } /* in cima ai recapiti, sopra l'indirizzo, su tutta la larghezza */
	.site-nav__info .site-nav__wa { display: inline-block; color: var(--color-accent); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
	.site-nav__info .site-nav__wa::after { content: " \2197"; content: " \2197" / ""; text-decoration: none; display: inline-block; } /* freccia ↗ disegnata qui: decorativa, non letta dagli screen reader */
	.site-nav__info .site-nav__wa:hover { text-decoration: none; }
	.site-nav.is-open .site-nav__info {
		opacity: 1;
		transform: none;
		transition: opacity 0.9s var(--ease) 1.05s, transform 0.9s var(--ease-out) 1.05s;
	}
	.site-nav.is-open .site-nav__info::before { transform: scaleX(1); transition-delay: 0.95s; }

	/* scroll bloccato mentre il menu è aperto */
	.bobo-menu-open { overflow: hidden; }
}
@media (max-width: 62rem) and (min-width: 37.5rem) {
	.site-nav__info { grid-template-columns: 1fr 1fr; }
}

/* movimento ridotto: niente tendine né salite, il menu compare e scompare con una dissolvenza veloce */
@media (max-width: 62rem) and (prefers-reduced-motion: reduce) {
	.site-header .site-nav { transition-duration: 0s; transition-delay: 0.2s; }
	.site-header .site-nav.is-open { transition-delay: 0s; }
	.site-nav::before { display: none; }
	.site-nav::after { transform: none; opacity: 0; transition: opacity 0.2s linear; transition-delay: 0s; }
	.site-nav.is-open::after { opacity: 1; transition-delay: 0s; }
	.site-header .nav-menu > li > a,
	.site-nav.is-open .nav-menu > li > a { transform: none; transition: none; }
	.site-header .site-nav__info,
	.site-nav.is-open .site-nav__info { opacity: 1; transform: none; transition: none; }
	.site-nav__info::before,
	.site-nav.is-open .site-nav__info::before { transform: none; transition: none; }
	.nav-toggle__icon i { transition: none; }
	.site-header .nav-menu .sub-menu,
	.site-header .nav-menu > li.is-sub-open > .sub-menu,
	.site-header .nav-menu > li.menu-item-has-children > a,
	.site-nav.is-open .nav-menu > li.menu-item-has-children > a,
	.site-header .sub-toggle,
	.site-nav.is-open .sub-toggle { transition: none; }
	.site-header .nav-menu > li.menu-item-has-children > a,
	.site-header .sub-toggle { opacity: 1; transform: none; }
	.sub-toggle svg { transition: none; }
}

/* ============================================================
   FOOTER — sigillo + tre colonne (footer.php, dati in custom/footer.php)
   Il parent ha un footer a una colonna con il suo padding: qui lo riorganizziamo a griglia.
   ============================================================ */

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(0, 1.2fr));
	gap: var(--space-lg);
	align-items: start;
}
.site-footer__seal { width: clamp(5rem, 8vw, 8rem); height: auto; }

.site-footer__title {
	margin: 0 0 var(--space-md);
	color: var(--color-ink-muted);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.site-footer address { font-style: normal; }
.site-footer address span,
.site-footer p span { display: block; }
.site-footer p { margin: var(--space-sm) 0 0; }
.site-footer__hours { margin: 0; padding: 0; list-style: none; }
.site-footer__note { font-weight: 600; }

/* link: sottolineati come nel wireframe; hover = sparisce la sottolineatura */
.site-footer a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.site-footer a:hover { text-decoration: none; }
.site-footer__links { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.site-footer__links a { text-transform: uppercase; letter-spacing: 0.04em; }

/* riga in fondo: privacy, cookie e crediti, centrata (al centro perché l'icona WhatsApp fissa sta in basso a sinistra e coprirebbe dei link a sinistra) */
.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs) var(--space-lg);
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
	font-size: var(--text-sm);
	text-align: center;
}
.site-footer__bar ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-md); margin: 0; padding: 0; list-style: none; }
.site-footer__bar p { margin: 0; max-width: none; }

@media (max-width: 62rem) {
	.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__seal { grid-column: 1 / -1; }
}
@media (max-width: 37.5rem) {
	.site-footer__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } /* telefono: logo e testi centrati */
	.site-footer__seal { justify-self: center; }
}

/* ── BLOCCO: card-carta ──
   Banda con immagine + card "carta" che sporge sopra la banda. Il colore di fondo sotto la banda è quello della sezione
   (salvia di default, cambiabile dal controllo Colore del blocco: es. nero nelle pagine con la CTA).
   Selettori a bassa specificità: i controlli dell'editor (colori, spaziature) vincono sempre. */
.bobo-card-carta {
	background: var(--color-accent);
	color: var(--color-on-surface);
	padding-bottom: var(--space-xl);
}
.bobo-card-carta:not(.has-bg) { padding-top: var(--space-xl); }

.bobo-card-carta__bg {
	display: block;
	width: 100%;
	height: clamp(18rem, 38vw, 36rem);
	object-fit: cover;
}

.bobo-card-carta__card {
	position: relative;
	width: min(100% - 2 * var(--space-md), 85rem);
	margin-inline: auto;
	background: var(--color-surface) url('../img/carta.jpg') center / cover;
	border: 0.5rem solid var(--color-accent);
}
.bobo-card-carta.has-bg .bobo-card-carta__card { margin-top: calc(-1 * clamp(9rem, 18vw, 17rem)); }

/* sigillo: decorativo, quindi sfondo CSS (nessun testo alternativo da gestire) */
.bobo-card-carta.has-seal .bobo-card-carta__card::before {
	content: "";
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	width: clamp(5rem, 7vw, 7.5rem);
	aspect-ratio: 1;
	background: url('../img/logo-sigillo-verde.png') center / contain no-repeat;
}

.bobo-card-carta__inner { padding: clamp(7rem, 12vw, 10rem) var(--space-lg) var(--space-xl); }
.bobo-card-carta__inner > * { margin-block: 0; }
.bobo-card-carta__inner > * + * { margin-top: var(--space-sm); }
.bobo-card-carta__inner :where(h1, h2, h3, h4) { font-weight: 400; line-height: var(--leading-tight); }
.bobo-card-carta__inner :where(h2) { font-size: var(--text-h2); }

/* I paragrafi sono larghi quanto il titolo (non più tagliati a 68 caratteri dal tema di base). Come: l'area di testo prende la larghezza del suo
   contenuto "più largo", e i paragrafi non contano nel calcolo (width: 0) ma poi si allargano a tutta l'area (min-width: 100%). Il titolo decide,
   i paragrafi lo seguono; se il titolo va a capo, l'area si ferma alla larghezza disponibile. Un minimo evita colonne troppo strette
   quando il titolo è corto. Le carte "call to action" (.is-cta) sono centrate e restano come prima. */
.bobo-card-carta:not(.is-cta) .bobo-card-carta__inner { width: fit-content; max-width: 100%; min-width: min(100%, 44rem); }
.bobo-card-carta:not(.is-cta) .bobo-card-carta__inner p { width: 0; min-width: 100%; max-width: none; }

/* Link su carta: al passaggio una fascia salvia, tipo evidenziatore, si stende da sinistra sotto il testo (bordo destro inclinato come un tratto
   di pennarello); la sottolineatura sottile svanisce e il testo resta scuro (8:1 su salvia). Nei link con classe .bobo-link compare anche una
   freccia che scivola in fuori. Solo transform e opacità. Al posto del vecchio riquadro nero. */
.bobo-card-carta__inner a {
	position: relative;
	display: inline-block;
	isolation: isolate; /* la fascia (z-index negativo) resta dentro il link: sopra la carta, sotto il testo */
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.4s var(--ease);
}
.bobo-card-carta__inner a::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.3em;
	right: -0.3em;
	bottom: 0.04em;
	height: 0.62em;
	background: var(--color-accent);
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.35em) 100%, 0 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.7s var(--ease-out);
}
.bobo-card-carta__inner a:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.bobo-card-carta__inner a:is(:hover, :focus-visible) { text-decoration-color: transparent; }
.bobo-card-carta__inner .bobo-link a::after {
	content: "\2192";
	content: "\2192" / ""; /* freccia decorativa: gli screen reader non la leggono */
	position: absolute;
	top: 0;
	right: -1.5em;
	opacity: 0;
	transform: translateX(-0.5em);
	transition: opacity 0.4s var(--ease), transform 0.6s var(--ease-out);
}
.bobo-card-carta__inner .bobo-link a:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.bobo-card-carta__inner a, .bobo-card-carta__inner a::before, .bobo-card-carta__inner .bobo-link a::after { transition: none; }
}
.bobo-card-carta :focus-visible { outline-color: var(--color-on-surface); }

@media (min-width: 62.0625rem) {
	.bobo-card-carta__inner { padding-inline-start: 20%; }
}

/* ── BLOCCO: hero ──
   Apertura a tutta altezza: media di sfondo + velo + titolo (scritta del logo) + blocchi interni.
   Nella home l'header è trasparente e sta sopra questo blocco. Selettori a bassa specificità: i controlli dell'editor vincono. */
.bobo-hero {
	--bobo-overlay: var(--color-bg);
	--bobo-overlay-opacity: 0.35;
	position: relative;
	display: grid;
	min-height: 100vh;
	min-height: 100svh;
	place-items: center;
	overflow: hidden;
	color: var(--color-ink);
}

.bobo-hero__bg { position: absolute; inset: 0; }
.bobo-hero__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.bobo-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bobo-overlay);
	opacity: var(--bobo-overlay-opacity);
}

.bobo-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: var(--space-md);
	width: min(100% - 2 * var(--space-md), var(--container-lg));
	padding-block: var(--space-xl);
	text-align: center;
}
.bobo-hero__inner > * { margin-block: 0; }

/* il titolo della home è tipografia vera: nome in maiuscolo leggero con spaziatura larga, filo sottile, sottotitolo più piccolo.
   Il padding sinistro uguale alla spaziatura compensa lo spazio che il browser aggiunge dopo l'ultima lettera (altrimenti il testo sembra spostato a sinistra).
   --filo (0→1) è la lunghezza del filo: lo anima main.js (un pseudo-elemento non si può animare direttamente, una variabile sì). */
.bobo-hero__title {
	--filo: 1;
	display: grid;
	justify-items: center;
	gap: 0;
	width: 100%;
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 700; /* l'unico peso del font: dichiarato uguale per evitare il grassetto sintetico */
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}
.bobo-hero__nome {
	padding-left: 0.08em;
	font-size: clamp(3rem, 12vw, 10rem);
	letter-spacing: 0.08em;
	margin-bottom: -0.2em; /* la riga ha spazio sotto le maiuscole (per le code delle lettere minuscole, che qui non ci sono): lo si toglie, così filo e sottotitolo restano vicini */
}
.bobo-hero__sotto {
	padding-left: 0.28em;
	font-size: clamp(1.05rem, 2.6vw, 2.4rem);
	letter-spacing: 0.28em;
}
.bobo-hero__sotto::before {
	content: "";
	display: block;
	width: 4.5rem;
	height: 1px;
	margin: 0.55em auto 0.6em;
	background: currentColor;
	transform: scaleX(var(--filo));
}
/* senza JS o con "riduci movimento" non c'è nessuna animazione: il titolo è semplicemente lì */
@media (max-width: 37.5rem) {
	.bobo-hero__nome { letter-spacing: 0.05em; padding-left: 0.05em; }
	.bobo-hero__sotto { letter-spacing: 0.22em; padding-left: 0.22em; }
}

/* pulsante pausa (opzionale): discreto, in basso a destra */
.bobo-hero__pause {
	position: absolute;
	right: var(--space-md);
	bottom: var(--space-md);
	z-index: 2;
	padding: var(--space-xs) var(--space-sm);
	background: transparent;
	color: var(--color-ink);
	border: 1px solid currentColor;
	font: inherit;
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bobo-hero__pause:hover { background: var(--color-accent-dark); color: var(--color-on-accent); border-color: var(--color-accent-dark); }

/* ============================================================
   PATTERN DELLA HOME (patterns/home-*.php)
   Le classi bobo-* sono messe dai pattern; sono liberamente modificabili dall'editor (selettori a bassa specificità).
   ============================================================ */

/* Il parent limita ogni paragrafo a 68ch (--measure) ma senza margini automatici: un paragrafo centrato o a destra
   resta quindi una scatola stretta incollata a sinistra, con il testo allineato solo dentro la scatola.
   Qui la scatola segue l'allineamento scelto (vale per tutto il sito, anche per i paragrafi centrati scelti dall'editor). */
p.has-text-align-center { margin-inline: auto; }
p.has-text-align-right,
.bobo-firma { margin-inline-start: auto; }

/* titoli leggeri come nel wireframe; il grassetto dentro il titolo (es. "FIORI & EMOZIONI") resta evidente */
:where(h1, h2, h3, h4) { font-weight: 300; }
:where(h1, h2, h3, h4) strong { font-weight: 600; }

.bobo-link a { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.bobo-link a:hover { text-decoration: none; }

.bobo-etichetta { font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.bobo-etichetta-corsivo { font-style: italic; font-size: var(--text-sm); }
.bobo-testo-grande { font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.3; }
.bobo-firma { font-family: var(--font-script); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; text-align: right; margin-top: var(--space-lg); }
.bobo-firma-cliente { font-size: var(--text-sm); font-weight: 600; }

/* introduzione: testo e immagine affiancati */
.bobo-intro .wp-block-columns { align-items: center; gap: var(--space-xl); }
.bobo-intro .wp-block-image img { width: 100%; height: auto; display: block; }

/* griglia servizi: tutta la card è cliccabile (link "esteso"), l'immagine ingrandisce piano all'hover */
.bobo-servizi .wp-block-columns { gap: var(--space-sm); margin-top: var(--space-lg); }
.bobo-card-link { position: relative; }
.bobo-card-link .wp-block-image { margin: 0 0 var(--space-xs); overflow: hidden; }
.bobo-card-link .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.9s var(--ease); }
.bobo-card-link:hover .wp-block-image img,
.bobo-card-link:has(a:focus-visible) .wp-block-image img { transform: scale(1.06); }
.bobo-card-link p { margin: 0; }
.bobo-card-link a { color: inherit; text-decoration: none; }
.bobo-card-link a::after { content: ""; position: absolute; inset: 0; }
/* sottolineatura al passaggio solo senza GSAP; con GSAP la sostituisce la linea che si traccia (qui sotto) */
html:not(.bobo-gsap) .bobo-card-link a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.bobo-card-link p { display: inline-block; } /* niente position: relative qui: il link esteso (a::after) deve restare ancorato alla card intera */
.bobo-card-link p::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 0.35rem;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.7s var(--ease-out);
}
.bobo-card-link:hover p::after,
.bobo-card-link:has(a:focus-visible) p::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .bobo-card-link p::after { transition: none; } }

/* presentazione + loghi dei clienti */
.bobo-loghi-sezione { text-align: center; }
.bobo-loghi-sezione :where(h2, p) { margin-inline: auto; text-align: center; }
.bobo-loghi-sezione > .wp-block-image { margin-bottom: var(--space-lg); }
.bobo-loghi-sezione > .wp-block-image img { width: 100%; height: auto; display: block; }
.bobo-loghi-sezione .bobo-etichetta-corsivo { margin-top: var(--space-xl); }
/* loghi ritagliati sul contenuto (assets/img/cliente-*.png): ogni logo è centrato nella sua colonna, in orizzontale e in verticale */
.bobo-loghi { align-items: stretch; margin-top: var(--space-md); }
.bobo-loghi .wp-block-column { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.bobo-loghi .wp-block-image { width: 100%; margin: 0; text-align: center; }
/* box di altezza fissa e larghezza della colonna: il logo si adatta (contain) e le colonne restano uguali qualunque sia il file */
.bobo-loghi .wp-block-image img { display: block; width: 100%; height: 4.5rem; max-width: none; object-fit: contain; }

/* banda immagine + approccio */
.bobo-banda { margin: 0 0 var(--space-xl); }
.bobo-banda img { display: block; width: 100%; height: clamp(10rem, 16vw, 18rem); object-fit: cover; }
.bobo-approccio .wp-block-columns { gap: var(--space-lg); }
.bobo-approccio .bobo-link { margin-top: var(--space-md); }

/* Paragrafi dentro le colonne delle sezioni larghe: larghi quanto la colonna (come i titoli). Il tema di base li limita a 68 caratteri
   senza centrarli, e accanto a un titolo il testo sembrava "compresso". La larghezza la decide già la colonna. :where = specificità zero:
   qualunque regola più precisa (centrature, limiti scelti per un blocco) continua a vincere. */
.dfb-sezione-testo--wide .wp-block-column :where(p) { max-width: none; }

/* testimonianze su salvia */
.bobo-testimonianze .wp-block-columns { gap: var(--space-lg); margin-top: var(--space-md); }
.bobo-testimonianze :where(h2) { font-size: var(--text-span); font-weight: 500; }
.bobo-testimonianze :where(p) { font-size: var(--text-base); } /* :where = specificità zero: lo slider (stessa classe) segue la dimensione scelta nell'editor */
.bobo-testimonianze a { color: inherit; }

/* ── Ingresso degli elementi (solo transform e opacity) ──
   Attivo solo se bobo-reveal.js ha messo la classe sull'<html>: senza JS o con movimento ridotto tutto resta visibile. */
.bobo-reveal-ready .bobo-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.9s var(--ease), transform 1.3s var(--ease-out);
}
.bobo-reveal-ready .bobo-reveal.is-inview { opacity: 1; transform: none; }
.bobo-reveal-ready .wp-block-columns > .bobo-reveal:nth-child(2) { transition-delay: 0.1s; }
.bobo-reveal-ready .wp-block-columns > .bobo-reveal:nth-child(3) { transition-delay: 0.2s; }
.bobo-reveal-ready .wp-block-columns > .bobo-reveal:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	.bobo-reveal-ready .bobo-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.bobo-card-link .wp-block-image img { transition: none; }
	.bobo-card-link:hover .wp-block-image img { transform: none; }
}

/* ============================================================
   PAGINA SERVIZI (patterns/servizi-pagina.php, patterns/cta-progetto.php)
   ============================================================ */

/* intestazione di pagina su salvia: il titolo continua il colore dell'header */
.bobo-pagina-titolo :where(h1) { font-size: var(--text-h1); line-height: var(--leading-tight); }
.bobo-pagina-titolo :where(p) { font-size: var(--text-span); }

/* apertura: immagine a sinistra, frase in corsivo (Brittany) e link alle sezioni */
.bobo-apertura__cols { align-items: center; gap: var(--space-xl); }
.bobo-apertura .wp-block-image { margin: 0; }
.bobo-apertura .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bobo-titolo-script {
	font-family: var(--font-script);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	margin-bottom: var(--space-md);
}
.bobo-ancore { margin-top: var(--space-lg); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.bobo-ancore a { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.bobo-ancore a:hover { text-decoration: none; }

/* servizi: titolo grande + due colonne di testo da un lato, immagine dall'altro; l'ordine nel DOM resta testo → immagine */
.bobo-servizio__cols { align-items: center; gap: var(--space-xl); }
.bobo-servizio :where(h2) { font-size: clamp(2.75rem, 6vw, 5rem); font-weight: 400; line-height: var(--leading-tight); margin-bottom: var(--space-md); }
.bobo-servizio__testi { gap: var(--space-md); }
.bobo-servizio__testi p { font-size: var(--text-base); }
.bobo-servizio .wp-block-image { margin: 0; }
.bobo-servizio .wp-block-image img { display: block; width: 100%; object-fit: cover; }
/* il carosello sporge fino al bordo della pagina: si ritaglia l'eventuale eccesso (clip, non scroll) così non nasce uno scroll orizzontale */
.bobo-servizio { overflow-x: clip; }
@media (min-width: 48.8125rem) {
	.bobo-servizio__cols--img-sx { flex-direction: row-reverse; }
}

/* card carta nella versione "call to action": tutto centrato, sigillo in alto al centro, titolo salvia (deroga di contrasto accettata) */
.bobo-card-carta.is-cta .bobo-card-carta__card::before { left: 50%; transform: translateX(-50%); }
.bobo-card-carta.is-cta .bobo-card-carta__inner { text-align: center; }
.bobo-card-carta.is-cta .bobo-card-carta__inner > * { margin-inline: auto; }
.bobo-card-carta.is-cta .bobo-card-carta__inner :where(h2) { color: var(--color-accent); }
@media (min-width: 62.0625rem) {
	.bobo-card-carta.is-cta .bobo-card-carta__inner { padding-inline: var(--space-lg); }
}

/* ── BLOCCO: carosello ──
   Immagini con le PROPORZIONI ORIGINALI (mai tagliate): ognuna sta dentro un riquadro massimo quadrato (--slide), quindi una foto orizzontale
   occupa tutta la larghezza e una verticale tutta l'altezza. Scorrimento a scatti (scroll-snap), l'immagine successiva sporge fino al bordo.
   Effetti legati allo scorrimento (solo transform e opacità): l'immagine attiva è piena, le vicine sfumano e rimpiccioliscono appena.
   --d (0 = attiva, 1 = lontana) la scrive carosello-scorrimento.js; senza JS vale 0 e tutte le immagini sono piene. */
.bobo-carosello {
	--bleed: max(var(--space-md), calc((100vw - var(--container-lg)) / 2)); /* distanza dal bordo della colonna al bordo della pagina */
	--gap: var(--space-xs);
	--progress: 0;
	position: relative;
	container-type: inline-size; /* --slide si misura sulla larghezza della colonna (cqw), non della pista che sporge fuori */
}

.bobo-carosello__track {
	display: flex;
	align-items: center; /* foto di altezze diverse: allineate sul centro */
	gap: var(--gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}
.bobo-carosello__track::-webkit-scrollbar { display: none; }
.bobo-carosello__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.bobo-carosello__track.is-moving { scroll-snap-type: none; scroll-behavior: auto; } /* durante il movimento di GSAP (frecce, tastiera) */
html.bobo-gsap .bobo-carosello__track { scroll-behavior: auto; }
.bobo-carosello__track:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* il riquadro massimo di un'immagine è il 90% della colonna; il resto è la sporgenza della successiva */
.bobo-carosello--bleed-right { --slide: 90cqw; }
.bobo-carosello--bleed-right .bobo-carosello__track { margin-inline-end: calc(-1 * var(--bleed)); }

.bobo-carosello--bleed-left { --slide: 90cqw; }
.bobo-carosello--bleed-left .bobo-carosello__track {
	margin-inline-start: calc(-1 * var(--bleed));
	padding-inline-start: var(--bleed);
	scroll-padding-inline-start: var(--bleed);
}

.bobo-carosello--bleed-none { --slide: 92cqw; }

/* slide: grandi quanto la loro immagine (che mantiene le proporzioni originali). Valgono sia le figure del frontend sia i blocchi immagine dell'editor */
.bobo-carosello__track > * {
	flex: 0 0 auto;
	margin: 0;
	overflow: hidden;
	scroll-snap-align: start;
	position: relative;
}
.bobo-carosello .bobo-carosello__track img { /* selettore più specifico di proposito: le regole degli articoli e del core (max-width: 100%) non devono vincere */
	display: block;
	width: auto;
	height: auto;
	max-width: var(--slide);
	max-height: var(--slide); /* con entrambi i limiti la proporzione dell'immagine resta quella originale */
	-webkit-user-drag: none;
	opacity: calc(1 - var(--d, 0) * 0.55);
	transform: scale(calc(1 - var(--d, 0) * 0.04));
}

/* Articoli del portfolio: il carosello esce SEMPRE fino al bordo destro della pagina, anche se nell'editor è rimasta la sporgenza "nessuna"
   (così la foto successiva non viene tagliata a metà sul bordo della colonna e gli articoli già scritti si aggiornano da soli).
   overflow-x: clip evita uno scroll orizzontale se la larghezza della finestra comprende la barra di scorrimento. */
.bobo-progetto { overflow-x: clip; }
.bobo-progetto .bobo-carosello:not(.bobo-carosello--bleed-left) { --slide: 90cqw; }
.bobo-progetto .bobo-carosello:not(.bobo-carosello--bleed-left) .bobo-carosello__track { margin-inline-end: calc(-1 * var(--bleed)); }

/* barra di avanzamento sottile + frecce */
.bobo-carosello__bar { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }
.bobo-carosello__bar[hidden] { display: none; }
.bobo-carosello__progress { flex: 1; height: 1px; overflow: hidden; background: color-mix(in srgb, var(--color-ink) 28%, transparent); }
.bobo-carosello__progress span { display: block; height: 100%; background: var(--color-ink); transform-origin: left; transform: scaleX(var(--progress)); }
.bobo-carosello__nav { display: flex; gap: var(--space-xs); }
.bobo-carosello__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	color: var(--color-ink);
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.bobo-carosello__btn:hover:not(:disabled) { background: var(--color-accent-dark); color: var(--color-on-accent); border-color: var(--color-accent-dark); }
.bobo-carosello__btn:disabled { opacity: 0.3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
	.bobo-carosello__track { scroll-behavior: auto; }
	.bobo-carosello .bobo-carosello__track img { transform: none; }
}

/* ============================================================
   PORTFOLIO (patterns/portfolio-pagina.php, blocks/portfolio-griglia, single.php)
   ============================================================ */

/* titolo di pagina su nero: salvia con spaziatura larga, come nel wireframe */
.bobo-portfolio-titolo :where(h1) { color: var(--color-accent); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 300; letter-spacing: 0.15em; line-height: var(--leading-tight); }
.bobo-portfolio-titolo :where(p) { font-size: var(--text-base); }

/* fascia salvia: frase – immagine – frase, centrate */
.bobo-portfolio-banda .wp-block-columns { align-items: center; gap: var(--space-lg); }
.bobo-portfolio-banda .wp-block-image { margin: 0; }
.bobo-portfolio-banda .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ── BLOCCO: portfolio-griglia ──
   Colonne scelte nel blocco (--bobo-cols), 2 su tablet e 1 su telefono. Ogni lavoro è un solo link: immagine, nome (maiuscolo, sottolineato) e servizio. */
.bobo-portfolio { --bobo-cols: 3; }
.bobo-portfolio__list {
	display: grid;
	grid-template-columns: repeat(var(--bobo-cols), minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bobo-portfolio__item { margin: 0; padding: 0; }
.bobo-portfolio__link { display: block; color: inherit; text-decoration: none; }
.bobo-portfolio__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.bobo-portfolio__img { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.bobo-portfolio__thumb { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.bobo-portfolio__link:hover .bobo-portfolio__thumb { transform: scale(1.04); }
.bobo-portfolio__caption { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); letter-spacing: 0.04em; }
.bobo-portfolio__name { text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.bobo-portfolio__link:hover .bobo-portfolio__name { text-decoration: none; }
.bobo-portfolio__cat { margin-inline-start: 0.4em; }
/* filtri per servizio sopra la griglia (opzione del blocco): riga centrata, piccola e maiuscola. La voce attiva è salvia con la sottolineatura;
   la sottolineatura scorre da sinistra al passaggio (solo transform). Senza JavaScript sono link normali alle pagine di categoria. */
.bobo-portfolio__filtri { margin-bottom: var(--space-lg); }
.bobo-portfolio__filtri ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.bobo-portfolio__filtri a { position: relative; display: block; padding: 0.5rem 0; color: var(--color-ink); font-size: var(--text-sm); letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; transition: color 0.4s var(--ease); }
.bobo-portfolio__filtri a::after {
	content: "";
	position: absolute;
	inset: auto 0 0.2rem 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.6s var(--ease-out);
}
.bobo-portfolio__filtri a:is(:hover, :focus-visible)::after,
.bobo-portfolio__filtri a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.bobo-portfolio__filtri a[aria-current="true"] { color: var(--color-accent); }
.bobo-portfolio__filtri a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.bobo-portfolio__item[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .bobo-portfolio__filtri a, .bobo-portfolio__filtri a::after { transition: none; } }

@media (max-width: 62rem) { .bobo-portfolio__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 37.5rem) { .bobo-portfolio__list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
	.bobo-portfolio__thumb { transition: none; }
	.bobo-portfolio__link:hover .bobo-portfolio__thumb { transform: none; }
}

/* ── Pagina di un lavoro (single.php) ──
   Testata centrata (indietro, servizio, titolo), poi il contenuto scritto nell'editor: testi stretti, gallerie e immagini a tutta larghezza. */
.bobo-progetto__head {
	width: min(var(--container-sm), 100% - 2 * var(--space-md));
	margin-inline: auto;
	padding-block: var(--space-lg) var(--space-md);
	text-align: center;
}
.bobo-progetto__head p { margin: 0 auto; }
.bobo-progetto__back { font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.bobo-progetto__back a { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.bobo-progetto__back a:hover { text-decoration: none; }
.bobo-progetto__cat { margin-top: var(--space-lg); color: var(--color-ink-muted); font-size: var(--text-sm); letter-spacing: 0.15em; text-transform: uppercase; }
.bobo-progetto__title { margin-top: var(--space-xs); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300; line-height: var(--leading-tight); }

.bobo-progetto__content { width: min(var(--container-lg), 100% - 2 * var(--space-md)); margin-inline: auto; padding-bottom: var(--space-lg); }
.bobo-progetto__content > * + * { margin-top: var(--space-md); }
.bobo-progetto__content > :where(p, h2, h3, h4, ul, ol, blockquote) { width: min(var(--container-sm), 100%); margin-inline: auto; }
.bobo-progetto__content .wp-block-gallery { gap: var(--space-xs); --wp--style--unstable-gallery-gap: var(--space-xs); }
.bobo-progetto__content .wp-block-image { margin: 0; }
.bobo-progetto__content img { display: block; max-width: 100%; height: auto; }

.bobo-progetto__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	width: min(var(--container-lg), 100% - 2 * var(--space-md));
	margin: 0 auto var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
}
.bobo-progetto__nav-link { display: grid; gap: 0.25em; color: inherit; text-decoration: none; }
.bobo-progetto__nav-link--next { margin-inline-start: auto; text-align: end; }
.bobo-progetto__nav-label { color: var(--color-ink-muted); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.bobo-progetto__nav-title { font-size: var(--text-h4); }
.bobo-progetto__nav-link:hover .bobo-progetto__nav-title { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

/* ============================================================
   PAGINA BOBOLINO (patterns/bobolino-pagina.php, blocks/griglia-immagini)
   ============================================================ */

/* presentazione: testo centrato a sinistra, foto del team grande a destra */
.bobo-bobolino-intro__cols { align-items: center; gap: var(--space-lg); }
.bobo-bobolino-intro .wp-block-image { margin: 0; }
.bobo-bobolino-intro .wp-block-image img { display: block; width: 100%; height: auto; }
.bobo-bobolino-intro .wp-block-column:first-child > p:first-child { font-size: var(--text-span); }
.bobo-bobolino-intro strong { font-weight: 600; }
.bobo-piccolo { margin-top: var(--space-xl); font-size: var(--text-sm); }

/* collage: tre colonne di immagini sfalsate. La frase (titolo) sta nella colonna centrale ma NON scorre via: resta ferma a metà schermo
   (sticky) e le foto le passano sotto. Le colonne laterali si muovono a velocità diverse (parallax, vedi main.js); la centrale no,
   altrimenti la frase "ballerebbe". */
.bobo-collage__cols { align-items: stretch; gap: var(--space-lg); }
.bobo-collage__col { display: flex; flex-direction: column; gap: var(--space-xl); }
.bobo-collage__col .wp-block-image { width: 72%; margin: 0; }
.bobo-collage__col .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bobo-collage__col--sx .wp-block-image { align-self: flex-start; }
.bobo-collage__col--cx .wp-block-image { align-self: center; }
.bobo-collage__col--dx .wp-block-image { align-self: flex-end; }
.bobo-collage__col--sx .wp-block-image:last-child { margin-top: var(--space-lg); }
.bobo-collage__col--dx .wp-block-image:last-child { margin-top: var(--space-xl); }
.bobo-collage__col--cx { position: relative; z-index: 2; } /* la colonna della frase sta sopra le colonne laterali */
.bobo-collage__titolo {
	position: sticky;
	top: calc(50vh - 4.5rem);
	z-index: 2;
	margin: var(--space-md) -30% var(--space-lg); /* più larga della colonna: le foto laterali le passano sotto */
	text-align: center;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.2;
	pointer-events: none; /* le foto sotto restano cliccabili (lightbox) */
	/* alone dello sfondo: tiene leggibile il testo quando passa sopra una foto chiara, senza coprirla */
	text-shadow: 0 0 1.25rem color-mix(in srgb, var(--color-bg) 70%, transparent), 0 0 0.35rem color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.bobo-collage__titolo strong { display: inline-block; color: var(--color-accent); font-size: 1.35em; font-weight: 600; letter-spacing: 0.12em; }

/* telefono e tablet stretto: le tre colonne si fondono in UNA fila di foto piccole che si alternano (sinistra, centro, destra);
   la frase resta in cima allo schermo e le foto le scorrono dietro. "display: contents" toglie le colonne dal layout senza toccare l'HTML. */
@media (max-width: 48.875rem) {
	.bobo-collage__cols { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--space-lg); }
	.bobo-collage__col { display: contents; }
	.bobo-collage__col .wp-block-image { order: 10; width: 56%; }
	.bobo-collage__col .wp-block-image:last-child { margin-top: 0; }
	/* ordine a zig-zag: sx1, centro1, dx1, sx2, centro2, dx2, sx3, dx3 (nell'HTML sono tre colonne separate) */
	.bobo-collage__col--sx .wp-block-image:nth-child(1) { order: 1; }
	.bobo-collage__col--cx .wp-block-image:nth-child(2) { order: 2; }
	.bobo-collage__col--dx .wp-block-image:nth-child(1) { order: 3; }
	.bobo-collage__col--sx .wp-block-image:nth-child(2) { order: 4; }
	.bobo-collage__col--cx .wp-block-image:nth-child(3) { order: 5; }
	.bobo-collage__col--dx .wp-block-image:nth-child(2) { order: 6; }
	.bobo-collage__col--sx .wp-block-image:nth-child(3) { order: 7; }
	.bobo-collage__col--dx .wp-block-image:nth-child(3) { order: 9; }
	.bobo-collage__titolo {
		order: -1;
		align-self: stretch;
		top: var(--space-sm);
		margin: 0;
		padding-block: var(--space-xs);
		font-size: clamp(1.5rem, 6.5vw, 2.25rem);
	}
}

/* parallax: velocità diverse per colonna, impostate da main.js con translate3d (la classe lega la colonna alla sua velocità).
   La colonna centrale (--b) non si muove: contiene la frase ferma. */
.bobo-parallax { will-change: transform; }
.bobo-parallax--b { will-change: auto; }

/* testo breve a sinistra, paragrafi piccoli a destra */
.bobo-creativita .wp-block-columns { gap: var(--space-xl); }
.bobo-creativita :where(h2) { font-size: var(--text-h3); font-weight: 400; }
.bobo-creativita p { font-size: var(--text-sm); }

/* banda immagine a tutta larghezza, senza margini */
.bobo-banda-piena .bobo-banda { margin: 0; }

/* team */
.bobo-team__titolo { margin-inline: auto; text-align: center; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 300; }
.bobo-team p { font-size: var(--text-sm); }
.bobo-team .bobo-griglia-img { margin-top: var(--space-xl); }

/* ── BLOCCO: griglia-immagini ──
   Colonne scelte nel blocco (--bobo-cols); 3 su tablet e 2 su telefono. Immagini 4:5, didascalia (il nome) sotto. */
.bobo-griglia-img {
	--bobo-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--bobo-cols), minmax(0, 1fr));
	gap: var(--space-lg) var(--space-sm);
}
.bobo-griglia-img > * { margin: 0; }
.bobo-griglia-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bobo-griglia-img figcaption { margin-top: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); text-align: left; } /* colore esplicito: WordPress dà alle didascalie un grigio pensato per fondi chiari */
@media (max-width: 62rem) { .bobo-griglia-img { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 37.5rem) { .bobo-griglia-img { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* sezione chiara con la texture carta: testo nero e immagine incorniciata con una frase in corsivo sopra */
.bobo-sfondo-carta { background-image: url('../img/carta.jpg'); background-size: cover; background-position: center; }
.bobo-luogo :where(a) { color: inherit; }
/* Tutto è proporzionato alla larghezza del riquadro (container query: unità cqw), non alla finestra: così la scritta e la sfumatura
   scalano insieme all'immagine su qualsiasi schermo. --w = larghezza dell'immagine dentro il riquadro (56% su schermi larghi, tutta su telefono). */
.bobo-immagine-firma {
	--w: 56%;
	--f: 4.4;
	position: relative;
	container-type: inline-size;
	width: min(100%, 52rem);
	margin: var(--space-lg) auto 0;
	background: var(--color-dark);
	border: 0.4rem solid var(--color-dark);
}
.bobo-immagine-firma img { display: block; width: var(--w); margin-inline: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* sfumatura: occupa sempre la parte bassa dell'immagine (60% dell'altezza), qualunque sia la lunghezza della frase */
.bobo-immagine-firma::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	width: var(--w);
	height: 60%;
	margin-inline: auto;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-bg) 78%, transparent));
	pointer-events: none;
}
.bobo-immagine-firma figcaption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	width: var(--w);
	margin: 0 auto;
	padding: 0 6cqw 7cqw;
	color: var(--color-ink);
	font-family: var(--font-script);
	font-size: clamp(1.4rem, calc(var(--f) * 1cqw), 3.25rem); /* --f = percentuale della larghezza del riquadro */
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
@media (max-width: 37.5rem) {
	.bobo-immagine-firma { --w: 100%; --f: 7.5; width: 100%; }
	.bobo-immagine-firma img { aspect-ratio: 4 / 5; }
}

/* ============================================================
   PAGINA TESTIMONIANZE (patterns/testimonianze-pagina.php, blocks/testimonianze, blocks/testimonianza)
   ============================================================ */

.bobo-testimonianze-titolo :where(h1) { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; line-height: var(--leading-tight); }

/* ── BLOCCO: testimonianze (+ testimonianza) ──
   Palcoscenico fisso: tutte le testimonianze stanno SOVRAPPOSTE nello stesso punto (cella unica di una griglia). Citazione e autore
   si dissolvono da una all'altra; frecce e cornice della foto non si muovono; scorre solo la foto, da un lato all'altro DENTRO la cornice.
   Lo stato lo scrive testimonianze-scorrimento.js: .is-ready sullo slider, .is-active sulla testimonianza attiva, --o (distanza dall'attiva:
   -1, 0, 1…) su ognuna, --dx (trascinamento in px) sullo slider. Senza JS (o nell'editor) le testimonianze restano una sotto l'altra, tutte leggibili.
   Sullo sfondo salvia testo nero, tranne citazione e testo: chiari come nel wireframe (deroga di contrasto accettata dal cliente). */
.bobo-testimonianze__track { display: grid; gap: var(--space-xl); }
.bobo-testimonianze.is-ready .bobo-testimonianze__track { gap: 0; }

/* ── BLOCCO: testimonianza ──
   Una testimonianza dello slider: citazione, testo, riga con autore e frecce, foto incorniciata. */
.bobo-testimonianza {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-inline: var(--space-sm);
	text-align: center;
}
/* sovrapposte nella stessa cella; tutte alte quanto la più alta, così frecce e foto stanno sempre nello stesso punto */
.bobo-testimonianze.is-ready .bobo-testimonianza { grid-area: 1 / 1; }
.bobo-testimonianze.is-ready .bobo-testimonianza:not(.is-active) { pointer-events: none; }
.bobo-testimonianza > * { width: min(100%, 56rem); } /* larghezza del testo, della riga delle frecce e della foto */
.bobo-testimonianza__quote { margin: 0; }
.bobo-testimonianze.is-ready .bobo-testimonianza__quote { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* le frecce e la foto restano allineate in basso */
/* dissolvenza: esce la vecchia, poi entra la nuova (solo opacità) */
.bobo-testimonianze.is-ready :is(.bobo-testimonianza__quote, .bobo-testimonianza__author) { opacity: 0; transition: opacity 0.45s var(--ease); }
.bobo-testimonianze.is-ready .bobo-testimonianza.is-active :is(.bobo-testimonianza__quote, .bobo-testimonianza__author) { opacity: 1; transition: opacity 0.7s var(--ease) 0.4s; }
/* Dimensioni in em: la "dimensione del carattere" scelta nell'editor (sullo slider per tutte, sulla singola testimonianza per una sola)
   scala citazione e testo insieme, mantenendo il rapporto. Anche le versioni Tablet/Mobile sono quelle native. */
.bobo-testimonianze { font-size: var(--text-base); }
.bobo-testimonianza { font-size: inherit; color: var(--color-ink); }
.bobo-testimonianza__big { max-width: none; margin: 0 auto 0.65em; font-size: 2.4em; font-weight: 300; line-height: 1.25; }
.bobo-testimonianza__small { max-width: none; margin: 0 auto; font-size: 1em; } /* niente limite a 68 caratteri del tema di base: largo quanto la citazione */
@media (max-width: 37.5rem) { .bobo-testimonianza__big { font-size: 1.75em; } }

/* riga: precedente · autore · successiva */
.bobo-testimonianza__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.bobo-testimonianza__author { margin: 0; max-width: none; color: var(--color-on-accent); font-size: 1em; text-align: center; }
.bobo-testimonianza__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--space-xs) var(--space-sm);
	background: transparent;
	color: var(--color-on-accent);
	border: 0;
	font: inherit;
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.bobo-testimonianza__prev { justify-self: start; }
.bobo-testimonianza__next { justify-self: end; }
/* hover su sfondo colorato: bianco con testo nero */
.bobo-testimonianza__btn:hover:not(:disabled) { background: var(--color-accent-dark); color: var(--color-on-accent); }
.bobo-testimonianza__btn:disabled { opacity: 0.35; cursor: default; }
.bobo-testimonianza__btn:focus-visible { outline: 3px solid var(--color-on-accent); outline-offset: 2px; }
/* senza JS le frecce non servirebbero a niente: restano nascoste finché lo script non è pronto */
.bobo-testimonianze:not(.is-ready) .bobo-testimonianza__btn { visibility: hidden; }
/* le frecce delle altre testimonianze (sovrapposte) non si vedono: quelle dell'attiva restano ferme dove sono */
.bobo-testimonianze.is-ready .bobo-testimonianza:not(.is-active) .bobo-testimonianza__btn { visibility: hidden; }

.bobo-testimonianza__img { margin: var(--space-lg) 0 0; border: 0.45rem solid var(--color-dark); }
.bobo-testimonianza__img { width: min(100%, 26rem); aspect-ratio: 4 / 3; }
.bobo-testimonianza__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
/* la cornice resta ferma e ritaglia; la foto scorre in orizzontale: --o la porta a destra (+) o a sinistra (-) dell'attiva, --dx la segue al dito */
.bobo-testimonianze.is-ready .bobo-testimonianza__img { overflow: hidden; touch-action: pan-y; cursor: grab; }
.bobo-testimonianze.is-ready .bobo-testimonianza__photo {
	transform: translate3d(calc(var(--o, 0) * 100% + var(--dx, 0px)), 0, 0);
	transition: transform 1.1s var(--ease-io);
	will-change: transform;
	-webkit-user-drag: none;
	user-select: none;
}
.bobo-testimonianze.is-dragging .bobo-testimonianza__photo { transition: none; }
/* con GSAP il movimento è suo (stili in linea): le transizioni CSS si spengono, altrimenti si sommerebbero e il movimento risulterebbe doppio e molle */
.bobo-testimonianze.is-gsap :is(.bobo-testimonianza__quote, .bobo-testimonianza__author, .bobo-testimonianza__photo) { transition: none !important; }
.bobo-testimonianze.is-dragging .bobo-testimonianza__img { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
	.bobo-testimonianze.is-ready :is(.bobo-testimonianza__quote, .bobo-testimonianza__author),
	.bobo-testimonianze.is-ready .bobo-testimonianza.is-active :is(.bobo-testimonianza__quote, .bobo-testimonianza__author),
	.bobo-testimonianze.is-ready .bobo-testimonianza__photo { transition: none; }
}

/* nell'editor le testimonianze stanno una sotto l'altra: si modificano più comodamente (lo scorrimento è solo sul sito) */
.editor-styles-wrapper .bobo-testimonianze__track { display: grid; gap: var(--space-xl); }
.editor-styles-wrapper .bobo-testimonianze .bobo-testimonianza__btn { visibility: visible; }

@media (max-width: 37.5rem) {
	.bobo-testimonianza__nav { grid-template-columns: auto 1fr auto; gap: var(--space-xs); }
	.bobo-testimonianza__btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* su telefono solo le frecce: il testo resta per gli screen reader */
}

/* ══════════════════════════════════════════════════════════════
   PAGINA CONTATTI (patterns/contatti-pagina.php, form Contact Form 7: modello in docs/modello-form-contatti.md)
   Tutto su salvia con testo nero. Campi con la sola linea inferiore, come nel wireframe.
   ══════════════════════════════════════════════════════════════ */
.bobo-contatti__colonne { gap: var(--space-xl); }
.bobo-contatti__lead { margin: 0; font-size: var(--text-h3); line-height: var(--leading-tight); }
.bobo-contatti__titolo { margin: 0 0 var(--space-lg); color: var(--color-ink); font-size: var(--text-display); font-weight: 300; line-height: 1; }
.bobo-contatti__blocco { margin-top: var(--space-lg); }
.bobo-contatti a { color: inherit; }
.bobo-contatti a:hover { color: var(--color-on-accent); text-decoration-thickness: 2px; }

.bobo-form__riga { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.bobo-form__campo { margin-bottom: var(--space-md); }
.bobo-contatti label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-base); }
.bobo-contatti .wpcf7-form-control-wrap { display: block; }
.bobo-contatti .wpcf7-form > label { display: block; margin-bottom: var(--space-md); }
/* linea di focus: sotto il campo attivo una linea più spessa si estende da sinistra a destra (solo transform). Vale per campi di testo, non per le caselle */
.bobo-contatti .wpcf7-form-control-wrap:has(:is(input[type="text"], input[type="email"], input[type="tel"], select, textarea)) { position: relative; }
.bobo-contatti .wpcf7-form-control-wrap:has(:is(input[type="text"], input[type="email"], input[type="tel"], select, textarea))::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background: var(--color-on-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.7s var(--ease-out);
	pointer-events: none;
}
.bobo-contatti .wpcf7-form-control-wrap:focus-within::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .bobo-contatti .wpcf7-form-control-wrap::after { transition: none; } }
.bobo-contatti :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	display: block;
	width: 100%;
	padding: var(--space-xs) 0;
	border: 0;
	border-bottom: 2px solid var(--color-on-accent);
	border-radius: 0;
	background: transparent;
	color: var(--color-on-accent);
	font: inherit;
	font-size: var(--text-base);
}
.bobo-contatti textarea { min-height: 6rem; height: 6rem; resize: vertical; } /* area del messaggio bassa: circa tre righe (si può comunque allargare in basso) */
/* il focus resta ben visibile: la linea si ispessisce e compare l'alone nero (mai outline:none senza alternativa) */
/* campi di testo: l'indicatore del focus è la linea che si ispessisce e si estende da sinistra (vedi sotto). Niente anche cornice nera: era doppia e pesante.
   L'outline resta ma trasparente: scompare a vista, riappare da solo nei modi ad alto contrasto del sistema operativo (Windows). */
.bobo-contatti :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus-visible { outline: 3px solid transparent; outline-offset: 3px; }
/* caselle e pulsanti: la cornice resta (non hanno la linea) */
.bobo-contatti :is(input[type="checkbox"], input[type="radio"], input[type="submit"]):focus-visible { outline: 3px solid var(--color-on-accent); outline-offset: 3px; }
.bobo-form__privacy { margin: var(--space-md) 0; font-size: var(--text-sm); }
.bobo-form__privacy .wpcf7-list-item { margin: 0; }

/* Spunta della privacy (e di ogni casella): vale per qualunque modulo CF7 della pagina, con o senza il contenitore .bobo-form.
   Il tema di base dà width: 100% a ogni input, anche alla casella, che finiva larghissima con il testo sotto: qui casella piccola e testo accanto. */
.bobo-contatti .wpcf7-acceptance,
.bobo-contatti .wpcf7-list-item { display: block; margin: 0; }
.bobo-contatti .wpcf7-acceptance label,
.bobo-contatti .wpcf7-list-item label { display: flex; align-items: flex-start; gap: var(--space-xs); margin: var(--space-md) 0; font-size: var(--text-sm); line-height: 1.5; text-align: left; }
.bobo-contatti input[type="checkbox"],
.bobo-contatti input[type="radio"] { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; padding: 0; border-radius: 0; accent-color: var(--color-on-accent); }
.bobo-contatti input[type="checkbox"]:focus-visible { outline: 3px solid var(--color-on-accent); outline-offset: 3px; }

/* Invia: nero con testo bianco; hover su fondo colorato = bianco con testo nero (regola del cliente) */
.bobo-contatti input[type="submit"] {
	width: auto;
	min-width: 17rem;
	padding: var(--space-sm) var(--space-lg);
	border: 0;
	border-radius: 0;
	background: var(--color-dark);
	color: var(--color-ink);
	font: inherit;
	font-size: var(--text-base);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bobo-contatti input[type="submit"]:hover { background: var(--color-accent-dark); color: var(--color-on-accent); }
.bobo-contatti input[type="submit"]:focus-visible { outline: 3px solid var(--color-on-accent); outline-offset: 3px; }
.bobo-contatti .wpcf7-spinner { margin: 0 var(--space-sm); }

/* Errori: niente rosso su salvia (contrasto basso). Il testo spiega l'errore, la linea del campo diventa spessa e nera */
.bobo-contatti .wpcf7-not-valid-tip { margin-top: var(--space-xs); color: var(--color-on-accent); font-size: var(--text-sm); font-weight: 600; }
.bobo-contatti .wpcf7-not-valid { border-bottom-width: 5px; }
.bobo-contatti .wpcf7-response-output { margin: var(--space-md) 0 0; padding: var(--space-xs) var(--space-sm); border: 2px solid var(--color-on-accent); color: var(--color-on-accent); }

@media (max-width: 48.75rem) {
	.bobo-form__riga { grid-template-columns: 1fr; gap: 0; }
	.bobo-contatti input[type="submit"] { width: 100%; }
}

/* ============================================================
   RIFINITURE — piccoli dettagli "da film" che si notano senza pesare
   Tutto è miglioramento progressivo: dove il browser non lo supporta o l'utente chiede meno movimento, il sito è identico senza.
   ============================================================ */

html {
	scrollbar-color: var(--color-accent) var(--color-bg); /* barra di scorrimento nei colori del sito */
	scrollbar-width: thin;
	/* niente lampo azzurro semitrasparente quando si tocca un link su telefono (è solo conferma del tocco, non accessibilità:
	   la tastiera usa l'anello di focus, che resta). Il valore si eredita da tutti gli elementi. */
	-webkit-tap-highlight-color: transparent;
}
body {
	-webkit-font-smoothing: antialiased; /* il peso 300 chiaro su nero si "gonfia" su Mac: così resta sottile e nitido */
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
}
/* selezione del testo: bianco con testo nero. Si vede bene sia sul nero sia sul salvia (la selezione salvia su salvia era invisibile) */
::selection { background: var(--color-accent-dark); color: var(--color-on-accent); }

/* titoli senza parole orfane, paragrafi senza ultima riga di una sola parola */
:where(h3) { text-wrap: balance; } /* h1 e h2 no: GSAP SplitText li divide in righe e text-wrap: balance interferisce */
:where(p, li) { text-wrap: pretty; }
/* nell'editor no: ribilanciare le righe mentre si scrive fa saltare il testo e rende scomodo scrivere e selezionare */
.editor-styles-wrapper :where(p, li, h1, h2, h3, h4) { text-wrap: wrap; }
/* il cursore di scrittura segue il colore del testo: sui fondi salvia e chiari resta scuro, ben visibile */
.editor-styles-wrapper :is(.has-accent-background-color, .has-surface-background-color, .has-dark-color) { caret-color: var(--color-on-accent); }

@media (prefers-reduced-motion: no-preference) {
	html:not(.bobo-gsap) { scroll-behavior: smooth; } /* con GSAP lo scroll morbido delle ancore lo fa lui: quello nativo sfasa ScrollTrigger */

	/* cambio pagina: dissolvenza morbida invece dello stacco netto (Chrome e Safari recenti; gli altri non cambiano) */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation-duration: 0.45s; animation-timing-function: var(--ease-io); }
	::view-transition-new(root) { animation-duration: 0.7s; animation-timing-function: var(--ease-out); }

	/* apertura: la foto della hero si assesta, parte appena ingrandita e si ferma (effetto "macchina da presa") */
	html:not(.bobo-gsap) img.bobo-hero__media { animation: bobo-settle 3s var(--ease-out) both; } /* effetto di riserva: con GSAP l'apertura è una sequenza in main.js */
	@keyframes bobo-settle { from { transform: scale(1.09); } to { transform: scale(1); } }

	/* elementi di una griglia: entrano a ventaglio, uno dopo l'altro */
	.bobo-reveal-ready .bobo-portfolio__list > .bobo-reveal:nth-child(4n + 2) { transition-delay: 0.08s; }
	.bobo-reveal-ready .bobo-portfolio__list > .bobo-reveal:nth-child(4n + 3) { transition-delay: 0.16s; }
	.bobo-reveal-ready .bobo-portfolio__list > .bobo-reveal:nth-child(4n + 4) { transition-delay: 0.24s; }
}

/* filo di avanzamento in cima alla pagina: si riempie scorrendo (solo CSS, nessun JS; dove non è supportato non compare) */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		body::before {
			content: "";
			position: fixed;
			inset: 0 0 auto 0;
			z-index: 900; /* sotto il menu a schermo intero (1000) */
			height: 2px;
			background: var(--color-accent);
			transform: scaleX(0);
			transform-origin: left;
			pointer-events: none;
			animation: bobo-progress linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes bobo-progress { to { transform: scaleX(1); } }
	}
}

/* ── Animazioni GSAP: stato iniziale ──
   custom/reveal.php mette "bobo-anim-pending" sull'<html> PRIMA che la pagina si veda (solo se GSAP c'è e l'utente non ha chiesto meno movimento).
   Gli elementi che main.js sta per animare partono nascosti: così non lampeggiano prima di entrare. main.js toglie la classe appena è pronto
   (e comunque dopo 4 secondi, per sicurezza). La lista deve coincidere con quella di main.js (titoli, immagini a cornice, .bobo-reveal, hero, header della home). */
html.bobo-anim-pending :is(
	.bobo-reveal,
	main h1,
	main h2,
	main .wp-block-image:not(.bobo-immagine-firma),
	main .bobo-portfolio__img,
	.bobo-hero__bg,
	.bobo-hero__inner > *,
	.has-header-overlay .site-header,
	.bobo-testo-grande,
	.bobo-card-carta__inner p
) { opacity: 0; }

/* testo che si accende con lo scroll: le parole sono divise da SplitText, che non va d'accordo con text-wrap: pretty/balance */
.bobo-testo-grande,
.bobo-card-carta__inner p { text-wrap: wrap; }

/* ============================================================
   PAGINE DI ELENCO: categorie del portfolio, archivi, ricerca, 404
   (category.php, archive.php, search.php, 404.php; partial in template-parts/partials/). Le schede sono quelle del blocco Griglia portfolio.
   ============================================================ */
.bobo-archivio__head {
	width: min(var(--container-sm), 100% - 2 * var(--space-md));
	margin-inline: auto;
	padding-block: var(--space-lg) var(--space-md);
	text-align: center;
}
.bobo-archivio__head > p { margin-inline: auto; }
/* titolo come quello della pagina Portfolio: salvia con spaziatura larga */
.bobo-archivio__title { margin: var(--space-xs) 0 0; color: var(--color-accent); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 300; letter-spacing: 0.15em; line-height: var(--leading-tight); }
.bobo-archivio__desc { margin-top: var(--space-md); font-size: var(--text-base); }
.bobo-archivio__desc :where(p) { margin-inline: auto; }

/* riga di filtri e di vie d'uscita: piccola, maiuscola, centrata; la voce corrente è salvia e sottolineata */
.bobo-archivio__filtri { margin-top: var(--space-lg); }
.bobo-archivio__filtri ul,
.bobo-archivio__vie { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.bobo-archivio__vie { margin-top: var(--space-md); }
.bobo-archivio__filtri a,
.bobo-archivio__vie a { color: var(--color-ink); font-size: var(--text-sm); letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.bobo-archivio__filtri a:hover,
.bobo-archivio__vie a:hover { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }
.bobo-archivio__filtri a[aria-current] { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }

.bobo-archivio__lista { padding-block: var(--space-md) var(--space-xl); }
.bobo-archivio__vuoto { text-align: center; }
.bobo-archivio__vuoto > p { margin-inline: auto; }

/* paginazione: numeri e frecce, quadrati da 44 px; hover bianco con testo nero (regola del cliente) */
.navigation.pagination { margin-top: var(--space-xl); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.navigation.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.5rem;
	border: 1px solid transparent;
	color: var(--color-ink);
	font-size: var(--text-sm);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navigation.pagination a.page-numbers:hover { background: var(--color-accent-dark); color: var(--color-on-accent); }
.navigation.pagination .page-numbers.current { border-color: var(--color-accent); color: var(--color-accent); }
.navigation.pagination .page-numbers.dots { pointer-events: none; }
.navigation.pagination .page-numbers:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* campo di ricerca: linea sotto, pulsante scritto; stesso linguaggio dei campi del form Contatti ma su nero */
.bobo-cerca { display: flex; align-items: flex-end; gap: var(--space-sm); width: min(32rem, 100%); margin: var(--space-lg) auto 0; }
.bobo-cerca input[type="search"] {
	flex: 1;
	min-width: 0;
	width: auto;
	padding: var(--space-xs) 0;
	border: 0;
	border-bottom: 1px solid var(--color-ink);
	border-radius: 0;
	background: transparent;
	color: var(--color-ink);
	font: inherit;
	font-size: var(--text-base);
	-webkit-appearance: none;
	appearance: none;
}
.bobo-cerca input[type="search"]::placeholder { color: var(--color-ink-muted); opacity: 1; }
.bobo-cerca input[type="search"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.bobo-cerca button {
	padding: var(--space-xs) var(--space-md);
	background: transparent;
	color: var(--color-ink);
	border: 1px solid currentColor;
	font: inherit;
	font-size: var(--text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bobo-cerca button:hover { background: var(--color-accent-dark); color: var(--color-on-accent); border-color: var(--color-accent-dark); }
.bobo-cerca button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* 404 */
.bobo-404 { padding-block: var(--space-xl) var(--space-section); text-align: center; }
.bobo-404 p { margin-inline: auto; }
.bobo-404__codice { margin: 0 0 var(--space-sm); color: var(--color-accent); font-size: var(--text-display); font-weight: 300; letter-spacing: 0.1em; line-height: 1; }
.bobo-404 .bobo-archivio__title { margin-bottom: var(--space-md); } /* respiro tra il titolo e il testo */

/* testo con gli altri clienti sotto i loghi (sezione "Hanno lavorato con noi"): un paragrafo scritto nell'editor subito dopo i loghi.
   Vale anche senza classe: ogni paragrafo che segue le colonne dei loghi prende questo stile. */
.bobo-loghi-sezione .bobo-loghi ~ p,
.bobo-clienti-altri { max-width: 42rem; margin: var(--space-md) auto 0; font-size: var(--text-sm); letter-spacing: 0.06em; line-height: 1.9; text-align: center; }

/* Stile di blocco "Maiuscolo" (paragrafi e titoli): custom/stili-blocco.php. Selettore doppio: vale anche dove un'altra regola del tema
   fissa la spaziatura delle lettere. Si vede uguale nell'editor e sul sito. */
.is-style-maiuscolo.is-style-maiuscolo { text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================================
   ICONA WHATSAPP FISSA (custom/whatsapp.php, comportamento al tocco in main.js)
   Un cerchio sottile in basso a sinistra, sempre in vista. Col mouse: l'icona si riempie di bianco (regola del cliente), un anello si espande
   e accanto compare la scritta. Su telefono la stessa animazione parte al tocco (.is-opening) e subito dopo si apre WhatsApp.
   Solo transform e opacità; con "riduci movimento" niente anello né entrata, solo il cambio di colore.
   ============================================================ */
.bobo-wa {
	position: fixed;
	left: max(var(--space-md), env(safe-area-inset-left));
	bottom: max(var(--space-md), env(safe-area-inset-bottom));
	z-index: 800; /* sopra i contenuti, sotto il menu a schermo intero (1000) */
	display: flex;
	align-items: center;
	color: var(--color-ink);
	text-decoration: none;
	animation: bobo-wa-in 1.1s var(--ease-out) 1.2s both;
}
.bobo-wa__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 3rem; /* 48 px: area di tocco comoda */
	height: 3rem;
	border: 1px solid color-mix(in srgb, var(--color-ink) 70%, transparent);
	border-radius: 50%;
	/* sfondo scuro semitrasparente: l'icona resta leggibile anche sopra foto chiare */
	background: color-mix(in srgb, var(--color-bg) 70%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.6s var(--ease-out);
}
/* anello che si espande e svanisce */
.bobo-wa__icon::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--color-ink);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}
/* scritta: compare accanto all'icona (opacità e piccolo spostamento) */
.bobo-wa__label {
	margin-left: 0.75rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--color-ink) 35%, transparent);
	background: color-mix(in srgb, var(--color-bg) 78%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-0.75rem);
	pointer-events: none;
	transition: opacity 0.4s var(--ease), transform 0.6s var(--ease-out);
}
.bobo-wa:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: 50%; }

@media (hover: hover) {
	.bobo-wa:hover .bobo-wa__icon { background: var(--color-accent-dark); color: var(--color-on-accent); border-color: var(--color-accent-dark); transform: scale(1.06); }
	.bobo-wa:hover .bobo-wa__icon::after { animation: bobo-wa-ring 1.2s var(--ease-out); }
	.bobo-wa:hover .bobo-wa__label { opacity: 1; transform: none; }
}
/* da tastiera (focus visibile) e al tocco (.is-opening, classe messa da main.js): stessa animazione */
.bobo-wa:focus-visible .bobo-wa__icon,
.bobo-wa.is-opening .bobo-wa__icon { background: var(--color-accent-dark); color: var(--color-on-accent); border-color: var(--color-accent-dark); transform: scale(1.06); }
.bobo-wa:focus-visible .bobo-wa__label,
.bobo-wa.is-opening .bobo-wa__label { opacity: 1; transform: none; }
.bobo-wa.is-opening .bobo-wa__icon::after { animation: bobo-wa-ring 0.9s var(--ease-out); }

@keyframes bobo-wa-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes bobo-wa-ring { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
	.bobo-wa { animation: none; }
	.bobo-wa__icon, .bobo-wa__label { transition: none; }
	.bobo-wa:hover .bobo-wa__icon::after,
	.bobo-wa.is-opening .bobo-wa__icon::after { animation: none; }
}
@media print { .bobo-wa { display: none; } }
@media (max-width: 37.5rem) { .bobo-wa__label { display: none; } } /* su telefono solo l'icona: la scritta non servirebbe a nessuno e ruberebbe spazio */

/* contatore dello slider testimonianze ("01 / 05"): piccolo e discreto sopra il testo; lo scrive testimonianze-scorrimento.js */
.bobo-testimonianze__contatore { margin: 0 0 var(--space-md); color: var(--color-on-accent); font-size: var(--text-sm); letter-spacing: 0.16em; text-align: center; }

/* Cursore personalizzato (solo mouse): cerchio salvia con scritta nera, creato e mosso da main.js (posizione e scala le scrive GSAP). Il cursore
   vero sparisce solo sopra le card che lo usano. */
.bobo-cursore {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1500;
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	pointer-events: none;
}
html.bobo-con-cursore :is(.bobo-card-link, .bobo-card-link a, .bobo-portfolio__link) { cursor: none; }

/* Loghi dei clienti in nastro continuo (main.js, feature "loghi"): la riga diventa una finestra con i bordi che sfumano e dentro scorre la pista.
   Senza JavaScript, o con "riduci movimento", resta la griglia di prima. */
.bobo-loghi.is-nastro {
	display: block;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, var(--color-dark) 10%, var(--color-dark) 90%, transparent);
	mask-image: linear-gradient(to right, transparent, var(--color-dark) 10%, var(--color-dark) 90%, transparent);
}
.bobo-loghi__pista { display: flex; align-items: center; width: max-content; will-change: transform; }
.bobo-loghi.is-nastro .wp-block-column { flex: 0 0 auto; width: clamp(8rem, 22vw, 12rem); padding-inline: var(--space-sm); }

/* Indice laterale della pagina Servizi (main.js, feature "indice"): numeri 01–04 a sinistra, sempre piccoli; l'etichetta compare sulla voce attiva,
   al passaggio e col focus. Solo schermi larghi: sotto 70rem non c'è spazio nel margine e il JS lo crea solo da 48.875rem in su. */
.bobo-indice {
	position: fixed;
	left: var(--space-md);
	top: 50%;
	z-index: 700;
	transform: translateY(-50%);
	counter-reset: bobo-indice;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.bobo-indice.is-visibile { opacity: 1; visibility: visible; transition: opacity 0.7s var(--ease), visibility 0s; }
.bobo-indice ol { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.bobo-indice li { counter-increment: bobo-indice; }
.bobo-indice a { display: flex; align-items: center; gap: 0.75rem; color: var(--color-ink); font-size: var(--text-sm); letter-spacing: 0.1em; text-decoration: none; }
.bobo-indice a::before {
	content: counter(bobo-indice, decimal-leading-zero);
	content: counter(bobo-indice, decimal-leading-zero) / ""; /* il numero è decorazione: gli screen reader leggono solo il titolo */
	min-width: 1.6rem;
	color: var(--color-ink-muted);
}
.bobo-indice__testo { opacity: 0; transform: translateX(-0.4rem); text-transform: uppercase; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out); }
.bobo-indice a[aria-current="true"]::before { color: var(--color-accent); }
.bobo-indice a[aria-current="true"] .bobo-indice__testo,
.bobo-indice a:is(:hover, :focus-visible) .bobo-indice__testo { opacity: 1; transform: none; }
.bobo-indice a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
@media (max-width: 70rem) { .bobo-indice { display: none; } }
@media (prefers-reduced-motion: reduce) { .bobo-indice, .bobo-indice__testo { transition: none; } }

/* ============================================================
   LIGHTBOX DEL TEMA (main.js, blocco "Lightbox"; il lightbox di WordPress è spento in theme.json)
   ============================================================ */
.wp-block-image:has(> .bobo-zoom) { position: relative; }
.bobo-zoom { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; background: none; border: 0; cursor: zoom-in; }
.bobo-zoom:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }

html.bobo-lb-aperto { overflow: hidden; }
.bobo-lb { position: fixed; inset: 0; z-index: 1900; color: var(--color-ink); touch-action: pan-y; }
.bobo-lb[hidden] { display: none; }
.bobo-lb__fondo { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 96%, transparent); opacity: 0; transition: opacity 0.5s var(--ease); }
.bobo-lb.is-aperto .bobo-lb__fondo { opacity: 1; }
/* l'immagine la posiziona e la ridimensiona GSAP (left, top, width, height): object-fit: cover mantiene il ritaglio della miniatura finché si espande */
.bobo-lb__img { position: fixed; left: 0; top: 0; display: block; max-width: none; object-fit: cover; opacity: 0; -webkit-user-drag: none; user-select: none; }
.bobo-lb__btn {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: transparent;
	color: var(--color-ink);
	border: 1px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.bobo-lb__btn:hover:not(:disabled) { background: var(--color-accent-dark); color: var(--color-on-accent); border-color: var(--color-accent-dark); }
.bobo-lb__btn:disabled { opacity: 0.3; cursor: default; }
.bobo-lb__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.bobo-lb__close { top: var(--space-md); right: var(--space-md); }
.bobo-lb__prev { left: var(--space-md); top: 50%; margin-top: -1.5rem; }
.bobo-lb__next { right: var(--space-md); top: 50%; margin-top: -1.5rem; }
.bobo-lb__count { position: absolute; left: 0; right: 0; bottom: var(--space-md); z-index: 2; margin: 0 auto; color: var(--color-ink-muted); font-size: var(--text-sm); letter-spacing: 0.16em; text-align: center; }
@media (max-width: 37.5rem) {
	.bobo-lb__prev, .bobo-lb__next { top: auto; bottom: var(--space-md); margin-top: 0; }
	.bobo-lb__prev { left: var(--space-md); }
	.bobo-lb__next { right: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) { .bobo-lb__fondo, .bobo-lb__btn { transition: none; } }

/* Menu a schermo intero con timeline GSAP (main.js, feature "menu"): con html.bobo-menu-gsap il movimento lo scrive GSAP tramite le variabili
   --c1 e --c2 (tendine), --ln (linea dei recapiti) e --co (da che lato si aprono le tendine) sul <nav>; qui si spengono le transizioni CSS
   equivalenti. Senza GSAP o con "riduci movimento" la classe non c'è e vale il menu in CSS di prima. */
@media (max-width: 62rem) {
	.bobo-menu-gsap .site-header .site-nav { transition: visibility 0s linear 0.9s; }
	.bobo-menu-gsap .site-header .site-nav.is-open { transition-delay: 0s; }
	.bobo-menu-gsap .site-nav::before,
	.bobo-menu-gsap .site-nav.is-open::before { transform: scaleY(var(--c1, 0)); transform-origin: var(--co, bottom); transition: none; }
	.bobo-menu-gsap .site-nav::after,
	.bobo-menu-gsap .site-nav.is-open::after { transform: scaleY(var(--c2, 0)); transform-origin: var(--co, bottom); transition: none; }
	.bobo-menu-gsap .site-header .nav-menu > li > a,
	.bobo-menu-gsap .site-nav.is-open .nav-menu > li > a { transform: none; transition: translate 0.6s var(--ease-out); }
	.bobo-menu-gsap .site-header .nav-menu > li.menu-item-has-children > a,
	.bobo-menu-gsap .site-nav.is-open .nav-menu > li.menu-item-has-children > a { opacity: 1; }
	.bobo-menu-gsap .site-header .sub-toggle,
	.bobo-menu-gsap .site-nav.is-open .sub-toggle { opacity: 1; transition: none; }
	.bobo-menu-gsap .site-header .site-nav__info,
	.bobo-menu-gsap .site-nav.is-open .site-nav__info { opacity: 1; transform: none; transition: none; }
	.bobo-menu-gsap .site-nav__info::before,
	.bobo-menu-gsap .site-nav.is-open .site-nav__info::before { transform: scaleX(var(--ln, 0)); transition: none; }
}