/* =====================================================================
   HEADER COOPYLEFT
   Struttura (si modifica da Gutenberg: parte del template "Header"):

     .coop-header                    contenitore a tutta larghezza, trasparente, sopra l'hero
       .coop-header-desktop          pillola scura: menu sinistro | logo | menu destro
       .coop-header-mobile           pillola scura: logo | burger (un solo menu con tutte le voci)

   Su desktop si vede solo .coop-header-desktop, sotto i 900px solo .coop-header-mobile.
   Colori e misure: si cambiano qui, nelle variabili.
   ===================================================================== */

   .coop-header {
	--hd-bg: #21242a;                 /* sfondo della pillola */
	--hd-text: #f5f5f5;               /* testo delle voci */
	--hd-active: #467ef7;             /* pillola della voce attiva */
	--hd-hover: rgba(255, 255, 255, 0.08);
	--hd-max: 1200px;                 /* larghezza massima della pillola desktop */
	--hd-pad-y: 12px;                 /* spazio sopra e sotto le voci, dentro la pillola scura */
	--hd-ease: cubic-bezier(0.16, 1, 0.3, 1);   /* parte veloce e si ferma morbida */
	--hd-logo: 130px;                 /* larghezza logo desktop */
	--hd-logo-mobile: 140px;           /* larghezza logo mobile */
}

/* ---------- contenitore ----------
   Lo sticky sta sulla parte del template (header), cosi' resta in cima allo scroll senza occupare spazio:
   l'header galleggia sopra l'hero. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);   /* rispetta la barra di WordPress quando sei loggato */
	z-index: 999;
	height: 0;
}

/* Gli !important qui servono solo a vincere le regole del tema (allineamento "full", bordo, ecc.) */
.coop-header {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	transform: none !important;     /* niente transform: romperebbe il menu a tutto schermo del mobile */
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 24px 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box;
	display: block;
}

/* Centratura: il tema da' agli elementi a tutta larghezza (alignfull) dei margini negativi laterali,
   che spostano l'header. Qui li azzeriamo, con un selettore piu' forte di quello del tema. */
.wp-site-blocks .coop-header.alignfull,
.wp-site-blocks > header.wp-block-template-part .coop-header {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

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

/* ---------- pillola desktop ---------- */
.coop-header .coop-header-desktop {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	width: min(calc(100% - 64px), var(--hd-max));
	margin: 0 auto;
	padding: var(--hd-pad-y) 16px;
	background: var(--hd-bg);
	border-radius: 999px;
}

/* i figli non devono ereditare margini "a blocchi" di WordPress: dentro la griglia ci pensa il gap */
.coop-header .coop-header-desktop > *,
.coop-header .coop-header-mobile > * {
	margin: 0;
}

.coop-header .coop-logo-center {
	justify-self: center;
}

.coop-header .coop-header-desktop .coop-logo-center img {
	display: block;
	width: var(--hd-logo);
	height: auto;
}

/* ---------- pillola mobile: nascosta finche' non serve ---------- */
.coop-header .coop-header-mobile {
	display: none;
}

/* ---------- menu (stesso stile desktop e mobile) ---------- */
.coop-header .wp-block-navigation {
	color: var(--hd-text);
	font-family: "Urbanist", sans-serif;
	font-size: 1.125rem;
}

/* le voci restano sempre su una riga (altrimenti, con la pillola stretta, andrebbero a capo e la gonfierebbero) */
.coop-header .coop-header-desktop .wp-block-navigation,
.coop-header .coop-header-desktop .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	white-space: nowrap;
}

.coop-header .coop-nav-left .wp-block-navigation__container {
	width: 100%;
	justify-content: flex-start;
	gap: clamp(8px, 2.5vw, 40px);
}

.coop-header .coop-nav-right .wp-block-navigation__container {
	width: 100%;
	justify-content: flex-end;
	gap: clamp(8px, 2.5vw, 40px);
}

.coop-header .wp-block-navigation-item__content {
	padding: 0.6rem 1.5rem;   /* pillola della voce: circa 33px di altezza */
	border-radius: 999px;
	color: var(--hd-text);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.coop-header .wp-block-navigation-item__content:hover,
.coop-header .wp-block-navigation-item__content:focus {
	background: var(--hd-hover);
	text-decoration: none !important;   /* niente sottolineatura in hover */
}

/* Il tema padre (blockpress) aggiunge alle voci un'altezza di riga di 2.5 e una sottolineatura animata
   (pseudo-elemento ::after che si allarga in hover). Qui li neutralizziamo, con un selettore piu' forte. */
.coop-header .wp-block-navigation-item > .wp-block-navigation-item__content {
	line-height: 1.2;
}

.coop-header .wp-block-navigation__container > .wp-block-navigation-item > a::after {
	content: none !important;
	display: none !important;
}

/* voce della pagina in cui ti trovi */
.coop-header .current-menu-item > .wp-block-navigation-item__content,
.coop-header .current-menu-ancestor > .wp-block-navigation-item__content,
.coop-header .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--hd-active);
	color: #fff;
}

/* sottomenu (es. Chi siamo > Team, Partners) */
.coop-header .wp-block-navigation__submenu-container {
	min-width: 12rem;
	padding: 0.5rem;
	border: 0;
	border-radius: 1.25rem;
	background: var(--hd-bg);
	color: var(--hd-text);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
}

.coop-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1rem;
}

/* desktop stretto: voci piu' compatte, cosi' stanno tutte */
@media (min-width: 901px) and (max-width: 1100px) {
	.coop-header .coop-header-desktop .wp-block-navigation-item__content {
		padding: 0.35rem 1rem;
	}
}

/* ---------- sotto i 900px: compare solo la pillola mobile ---------- */
@media (max-width: 900px) {
	.coop-header {
		padding: 16px 0 !important;
	}

	/* stessa specificita' della regola "display: grid" sopra, e viene dopo: vince questa */
	.coop-header .coop-header-desktop {
		display: none;
	}

	.coop-header .coop-header-mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 32px);
		margin: 0 auto;
		padding: 10px 18px;
		background: var(--hd-bg);
		border-radius: 999px;
	}

	.coop-header .coop-header-mobile .coop-logo-center img {
		display: block;
		width: var(--hd-logo-mobile);
		height: auto;
	}

	/* il burger */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container-open {
		color: #fff;
	}

	/* il menu a tutto schermo quando e' aperto */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--hd-bg);
		color: #fff;
		padding: 2rem 1.5rem;
	}

	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container-close {
		color: #fff;
	}

	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
		gap: 0.25rem;
	}

	.coop-header .coop-nav-mobile .wp-block-navigation-item__content {
		padding: 0.75rem 1.25rem;
		font-size: 1.5rem;
	}

	/* nel menu aperto le sottovoci restano visibili, senza riquadro */
	.coop-header .coop-nav-mobile .wp-block-navigation__submenu-container {
		padding: 0 0 0 1rem;
		background: transparent;
		box-shadow: none;
	}

	.coop-header .coop-nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 1.25rem;
	}
}


/* =====================================================================
   HEADER COMPATTO ALLO SCROLL (solo desktop con mouse)

   Il JavaScript (assets/js/custom.js) mette la classe .is-compact su .coop-header quando scorri
   la pagina. Allora la pillola si restringe al solo logo; quando ci passi sopra col mouse
   (o ci arrivi con la tastiera) si riallarga e le voci riappaiono una dopo l'altra.
   Sui dispositivi touch e sotto i 900px non succede nulla.
   ===================================================================== */
@media (hover: hover) and (min-width: 901px) {

	/* come si allarga (hover) */
	.coop-header .coop-header-desktop {
		transition: width 0.8s var(--hd-ease), gap 0.8s var(--hd-ease);
	}

	/* mentre si muove (lo script mette .is-animating) tutto cio' che sbordo viene tagliato dalla pillola;
	   a riposo no, cosi' il sottomenu di "Chi siamo" puo' uscire dalla pillola */
	.coop-header.is-animating .coop-header-desktop {
		overflow: hidden;
	}

	/* le voci: entrano una dopo l'altra, dal logo verso l'esterno */
	.coop-header .coop-header-desktop .wp-block-navigation__container > .wp-block-navigation-item {
		transition: opacity 0.5s ease var(--d, 0s), translate 0.8s var(--hd-ease) var(--d, 0s);
	}

	.coop-header .coop-nav-left .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(1),
	.coop-header .coop-nav-right .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { --d: 0.25s; }
	.coop-header .coop-nav-left .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(2),
	.coop-header .coop-nav-right .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { --d: 0.32s; }
	.coop-header .coop-nav-left .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(3),
	.coop-header .coop-nav-right .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { --d: 0.39s; }

	/* compatto: solo il logo (non col mouse sopra e non con il focus da tastiera) */
	.coop-header.is-compact .coop-header-desktop:not(:hover):not(:focus-within) {
		width: calc(var(--hd-logo) + 3rem);
		gap: 0;
		overflow: hidden;
		/* si richiude un attimo dopo che il mouse esce, per non "sfarfallare" */
		transition: width 0.7s var(--hd-ease) 0.2s, gap 0.7s var(--hd-ease) 0.2s;
	}

	.coop-header.is-compact .coop-header-desktop:not(:hover):not(:focus-within) .wp-block-navigation__container > .wp-block-navigation-item {
		opacity: 0;
		translate: 0 0.5rem;
		transition: opacity 0.2s ease, translate 0.3s ease;   /* spariscono subito */
	}
}

@media (prefers-reduced-motion: reduce) {
	.coop-header .coop-header-desktop,
	.coop-header .coop-header-desktop .wp-block-navigation__container > .wp-block-navigation-item {
		transition: none !important;
	}
}


/* Piccola ombra sotto la pillola dell'header (desktop e mobile) */
.coop-header {
	--hd-shadow: 0 6px 20px rgba(33, 36, 42, 0.16), 0 2px 6px rgba(33, 36, 42, 0.10);
}
.coop-header .coop-header-desktop,
.coop-header .coop-header-mobile {
	box-shadow: var(--hd-shadow);
}


/*
 * Coopyleft - bottoni (blocco Pulsante di WordPress)
 *
 * Un solo file per tutti i bottoni del sito, cosi' condividono altezza, colori e font.
 * Ogni tipo di bottone e' uno "stile del blocco" Pulsante:
 *
 *   Secondario  ->  classe  is-style-secondario   (testo + cerchio corallo con freccia)
 *   Primario    ->  classe  is-style-primario     (in fondo a questo file)
 *
 * Il TESTO e il LINK si modificano dal blocco Pulsante, come sempre.
 * La FRECCIA e' un SVG fisso dentro questo CSS: non si cambia dall'editor.
 * Il testo si scrive normale ("Scopri di più"): diventa maiuscolo da solo.
 *
 * VARIABILI (facoltative, valgono per tutti i bottoni; si possono impostare anche su un contenitore)
 *   --btn-h      altezza del bottone, di base 3rem. Testo, freccia e spazi si adattano da soli.
 *   --btn-dark   colore scuro, di base #21242a
 *   --btn-light  colore chiaro, di base #fefcf9
 *   --btn-accent colore arancione del bottone primario, di base #ed7466
 * Esempio: .sezione-servizi { --btn-h: 3rem; }
 */


/* =====================================================================
   SECONDARIO  ->  TESTO + CERCHIO CORALLO CON FRECCIA
   Niente pillola e niente bordo: testo maiuscolo in grassetto, con a destra un cerchio corallo
   e la freccia scura. Hover (mouse), tocco (telefono/tablet) o focus (tastiera): il cerchio ruota di 45 gradi.
   Il colore del testo e' quello del contenitore (su fondo blu: testo bianco).
   Variabili facoltative:  --btn-accent (colore del cerchio), --btn-link-color (colore del testo)
   ===================================================================== */

   .wp-block-button.is-style-secondario .wp-block-button__link {
	--btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--btn-link-color, inherit);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* Il cerchio corallo con la freccia scura */
.wp-block-button.is-style-secondario .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--btn-accent, var(--wp--preset--color--coral, #ed7466));
	background-image: var(--btn-arrow);
	background-size: 55%;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.3s;
	/* azzera eventuali regole vecchie del secondario (maschera della freccia, posizione assoluta) */
	-webkit-mask: none;
	mask: none;
	position: static;
	top: auto;
	bottom: auto;
	left: auto;
}

/* il vecchio cerchio scuro che si allargava non serve piu' */
.wp-block-button.is-style-secondario .wp-block-button__link::before {
	content: none;
}

.wp-block-button.is-style-secondario .wp-block-button__link:active::after,
.wp-block-button.is-style-secondario .wp-block-button__link.is-tapped::after,
.wp-block-button.is-style-secondario .wp-block-button__link:focus-visible::after {
	transform: rotate(45deg);
}

@media (hover: hover) {
	.wp-block-button.is-style-secondario .wp-block-button__link:hover::after {
		transform: rotate(45deg);
	}
}

.wp-block-button.is-style-secondario .wp-block-button__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-secondario .wp-block-button__link::after {
		transition: none;
	}
}


/* =====================================================================
   PRIMARIO
   Normale: pillola bianca, bordo scuro, cerchio arancione a sinistra con la freccia bianca, testo scuro.
   Hover (mouse) o tocco (telefono/tablet): il cerchio riempie tutta la pillola,
   la freccia diventa scura, il testo resta scuro.
   Stesse animazioni e stesse variabili del secondario.
   ===================================================================== */

.wp-block-button.is-style-primario .wp-block-button__link {
	--btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 20 4M8 4h12v12'/%3E%3C/svg%3E");

	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--btn-h, 3rem);
	padding: 0 calc(var(--btn-h, 3rem) * 0.62) 0 calc(var(--btn-h, 3rem) * 1.3);
	border: 2px solid var(--btn-dark, #21242a);
	border-radius: 999px;
	background-color: #ffffff;
	color: var(--btn-dark, #21242a);
	font-family: inherit;
	font-size: calc(var(--btn-h, 3rem) * 0.32);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.25s ease 0.08s, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Il cerchio arancione: parte largo quanto l'altezza, in hover si allarga a tutta la pillola */
.wp-block-button.is-style-primario .wp-block-button__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--btn-h, 3rem) - 4px);   /* dentro il bordo: il bordo resta visibile sopra il cerchio */
	border-radius: 999px;
	background-color: var(--btn-accent, var(--wp--preset--color--coral, #ed7466));
	transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* La freccia: bianca a riposo, scura quando il cerchio si e' allargato */
.wp-block-button.is-style-primario .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--btn-h, 3rem) - 4px);
	background-color: #ffffff;
	-webkit-mask: var(--btn-arrow) center / 52% no-repeat;
	mask: var(--btn-arrow) center / 52% no-repeat;
	transition: background-color 0.25s ease 0.08s;
}

/* Stato "aperto": tocco su telefono/tablet (:active) e tastiera (:focus-visible) */
.wp-block-button.is-style-primario .wp-block-button__link:active::before,
.wp-block-button.is-style-primario .wp-block-button__link.is-tapped::before,
.wp-block-button.is-style-primario .wp-block-button__link:focus-visible::before {
	width: 100%;
}
.wp-block-button.is-style-primario .wp-block-button__link:active::after,
.wp-block-button.is-style-primario .wp-block-button__link.is-tapped::after,
.wp-block-button.is-style-primario .wp-block-button__link:focus-visible::after {
	background-color: var(--btn-dark, #21242a);
}

/* Col mouse: solo dove l'hover esiste davvero, cosi' sul touch non resta "appiccicato" */
@media (hover: hover) {
	.wp-block-button.is-style-primario .wp-block-button__link:hover::before {
		width: 100%;
	}
	.wp-block-button.is-style-primario .wp-block-button__link:hover::after {
		background-color: var(--btn-dark, #21242a);
	}
}

.wp-block-button.is-style-primario .wp-block-button__link:focus-visible {
	outline: 3px solid var(--btn-dark, #21242a);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-primario .wp-block-button__link,
	.wp-block-button.is-style-primario .wp-block-button__link::before,
	.wp-block-button.is-style-primario .wp-block-button__link::after {
		transition: none;
	}
}


/* =====================================================================
   OMBRA "SOLLEVATA" (primario e secondario)
   Stessa ombra piena delle chip del form: il bottone sale di 2px e sotto compare un'ombra scura netta.
   Si attiva come l'animazione: hover col mouse, tocco su telefono/tablet, focus da tastiera.
   ===================================================================== */

.wp-block-button.is-style-primario .wp-block-button__link.is-tapped,
.wp-block-button.is-style-primario .wp-block-button__link:focus-visible {
	box-shadow: 0 4px 0 var(--btn-dark, #21242a);
	transform: translateY(-2px);
}


@media (hover: hover) {
	.wp-block-button.is-style-primario .wp-block-button__link:hover {
		box-shadow: 0 4px 0 var(--btn-dark, #21242a);
		transform: translateY(-2px);
	}

}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-primario .wp-block-button__link {
		transition: none;
	}
}

.sv-card-primaria,
.sv-card-secondaria {
	transition: background 0.3s,
	            transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
	            box-shadow 0.3s;
}

/* Card primaria */
.sv-card-primaria {
	background: #ffffff;
	border: 1.5px solid #ffffff !important;
	border-radius: 2rem;
}

/* Card secondaria */
.sv-card-secondaria {
	background: rgba(255, 255, 255, 0.1);
	border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 2rem;
}

/* Hover: solo dove esiste davvero (mouse), così sul telefono non resta "appiccicato" */
@media (hover: hover) {
	.sv-card-primaria:hover,
	.sv-card-secondaria:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 30px -10px rgba(33, 36, 42, 0.45);
	}

	.sv-card-secondaria:hover {
		background: rgba(255, 255, 255, 0.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-card-primaria,
	.sv-card-secondaria { transition: none; }
}

.sv-griglia .wp-block-post-template > li { display: flex; }

.sv-card-primaria,
.sv-card-secondaria {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.sv-card-primaria .wp-block-buttons,
.sv-card-secondaria .wp-block-buttons {
	margin-top: auto;
}


/* Sfondo primario che entra con lo scroll: da "Per chi lavoriamo" fino a "Strumenti e tecnologie" */
.cl-sfondo-primario {
	--cl-sfuma: 60vh;   /* sfumatura sopra il gruppo: sale sopra la sezione precedente, quindi non esagerare */
	--cl-da: 0vh;       /* l'animazione parte quando il gruppo entra dal basso dello schermo */
	--cl-a: 58vh;       /* e finisce dopo questo scroll: 58vh = il titolo è a circa il 42% dall'alto */

	position: relative;
	isolation: isolate;
	view-timeline: --cl-sfondo block;   /* la misura dello scroll è sul gruppo, non sul colore */

	/* a tutta larghezza schermo */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
	padding-inline: 5vw;
	box-sizing: border-box;
	overflow-x: clip;
    z-index: 1;
}

/* Il colore sta su un livello dietro ai contenuti, con il bordo in alto sfumato */
.cl-sfondo-primario::before {
	content: "";
	position: absolute;
	top: calc(var(--cl-sfuma) * -1);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
	background: #467ef7;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--cl-sfuma));
	mask-image: linear-gradient(180deg, transparent 0, #000 var(--cl-sfuma));
}

/* Animazione legata allo scroll: il blu entra piano piano */
@supports (animation-timeline: view()) {
	.cl-sfondo-primario::before {
		opacity: 0;
		animation: cl-sfondo-entra linear both;
		animation-timeline: --cl-sfondo;
		animation-range: cover var(--cl-da) cover var(--cl-a);
	}
	@keyframes cl-sfondo-entra {
		to { opacity: 1; }
	}
}

/* Chi preferisce meno movimento: blu fisso */
@media (prefers-reduced-motion: reduce) {
	.cl-sfondo-primario::before {
		animation: none;
		opacity: 1;
	}
}

/* Sul blu, pillola e cerchi dell'orbita nello stesso blu sparirebbero: li passo allo scuro */
.cl-sfondo-primario .cm { --cm-bg: #21242a; }
.cl-sfondo-primario .co-orbit { --co-primary: #21242a; --co-primary-hover: #121418; }

/* La sezione subito prima dello sfondo blu sta davanti al colore: le card restano pulite */
.wp-site-blocks > :has(+ .cl-sfondo-primario) {
	position: relative;
	z-index: 2;
}


/* =====================================================================
   MENU MOBILE APERTO  (pannello blu con griglia, voci grandi, bottone in fondo)
   La voce "Parliamo del tuo progetto" in fondo al menu la aggiunge il plugin Coopyleft Contatto Overlay (classe menu-cta):
   non va creata a mano da Gutenberg. Senza il plugin la voce non c'e' e il menu mobile resta com'e'.
   ===================================================================== */

/* se per sbaglio c'e' un blocco (Pulsante o Paragrafo) con classe menu-cta messo a mano nell'header, fuori dal menu, non va mostrato */
header .wp-block-buttons > .wp-block-button.menu-cta,
.coop-header > .menu-cta { display: none !important; }   /* anche un paragrafo con questa classe, messo a mano nel gruppo dell'header */

/* il bottone del menu non serve sul desktop (li' c'e' il segnalibro) */
@media (min-width: 901px) {
	.coop-header .menu-cta { display: none !important; }
}

@media (max-width: 900px) {

	/* ---- il pannello ---- */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
		--mm-ink: #21242a;
		--mm-coral: #ed7466;
		background-color: #467ef7;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.17) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.17) 1px, transparent 1px);
		background-size: 6.7rem 7.6rem;
		color: #fff;
		padding: 0 !important;
		display: flex;
		flex-direction: column;
	}

	/* la scritta in alto a sinistra, sulla stessa riga della X (se vuoi il logo vero, vedi in fondo) */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open::before {
		content: "COOPYLEFT";
		position: absolute;
		top: 1.5rem;
		left: 1.6rem;
		font-family: "Urbanist", sans-serif;
		font-size: 1.35rem;
		font-weight: 800;
		line-height: 2.7rem;
		color: #fff;
	}

	/* la X: cerchio bianco in alto a destra */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 1.5rem;
		right: 1.25rem;
		display: grid;
		place-items: center;
		width: 2.7rem;
		height: 2.7rem;
		padding: 0;
		border-radius: 50%;
		background: #fff;
		color: var(--mm-ink);
	}
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 1.4rem;
		height: 1.4rem;
	}

	/* ---- contenuto: occupa tutta l'altezza, il bottone scende in fondo ---- */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 6rem 1.25rem 1.5rem !important;
		box-sizing: border-box;
	}

	/* ---- le voci: grandi, senza numeri e senza linee ---- */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
		flex: 1;
		width: 100%;
	}

	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: cl-mm-entra 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
	}
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation-delay: calc(0.22s + var(--i, 0) * 0.05s); }
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { --i: 1; }
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { --i: 2; }
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { --i: 3; }
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { --i: 4; }
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { --i: 5; }
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .menu-cta { --i: 7; }
	@keyframes cl-mm-entra {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}

	/* ---- ingresso e uscita del pannello: un cerchio che si apre (e si richiude) partendo dal burger ---- */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
		--mm-origine: calc(100% - 2.9rem) 2.9rem;   /* dove sta il burger: da qui parte il cerchio */
		animation: cl-mm-apri 0.65s cubic-bezier(0.65, 0, 0.35, 1) both;
	}
	@keyframes cl-mm-apri {
		from { clip-path: circle(0 at var(--mm-origine)); }
		to   { clip-path: circle(150vmax at var(--mm-origine)); }
	}
	/* uscita: la classe cl-mm-esce la mette il JavaScript del plugin (menu-mobile.js) un attimo prima di chiudere */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open.cl-mm-esce {
		animation: cl-mm-chiudi 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
	}
	@keyframes cl-mm-chiudi {
		from { clip-path: circle(150vmax at var(--mm-origine)); }
		to   { clip-path: circle(0 at var(--mm-origine)); }
	}
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open.cl-mm-esce .wp-block-navigation-item {
		animation: cl-mm-esci 0.25s ease both;
		animation-delay: 0s;
	}
	@keyframes cl-mm-esci {
		from { opacity: 1; transform: none; }
		to   { opacity: 0; transform: translateY(-10px); }
	}

	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 0.1rem 0.9rem;
		margin-left: -0.9rem;
		border-radius: 999px;
		color: #fff;
		font-family: "Urbanist", sans-serif;
		font-size: clamp(1.9rem, 8.5vw, 2.5rem);
		font-weight: 800;
		line-height: 1.15;
	}

	/* la pagina in cui ti trovi: pillola bianca */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content,
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
		margin-left: 0;   /* il bordo sinistro della pillola sta allineato al testo delle altre voci */
		background: #fff;
		color: var(--mm-ink);
	}

	/* il tema padre disegna una sottolineatura animata (::after) sulle voci: nel menu aperto non serve */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		content: none !important;
		display: none !important;
	}

	/* sottovoci (Chi siamo > Team, ...): piccole pillole sotto la voce */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem;
		padding: 0.15rem 0 0.4rem !important;
		margin: 0;
		background: transparent;
		box-shadow: none;
		border: 0;
		width: auto;
		min-width: 0;
	}
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		margin: 0;
		padding: 0.3rem 0.85rem;
		border: 1.5px solid #fff;
		font-size: 0.95rem;
		font-weight: 800;
		line-height: 1.2;
		color: #fff;
	}
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background: #fff;
		color: var(--mm-ink);
	}
	/* WordPress sposta il sottomenu con top/left/position (e' pensato per il menu a tendina del desktop):
	   qui lo rimetto nel flusso, sotto la voce, cosi' non si sovrappone a quella dopo */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		height: auto !important;
		overflow: visible !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .has-child {
		height: auto;
	}

	/* la freccina del sottomenu non serve: le sottovoci sono sempre visibili */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; }

	/* ---- il bottone "Parliamo del tuo progetto" (ultima voce con classe menu-cta) ---- */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .menu-cta {
		margin-top: auto;
		width: 100%;
		padding-top: 1.25rem;
	}

	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .menu-cta > .wp-block-navigation-item__content {
		--btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 20 4M8 4h12v12'/%3E%3C/svg%3E");
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 3.4rem;
		margin: 0;
		padding: 0 1.2rem 0 3.9rem;
		border: 2px solid var(--mm-ink);
		border-radius: 999px;
		background: #fff;
		color: var(--mm-ink);
		font-size: 0.9rem;
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		white-space: nowrap;
		box-shadow: 0 4px 0 var(--mm-ink);
	}
	/* cerchio corallo a sinistra con la freccia (come il bottone Primario) */
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .menu-cta > .wp-block-navigation-item__content::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		width: calc(3.4rem - 4px);
		height: auto;
		border-radius: 999px;
		background: var(--mm-coral);
	}
	.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .menu-cta > .wp-block-navigation-item__content::after {
		content: "" !important;
		display: block !important;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: calc(3.4rem - 4px);
		height: auto !important;   /* il tema da' un'altezza di 2px alla sua sottolineatura: va azzerata */
		min-height: 0;
		transform: none;
		transition: none;
		background: #fff;
		-webkit-mask: var(--btn-arrow) center / 52% no-repeat;
		mask: var(--btn-arrow) center / 52% no-repeat;
	}

	@media (prefers-reduced-motion: reduce) {
		.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open,
		.coop-header .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: none !important; }
	}
}

/*
   LOGO VERO AL POSTO DELLA SCRITTA: togli il blocco ::before "COOPYLEFT" qui sopra e usa
   .coop-nav-mobile .wp-block-navigation__responsive-container.is-menu-open::before {
       content: ""; width: 140px; height: 2.7rem;
       background: url("/percorso/del/logo-bianco.svg") left center / contain no-repeat;
   }
*/


/* =====================================================================
   HEADER MOBILE CHIUSO: lascia a destra lo spazio del segnalibro
   Il segnalibro (plugin Contatto Overlay) sta in alto a destra, largo 3.1rem a 1rem dal bordo.
   La pillola dell'header si restringe a sinistra del segnalibro, cosi' il burger non ci finisce sotto.
   Vale solo dove il segnalibro c'e' (il plugin mette la classe cl-ov-attivo sul body).
   Se cambi larghezza o posizione del segnalibro, cambia --hd-riserva-seg.
   ===================================================================== */
@media (max-width: 900px) {
	body.cl-ov-attivo .coop-header {
		--hd-riserva-seg: 4.6rem;   /* 3.1rem di segnalibro + 1rem dal bordo + un po' di respiro */
	}
	body.cl-ov-attivo .coop-header .coop-header-mobile {
		width: calc(100% - 1rem - var(--hd-riserva-seg));
		margin-left: 1rem;
		margin-right: auto;
	}
}
/* tablet: il segnalibro e' piu' largo e piu' staccato dal bordo (3.6rem a 2.5rem) */
@media (min-width: 601px) and (max-width: 900px) {
	body.cl-ov-attivo .coop-header { --hd-riserva-seg: 7.2rem; }
}