/* ═══════════════════════════════════════════════════════════════════════
   Barra e piè di pagina del sito dentro le guide (25/10/2026)
   Le guide sono pagine statiche generate nel repo dell'app, con il loro stile:
   qui tutto ha il prefisso cps- per non toccarlo. Aspetto e misure sono quelli
   del tema (wp-themes/cantierepro-vetrina/assets/css/main.css, .nav e .footer):
   se cambiano lì, vanno riportati qui.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Manrope';
	src: url('/wp-content/themes/cantierepro-vetrina/assets/fonts/Manrope-latin.woff2') format('woff2');
	font-weight: 200 800;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('/wp-content/themes/cantierepro-vetrina/assets/fonts/Inter-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Fira Code';
	src: url('/wp-content/themes/cantierepro-vetrina/assets/fonts/FiraCode-latin.woff2') format('woff2');
	font-weight: 300 700;
	font-display: swap;
}

.cps-nav, .cps-footer {
	--cps-ink: #eaf0fa;
	--cps-muted: #94a3b8;
	--cps-dim: #7c8ba1;
	--cps-o1: #ffb340;
	--cps-o2: #ff7a00;
	--cps-line: rgba(148, 163, 184, .14);
	--cps-glass: rgba(148, 163, 184, .06);
	--cps-glass2: rgba(148, 163, 184, .1);
	--cps-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1rem; line-height: 1.65; color: var(--cps-ink);
	-webkit-font-smoothing: antialiased;
}
.cps-nav a, .cps-footer a { color: inherit; text-decoration: none; }
.cps-nav svg, .cps-footer svg, .cps-footer img { display: block; max-width: 100%; }

/* ── Una lingua alla volta: quella della sezione attiva della guida ──
   Stesso meccanismo della guida (.doc:target), così cambiando lingua dalla
   sua barra cambiano anche menu e piè di pagina, senza JavaScript. */
.cps-l { display: none; }
body:not(:has(.doc:target)) .cps-l[lang="it"],
body:has(#it:target) .cps-l[lang="it"],
body:has(#en:target) .cps-l[lang="en"],
body:has(#fr:target) .cps-l[lang="fr"],
body:has(#de:target) .cps-l[lang="de"],
body:has(#es:target) .cps-l[lang="es"] { display: flex; }
@supports not selector(:has(*)) {
	.cps-l[lang="it"] { display: flex; }
}

/* ── Barra in alto ─────────────────────────────────────────────────── */
/* Il body della guida è una colonna flex: order mette la barra prima di quella
   delle lingue (che ha order: -1) e il piè di pagina dopo le sezioni. */
.cps-nav {
	order: -2; position: sticky; top: 0; z-index: 60;
	background: rgba(5, 8, 15, .94);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border-bottom: 1px solid var(--cps-line);
}
.cps-nav__inner {
	align-items: center; justify-content: space-between;
	height: 4.6rem; width: min(76rem, calc(100% - 3rem)); margin-inline: auto;
}
.cps-brand { display: inline-flex; align-items: center; gap: .7rem; }
.cps-logo { border-radius: 9px; box-shadow: 0 4px 14px rgba(255, 122, 0, .3); }
.cps-name {
	font-family: var(--cps-display); font-weight: 800; font-size: 1.22rem;
	letter-spacing: -.01em; color: var(--cps-ink);
}
.cps-name em { font-style: normal; color: var(--cps-o1); }
.cps-links { display: flex; align-items: center; gap: 1.9rem; }
.cps-links > a:not(.cps-btn) {
	font-size: .95rem; font-weight: 500; color: var(--cps-muted); transition: color .2s;
}
.cps-links > a:not(.cps-btn):hover { color: var(--cps-ink); }
.cps-btn {
	display: inline-flex; align-items: center;
	font-family: var(--cps-display); font-weight: 700; font-size: .9rem;
	padding: .55rem 1.15rem; border-radius: 999px; white-space: nowrap;
	background: linear-gradient(120deg, var(--cps-o1), var(--cps-o2));
	color: #131313 !important; box-shadow: 0 8px 28px rgba(255, 122, 0, .35);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.cps-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 122, 0, .5); }
.cps-toggle { display: none; }

/* «Guida» a discesa, come sul sito */
.cps-menu { position: relative; }
.cps-drop {
	display: inline-flex; align-items: center; gap: .35rem;
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; font-size: .95rem; font-weight: 500; color: var(--cps-muted);
	transition: color .2s;
}
.cps-drop:hover, .cps-drop[aria-expanded="true"] { color: var(--cps-ink); }
.cps-freccia { transition: transform .2s; }
.cps-drop[aria-expanded="true"] .cps-freccia { transform: rotate(180deg); }
.cps-voci {
	position: absolute; top: calc(100% + .9rem); left: 50%; z-index: 61;
	min-width: 15rem; padding: .45rem;
	display: flex; flex-direction: column;
	background: rgba(5, 8, 15, .97);
	border: 1px solid var(--cps-line); border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
	opacity: 0; visibility: hidden; transform: translate(-50%, -.4rem);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.cps-voci::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.cps-drop[aria-expanded="true"] + .cps-voci { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 961px) {
	.cps-menu:hover .cps-voci { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
	.cps-menu:hover .cps-drop { color: var(--cps-ink); }
}
.cps-voci a {
	display: flex; flex-direction: column; gap: .1rem; line-height: 1.4;
	padding: .6rem .8rem; border-radius: 10px; transition: background .2s;
}
.cps-voci a:hover, .cps-voci a:focus-visible, .cps-voci a[aria-current="page"] { background: var(--cps-glass2); }
.cps-voci b { font-weight: 600; font-size: .95rem; color: var(--cps-ink); }
.cps-voci a[aria-current="page"] b { color: var(--cps-o1); }
.cps-voci span { font-size: .82rem; color: var(--cps-muted); }

/* La barra delle lingue della guida resta appiccicata sotto quella del sito,
   e i capitoli aperti dall'indice non finiscono sotto le due barre. */
.langbar { top: 4.6rem; }
h2[id] { scroll-margin-top: calc(4.6rem + 72px); }
/* Aprendo /de/guida/ la guida salta a #de, cioè all'inizio della sezione, che
   ora sta sotto due barre: senza margine la testata finiva coperta. Il margine
   è più alto di barre + lingue, quindi lo scorrimento si ferma in cima. */
.doc { scroll-margin-top: 20rem; }

/* Indice: il numero è già nel titolo («1. A chi serve…»), quello dell'elenco
   lo raddoppiava. sito.js mette la classe solo se è davvero così. */
.indice ol.cps-numerata { list-style: none; padding-left: 0; }

/* ── Piè di pagina ─────────────────────────────────────────────────── */
.cps-footer {
	order: 2; margin-top: 0;
	background: #04060b; border-top: 1px solid var(--cps-line);
	padding: 3.5rem 0 2.5rem;
}
.cps-footer__in { flex-direction: column; width: min(76rem, calc(100% - 3rem)); margin-inline: auto; }
.cps-footer__top {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem;
	padding-bottom: 2.5rem; border-bottom: 1px solid var(--cps-line);
}
.cps-tagline { color: var(--cps-muted); font-size: .92rem; margin: 1rem 0 0; max-width: 22rem; }
.cps-col { display: flex; flex-direction: column; gap: .6rem; }
.cps-col h3 {
	font-family: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: .72rem; font-weight: 400; letter-spacing: .16em; line-height: 1.4;
	text-transform: uppercase; color: var(--cps-dim);
	margin: 0 0 .4rem; padding: 0; border: 0;
}
.cps-col a { color: var(--cps-muted); font-size: .93rem; transition: color .2s; }
.cps-col a:hover { color: var(--cps-o1); }
.cps-footer__bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding-top: 2.2rem; flex-wrap: wrap;
}
.cps-footer__bottom img { height: 26px; width: auto; opacity: .8; }
.cps-footer__bottom p { font-size: .82rem; color: var(--cps-dim); margin: 0; }

/* ── Telefono e tablet: menu a scomparsa, come sul sito ───────────── */
@media (max-width: 960px) {
	.cps-footer__top { grid-template-columns: 1fr; gap: 2rem; }

	.cps-toggle {
		display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
		width: 44px; height: 44px; padding: 0; cursor: pointer;
		background: var(--cps-glass); border: 1px solid var(--cps-line); border-radius: 12px;
	}
	.cps-toggle span {
		display: block; width: 20px; height: 2px; border-radius: 2px;
		background: var(--cps-ink); transition: transform .3s, opacity .3s;
	}
	.cps-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.cps-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.cps-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	/* fixed dentro una barra con backdrop-filter si misura dalla barra stessa:
	   4.6rem = subito sotto */
	.cps-links {
		position: fixed; inset: 4.6rem 0 auto 0; z-index: 59;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #05080f; border-bottom: 1px solid var(--cps-line);
		padding: .8rem 1.5rem 1.5rem;
		max-height: calc(100vh - 4.6rem); max-height: calc(100dvh - 4.6rem); overflow-y: auto;
		transform: translateY(-130%); visibility: hidden;
		transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility .4s;
	}
	.cps-links.is-open { transform: translateY(0); visibility: visible; }
	.cps-links > a:not(.cps-btn) { padding: .9rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--cps-line); }
	.cps-links .cps-btn { margin-top: 1.2rem; justify-content: center; }
	.cps-menu { padding: .9rem 0 .4rem; border-bottom: 1px solid var(--cps-line); }
	.cps-drop { font-size: 1.05rem; cursor: default; pointer-events: none; }
	.cps-nav .cps-freccia { display: none; }
	.cps-voci, .cps-drop[aria-expanded="true"] + .cps-voci {
		position: static; min-width: 0; padding: .3rem 0 0;
		opacity: 1; visibility: visible; transform: none;
		background: none; border: 0; box-shadow: none;
	}
	.cps-voci::before { display: none; }
	.cps-voci a { flex-direction: row; align-items: baseline; gap: .6rem; padding: .55rem .2rem; }
}

/* Sul telefono due barre appiccicate in alto ruberebbero troppo schermo:
   quella delle lingue scorre via con la pagina. */
@media (max-width: 700px) {
	.langbar { position: static; }
	h2[id] { scroll-margin-top: calc(4.6rem + 14px); }
	/* Difetto della guida, non della barra: i nomi dei comandi («Scatta per
	   questa commessa») hanno white-space: nowrap e sul telefono allargavano la
	   pagina oltre lo schermo (441 px su 375), che scivolava di lato. */
	.ui { white-space: normal; }
}