/* Coopyleft - segnalibro "Parliamo del tuo progetto" che si trasforma in finestra con il form */
.cl-ov{
	--cl-ov-ink:#21242a; --cl-ov-coral:#ed7466;
	--cl-ov-top:var(--wp-admin--admin-bar--height,0px);   /* sotto la barra di WordPress, se c'e' */
	--cl-ov-right:2.5rem;                                  /* distanza dal bordo destro */
	--cl-ov-ease:cubic-bezier(.65,0,.35,1);
	--cl-ov-tempo:.75s;
	font-family:'Urbanist',system-ui,sans-serif;
}

/* ---- il segnalibro ---- */
.cl-ov__seg{
	position:fixed;z-index:9990;top:calc(var(--cl-ov-top) - .2rem);right:var(--cl-ov-right);
	width:3.6rem;height:11rem;padding:1.6rem 0 1.9rem;box-sizing:border-box;
	display:flex;flex-direction:column;align-items:center;justify-content:space-between;
	background:var(--cl-ov-coral);color:var(--cl-ov-ink);text-decoration:none;cursor:pointer;
	clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);
	transform-origin:50% 0;animation:cl-ov-dondola 5s ease-in-out infinite;
	filter:drop-shadow(0 6px 8px rgba(33,36,42,.3));
	-webkit-tap-highlight-color:transparent;
}
.cl-ov__seg span{writing-mode:vertical-rl;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1}
.cl-ov__seg:hover{animation-duration:2s}
.cl-ov__seg:focus-visible{outline:3px solid var(--cl-ov-ink);outline-offset:3px}
@keyframes cl-ov-dondola{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* quando e' aperto il menu mobile del sito il segnalibro si nasconde (WordPress mette has-modal-open su <html>) */
html.has-modal-open .cl-ov__seg{visibility:hidden}

/* ---- velo scuro dietro la finestra ---- */
.cl-ov__vel{position:fixed;inset:0;z-index:9991;background:rgba(33,36,42,.5);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.cl-ov.is-aperto .cl-ov__vel{opacity:1;visibility:visible;transition:opacity .5s}

/* ---- la finestra: nasce con la forma del segnalibro e si trasforma ---- */
.cl-ov__pan{
	position:fixed;z-index:9992;visibility:hidden;box-sizing:border-box;overflow:hidden;
	background:var(--cl-ov-coral);
	clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);
	border-radius:0;
	transition:left var(--cl-ov-tempo) var(--cl-ov-ease),top var(--cl-ov-tempo) var(--cl-ov-ease),
		width var(--cl-ov-tempo) var(--cl-ov-ease),height var(--cl-ov-tempo) var(--cl-ov-ease),
		background-color .5s ease .1s,clip-path var(--cl-ov-tempo) var(--cl-ov-ease),border-radius var(--cl-ov-tempo) var(--cl-ov-ease);
}
.cl-ov__pan:focus{outline:0}
.cl-ov.is-attivo .cl-ov__pan{visibility:visible}
.cl-ov.is-aperto .cl-ov__pan{background:#fff;clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%)}

.cl-ov__cont{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:2rem 1.75rem 1.5rem;opacity:0;transition:opacity .25s;color:var(--cl-ov-ink)}
.cl-ov.is-aperto .cl-ov__cont{opacity:1;transition:opacity .35s ease .45s}

.cl-ov__chiudi{position:absolute;top:1rem;right:1rem;z-index:2;display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;border-radius:50%;border:2px solid var(--cl-ov-ink);background:#fff;color:var(--cl-ov-ink);cursor:pointer;transition:transform .3s}
.cl-ov__chiudi:hover{transform:rotate(90deg)}
.cl-ov__chiudi:focus-visible{outline:3px solid var(--cl-ov-ink);outline-offset:3px}

/* il form dentro la finestra: un po' piu' compatto che a pagina intera */
.cl-ov .cl-form{font-size:16px}
.cl-ov .cl-titolo{font-size:clamp(1.4rem,3vw,1.9rem);padding-right:2.5rem}
.cl-ov .cl-form__top{margin-bottom:1rem;padding-right:3rem}

/* niente scroll della pagina sotto la finestra aperta */
html.cl-ov-blocca{overflow:hidden}

/* telefono: il segnalibro e' piu' stretto e la finestra diventa a tutto schermo (la misura la calcola il JS) */
@media (max-width:600px){
	.cl-ov{--cl-ov-right:1rem}
	.cl-ov__seg{width:3.1rem;height:9.5rem;padding:1.3rem 0 1.6rem}
	.cl-ov__seg span{font-size:.7rem}
	.cl-ov__cont{padding:1.5rem 1.1rem 1.25rem}
}

@media (prefers-reduced-motion:reduce){
	.cl-ov__seg{animation:none}
	.cl-ov__pan,.cl-ov__vel,.cl-ov__cont{transition:none!important}
}