/*
 * Sistema di layout Genus Marche.
 *
 * I colori e la scala tipografica stanno in tokens.css: qui c'e' solo la
 * struttura. Lo stile e' deliberatamente sobrio e ad alto contrasto: il
 * destinatario principale del sito e' la rendicontazione di un bando pubblico,
 * quindi leggibilita' e accessibilita' vengono prima dell'effetto.
 */

/* ---------- Reset minimo ---------- */

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

img { max-width: 100%; height: auto; }

/* ---------- Accessibilita' ---------- */

/*
 * Anello di focus visibile ovunque. Hello Elementor lo toglie in alcuni punti:
 * rimetterlo e' l'unico modo perche' chi naviga da tastiera sappia dove si trova.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gm-verde);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Testo per i soli lettori di schermo. Non usare display:none: quello lo toglie
 * anche a loro.
 */
.screen-reader-text,
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Al focus il link di salto torna visibile, sopra ogni altra cosa. */
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	padding: 12px 20px;
	background: var(--gm-verde);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
}

/* Chi ha chiesto meno animazioni non deve riceverne. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Contenitore ---------- */

.gm-wrap {
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* Larghezza di lettura: oltre i 75 caratteri l'occhio perde la riga. */
.gm-prosa { max-width: 68ch; }

/* ---------- Header ---------- */

/*
 * Testata fissa. Su pagine lunghe come Il progetto o gli archivi, dover risalire in
 * cima per cambiare sezione e' la prima cosa che stanca. Resta bassa e discreta:
 * scorrendo si compatta e stacca un'ombra, cosi' si capisce che galleggia sopra il
 * contenuto invece di essere incollata.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid var(--gm-linea);
	transition: box-shadow 240ms ease, border-color 240ms ease;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gm-sp-4);
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
	padding: var(--gm-sp-4) 20px;
}

/*
 * Con la barra di amministrazione visibile, top:0 fa scomparire il marchio sotto di
 * essa. Riguarda solo chi ha fatto l'accesso, cioe' chi cura il sito: se ne
 * accorgerebbe ogni giorno.
 */
.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/*
 * Scorrendo cambia SOLO l'ombra.
 *
 * Prima cambiava anche l'altezza, e siccome la testata e' sticky occupa spazio nel
 * flusso: rimpicciolirla alzava la pagina di colpo, e quello spostamento poteva
 * riportare lo scorrimento sotto la soglia facendo ripartire tutto. Un anello che
 * oscilla, e a schermo si vedono gli scatti.
 *
 * L'ombra non tocca il layout, quindi non puo' innescare nulla.
 */
.site-header.is-scorso {
	border-color: transparent;
	box-shadow: var(--gm-ombra);
}



/*
 * Area di rispetto del marchio: il manuale impone una distanza minima dagli
 * altri elementi, ed e' questa regola a garantirla anche quando il menu cresce.
 */
.site-header .site-branding { flex: 0 0 auto; padding-right: 24px; }

.gm-logo,
.site-branding .custom-logo-link { display: inline-block; line-height: 0; }

/*
 * Il marchio si dimensiona per altezza e non per larghezza: cosi' l'header resta
 * alto uguale anche se un giorno cambia la versione del logo, che ha proporzioni
 * diverse a seconda che il payoff stia su una riga o su due.
 *
 * La regola vale anche per il logo impostato dal cliente in Personalizza, che
 * WordPress stampa con un markup suo: senza, quel logo esce alla sua dimensione
 * naturale e sfonda la testata.
 */
/*
 * 56px perche' il marchio in uso e' il monogramma GM, senza payoff da leggere: a 92
 * la testata pesava piu' del contenuto. Se un giorno si torna al logotipo esteso,
 * che ha il payoff dentro, va rialzata almeno a 88 o quel testo sparisce.
 */
.site-branding img { height: 56px; width: auto; max-width: 100%; }

.site-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-navigation a {
	display: flex;
	align-items: center;
	/* 44px di altezza minima: sotto, il dito manca il bersaglio. */
	min-height: 44px;
	padding: 10px 14px;
	color: var(--gm-testo);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 200ms ease, color 200ms ease;
}

/*
 * Sottolineatura che cresce da sinistra invece del riquadro pieno: il riquadro
 * sposta l'attenzione sullo sfondo, la linea la lascia sulla parola.
 */
.site-navigation a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	background: var(--gm-verde);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-navigation a { position: relative; }

.site-navigation a:hover { color: var(--gm-verde); }
.site-navigation a:hover::after { transform: scaleX(1); }

.site-navigation .current-menu-item > a,
.site-navigation .current_page_item > a { color: var(--gm-verde); }

.site-navigation .current-menu-item > a::after,
.site-navigation .current_page_item > a::after { transform: scaleX(1); }

/* Pulsante del menu: esiste solo sotto i 900px. */
.gm-nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	min-width: 44px;
	padding: 10px 14px;
	background: none;
	border: 1px solid var(--gm-sabbia);
	border-radius: 4px;
	color: var(--gm-testo);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.gm-nav-toggle:hover { background: var(--gm-sabbia-chiara); }

.gm-nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Sezioni ---------- */

.gm-sezione { padding-block: var(--gm-sp-7); }
/*
 * Sfumatura verticale minima sulle fasce sabbia. Un fondino piatto su una pagina
 * lunga si legge come un buco; questa da' profondita' senza che si veda il gradiente.
 */
.gm-sezione--sabbia {
	background: linear-gradient(180deg, #faf6f2 0%, var(--gm-sabbia-chiara) 100%);
}

.gm-sezione > .gm-wrap > h2:first-child,
.gm-sezione > .gm-wrap > .gm-titolo { margin-top: 0; }

.gm-occhiello {
	display: block;
	margin-bottom: 8px;
	color: var(--gm-verde);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Griglie ---------- */

/*
 * auto-fill e non auto-fit: con auto-fit una scheda sola si allarga su tutta la
 * riga e sembra un banner. Con auto-fill le colonne restano quelle, e una scheda
 * sola resta larga come le altre.
 */
.gm-griglia {
	display: grid;
	gap: var(--gm-sp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	align-items: stretch;
}

/* ---------- Schede ---------- */

.gm-scheda {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--gm-sp-4) var(--gm-sp-4) var(--gm-sp-5);
	background: #fff;
	border: 1px solid var(--gm-linea);
	border-radius: var(--gm-raggio);
	box-shadow: var(--gm-ombra-tenue);
	/* Solo colore e ombra in transizione: scalare la scheda sposta il layout. */
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.gm-scheda:hover { border-color: var(--gm-sabbia); box-shadow: var(--gm-ombra); }

.gm-scheda h3 { margin: 0; }
.gm-scheda p { margin: 0; color: var(--gm-testo-tenue); }

a.gm-scheda { text-decoration: none; color: inherit; cursor: pointer; }

/*
 * Identita' dei tre Comuni: il colore sta nel bordo, mai nel testo.
 * Sabbia e rame non raggiungono il contrasto richiesto come colore di testo,
 * e per coerenza nessuno dei tre lo fa.
 */
.gm-scheda--san-severino-marche { border-left: 5px solid var(--gm-san-severino); }
.gm-scheda--cingoli { border-left: 5px solid var(--gm-cingoli); }
.gm-scheda--filottrano { border-left: 5px solid var(--gm-filottrano); }

/* ---------- Targhette ---------- */

.gm-tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gm-sabbia-chiara);
	color: var(--gm-testo);
	font-size: 13px;
	font-weight: 600;
	/* Il colore non e' mai l'unico indicatore: il nome del comune resta scritto. */
	border-left: 3px solid transparent;
}

.gm-tag--san-severino-marche { border-left-color: var(--gm-san-severino); }
.gm-tag--cingoli { border-left-color: var(--gm-cingoli); }
.gm-tag--filottrano { border-left-color: var(--gm-filottrano); }

/* ---------- Pulsanti ---------- */

.gm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 2px solid var(--gm-verde);
	border-radius: var(--gm-raggio-piccolo);
	background: var(--gm-verde);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.gm-btn:hover { background: var(--gm-verde-scuro); border-color: var(--gm-verde-scuro); color: #fff; }

.gm-btn--secondario { background: transparent; color: var(--gm-verde); }
.gm-btn--secondario:hover { background: var(--gm-verde); color: #fff; }

/* ---------- Elenco assi numerato ---------- */

.gm-assi { margin: 0; padding: 0; list-style: none; counter-reset: asse; }

.gm-assi li {
	position: relative;
	padding: 0 0 24px 56px;
	counter-increment: asse;
}

.gm-assi li::before {
	content: counter(asse);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gm-sabbia-chiara);
	color: var(--gm-verde);
	font-weight: 700;
}

.gm-assi h3 { margin: 6px 0 4px; }
.gm-assi p { margin: 0; color: var(--gm-testo-tenue); }

/* ---------- Footer ---------- */

/*
 * Fondo bianco come il file della banda istituzionale, che e' opaco e non
 * trasparente: su un fondino colorato si stampava come un rettangolo bianco in
 * mezzo alla sabbia. Con il bianco serve un bordo, altrimenti il footer si fonde
 * col contenuto della pagina e non si capisce piu' dove finisce.
 */
.gm-footer {
	background: #fff;
	color: var(--gm-testo);
	border-top: 1px solid #e0d6cc;
	padding-block: 48px 32px;
	margin-top: 64px;
}

.gm-footer h2 { font-size: 18px; margin: 0 0 12px; }

.gm-footer ul { margin: 0; padding: 0; list-style: none; }

.gm-footer li + li { margin-top: 4px; }

.gm-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gm-testo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gm-footer a:hover { color: var(--gm-verde); }

.gm-social { display: flex; gap: 8px; }

.gm-social a {
	justify-content: center;
	min-width: 44px;
	padding: 10px;
	border: 1px solid var(--gm-sabbia);
	border-radius: 4px;
	text-decoration: none;
}

.gm-social svg { width: 22px; height: 22px; fill: currentColor; }

/*
 * Spazio riservato alla banda dei loghi istituzionali. Il file non e' ancora
 * disponibile: tenere il posto ora significa che inserirlo sara' una sostituzione
 * di immagine e non un rifacimento dell'impaginato.
 */
#banda-loghi-istituzionali {
	min-height: 90px;
	margin-top: 32px;
	padding: 16px 0;
	border-top: 1px solid #e0d6cc;
	display: flex;
	align-items: center;
	/*
	 * La banda e' larga sette volte la sua altezza. Rimpicciolirla fino a farla
	 * stare in un telefono la ridurrebbe a una striscia di macchie: i loghi devono
	 * restare riconoscibili, perche' e' per questo che il bando li impone. Quindi
	 * si tiene un'altezza leggibile e, quando non ci sta, scorre nel suo contenitore
	 * invece di far scorrere tutta la pagina.
	 */
	overflow-x: auto;
}

#banda-loghi-istituzionali img {
	height: 96px;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

@media (max-width: 700px) {
	#banda-loghi-istituzionali img { height: 68px; }
}

.gm-dicitura {
	margin: 16px 0 0;
	color: #4a4a48;
	font-size: 13px;
	line-height: 1.6;
}

.gm-footer-legale {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #e0d6cc;
	font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.gm-nav-toggle { display: inline-flex; }

	.site-header-inner { flex-wrap: wrap; }

	.site-navigation {
		flex-basis: 100%;
		order: 3;
	}

	.site-navigation[hidden] { display: none; }

	.site-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: 12px;
		border-top: 1px solid #e6ded6;
	}

	.site-navigation a { padding: 12px 8px; }

	.site-branding img { height: 46px; }
}

@media (max-width: 600px) {
	.gm-sezione { padding-block: var(--gm-sp-6); }
	.gm-footer { padding-block: 36px 24px; }
	.gm-assi li { padding-left: 48px; }
}

/* ---------- Contenuto delle pagine e degli articoli ---------- */

/*
 * Hello Elementor lascia il contenuto a tutta larghezza. Su uno schermo grande
 * una riga di testo diventa lunghissima e l'occhio perde il capo riga: qui si
 * costruisce la colonna di lettura.
 */
/*
 * La larghezza la impone .gm-wrap, che sta dentro ogni template. Qui serve solo
 * lo stacco dall'header: raddoppiare il contenitore darebbe padding doppio.
 */
.site-main { padding-top: 40px; }

.site-main .page-header { margin-bottom: var(--gm-sp-6); }

.site-main .entry-title {
	margin: 0;
	color: var(--gm-verde);
}

.page-content > *,
.entry-content > * {
	max-width: 68ch;
	margin-inline: 0;
}

/* Le griglie devono poter uscire dalla colonna di lettura. */
.page-content > .gm-griglia,
.entry-content > .gm-griglia { max-width: none; }

.page-content p,
.entry-content p { margin: 0 0 20px; }

.page-content h2,
.entry-content h2 { margin: 44px 0 12px; }

.page-content h3,
.entry-content h3 { margin: 28px 0 8px; }

.page-content ul,
.entry-content ul { padding-left: 22px; }

/* Sottolineatura sottile e staccata: si legge come un link senza tagliare le lettere. */
.page-content a,
.entry-content a {
	color: var(--gm-verde);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color 200ms ease;
}

.page-content a:hover,
.entry-content a:hover { text-decoration-thickness: 2px; }

/* Paragrafo di apertura: piu' grande, ma senza diventare un titolo. */
.gm-lead {
	font-size: 20px;
	line-height: 1.55;
	color: var(--gm-testo);
}

/* Chiusura del racconto, con il payoff del progetto. */
.gm-chiusura {
	margin-top: 40px;
	padding: 24px;
	background: var(--gm-sabbia-chiara);
	border-left: 4px solid var(--gm-verde);
	border-radius: 4px;
	font-size: 18px;
}

/* Nel contenuto le schede stanno dentro un gruppo di blocchi. */
.gm-griglia .gm-scheda > p:first-child { margin: 0 0 4px; }
.gm-griglia .gm-scheda h3 { margin: 0 0 6px; }
.gm-griglia .gm-scheda p:last-child { margin: 0; }

@media (max-width: 600px) {
	.site-main { padding-top: 28px; }
	.gm-lead { font-size: 18px; }
}

/* ---------- Elementi dei template ---------- */

.gm-scheda-titolo { margin: 0; font-size: 20px; }
.gm-scheda-titolo a { color: var(--gm-testo); text-decoration: none; }
.gm-scheda-titolo a:hover { color: var(--gm-verde); text-decoration: underline; text-underline-offset: 3px; }

.gm-meta { margin: 8px 0 0; color: var(--gm-testo-tenue); font-size: 15px; }

.gm-copertina { margin: 0 0 28px; }
.gm-copertina img { width: 100%; border-radius: 6px; }

a.gm-tag { text-decoration: none; }
a.gm-tag:hover { background: #ece2d8; }

/* Paginazione: bersagli da 44px e stato corrente leggibile senza colore. */
.gm-paginazione { margin-top: 40px; }

.gm-paginazione .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.gm-paginazione .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #e6ded6;
	border-radius: 4px;
	color: var(--gm-testo);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 200ms ease;
}

.gm-paginazione .page-numbers:hover { background: var(--gm-sabbia-chiara); }

.gm-paginazione .page-numbers.current {
	background: var(--gm-verde);
	border-color: var(--gm-verde);
	color: #fff;
}

/* Modulo di ricerca */
.search-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }

.search-form label { flex: 1 1 220px; }

.search-form .search-field {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--gm-sabbia);
	border-radius: 4px;
	font: inherit;
	font-size: 16px; /* Sotto i 16px iOS ingrandisce la pagina al focus. */
}

.search-form .search-submit {
	min-height: 44px;
	padding: 10px 22px;
	border: 2px solid var(--gm-verde);
	border-radius: 4px;
	background: var(--gm-verde);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.search-form .search-submit:hover { background: #005c29; border-color: #005c29; }

/* La pagina 404 e i risultati vuoti hanno bisogno di respiro in fondo. */
.site-main > .gm-wrap:last-child { padding-bottom: 24px; }

/* ---------- Compatibilita' con l'editor a blocchi ---------- */

/*
 * Gutenberg avvolge i blocchi interni di un gruppo in .wp-block-group__inner-container.
 * Senza questa regola la griglia si ritrova un figlio solo e le colonne non nascono:
 * la si sposta sul contenitore che tiene davvero le schede.
 */
.gm-griglia > .wp-block-group__inner-container {
	/*
	 * La griglia esterna e questo contenitore sono entrambi grid. Con auto-fill le
	 * colonne vuote non collassano, quindi senza questa riga il contenitore occupa
	 * una colonna sola e tutte le schede finiscono incolonnate. Estendendolo su
	 * tutte le tracce, la griglia vera torna a essere quella interna.
	 */
	grid-column: 1 / -1;
	display: grid;
	gap: var(--gm-sp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	align-items: stretch;
}

/* Per lo stesso motivo dentro le schede servono selettori discendenti. */
.gm-scheda .wp-block-group__inner-container > *:first-child { margin-top: 0; }
.gm-scheda .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }
.gm-scheda .wp-block-group__inner-container > p { margin: 0 0 6px; }
.gm-scheda .wp-block-group__inner-container > h3 { margin: 0 0 6px; }

/*
 * Le schede scritte dall'editor hanno testi di lunghezza diversa: senza questo,
 * l'ultimo elemento di ciascuna finisce a un'altezza diversa e la riga sembra
 * storta. La colonna flessibile spinge l'ultimo elemento in fondo, cosi' i
 * collegamenti si allineano fra loro.
 */
.gm-griglia .gm-scheda { display: flex; flex-direction: column; }

.gm-griglia .gm-scheda > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.gm-griglia .gm-scheda > .wp-block-group__inner-container > p:last-child {
	margin-top: auto;
	padding-top: var(--gm-sp-3);
}

/* ---------- Home ---------- */

/*
 * Apertura. Il motivo di sfondo e' l'ovale che nel marchio racchiude i pittogrammi
 * dei Comuni, ripreso in grande e quasi trasparente: viene dal brand, non e' un
 * ornamento aggiunto. Esce dal bordo destro perche' un cerchio intero al centro
 * diventerebbe un elemento da guardare invece che un'atmosfera.
 */
.gm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, #faf6f2 0%, var(--gm-sabbia-chiara) 100%);
	padding-block: var(--gm-sp-7);
}

.gm-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -140px;
	width: 420px;
	height: 560px;
	transform: translateY(-50%);
	border: 12px solid var(--gm-sabbia);
	border-radius: 210px / 280px;
	opacity: 0.16;
	pointer-events: none;
}

/* Sotto i 1000px il motivo ruberebbe spazio al testo invece di accompagnarlo. */
@media (max-width: 1000px) {
	.gm-hero::before { display: none; }
}

.gm-hero-titolo {
	max-width: 19ch;
	margin: 0 0 var(--gm-sp-4);
	color: var(--gm-verde);
	font-size: clamp(40px, 5.2vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.gm-hero-testo {
	max-width: 48ch;
	margin: 0 0 var(--gm-sp-5);
	font-size: 21px;
	line-height: 1.6;
	color: var(--gm-testo);
}

.gm-hero-azioni,
.gm-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.gm-azioni { margin-top: var(--gm-sp-5); }

/*
 * La home non ha .site-main con padding: le sezioni si occupano da sole della
 * spaziatura, cosi' i fondini arrivano a filo dei bordi.
 */
.home .site-main { padding-top: 0; }

.gm-sezione > .gm-wrap > h2 { margin-top: 0; }

/*
 * Filetto verde sopra i titoli di sezione. Da' un attacco visivo alle sezioni senza
 * aggiungere decorazione: e' la stessa funzione di un capolettera in tipografia.
 */
.gm-sezione h2::before,
.gm-blocco-comune h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: var(--gm-sp-3);
	background: var(--gm-verde);
	border-radius: 2px;
}
.gm-sezione > .gm-wrap > .gm-prosa { margin-bottom: 32px; }
.gm-sezione .gm-griglia { margin-top: 24px; }

/* La freccia e' decorativa: il link e' gia' tutta la scheda. */
.gm-freccia {
	margin-top: auto;
	padding-top: 12px;
	color: var(--gm-verde);
	font-weight: 600;
	font-size: 15px;
}

a.gm-scheda:hover .gm-freccia { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
	.gm-hero { padding-block: var(--gm-sp-6); }
	.gm-hero-testo { font-size: 18px; }
	/* A schermo stretto i pulsanti stanno meglio a piena larghezza che affiancati. */
	.gm-hero-azioni .gm-btn,
	.gm-azioni .gm-btn { flex: 1 1 100%; }
}

/* ---------- Fasce a tutta larghezza scritte dall'editor ---------- */

/*
 * Il cliente imposta un gruppo su "Larghezza intera" e la fascia esce dalla colonna
 * di lettura. Senza queste regole l'opzione esiste nell'editor ma non produce nulla
 * a schermo, che e' peggio di non averla.
 *
 * overflow-x: clip sul body serve perche' 100vw comprende la barra di scorrimento:
 * senza, la fascia sporge di una quindicina di pixel e il sito scorre di lato.
 * clip invece di hidden per non rompere position: sticky.
 */
body { overflow-x: clip; }

@supports not (overflow-x: clip) {
	body { overflow-x: hidden; }
}

.entry-content > .alignfull,
.entry-content > .alignwide { max-width: none; }

.entry-content > .alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry-content > .alignwide {
	width: 100%;
	max-width: 1100px;
}

/* Dentro la fascia il contenuto torna incolonnato e leggibile. */
.alignfull > .wp-block-group__inner-container,
.alignwide > .wp-block-group__inner-container {
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 20px;
}

/*
 * Quando una fascia e' una sezione, la spaziatura verticale la da' la sezione e non
 * il contenitore interno, altrimenti il fondino colorato resta stretto attorno al
 * testo invece di riempire la fascia.
 */
.gm-sezione.alignfull,
.gm-hero.alignfull { padding-inline: 0; }

.gm-sezione > .wp-block-group__inner-container > *:first-child,
.gm-hero > .wp-block-group__inner-container > *:first-child { margin-top: 0; }

.gm-sezione > .wp-block-group__inner-container > *:last-child,
.gm-hero > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

/* La griglia dentro una fascia non deve restare nella colonna di lettura. */
.gm-sezione .wp-block-group__inner-container > .gm-griglia { max-width: none; }

/* Il titolo dell'apertura quando arriva dall'editor come blocco titolo. */
.gm-hero h1,
.gm-hero .gm-hero-titolo {
	max-width: 19ch;
	margin: 0 0 var(--gm-sp-4);
	color: var(--gm-verde);
	font-size: clamp(40px, 5.2vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

@media (max-width: 700px) {
	.gm-hero h1,
	.gm-hero .gm-hero-titolo { font-size: 36px; }
}

/*
 * I pulsanti dentro il contenuto hanno un colore proprio.
 * Senza queste righe .entry-content a vince per specificita' e il testo del
 * pulsante pieno diventa verde su verde: il pulsante resta, la scritta sparisce.
 */
.entry-content a.gm-btn,
.page-content a.gm-btn { color: #fff; }

.entry-content a.gm-btn--secondario,
.page-content a.gm-btn--secondario { color: var(--gm-verde); }

.entry-content a.gm-btn--secondario:hover,
.page-content a.gm-btn--secondario:hover { color: #fff; }

/* ---------- Dati di evento e scheda ---------- */

.gm-dati {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 0 0 28px;
	padding: 20px 24px;
	background: var(--gm-sabbia-chiara);
	border-radius: 6px;
}

.gm-dato dt {
	margin: 0 0 2px;
	color: var(--gm-testo-tenue);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.gm-dato dd { margin: 0; font-size: 17px; font-weight: 600; }

/*
 * Stato di avanzamento. Il pallino aiuta a colpo d'occhio, ma la parola resta:
 * chi non distingue i colori e chi usa un lettore di schermo leggono comunque.
 */
.gm-stato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.gm-stato::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gm-testo-tenue);
	flex: 0 0 auto;
}

.gm-stato--in-programma::before { background: var(--gm-sabbia); }
.gm-stato--in-corso::before { background: var(--gm-san-severino); }
.gm-stato--concluso::before { background: var(--gm-verde); }

.gm-avviso {
	margin: 12px 0 0;
	padding: 10px 16px;
	background: var(--gm-sabbia-chiara);
	border-left: 4px solid var(--gm-sabbia);
	border-radius: 4px;
	font-weight: 600;
}

.gm-copertina figcaption {
	margin-top: 8px;
	color: var(--gm-testo-tenue);
	font-size: 15px;
}

.gm-eventi-passati { margin-top: 56px; }

/* ---------- Filtri di archivio ---------- */

.gm-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
}

.gm-filtro {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid #e6ded6;
	border-radius: 999px;
	color: var(--gm-testo);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.gm-filtro:hover { background: var(--gm-sabbia-chiara); border-color: var(--gm-sabbia); }

.gm-filtro--attivo {
	background: var(--gm-verde);
	border-color: var(--gm-verde);
	color: #fff;
}

.gm-filtro--attivo:hover { background: #005c29; border-color: #005c29; }

/* ---------- Loghi dei Comuni ---------- */

/*
 * I file contengono pittogramma e nome insieme. L'altezza si fissa da PHP cosi'
 * loghi con nomi di lunghezza diversa restano allineati fra loro, e la larghezza
 * segue.
 */
/*
 * L'altezza si fissa e la larghezza segue, cosi' loghi con nomi di lunghezza molto
 * diversa restano allineati fra loro. Sotto i 64px il nome dentro il logo diventa
 * illeggibile, e un logo istituzionale illeggibile e' solo una macchia colorata.
 */
/*
 * Ora e' un simbolo, non un marchio con dentro del testo: puo' stare piu' piccolo e
 * si riconosce lo stesso. L'altezza si fissa e la larghezza segue, cosi' i tre
 * restano allineati fra loro anche se le proporzioni non coincidono.
 */
.gm-logo-comune {
	display: block;
	width: auto;
	height: 72px;
	max-width: 100%;
	/*
	 * align-self serve perche' la scheda e' una colonna flessibile, e i figli di una
	 * colonna flessibile si stirano in larghezza per impostazione predefinita. Senza
	 * questa riga l'immagine viene allargata quanto la scheda e il simbolo esce
	 * deformato: era questo, non la risoluzione, a rendere i loghi sgradevoli.
	 */
	align-self: flex-start;
	object-fit: contain;
}

.page-header .gm-logo-comune { height: 104px; margin-bottom: var(--gm-sp-4); }

/*
 * Nelle schede il simbolo sta in alto a destra, fuori dal flusso: e' un contrassegno
 * del territorio, non un contenuto da leggere in sequenza. Il titolo riceve uno
 * spazio a destra pari alla sua larghezza piu' il margine, altrimenti i nomi lunghi
 * come San Severino Marche gli finirebbero sotto.
 */
.gm-griglia .gm-scheda { position: relative; }

.gm-scheda .gm-logo-comune {
	position: absolute;
	top: var(--gm-sp-4);
	right: var(--gm-sp-4);
	height: 64px;
	margin: 0;
}

/*
 * Il simbolo e' fuori dal flusso, quindi il testo non lo "vede" e ci passerebbe
 * sotto: lo spazio glielo si deve dare a mano. Serve al titolo e alla prima riga
 * di testo, che sono gli unici a stargli accanto in altezza.
 */
.gm-scheda .wp-block-group__inner-container > h3,
.gm-scheda .wp-block-group__inner-container > h3 + p,
.gm-scheda .gm-scheda-titolo { padding-right: 52px; }

/* Riga dei tre Comuni sotto l'apertura della home. */
.gm-promotori {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: 36px 0 0;
	padding-top: 28px;
	border-top: 1px solid #e0d6cc;
}

.gm-promotori-etichetta {
	flex: 0 0 100%;
	margin: 0;
	color: var(--gm-testo-tenue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gm-promotori .gm-logo-comune { height: 64px; }

@media (max-width: 600px) {
	.gm-scheda .gm-logo-comune { height: 60px; }
	.page-header .gm-logo-comune { height: 84px; }
}

/* ---------- Pagina di un Comune ---------- */

.gm-blocco-comune + .gm-blocco-comune {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid #e6ded6;
}

.gm-blocco-comune h2 { margin-top: 0; margin-bottom: var(--gm-sp-4); }

.gm-blocco-comune .gm-azioni { margin-top: 24px; }

/* ---------- Risposta tattile ---------- */

/*
 * Alla pressione l'elemento cede di un pixel. E' l'unica animazione che questo sito
 * si concede: non e' decorazione ma conferma: dice che il tocco e' arrivato, cosa
 * che su mobile, quando la rete e' lenta, e' la differenza fra premere una volta e
 * premere cinque.
 */
.gm-btn:active,
.gm-filtro:active,
a.gm-scheda:active,
.gm-nav-toggle:active { transform: translateY(1px); }

/* ---------- Blocchi senza scatola ---------- */

/*
 * Non tutto cio' che sta in griglia deve essere una scheda. Quando i blocchi non
 * sono cliccabili e non hanno bisogno di stare uno sopra l'altro, la scatola e'
 * rumore: bastano un filetto e dello spazio. Le schede restano dove l'elevazione
 * comunica qualcosa, cioe' dove si clicca.
 */
.gm-blocco-testo {
	padding: var(--gm-sp-4) 0 0;
	background: none;
	border: 0;
	border-top: 2px solid var(--gm-verde);
	border-radius: 0;
	box-shadow: none;
}

.gm-blocco-testo:hover { box-shadow: none; border-color: var(--gm-verde); }

.gm-blocco-testo h3 { margin: 0 0 var(--gm-sp-2); }
.gm-blocco-testo p { margin: 0; color: var(--gm-testo-tenue); }

/* Senza la scatola lo spazio sotto non c'e' piu': lo rimette la griglia. */
.gm-griglia .gm-blocco-testo { padding-bottom: var(--gm-sp-2); }

/* ---------- Movimento ---------- */

/*
 * Tutto quanto segue e' gia' neutralizzato dalla regola prefers-reduced-motion in
 * cima al foglio: chi ha chiesto meno animazioni vede la pagina ferma. Il sito e'
 * di rendicontazione pubblica, quindi il movimento accompagna e non intrattiene.
 */

/* Sollevamento al passaggio: si muove solo transform, che non fa ricalcolare il
   layout e sta sulla scheda video. */
a.gm-scheda {
	transition:
		transform 200ms var(--gm-ease-out),
		border-color 200ms var(--gm-ease-out),
		box-shadow 200ms var(--gm-ease-out);
}

a.gm-scheda:hover { transform: translateY(-4px); }

.gm-btn { transition: background-color 200ms var(--gm-ease-out), color 200ms var(--gm-ease-out), transform 100ms ease-out; }
.gm-btn:active { transform: scale(0.97); }

a.gm-scheda:active { transform: translateY(-1px); }

/*
 * Comparsa a cascata.
 *
 * Le regole vivono sotto .js-movimento, classe che aggiunge lo script: senza
 * JavaScript i contenuti restano visibili invece di sparire per sempre. E' la
 * ragione per cui non si parte da opacity 0 nel CSS di base.
 */
.js-movimento .gm-rivela {
	opacity: 0;
	transform: translateY(16px);
}

.js-movimento .gm-rivela.e-visibile {
	animation: gm-comparsa 420ms var(--gm-ease-out) forwards;
	/* Ogni elemento del gruppo parte 70ms dopo il precedente: la fila si compone
	   invece di apparire tutta insieme. */
	animation-delay: calc(var(--gm-indice, 0) * 70ms);
}

@keyframes gm-comparsa {
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Comparsa dell'apertura: solo CSS, nessuna classe aggiunta da JavaScript.
 *
 * Sta sopra la piega ed e' il contenuto piu' importante della pagina: se dipendesse
 * dallo script resterebbe invisibile finche' quello non parte, e con la rete lenta
 * si vedrebbe una fascia color sabbia vuota. Cosi' l'animazione comincia col primo
 * disegno.
 *
 * Il ritardo e' scaglionato con nth-child invece che con una variabile impostata da
 * JavaScript, per la stessa ragione.
 *
 * Sotto prefers-reduced-motion la regola in cima al foglio porta la durata a 0.01ms:
 * l'animazione finisce subito e, grazie a forwards, il contenuto resta visibile.
 * Per questo la durata non va mai messa a zero con animation: none.
 */
.gm-hero > .wp-block-group__inner-container > * {
	opacity: 0;
	transform: translateY(16px);
	animation: gm-comparsa 500ms var(--gm-ease-out) forwards;
}

.gm-hero > .wp-block-group__inner-container > *:nth-child(1) { animation-delay: 60ms; }
.gm-hero > .wp-block-group__inner-container > *:nth-child(2) { animation-delay: 150ms; }
.gm-hero > .wp-block-group__inner-container > *:nth-child(3) { animation-delay: 240ms; }
.gm-hero > .wp-block-group__inner-container > *:nth-child(4) { animation-delay: 330ms; }

/* Il motivo dell'ovale entra per ultimo e piu' lentamente: e' sfondo, non contenuto. */
.gm-hero::before {
	opacity: 0;
	animation: gm-comparsa-motivo 900ms var(--gm-ease-out) 400ms forwards;
}

@keyframes gm-comparsa-motivo {
	to { opacity: 0.16; }
}

/* ---------- Partner ---------- */

/*
 * Stessa forma delle schede degli interventi, con due aggiunte: uno spazio in alto
 * per il logo, alto uguale per tutti anche quando i loghi hanno proporzioni diverse,
 * e il ruolo nel progetto come targhetta. Senza un'altezza fissa i loghi farebbero
 * partire i titoli a quote diverse e la fila sembrerebbe storta.
 */
.gm-partner .gm-partner-logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 64px;
	margin-bottom: var(--gm-sp-3);
}

.gm-partner .gm-partner-logo img {
	max-height: 64px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Segnaposto finche' il logo non c'e': meglio uno spazio dichiarato che un salto. */
.gm-partner .gm-partner-logo:empty::before {
	content: "";
	display: block;
	width: 96px;
	height: 2px;
	background: var(--gm-linea);
}

.gm-partner .gm-ruolo {
	display: inline-block;
	margin: 0 0 var(--gm-sp-2);
	color: var(--gm-verde);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gm-partner h3 { margin: 0 0 var(--gm-sp-2); }

.gm-partner .gm-partner-sito {
	margin-top: auto;
	padding-top: var(--gm-sp-3);
	font-weight: 600;
}