/* FP Salient Theme — ritocchi minimi non esprimibili in theme.json. */

/* Il tema è solo chiaro: evita che Android/Chrome forzino il dark mode
   automatico (sfondi bianchi percepiti come neri) quando il sistema ha il
   tema scuro attivo. Vedi anche il meta "color-scheme" in wp_head. */
:root { color-scheme: light; }

/* Bridge --fpst-*: sondaggi, eventi e micropoll leggono queste variabili
   invece dei preset di theme.json, ma non erano mai state definite — giravano
   solo per il valore di fallback letterale scritto in ogni singola regola
   (es. var(--fpst-accent, #0026ff)), scollegato dal vero blu del brand.
   Le colleghiamo qui una volta sola ai preset veri: in tema scuro seguono
   automaticamente l'override sotto, perché var() si risolve sul valore
   vincente di --wp--preset--color--accent per quell'elemento. */
:root {
	--fpst-accent: var(--wp--preset--color--accent);
	/* Variante SOLO per il colore del testo: uguale al blu vero in chiaro,
	   ma in scuro resta più chiara (vedi override sotto) mentre --accent
	   stesso resta il blu esatto per sfondi/bordi/badge. Il blu pieno come
	   testo su sfondo quasi nero ha un contrasto reale di ~2:1 (calcolato
	   il 23/8/2026), sotto la soglia leggibile — scelta di Francesco:
	   il brand non deve muoversi, il testo sì, quanto basta per leggersi. */
	--wp--preset--color--accent-text: var(--wp--preset--color--accent);
	--fpst-accent-text: var(--wp--preset--color--accent-text);
	--fpst-gold: var(--wp--preset--color--gold);
	--fpst-ink: var(--wp--preset--color--ink);
	--fpst-line: var(--wp--preset--color--line);
	--fpst-surface: var(--wp--preset--color--surface);
}

/* Focus visibile coerente col brand. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Template FP Canvas: contenuto edge-to-edge, nessun padding di root.
   I componenti FP Salient Kit gestiscono internamente full-bleed e nav/footer.
   Il <main> è già alignfull (rompe il root padding); qui azzeriamo anche il
   padding del wrapper per non lasciare margini su hosting che non applicano
   il meccanismo alignfull, e togliamo eventuale block-gap del main. */
.page-template-page-canvas .wp-site-blocks,
.page-canvas .wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
}

.page-template-page-canvas main.alignfull,
.page-canvas main.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* Immagini fluide di default. */
img {
	max-width: 100%;
	height: auto;
}

/* Tabelle core allineate al look FP: intestazione su accent, bordi su line.
   (Le celle non sono pilotabili da theme.json → qui.)
   Il selettore copre anche `.entry-content table`: non tutte le tabelle di
   un articolo passano dal blocco Gutenberg «Tabella» — alcune sono HTML
   scritto a mano nel corpo (es. `.fpst-atti`, gli elenchi di atti/affidamenti)
   e senza questo secondo selettore restavano fuori da OGNI correzione qui
   sotto, larghezza 100% e leggibilità mobile comprese. */
.wp-block-table table,
.entry-content table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td,
.entry-content th,
.entry-content td {
	border: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-align: left;
}

.wp-block-table thead th,
.entry-content thead th {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.wp-block-table tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--surface);
}

/* Esito nelle tabelle di cronaca commerciale (aperture/chiusure): il dato per
   cui la tabella esiste sta nell'ultima colonna, ed era indistinguibile dal
   resto. Colore sul testo e non pillole a tinta piena: su quaranta righe una
   colonna di badge colorati diventa una bandiera e si smette di leggere le
   altre tre colonne.

   Il trasferimento fuori le mura ha un colore suo, ambra, e non il rosso della
   chiusura: l'attività esiste ancora, ma non nel centro storico — che è
   esattamente la distinzione che l'articolo fa e che il lettore deve poter
   vedere senza rileggere il testo della cella. */
.fpst-esito--apertura { color: #2f6b4f; font-weight: 600; }
.fpst-esito--chiusura { color: #a4361f; font-weight: 600; }
.fpst-esito--trasferimento { color: #8a6116; font-weight: 600; }

/* In scuro i tre colori su fondo quasi nero scendono sotto la soglia di
   leggibilità: si schiariscono conservando la tinta. */
:root[data-theme="dark"] .fpst-esito--apertura { color: #7bc4a1; }
:root[data-theme="dark"] .fpst-esito--chiusura { color: #e0836c; }
:root[data-theme="dark"] .fpst-esito--trasferimento { color: #d6a94a; }

/* Tabelle a due colonne del tipo «dato + spiegazione». Con il layout automatico
   la colonna del numero si prende quel che avanza — misurati 93px su 669 nella
   scheda costi dell'articolo sui manifesti, cioè il 14% — mentre la colonna del
   testo ha spazio da vendere, e la cifra rischia di spezzarsi. Le si dà un
   quarto della tabella e le si vieta di andare a capo: in una tabella il
   `nowrap` allarga la colonna, non trabocca, quindi regge anche se un giorno
   la prima cella contenesse una parola lunga.

   `:has()` limita la regola alle tabelle di DUE colonne: su quella a quattro
   (l'elenco aperture/chiusure) i nomi delle attività devono poter andare a capo,
   e bloccarli produrrebbe lo scorrimento orizzontale che si è scelto di evitare. */
.wp-block-table table:has(tbody tr > td:nth-child(2):last-child) td:first-child,
.wp-block-table table:has(tbody tr > td:nth-child(2):last-child) th:first-child,
.entry-content table:has(tbody tr > td:nth-child(2):last-child) td:first-child,
.entry-content table:has(tbody tr > td:nth-child(2):last-child) th:first-child {
	width: 25%;
	white-space: nowrap;
}

/* Tabelle su schermo stretto. Una tabella a quattro colonne dentro un articolo
   (l'elenco aperture/chiusure del centro storico) su un telefono diventava
   illeggibile: corpo e padding pieni lasciavano ~85px per colonna, e le parole
   si spezzavano a metà — «Yamama y», «Elisabett a», «novem bre 2024». Righe
   alte tre volte il necessario e nessuna riga leggibile in un colpo d'occhio.

   Tre correzioni, in ordine di peso:
   · corpo e padding scendono, così una cella entra su una riga o due invece di
     tre (righe misurate: da ~145px a 33px);
   · `word-break: normal` blocca il taglio a metà parola. La regola che lo
     causava NON sta in questo foglio — cercata, non c'è — quindi arriva da
     WordPress o da un plugin: la si annulla qui dove serve, invece di andare a
     spegnerla altrove col rischio di rompere i punti in cui invece serve
     davvero (URL lunghi nei titoli);
   · `hyphens: none` perché la sillabazione automatica in italiano su celle
     strette taglia peggio di quanto aiuti.

   Niente `min-width` con scorrimento orizzontale: su una tabella di sole quattro
   colonne corte costringerebbe a trascinare per leggere l'ultima colonna, che è
   proprio quella che porta il dato (Apertura / Chiusura). */
@media (max-width: 700px) {
	.wp-block-table table,
	.entry-content table {
		font-size: 0.82rem;
		line-height: 1.35;
	}
	.wp-block-table th,
	.wp-block-table td,
	.entry-content th,
	.entry-content td {
		padding: 0.45rem 0.5rem;
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: none;
	}

	/* Tabelle da tre colonne in su: `word-break: normal` da solo non basta.
	   Col layout automatico sono le INTESTAZIONI a decidere le larghezze —
	   «Sul conto capitale di un anno» e «Sull'avanzo corrente» si prendevano
	   lo spazio e lasciavano 71px alla prima colonna, quella che porta il
	   testo: a quella misura «Multipiano» si spezza comunque, e sul telefono
	   si leggeva «Multipia / no fuori / terra».

	   `table-layout: fixed` toglie alle intestazioni il potere di dettare la
	   griglia; la prima colonna prende il 40% e le altre si dividono il resto
	   in parti uguali. I valori delle colonne di destra sono corti per natura
	   («5,3 mln», «19%») e ci stanno; le loro intestazioni vanno a capo, che
	   è esattamente quello che devono fare. */
	.wp-block-table table:has(tbody tr > td:nth-child(3)),
	.entry-content table:has(tbody tr > td:nth-child(3)) {
		table-layout: fixed;
	}
	.wp-block-table table:has(tbody tr > td:nth-child(3)) td:first-child,
	.wp-block-table table:has(tbody tr > td:nth-child(3)) th:first-child,
	.entry-content table:has(tbody tr > td:nth-child(3)) td:first-child,
	.entry-content table:has(tbody tr > td:nth-child(3)) th:first-child {
		width: 34%;
	}

	/* Le INTESTAZIONI vanno sempre a capo, anche quando la colonna porta un
	   `white-space: nowrap`. Quel nowrap serve ai valori — «5,3 mln» non deve
	   spezzarsi a metà — ma sulle intestazioni, che sono frasi («Sul conto
	   capitale di un anno»), produceva 141px di testo dentro una cella da 62:
	   traboccava sulla colonna accanto e le due intestazioni si sovrapponevano
	   («SUL CONTSUCAPITA»).

	   `!important` perché la regola che mette il nowrap sta in un `<style>`
	   dentro il contenuto dell'articolo: è nel body, quindi vince a parità di
	   specificità e non è raggiungibile da questo foglio in altro modo. */
	.wp-block-table thead th,
	.entry-content thead th {
		white-space: normal !important;
	}

	/* Nelle tabelle strette le intestazioni sono spesso in maiuscoletto, che a
	   parità di corpo occupa più spazio del minuscolo: in una colonna da 62px
	   «CAPITALE» non entrava e si spezzava in «CAPITA / LE». Un corpo più
	   piccolo fa entrare la parola intera, e sulle intestazioni si può fare
	   senza perdere leggibilità — sono etichette brevi, non testo da leggere. */
	.wp-block-table table:has(tbody tr > td:nth-child(3)) thead th,
	.entry-content table:has(tbody tr > td:nth-child(3)) thead th {
		font-size: 0.68rem;
		letter-spacing: 0;
	}
}

/* Citazione: l'attribuzione (cite) in muted, non corsivo. */
.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Form "contenuto protetto da password" (markup nativo di WordPress):
   campo e bottone "Invio" uscivano dai controlli di default del browser,
   grigio e bordo in rilievo, senza nulla del brand. Il campo segue il modulo
   commenti (bordo line, focus gold), il pulsante le pillole accent. */
.post-password-form {
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.post-password-form p { margin: 0 0 var(--wp--preset--spacing--30); }
.post-password-form p:last-child { margin-bottom: 0; }
.post-password-form .post-password-message {
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.post-password-form label {
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.post-password-form input[type="text"],
.post-password-form input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
}
.post-password-form input[type="text"]:focus,
.post-password-form input[type="password"]:focus {
	border-color: var(--wp--preset--color--gold);
}
.post-password-form input[type="submit"] {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.post-password-form input[type="submit"]:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.post-password-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
/* In scuro l'accento usato come sfondo torna al blu pieno del brand con testo
   chiaro (come il bottone di ricerca in fondo al file), e sull'hover gold il
   testo resta scuro come sul fondo brand fisso, come il link del poll-banner. */
:root[data-theme="dark"] .post-password-form input[type="submit"] {
	background: #0000fe;
	color: #fff;
}
:root[data-theme="dark"] .post-password-form input[type="submit"]:hover {
	background: var(--wp--preset--color--gold);
	color: #14140f;
}

/* ==========================================================================
   Header — visiera "social · logo · hamburger", sticky (parità Salient).
   ========================================================================== */
.fpst-header {
	/* !important necessario: il blocco ha ancora l'attributo/classe
	   `has-base-background-color`, che WordPress genera con !important —
	   senza pareggiarlo qui la nostra regola perde a parità di specificità. */
	background: var(--wp--preset--color--accent) !important;
}

/* Auto-hide (headroom): l'header resta in cima, si nasconde scrollando giù e
   riappare scrollando su. Lo sticky va sul WRAPPER del template-part: il gruppo
   interno .fpst-header non ha spazio per "stickare" (il suo contenitore è alto
   quanto lui) — era il motivo per cui prima spariva e basta.
   La classe .fpst-header--hidden è gestita da reveal.js sullo scroll.
   GOTCHA overlay: un transform sull'header crea un containing-block per i
   discendenti position:fixed → l'overlay menu si ancorerebbe all'header invece
   che al viewport. Con menu aperto :has() forza transform:none così l'overlay
   torna full-screen. Niente will-change:transform (creerebbe lo stesso problema
   in modo permanente). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 0.35s ease;
}
.wp-site-blocks > header.wp-block-template-part.fpst-header--hidden {
	transform: translateY(-100%);
}
.wp-site-blocks > header.wp-block-template-part:has(.fpst-nav-toggle:checked) {
	transform: none;
}

/* Griglia a 3 colonne: logo perfettamente centrato, social a sx, nav a dx. */
.fpst-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

.fpst-header__social {
	justify-self: start;
	margin: 0;
	gap: 0.6rem;
}
.fpst-header__social .wp-social-link {
	color: var(--wp--preset--color--base);
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.fpst-header__social .wp-social-link:hover {
	opacity: 1;
	color: var(--wp--preset--color--gold);
}

.fpst-header__logo {
	justify-self: center;
	margin: 0;
}
.fpst-header__logo a,
.fpst-header__logo img {
	display: block;
}
.fpst-header__logo img {
	max-height: 72px;
	width: auto;
}

/* === Azioni header (switcher lingua + hamburger), cella destra della griglia === */
.fpst-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 1.1rem;
}
/* Switcher lingua FP-Multilanguage reso compatto e on-brand nell'header.
   Sovrascrive frontend.css del plugin (pill blu #2271b1) con selettori più specifici. */
.fpst-header__actions .fpml-switcher { font-family: inherit; font-size: 0.82rem; line-height: 1; }
.fpst-header__actions .fpml-switcher--inline { gap: 0.15rem; }
.fpst-header__actions .fpml-switcher__item {
	color: var(--wp--preset--color--base);
	opacity: 0.85;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0.15rem 0.35rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: color 0.15s ease;
}
.fpst-header__actions .fpml-switcher__item:hover {
	background: none;
	color: var(--wp--preset--color--gold);
}
.fpst-header__actions .fpml-switcher__item--current,
.fpst-header__actions .fpml-switcher__item--current:hover {
	background: none;
	border: 0;
	color: var(--wp--preset--color--gold);
	opacity: 1;
	font-weight: 700;
}
.fpst-header__actions .fpml-switcher__separator { color: var(--wp--preset--color--line); opacity: 0.7; }
@media (max-width: 600px) {
	.fpst-header__actions { gap: 0.7rem; }
	.fpst-header__actions .fpml-switcher { font-size: 0.72rem; }
	.fpst-header__actions .fpml-switcher__item { padding: 0.15rem 0.25rem; }
}

/* === Hamburger + overlay CUSTOM (toggle CSS-only, niente blocco Navigation core) === */
.fpst-nav-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.fpst-burger {
	justify-self: end;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 10001;
}
.fpst-burger span {
	display: block;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--base);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.fpst-nav-toggle:checked ~ .fpst-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--wp--preset--color--base); }
.fpst-nav-toggle:checked ~ .fpst-burger span:nth-child(2) { opacity: 0; }
.fpst-nav-toggle:checked ~ .fpst-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--wp--preset--color--base); }
.fpst-nav-toggle:focus-visible ~ .fpst-burger { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; }

.fpst-overlay {
	position: fixed;
	inset: 0; /* a tutto schermo: copre topbar, header e barra dei tasti */
	background: var(--wp--preset--color--accent, #2a2724);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 2000; /* copre topbar; la X e' l'hamburger dell'header (z-index 10001) */
}
/* Menu aperto = schermo intero: nascondi barra tasti e pallino privacy, che
   vivono in contesti d'impilamento propri e l'overlay non coprirebbe via
   z-index. `:has()` raggiunge elementi fuori dal sottoalbero dell'overlay. */
body:has(.fpst-nav-toggle:checked) .fpst-tabbar,
body:has(.fpst-nav-toggle:checked) .fp-privacy-reopen {
	display: none !important;
}
.fpst-nav-toggle:checked ~ .fpst-overlay {
	opacity: 1;
	visibility: visible;
}
.fpst-overlay__menu,
.fpst-overlay__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.fpst-overlay__menu > li { margin: 0.35em 0; }
.fpst-overlay__menu > li > a,
.fpst-overlay__label {
	display: inline-block;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.25;
}
/* Hover leggibile su fondo scuro con QUALSIASI palette: il gold puro sui brand
   monocromi (gold = accent = nero, es. agriavengers) diventava nero su nero.
   La miscela 40% gold / 60% base resta una tinta brand sui bicolori (TdC:
   salmone chiaro) e un grigio chiaro visibile sui monocromi. */
.fpst-overlay__menu > li > a:hover { color: color-mix(in srgb, var(--wp--preset--color--gold) 40%, var(--wp--preset--color--base)); }
.fpst-overlay__label { opacity: 0.65; font-style: italic; cursor: default; }
.fpst-overlay__group ul { margin-top: 0.2em; }
.fpst-overlay__group ul a {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.05rem;
	text-decoration: none;
	display: inline-block;
	padding: 0.18em 0;
}
.fpst-overlay__group ul a:hover { color: var(--wp--preset--color--gold); }
/* «Le Tenute» come box con loghi (come il menu originale). */
.fpst-overlay__tenute {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.1rem 1.5rem;
	margin-top: 1.1rem;
}
.fpst-overlay__tenute > li { margin: 0; }
.fpst-overlay__tenute a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	width: 104px;
	color: #fff;
	text-decoration: none;
}
.fpst-overlay__tenute img {
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	padding: 10px;
	transition: transform 0.2s ease, background 0.2s ease;
}
.fpst-overlay__tenute a:hover img {
	transform: scale(1.07);
	background: rgba(255, 255, 255, 0.12);
}
.fpst-overlay__tenute span {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.85);
}
.fpst-overlay__tenute a:hover span { color: var(--wp--preset--color--gold); }

/* Caption testuale sulle slide dello slider hero. */
.fp-salkit-slider .fp-salkit__slide { position: relative; }
.fpst-slide-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(1.4rem, 4vw, 3.2rem);
	/* Floor sul solo padding-bottom: la caption resta sempre sopra i dot
	   dello slider (.fp-salkit__slider-dots a bottom:18px), anche su mobile
	   dove il padding generale scende a 1.4rem e il testo li toccherebbe. */
	padding-bottom: max(3rem, clamp(1.4rem, 4vw, 3.2rem));
	background: linear-gradient(to top, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.26) 44%, transparent 100%);
	pointer-events: none;
	text-align: left;
}
/* Riga orizzontale oro sopra il testo (mantenuta, a sinistra). */
.fpst-slide-cap::before {
	content: ""; display: block;
	width: 58px; height: 3px; border-radius: 2px;
	background: var(--wp--preset--color--gold);
	margin-bottom: 0.7em;
}
/* Titolo della slide (serif). */
.fpst-slide-cap > span:not(.fpst-cap-s) {
	display: block;
	max-width: 24ch;
	color: #fff;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.6vw, 2.9rem);
	line-height: 1.16;
	letter-spacing: 0.004em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
/* Sottotitolo (riga di supporto, body font, sotto il titolo). */
.fpst-slide-cap .fpst-cap-s {
	display: block;
	margin-top: 0.55em;
	max-width: 46ch;
	font-weight: 400;
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	line-height: 1.45;
	letter-spacing: 0.015em;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

/* Mobile: logo un filo più piccolo, gap ridotto. */
@media (max-width: 600px) {
	.fpst-header__bar { gap: var(--wp--preset--spacing--30); }
	.fpst-header__logo img { max-height: 56px; }
}

/* Mobile: la caption dello slide hero (clamp min 1.5rem) risultava troppo
   minuta rispetto all'immagine a tutta altezza — più peso e presenza. */
@media (max-width: 600px) {
	.fpst-slide-cap::before { width: 44px; height: 4px; }
	.fpst-slide-cap > span:not(.fpst-cap-s) {
		font-size: 1.85rem;
		font-weight: 700;
		letter-spacing: -0.008em;
	}
}

/* =====================================================================
   POLISH GRAFICO — estetica «tenuta»: calda, editoriale, elegante.
   Scoped al tema (chrome .fpst-* + componenti Kit .fp-salkit-*); non tocca
   gli altri siti che usano il solo plugin Kit.
   ===================================================================== */

/* Sfondo pagina = token «shell» (crema caldo) definito in theme.json
   (styles.color.background) → sovrascrivibile per-sito via Global Styles.
   Header bianco e footer scuro mantengono il proprio sfondo. */

/* Overlay menu generico (default del tema): quando le voci arrivano dal blocco
   Navigation (siti senza override custom della chrome), eredita lo stile della
   versione hand-coded (.fpst-overlay__menu). */
.fpst-overlay .wp-block-navigation__container {
	flex-direction: column;
	align-items: center;
	gap: clamp(0.4rem, 2.2vw, 1rem);
}
.fpst-overlay .wp-block-navigation__container,
.fpst-overlay .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 4.5vw, 2.4rem);
	color: #fff;
}
.fpst-overlay .wp-block-navigation-item__content { opacity: 0.92; }
.fpst-overlay .wp-block-navigation-item__content:hover { opacity: 1; }

/* === Barra di navigazione visibile su desktop (fpst-header__navbar) ===
   Il tema riusa lo stesso off-canvas hamburger+overlay a qualunque risoluzione,
   pensato per mobile. Per contenuti editoriali (blog/news), dove le sezioni
   vanno scoperte subito, aggiungiamo una riga di nav orizzontale sotto la
   barra logo, visibile solo da 782px in su; sotto quella soglia il
   comportamento hamburger resta invariato (nessuna regressione mobile). */
.fpst-header__navbar { display: none; }

@media (min-width: 782px) {
	.fpst-burger,
	.fpst-nav-toggle,
	.fpst-overlay {
		display: none !important;
	}

	.fpst-header__navbar {
		display: block;
		margin-top: var(--wp--preset--spacing--30);
		padding-top: var(--wp--preset--spacing--30);
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}
	.fpst-header__navbar-menu.wp-block-navigation {
		justify-content: center;
	}
	.fpst-header__navbar-menu .wp-block-navigation__container {
		/* Ridotto da clamp(1.2rem, 2.5vw, 2.2rem): con l'aggiunta di
		   Collaboratori/Eventi/Sondaggi la barra andava a capo su due righe a
		   risoluzioni desktop comuni (~1400px) — qui ci stanno su una riga sola
		   fino a ~1200px, sotto quella soglia va comunque bene andare a capo
		   (centrato, non rotto) piuttosto che stringere oltre la leggibilità. */
		gap: clamp(0.7rem, 1.4vw, 1.5rem);
	}
	.fpst-header__navbar-menu .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--sans);
		font-size: clamp(0.8rem, 1vw, 0.92rem);
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		/* !important necessario: il core block ha una regola equivalente
		   (color: currentColor / inherit) di pari specificita' dichiarata dopo
		   la nostra nel foglio globale, quindi vince per ordine — vedi stesso
		   problema gia' risolto per .fpst-header sul background. */
		color: var(--wp--preset--color--base) !important;
	}
	.fpst-header__navbar-menu .wp-block-navigation-item__content:hover {
		/* Miscela gold/base: tinta brand sui bicolori, grigio chiaro leggibile
		   sui monocromi (gold puro = nero su navbar nera, es. agriavengers). */
		color: color-mix(in srgb, var(--wp--preset--color--gold) 40%, var(--wp--preset--color--base)) !important;
	}
	.fpst-header__navbar-menu .wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 6px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
		padding: 0.45rem 0;
		animation: fpst-dropdown-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	}
	@keyframes fpst-dropdown-in {
		from { opacity: 0; transform: translateY(4px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.fpst-header__navbar-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		/* il dropdown ha sfondo chiaro (base): il testo deve tornare scuro,
		   altrimenti resta bianco su bianco (ereditato dalla regola sopra). */
		color: var(--wp--preset--color--ink) !important;
		text-transform: none;
		font-weight: 500;
		padding: 0.5rem 1.1rem;
		transition: background 0.15s ease, color 0.15s ease;
	}
	.fpst-header__navbar-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--accent-text) !important;
		background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent);
	}
}

/* Reveal on scroll (fade-up). La classe .fpst-reveal viene aggiunta dal JS solo
   se IntersectionObserver è disponibile e l'utente non ha prefers-reduced-motion:
   senza JS, o con motion ridotto, i contenuti restano pienamente visibili. */
.fpst-reveal { opacity: 0; transform: translateY(26px);
	transition: opacity .85s ease, transform .85s cubic-bezier(.22, .7, .2, 1); }
.fpst-reveal.is-in { opacity: 1; transform: none; }

/* Titoli display in serif (Playfair) per il tono da tenuta. */
.fp-salkit__split-title,
.fp-salkit__heading,
.fp-salkit__prose-title { font-family: var(--wp--preset--font-family--serif); letter-spacing: -0.01em; }

/* Kicker dei blocchi split: filetto-guida oro prima del testo (editoriale). */
.fp-salkit-split .fp-salkit__kicker { display: inline-flex; align-items: center; }
.fp-salkit-split .fp-salkit__kicker::before {
	content: ""; width: 30px; height: 2px; margin-right: 0.8em;
	background: var(--wp--preset--color--gold);
}

/* Immagini dei blocchi split: cornice morbida + zoom lento all'hover. */
.fp-salkit__split-media {
	border-radius: 14px;
	box-shadow: 0 30px 60px -34px rgba(42, 39, 36, 0.5), 0 6px 18px -10px rgba(42, 39, 36, 0.28);
}
.fp-salkit__split-media .fp-salkit__split-img { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fp-salkit-split:hover .fp-salkit__split-media .fp-salkit__split-img { transform: scale(1.06); }

/* Bande con immagine di sfondo (storia / tradizione): filetto oro sotto il titolo. */
.fp-salkit-section.has-bg-image .fp-salkit__heading::after {
	content: ""; display: block; width: 64px; height: 3px; border-radius: 2px;
	background: var(--wp--preset--color--gold); margin: 0.7em auto 0;
}

/* === Animazione d'entrata della caption ===
   reveal.js spezza il TITOLO in parole (.fpst-cap-w con --i progressivo) e
   attiva .fpst-cap-anim solo se JS+motion ok. Sequenza ad ogni cambio slide:
   1) la riga oro si disegna da sinistra; 2) il titolo entra parola-per-parola
   (da sfocato a nitido, salendo); 3) il sottotitolo sale in dissolvenza dopo
   l'ultima parola (--wc = n. parole del titolo). Senza JS / reduced-motion
   tutto è subito visibile (titolo non spezzato). */
.fpst-cap-anim .fpst-slide-cap::before { transform: scaleX(0); transform-origin: left center; }
.fpst-cap-anim .fpst-slide-cap .fpst-cap-w {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.6em);
	filter: blur(7px);
}
.fpst-cap-anim .fpst-slide-cap .fpst-cap-s { opacity: 0; transform: translateY(0.7em); }

.fpst-cap-anim .fpst-slide-cap.is-shown::before {
	animation: fpst-cap-line 0.6s cubic-bezier(0.2, 0.72, 0.2, 1) 0.05s both;
}
.fpst-cap-anim .fpst-slide-cap.is-shown .fpst-cap-w {
	animation: fpst-word-in 0.74s cubic-bezier(0.2, 0.72, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 0.08s + 0.22s);
}
.fpst-cap-anim .fpst-slide-cap.is-shown .fpst-cap-s {
	animation: fpst-cap-sub 0.7s cubic-bezier(0.2, 0.72, 0.2, 1) both;
	animation-delay: calc(var(--wc, 4) * 0.08s + 0.34s);
}
@keyframes fpst-cap-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fpst-word-in {
	0%   { opacity: 0; transform: translateY(0.6em); filter: blur(7px); }
	55%  { opacity: 1; }
	100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fpst-cap-sub { to { opacity: 1; transform: none; } }

/* Logo della tenuta sopra l'H1 introduttivo della home (richiesta utente).
   I crest del cluster sono bianchi (per header scuri) → invert(1) li rende
   scuri sul fondo chiaro, coerente con l'header. (La madre, logo a colori,
   sovrascrive con filter:none.) */
.fpst-intro-logo {
	height: clamp(120px, 16vw, 176px);
	margin: 0 auto 1.1rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: invert(1); /* crest bianchi → scuri su fondo chiaro (come l'header) */
}
/* Loghi GIÀ scuri/a colori (es. Sugarella, sito madre): niente invert. */
.fpst-intro-logo--noinvert { filter: none; }

@media (prefers-reduced-motion: reduce) {
	.fpst-reveal { opacity: 1 !important; transform: none !important; transition: none; }
	.fp-salkit-split:hover .fp-salkit__split-media .fp-salkit__split-img { transform: none; }
}

/* === Rifiniture home (riscontri review) === */

/* Bande full-bleed a FILO: rimuove il block-gap del flusso post-content tra le
   sezioni (ognuna ha già il proprio padding) e gli <p> vuoti lasciati da wpautop.
   Così non resta la fascia crema tra due bande scure consecutive. */
.entry-content.is-layout-flow > .fp-salkit-section,
.entry-content.is-layout-flow > section.fp-salkit-section { margin-block: 0; }
.entry-content.is-layout-flow > .fp-salkit-split { margin-block: clamp(52px, 7vw, 92px); }
/* wpautop lascia paragrafi spuri tra i blocchi top-level (il testo vero vive DENTRO
   le sezioni, non come figlio diretto): rimuovili → niente gap verticali incoerenti. */
.entry-content.is-layout-flow > p { display: none; }
.entry-content p:empty { display: none; margin: 0; }
.fp-salkit__section-inner > p:last-child:empty { display: none; }
/* Due sezioni CONTENUTE (senza sfondo) consecutive non raddoppiano il padding
   verticale: la prima dà già il respiro, la seconda parte a filo. Le bande full-bleed
   (has-bg-*) mantengono il proprio padding immersivo. */
.fp-salkit-section:not(.has-bg-image):not(.has-bg-color):not(.has-bg-video) + .fp-salkit-section:not(.has-bg-image):not(.has-bg-color):not(.has-bg-video) { padding-top: 0; }

/* Post-content "constrained" (template page.html/single.html): WordPress applica ai
   figli non-alignfull `margin-inline:auto !important`, che vince sulla formula full-bleed
   del Kit (`calc(50% - 50vw)`, senza !important) → le sezioni is-bleed partono dal bordo
   del container costretto e spingono il contenuto a destra. Ri-affermo la formula con
   !important (selettore più specifico). Tocca SOLO le sezioni is-bleed: gli articoli blog
   (single.html, <p> reali come figli diretti) non sono interessati. */
.entry-content.is-layout-constrained > .fp-salkit-section.is-bleed,
.wp-block-post-content.is-layout-constrained > .fp-salkit-section.is-bleed {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw !important;
}
/* le rifiniture di flusso tra sezioni valgono anche sotto constrained (i post blog non
   hanno .fp-salkit-section, quindi non regrediscono) */
.entry-content.is-layout-constrained > .fp-salkit-section { margin-block: 0; }

/* Hero slider above the fold + responsive. Nello slider l'immagine è una
   <figure class="fp-salkit-image"> con <img class="fp-salkit__image-img">: vincolo
   l'altezza di track/slide/figure al viewport meno header (~89px) e un accenno della
   sezione successiva; la caption (overlay assoluto) resta sopra la piega. */
.fp-salkit-slider .fp-salkit__slider-track,
.fp-salkit-slider .fp-salkit__slide,
.fp-salkit-slider .fp-salkit-image {
	height: calc(100svh - 130px);
	min-height: 440px;
}
.fp-salkit-slider .fp-salkit-image {
	aspect-ratio: auto;
	margin: 0;
	max-width: none;
	border-radius: 0;
	box-shadow: none;
}
.fp-salkit-slider .fp-salkit__image-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* wpautop lascia <br>/<p> spuri dentro lo slider: nascondili per non sballare l'altezza. */
.fp-salkit-slider br,
.fp-salkit-slider .fp-salkit__slide > p:empty { display: none; }
@media (max-width: 600px) {
	.fp-salkit-slider .fp-salkit__slider-track,
	.fp-salkit-slider .fp-salkit__slide,
	.fp-salkit-slider .fp-salkit-image { height: calc(100svh - 110px); min-height: 380px; }
}

/* Scacchiera: tutte le immagini split alla STESSA altezza (ratio uniforme), così
   le righe sono allineate invece di seguire l'altezza naturale di ogni foto. */
.fp-salkit-split .fp-salkit__split-media { aspect-ratio: 4 / 3; overflow: hidden; }
.fp-salkit-split .fp-salkit__split-media .fp-salkit__split-img { width: 100%; height: 100%; object-fit: cover; }

/* Stats: tipografia editoriale (numeri serif oro) al posto dei badge scuri «amatoriali». */
.fp-salkit-stats .fp-salkit__statc { gap: 0.55rem; }
.fp-salkit-stats .fp-salkit__statc-n {
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	line-height: 1;
}
.fp-salkit-stats .fp-salkit__statc-t {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	max-width: 20ch;
}

/* ==========================================================================
   Footer — pannello brand, colonne brand/naviga/tenute + barra inferiore.
   ========================================================================== */
.fpst-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.fpst-footer a:hover {
	opacity: 1;
	color: var(--wp--preset--color--gold);
}
.fpst-footer__brand {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--base);
}
.fpst-footer__tagline {
	max-width: 34ch;
	opacity: 0.7;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.fpst-footer__social .wp-social-link { color: var(--wp--preset--color--base); }

.fpst-footer__h {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #d8b98a;
	margin: 0 0 var(--wp--preset--spacing--40);
	opacity: 0.95;
}
ul.fpst-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Indice a colonne (come l'indice delle rubriche di una testata vera),
	   non un'unica colonna di link a bandiera. Prima le colonne potevano
	   restringersi a 0 (minmax(0,1fr)): "L'Osservatore" e "Collaboratori"
	   non ci stavano su una riga e si spezzavano a metà parola. Messo un
	   pavimento fisso di 130px su un numero FISSO di colonne (2 o 3 per
	   breakpoint) sembrava risolto ma non teneva conto della larghezza
	   reale della colonna "Naviga" (30% dei tre wp:column del footer):
	   3×130px superava quella larghezza e il grid sconfinava visibilmente
	   dentro la colonna "Info" accanto — segnalato da Francesco su un
	   secondo screenshot. `auto-fit` si adatta da solo allo spazio
	   davvero disponibile: mai più colonne di quante ce ne stiano.
	   Il blocco core/navigation avvolge questo <ul> in un <nav> con
	   display:flex e align-items:flex-start (classe is-layout-flex di
	   WordPress): senza width:100% il <ul> si restringe al contenuto
	   invece di occupare la colonna, e auto-fit vede una sola colonna
	   disponibile — l'indice collassava a 1 colonna pur non sconfinando. */
	display: grid;
	width: 100%;
	min-width: 0;
	grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
	column-gap: var(--wp--preset--spacing--50);
	row-gap: 0;
}
ul.fpst-footer__nav li { margin: 0; min-width: 0; }
ul.fpst-footer__nav a {
	display: block;
	opacity: 0.85;
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
}
ul.fpst-footer__nav a:hover { opacity: 1; }

.fpst-footer__cols > .wp-block-column,
.fpst-footer__cols .wp-block-navigation { min-width: 0; }

.fpst-footer__rule {
	width: 100%;
	max-width: none;
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
	opacity: 0.18;
}
.fpst-footer__bottom { opacity: 0.75; }
.fpst-footer__bottom p { margin: 0; }
.fpst-footer__legal a { text-decoration: none; }
.fpst-footer__legal a:hover { opacity: 1; }

@media (max-width: 781px) {
	.fpst-footer__cols { gap: var(--wp--preset--spacing--50); }
}

/* ==========================================================================
   Blog — griglia contenuto + sidebar, widget, schede articolo.
   ========================================================================== */
.fpst-content-grid { gap: var(--wp--preset--spacing--70); }
.fpst-content-grid > .wp-block-column { min-width: 0; }

.fpst-postcard img { width: 100%; height: auto; }

/* Categoria come badge/pillola colorata (taglio editoriale da giornale), al
   posto del semplice link testuale reso di default da core/post-terms.
   Condiviso da tutte le famiglie di card (lista, "in evidenza", griglia
   densa) per coerenza visiva. */
.fpst-postcard .wp-block-post-terms a,
.fpst-news-grid .wp-block-post-terms a,
.fpst-grid-dense .wp-block-post-terms a {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.25em 0.75em;
	border-radius: 999px;
}
.fpst-postcard .wp-block-post-terms a:hover,
.fpst-news-grid .wp-block-post-terms a:hover,
.fpst-grid-dense .wp-block-post-terms a:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }


/* Articoli correlati (shortcode [fpst_related_posts] in templates/single.html).
   Trattato come un "band" a sé (sfondo tenue + card), non un footer minore:
   sostituisce prev/next (rimosso perché la sequenza cronologica tra articoli
   scorrelati non è un'informazione utile al lettore) come ultima cosa vista
   prima dei commenti, quindi deve avere peso visivo reale. */
.fpst-related {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, var(--wp--preset--color--base));
	border-radius: 10px;
}
.fpst-related__heading {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--wp--preset--color--line);
}
.fpst-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
}
@media (max-width: 781px) {
	.fpst-related { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
	.fpst-related__grid { grid-template-columns: 1fr; }
}
.fpst-related__item {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}
.fpst-related__img {
	display: block;
	width: 100%;
	/* Prima height:170px fisso: 4:3 come le altre card standard del tema. */
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 0.7em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.fpst-related__title {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}
.fpst-related__item:hover { transform: translateY(-3px); }
.fpst-related__item:hover .fpst-related__title { color: var(--wp--preset--color--accent-text); }
@media (prefers-reduced-motion: reduce) {
	.fpst-related__item { transition: none; }
	.fpst-related__item:hover { transform: none; }
}

/* Gallery shortcode classico `[gallery ids="..."]` dentro il corpo articolo
   (es. foto multiple incollate da contenuti Facebook): senza queste regole
   il markup nativo di WP resta senza stile — foto quadre 150×150 in colonna,
   nessun grid, nessun gap. Ritaglio landscape 4:3 (non quadrato) coerente col
   resto delle immagini del tema, hover zoom come .fpst-related__item. Il `br`
   di "clear" che WP inserisce va nascosto: dentro una grid diventerebbe un
   item fantasma che sfasa le colonne. */
.wp-block-post-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
	margin: 1.5em 0;
	list-style: none;
	padding: 0;
}
.wp-block-post-content .gallery br { display: none; }
.wp-block-post-content .gallery-item { margin: 0; }
.wp-block-post-content .gallery-icon {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--line, #e4e4e4);
}
.wp-block-post-content .gallery-icon a { display: block; height: 100%; }
.wp-block-post-content .gallery-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	transition: transform 0.35s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-content .gallery-item:hover .gallery-icon img { transform: scale(1.04); }
}
.wp-block-post-content .gallery-caption {
	margin-top: 0.4em;
	font-size: var(--wp--preset--font-size--small, 0.85rem);
	color: var(--fpst-muted, #667085);
	text-align: left;
}

/* Tempo di lettura stimato (shortcode [fpst_reading_time] in templates/single.html),
   allineato visivamente a data/autore/categoria nella riga byline (stessa
   dimensione small del tema, colore muted per non competere col resto). */
.fpst-reading-time {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Accedi con Google (shortcode [fpst_google_login], solo se non loggati e
   se il sito ha configurato le chiavi in Impostazioni → Discussione). */
.fpst-google-login__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 0.6em 1.2em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}
.fpst-google-login__btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

/* Badge "utente registrato" accanto al nome di chi ha commentato dopo
   essersi autenticato con Google (get_comment_author_link in inc/google-login.php). */
.fpst-verified-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	margin-left: 0.3em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 0.7em;
	vertical-align: middle;
}

/* Stesso fix di contrasto per il kicker del Kit nell'hero home
   ([fp_salkit_hero]): il Kit rende il kicker in `gold` puro, corretto su
   sfondi scuri ma illeggibile sullo sfondo chiaro dell'hero di questo tema
   (~1,4:1). Scoped a `.fp-salkit-hero` per non toccare altri usi del kicker
   del Kit (es. su sfondi scuri altrove) dove il colore originale va bene. */
.fp-salkit-hero .fp-salkit__kicker {
	color: color-mix(in srgb, var(--wp--preset--color--gold) 50%, black);
}
/* Scelta estetica di Cronaca di Viterbo: nasconde la lineetta decorativa
   `::before` del kicker (di serie nel Kit) solo nell'hero di questo sito. */
.fp-salkit-hero .fp-salkit__kicker::before {
	display: none;
}

/* Griglia news UNIFICATA in home (un solo Query Loop, un solo grid — non piu'
   sezioni separate impilate): il primo post e' grande (grid-column: 1/-1),
   i successivi 3 medi, il resto compatto — stessa idea di viterbotoday.it
   (un'unica griglia con card di taglie diverse) ma con badge categoria e
   colori del nostro brand. */
/* ⚠️ core/post-template ha layout "flow": WordPress applica il block-gap come
   `margin-block-start` a ogni <li class="wp-block-post"> dopo il primo. Dentro
   una griglia quel margine si SOMMA al `gap`, spingendo giù di 24px tutte le
   card tranne la prima → la prima riga risultava disallineata (verificato:
   postTop 0 / 24 / 24). Azzerato su tutte le nostre griglie di card. */
.fpst-news-grid > .wp-block-post,
.fpst-grid-dense > .wp-block-post,
.fpst-cardlist > .wp-block-post {
	margin-block-start: 0;
}

.fpst-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--50);
}
.fpst-news-grid__item { display: block; text-decoration: none; color: inherit; }
.fpst-news-grid__img { display: block; margin: 0 0 var(--wp--preset--spacing--30); }
.fpst-news-grid__img img {
	display: block;
	width: 100%;
	/* Prima height:150px fisso: con width:100% il rapporto slittava a seconda
	   della larghezza colonna. 4:3 come .fpst-grid-dense, stesso trattamento
	   "card standard" in tutto il tema. */
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 4px;
}
.fpst-news-grid__title {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.fpst-news-grid__item:hover .fpst-news-grid__title { color: var(--wp--preset--color--accent-text); }
.fpst-news-grid__excerpt { display: none; }

/* Post di apertura (1° elemento, il piu' recente): occupa tutta la larghezza
   della griglia, immagine ed estratto grandi.
   ⚠️ Il figlio DIRETTO della griglia non e' `.fpst-news-grid__item` (il mio
   wp:group), ma il `<li class="wp-block-post">` che core/post-template
   genera automaticamente per ogni post — grid-column/nth-child vanno
   applicati LI, non al gruppo annidato dentro, altrimenti lo span non ha
   alcun effetto sulla griglia reale (verificato: il gruppo restava largo
   quanto una singola colonna nonostante `grid-column:1/-1`). */
.fpst-news-grid > .wp-block-post:first-child {
	grid-column: 1 / -1;
}
.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__item {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding-bottom: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
/* Immagine in colonna 2 a tutta altezza, testo (categoria/titolo/estratto) in
   colonna 1. ⚠️ L'auto-placement NON basta: con la sola immagine posizionata,
   i 3 figli di testo riempiono le celle libere riga per riga e l'estratto
   finiva in colonna 2 sotto l'immagine (verificato: left 452px). Vanno quindi
   ancorati esplicitamente alla colonna 1, e le righe dichiarate perché
   `grid-row: 1 / -1` sull'immagine si riferisca alle righe esplicite. */
.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__item {
	grid-template-rows: auto auto auto;
	align-items: start;
}
.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__item > * {
	grid-column: 1;
	/* Il layout "constrained" del gruppo dà `margin-inline:auto` ai figli, e
	   WordPress lo emette con `!important` → il badge categoria (largo quanto
	   il contenuto) restava centrato in colonna. Nota: i margini automatici
	   hanno la precedenza su `justify-self`, quindi non basta allinearlo —
	   vanno azzerati, e per pareggiare il core serve `!important`. */
	margin-inline: 0 !important;
}
.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__img {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	margin-bottom: 0;
}
/* Riquadro "quasi hero" del 1° elemento: 16:9 come .fpst-lead__img, non un
   260px fisso scelto a parte (il rapporto slittava con la larghezza colonna). */
.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__img img { aspect-ratio: 16 / 9; height: auto; }
.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__title { font-size: 1.9rem; line-height: 1.15; margin-bottom: var(--wp--preset--spacing--30); }
.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__excerpt { display: block; font-size: 1.02rem; color: var(--wp--preset--color--muted); }

/* Fascia "secondaria" (2°-4° elemento): medi, immagine piu' piccola del hero
   ma piu' grande dei compatti, niente estratto. */
.fpst-news-grid > .wp-block-post:nth-child(n+2):nth-child(-n+4) .fpst-news-grid__img img { aspect-ratio: 4 / 3; height: auto; }
.fpst-news-grid > .wp-block-post:nth-child(n+2):nth-child(-n+4) .fpst-news-grid__title { font-size: 1.2rem; }

@media (max-width: 781px) {
	.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__item {
		grid-template-columns: 1fr;
	}
	.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__img {
		grid-column: 1;
		grid-row: auto;
	}
	/* Eredita aspect-ratio:16/9 dalla regola desktop, qui serve solo il
	   layout a colonna singola sopra: niente altezza fissa da sovrascrivere. */
	.fpst-news-grid > .wp-block-post:first-child .fpst-news-grid__title { font-size: 1.5rem; }
}

/* Griglia densa "portale news" (pagine categoria/archivio + blog-index): card
   compatte, tante affiancate, niente estratto — sostituisce la lista
   impilata a 1 colonna. Riusa lo stesso badge pillola categoria di
   .fpst-postcard .wp-block-post-terms a. */
.fpst-grid-dense {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--50);
}
.fpst-grid-dense__item { display: block; text-decoration: none; color: inherit; }
.fpst-grid-dense__img {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--30);
}
.fpst-grid-dense__img img {
	display: block;
	width: 100%;
	/* Ritaglio 4:3 (più alto della vecchia striscia fissa da 140px, che su
	   mobile a tutta larghezza risultava troppo schiacciata): l'immagine scala
	   con la larghezza della card e resta più "verticale" e leggibile. */
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 4px;
}
/* Titolo a TRE righe fisse, sempre. Le righe della griglia partivano gia'
   allineate, ma le card finivano a altezze diverse (misurate 388 e 362 px
   affiancate) perche' i titoli fanno 2 o 3 righe: tutto quello che sta sotto
   — autore, data, estratto — slittava di conseguenza e non si allineava mai
   in orizzontale. E' questo che rendeva la pagina «confusionaria» (segnalato
   da Francesco l'1/09/2026), non la densita'.
   `min-height` oltre al clamp: il clamp da solo taglia i titoli lunghi ma non
   allunga quelli corti. Niente subgrid — provata il 01/09 e revertita, aveva
   rotto le larghezze in produzione. */
.fpst-grid-dense__title {
	/* 🚨 `!important` sul display, e non e' pigrizia: WordPress rende i blocchi
	   con layout a `display: flow-root`, che vince per ordine su una nostra
	   regola a pari specificita'. Con `flow-root` il `-webkit-line-clamp` e'
	   semplicemente INERTE — misurato l'1/09/2026: computed `flow-root`,
	   clamp `3`, e il titolo su quattro righe (79px contro 66). Il clamp
	   richiede `-webkit-box`, altrimenti non taglia niente e non lo dice. */
	/* Il clamp NON va sull'h2 ma sull'`a` interno, qui sotto: WordPress rende
	   i blocchi con layout a `display: flow-root` e vince anche contro un
	   `!important` nostro (provato l'1/09/2026: computed ancora `flow-root`).
	   Sotto `flow-root` il `-webkit-line-clamp` e' inerte e non lo segnala —
	   il titolo restava su quattro righe. L'`a` figlio invece non ha layout
	   addosso: li' il clamp funziona senza combattere sulla specificita'.
	   Sull'h2 resta il solo `min-height`, che pareggia i titoli corti. */
	overflow: hidden;
	min-height: calc(3 * 1.3em);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.fpst-grid-dense__title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fpst-grid-dense__item:hover .fpst-grid-dense__title { color: var(--wp--preset--color--accent-text); }
.fpst-grid-dense .wp-block-post-terms,
.fpst-news-grid .wp-block-post-terms { margin-bottom: 0.5em; display: block; }
/* Autore/data ed estratto sulle card di archivio/categoria: prima c'erano
   solo immagine + categoria + titolo, senza contesto per decidere se aprire
   l'articolo — le pagine archivio vere hanno sempre almeno data ed estratto. */
/* Autore e data SEMPRE incolonnati, mai affiancati. Il blocco nasce
   `flex-wrap`, quindi andava a capo solo quando il nome era lungo: «Redazione
   1 Settembre 2026» stava su una riga (21px), «Leonardo Pacini» e
   «cronacadiviterbo» su due (47px). Erano quei 26px — non il titolo — a far
   finire a altezze diverse card affiancate, l'ultima causa del disallineamento
   della pagina archivio (misurato l'1/09/2026: 396 contro 370).
   Incolonnare invece di forzare una riga sola: a 244px di colonna «DI
   CRONACADIVITERBO · 1 SETTEMBRE 2026» non ci sta senza troncare un nome
   proprio, e troncare la firma di un autore e' peggio di una riga in piu'. */
.fpst-grid-dense__meta {
	flex-direction: column;
	align-items: flex-start;
	margin: 0.35em 0;
	gap: 0.15em;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}
.fpst-grid-dense__meta .wp-block-post-author-name a { color: var(--wp--preset--color--muted); text-decoration: none; }
.fpst-grid-dense__excerpt {
	/* Stessa storia del titolo: sotto `flow-root` il clamp e' inerte — qui lo
	   era da sempre, non da oggi. Il `max-height` taglia comunque, con
	   qualunque display, e insieme al `min-height` fissa l'altezza esatta di
	   due righe. Niente ellissi, ma l'estratto e' gia' troncato a 20 parole
	   dal blocco, quindi la coda mancante non e' una perdita. */
	max-height: calc(2 * 1.5em);
	overflow: hidden;
	/* Come per il titolo: il clamp taglia il lungo, il min-height pareggia il
	   corto. Senza, una card con estratto da una riga resta piu' bassa delle
	   vicine e la griglia torna irregolare. */
	/* line-height esplicita, cosi' il `min-height` qui sotto e' coerente per
	   costruzione: ereditata valeva 1.65, il minimo calcolato su 1.5 restava
	   4px sotto l'altezza reale di due righe e la card tornava piu' bassa. */
	line-height: 1.5;
	min-height: calc(2 * 1.5em);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.88rem;
	color: var(--wp--preset--color--muted);
}
@media (max-width: 781px) {
	.fpst-grid-dense { grid-template-columns: 1fr; }
}

.fpst-sidebar {
	position: sticky;
	top: 90px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}
.fpst-widget {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50);
	/* `.fpst-sidebar` è un gruppo con layout "constrained": WordPress dà ai
	   figli `max-width: contentSize` + `margin-inline: auto`. In un flex a
	   colonna i margini automatici battono lo stretch, così ogni widget
	   prendeva la larghezza del proprio contenuto: la ricerca sbordava
	   (363px su 335) e "Categorie" si restringeva e centrava (251px).
	   Qui li riportiamo tutti alla larghezza della sidebar. */
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	min-width: 0;
}
/* La ricerca ha un input con min-width intrinseca che faceva sbordare il box. */
.fpst-widget__search .wp-block-search__input { min-width: 0; }
/* Widget la cui fonte dati è tornata vuota (es. [fpst_most_read] su sito senza
 * contatore letture): resta solo il titolo nel markup del template part →
 * nascondi l'intero box, com'era nell'intento dello shortcode. */
.fpst-widget:has(> .fpst-widget__title:only-child) { display: none; }
.fpst-widget__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 2px solid var(--wp--preset--color--gold);
	display: inline-block;
}
.fpst-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fpst-widget li {
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fpst-widget li:last-child {
	border-bottom: 0;
}
.fpst-widget a {
	text-decoration: none;
}
.fpst-widget a:hover {
	color: var(--wp--preset--color--gold);
}
.fpst-widget__posts .wp-block-latest-posts__post-date,
.fpst-widget__posts .wp-block-post-date {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
/* La widget "Articoli recenti" ora è un Query Loop (post-template = <ul><li>):
   il titolo è un post-title link, tenuto compatto e in ink come la lista. */
.fpst-widget__posts .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}
.fpst-widget__posts .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.fpst-widget__posts .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-text); }
.fpst-widget__posts .wp-block-post-date { margin: 0.15em 0 0; }

/* Widget "Più letti" (shortcode [fpst_most_read]): stessa <ul>/<li>/<a> degli
   altri widget sidebar (eredita .fpst-widget ul/li/a sopra), solo il numero
   di letture ha una regola dedicata. */
.fpst-most-read__count {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.fpst-sidebar { position: static; }
	.fpst-content-grid { gap: var(--wp--preset--spacing--60); }
}

/* Menu overlay: hover ben visibile sul fondo rosso brand. Il token "gold" del
   tema è #c5281a — lo stesso rosso dell'overlay — quindi l'hover era invisibile. */
.fpst-overlay__menu > li > a:hover,
.fpst-overlay__group ul a:hover { color: #f3dcab; }

/* Nessuna striscia crema tra l'ultimo contenuto e il footer (block-gap della root). */
.wp-site-blocks > footer { margin-block-start: 0; }

/* «Le Tenute» nel menu: i loghi contengono già il nome della tenuta → l'etichetta
   testuale resta solo per gli screen reader (evita il doppione e l'a-capo). */
.fpst-overlay__tenute a span {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Componenti "testata": breadcrumb, condivisione, segnala errore, badge
   commenti sulle card. Tutti generati da shortcode (functions.php).
   ========================================================================== */

/* Breadcrumb sopra il titolo articolo ([fpst_breadcrumb]). */
.fpst-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin-bottom: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	/* "HOME / VITERBO / AMBIENTE": maiuscolo spaziato, non la freccina
	   da blog/e-commerce. */
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.fpst-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.fpst-breadcrumb a:hover {
	color: var(--wp--preset--color--accent-text);
}
.fpst-breadcrumb__sep { color: var(--wp--preset--color--line); }
.fpst-breadcrumb__current { color: var(--wp--preset--color--ink); }

/* Pulsanti di condivisione ([fpst_share]). */
.fpst-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: var(--wp--preset--spacing--40) 0;
}
.fpst-share__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	margin-right: 0.2em;
}
.fpst-share__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.82rem;
	font-weight: 600;
	/* Meno rumore visivo (2026-07-18): prima erano 4 pillole a colore-brand
	   pieno (verde/blu/nero/azzurro) su OGNI articolo — una fila accesa,
	   soprattutto su mobile. Ora a riposo sono uniformi (contorno tenue, testo
	   ink); il colore del brand compare solo all'hover/tap. */
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	text-decoration: none;
	line-height: 1.4;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fpst-share__btn:hover { transform: translateY(-1px); color: #fff; }
.fpst-share__btn--whatsapp:hover { background: #25d366; border-color: #25d366; }
.fpst-share__btn--facebook:hover { background: #1877f2; border-color: #1877f2; }
.fpst-share__btn--x:hover        { background: #000; border-color: #000; }
.fpst-share__btn--telegram:hover { background: #229ed9; border-color: #229ed9; }

/* "Segnala un errore" ([fpst_report_error]), in fondo all'articolo. */
.fpst-report-error {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--small);
}
.fpst-report-error a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.fpst-report-error a:hover { color: var(--wp--preset--color--accent-text); }

/* Slide dello slider "in evidenza" in cima alla home ([fpst_featured_slider]):
   immagine a tutta larghezza con titolo e categoria sovrimpressi in basso su
   una sfumatura, così il testo resta leggibile su qualunque foto. */
.fpst-slide {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius, 6px);
	text-decoration: none;
}
.fpst-slide__img {
	display: block;
	width: 100%;
	/* Più basso della storia di apertura: lo slider "in evidenza" è
	   secondario, non deve competere col lead. */
	height: clamp(200px, 22vw, 300px);
	object-fit: cover;
}
.fpst-slide__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: block;
	padding: clamp(1rem, 3vw, 2rem);
	/* Riserva spazio in basso per i dot dello slider (.fp-salkit__slider-dots a
	   bottom:18px): su mobile il titolo su 2 righe ci finiva sopra. */
	padding-bottom: max(2.6rem, clamp(1rem, 3vw, 2rem));
	/* Sfumatura dal basso: garantisce contrasto del testo bianco anche su
	   foto chiare (il solo testo bianco su immagine non è affidabile). */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
}
.fpst-slide__cat {
	display: inline-block;
	margin-bottom: 0.5em;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.fpst-slide__title {
	display: block;
	color: #fff;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.25rem, 2.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}
.fpst-slide:hover .fpst-slide__title { opacity: 0.92; }
/* ⚠️ Il Kit riusa la stessa classe `.fp-salkit-slider` sia per l'hero
   full-viewport (con `.fp-salkit-image`) sia qui: la regola generica del tema
   forza `height: calc(100svh - 130px); min-height: 440px` su track/slide,
   allungandoli a ~725px mentre le nostre immagini sono alte 460px → 265px di
   vuoto sotto (con dot/frecce sospesi a metà). Qui, SOLO per il nostro slider
   "in evidenza", riportiamo track e slide all'altezza reale del contenuto. */
.fpst-featured-slider .fp-salkit-slider .fp-salkit__slider-track,
.fpst-featured-slider .fp-salkit-slider .fp-salkit__slide {
	height: auto;
	min-height: 0;
	align-items: stretch;
}

/* ==========================================================================
   Sezioni di categoria in home (modello portale-news): ogni categoria ha la
   sua intestazione + una lista compatta di 4 articoli, invece di una sola
   griglia cronologica piatta. `.fpst-cardlist` è la <ul> resa da
   core/post-template: i figli DIRETTI sono i <li class="wp-block-post">, non
   i nostri gruppi interni — la griglia va lì (stesso gotcha di .fpst-news-grid).
   ========================================================================== */
.fpst-section__head {
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--wp--preset--color--accent);
}
.fpst-section__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.fpst-section__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.fpst-section__title a:hover { color: var(--wp--preset--color--accent-text); }
.fpst-section__more {
	margin: 0;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.fpst-section__more a {
	color: var(--wp--preset--color--accent-text);
	text-decoration: none;
	/* Area di tocco: prima ~17px, sotto lo standard di 32px minimo. */
	display: inline-block;
	padding: 0.5rem 0;
}
.fpst-section__more a::after { content: " ›"; }
.fpst-section__more a:hover { color: color-mix(in srgb, var(--wp--preset--color--accent) 75%, black); }

/* Sottotitolo di sezione: la descrizione della categoria, sotto il filetto
   dell'intestazione e sopra le card. Compare solo dove la descrizione è stata
   scritta (le rubriche), quindi deve restare un sottotono — spiega, non
   compete col titolo. `max-width` in ch perché è testo da leggere, non un
   elemento di griglia: senza, sulle colonne larghe la riga diventa troppo
   lunga per l'occhio. */
.fpst-section__sub {
	margin: calc(-1 * var(--wp--preset--spacing--20)) 0 var(--wp--preset--spacing--40);
	max-width: 68ch;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	min-height: calc(2 * 1.45 * var(--wp--preset--font-size--small));
}

/* Allineamento fra le due colonne della home (segnalato da Francesco l'1/09/2026
   su Mondo | Tecnologia): le colonne di `wp-block-columns` sono flussi verticali
   indipendenti, quindi il sottotitolo spinge giu' solo le card della sua colonna.
   Alla gemella senza sottotitolo si riserva lo stesso spazio; il primo `:has()`
   limita la correzione alle righe dove un sottotitolo esiste davvero.

   ⚠️ Provata e SCARTATA la via `subgrid` (righe condivise fra le colonne, che
   sarebbe stata esatta): impostare `grid-template-columns` su `wp-block-columns`
   scavalca le larghezze calcolate da WordPress — in produzione le colonne sono
   passate da 371px a 260px e la riga del sottotitolo a 785px. Se si riprova,
   serve ereditare le larghezze di WP invece di ridichiararle.

   Resta uno scarto quando un sottotitolo va oltre le due righe: lo spazio
   riservato ne vale due. Meglio un disallineamento di una riga che troncare una
   descrizione — in una colonna da 371px due righe sono ~75 caratteri. */
.wp-block-columns:has(.fpst-section__sub) .wp-block-column .fpst-section:not(:has(.fpst-section__sub)) .fpst-section__head {
	margin-bottom: calc(
		var(--wp--preset--spacing--40)
		+ (2 * 1.45 * var(--wp--preset--font-size--small))
		+ var(--wp--preset--spacing--40)
		- var(--wp--preset--spacing--20)
	);
}


.fpst-cardlist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Card compatta: miniatura a sinistra, titolo+data a destra — impacchetta
   molti titoli in poco spazio verticale (come le card "inline" del modello). */
.fpst-cardlist__item {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}
/* Articolo senza immagine in evidenza: il blocco featured-image non rende
   nulla e il corpo cadrebbe nella prima colonna da 104px (titolo schiacciato,
   verificato). Senza miniatura il testo prende tutta la larghezza. */
.fpst-cardlist__item:not(:has(.fpst-cardlist__img)) {
	grid-template-columns: minmax(0, 1fr);
}
.fpst-cardlist__img { margin: 0; }
.fpst-cardlist__img img {
	display: block;
	width: 104px;
	/* Stesso ritaglio 4:3 di .fpst-grid-dense, non più un'altezza fissa
	   scelta a parte: prima era 74px (rapporto 1.41), leggermente diverso
	   dal 4:3 (1.33) usato altrove — differenza minima ma visibile
	   affiancando le sezioni della home. */
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 4px;
}
.fpst-cardlist__body { min-width: 0; }
.fpst-cardlist__title {
	margin: 0 0 0.25em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
}
.fpst-cardlist__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.fpst-cardlist__item:hover .fpst-cardlist__title a { color: var(--wp--preset--color--accent-text); }
.fpst-cardlist__date {
	margin: 0;
	color: var(--wp--preset--color--muted);
}
@media (max-width: 781px) {
	.fpst-cardlist { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
	.fpst-cardlist__item { grid-template-columns: 84px minmax(0, 1fr); }
	/* Solo la larghezza: aspect-ratio 4/3 e height:auto restano quelli della
	   regola base, così il ritaglio resta lo stesso anche qui invece di un
	   60px scelto a parte (rapporto 1.4 invece di 1.33). */
	.fpst-cardlist__img img { width: 84px; }
}

/* Navigazione articolo precedente/successivo in fondo al pezzo (blocchi core
   `post-navigation-link`). Sul primo/ultimo articolo il blocco corrispondente
   rende un wrapper VUOTO (non "nulla"): lo nascondiamo con `:empty` così non
   partecipa al flex e non lascia un `gap` a vuoto. `space-between` continua a
   tenere il link superstite dalla parte giusta (prev a sinistra, next a
   destra) grazie al `margin-left:auto` sul next. */
.fpst-post-nav {
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}
.fpst-post-nav .wp-block-post-navigation-link {
	max-width: 48%;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}
.fpst-post-nav .wp-block-post-navigation-link:empty { display: none; }
.fpst-post-nav .post-navigation-link-next {
	text-align: right;
	margin-left: auto;
}
.fpst-post-nav a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.fpst-post-nav a:hover { color: var(--wp--preset--color--accent-text); }
.fpst-post-nav .post-navigation-link__label {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
}
@media (max-width: 600px) {
	.fpst-post-nav .wp-block-post-navigation-link { max-width: 100%; }
}

/* Badge "N commenti" sulle card ([fpst_comment_count]). Vuoto se 0 commenti,
   quindi invisibile finché non arrivano i primi. */
.fpst-comment-count {
	display: inline-block;
	margin-top: 0.35em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent-text);
}

/* ==========================================================================
   LOOK "TESTATA MODERNA" (Cronaca di Viterbo)
   Restyle dei soli componenti news (.fpst-*) + barra data. Non tocca gli stili
   globali del tema: gli altri siti del cluster non usano queste classi, quindi
   restano invariati. UI/chrome in Inter (già nel tema), edge netti, gerarchia
   marcata; i titoli-articolo restano in Playfair (taglio editoriale).
   ========================================================================== */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
:root { --fpst-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Barra data in cima (opt-in `fpst_topbar`). */
.fpst-topbar {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fpst-topbar__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1180px;
	margin-inline: auto;
	padding: 0.5rem clamp(16px, 5vw, 24px);
	font-family: var(--fpst-ui);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.fpst-topbar__date { font-weight: 700; color: var(--wp--preset--color--ink); }
.fpst-topbar__tag { text-align: right; }
@media (max-width: 600px) { .fpst-topbar__tag { display: none; } }

/* Intestazioni di sezione più marcate: tab accent + Inter maiuscolo, hairline
   scuro pieno (non più il sottile filetto "blog"). */
/* Intestazione di sezione, rivista l'1/09/2026 su segnalazione di Francesco
   («mi sembra amatoriale»). Tre cose, in ordine di peso:

   · il filetto sotto era 2px pieni sul nero: pesava piu' del titolo e su
     quindici sezioni faceva un reticolo. Ora e' 1px sul 22% dell'inchiostro,
     un rigo di separazione e non una barra;
   · il maiuscoletto spaziato su parole lunghe («ECONOMIA E LAVORO») e' duro da
     leggere e da' l'aria di un'etichetta di sistema. Tondo con la sola
     iniziale maiuscola, nel serif della testata: e' un titolo di giornale;
   · «Tutte ›» era blu come i link degli articoli e competeva col titolo. Ora
     grigio, blu solo al passaggio. */
.fpst-section__head {
	align-items: baseline;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
}
.fpst-section__title {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--fpst-serif);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.4rem);
	letter-spacing: -0.005em;
	text-transform: none;
}
/* «Tutte ›» resta colorato: NON e' una svista ma una funzione del tema — c'e'
   una regola per categoria (`.fpst-section:has(a[href$="/viterbo"]) …`) che gli
   da' il colore della sezione. Provato a farlo grigio l'1/09/2026 e rimesso
   com'era: toglierlo avrebbe spento un codice colore che al lettore serve. */
/* I titoli di sezione in home portano la classe preset `has-medium-font-size`,
   che WordPress emette con `!important`: la font-size dichiarata qui sopra non
   arrivava mai a valere e tutte e quindici le fasce restavano a 17px, tutte
   dello stesso peso. Da lì l'effetto elenco infinito — il lettore non vede
   dove finisce una sezione e ne comincia un'altra. Per alzarle bisogna battere
   il preset sul suo stesso terreno, non c'è altra via che l'`!important`. */
.fpst-section__head .fpst-section__title.has-medium-font-size {
	font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important;
}
.fpst-section__title::before {
	content: "";
	align-self: center;
	width: 5px;
	height: 0.92em;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}
.fpst-section__more { font-family: var(--fpst-ui); font-weight: 600; }

/* Chrome/etichette in Inter: badge categoria, kicker slide, date, meta. */
.fpst-postcard .wp-block-post-terms a,
.fpst-news-grid .wp-block-post-terms a,
.fpst-grid-dense .wp-block-post-terms a,
.fpst-slide__cat,
.fpst-cardlist__date,
.fpst-comment-count,
.fpst-widget__title,
.fpst-breadcrumb,
.fpst-share__label,
.fpst-post-nav .post-navigation-link__label {
	font-family: var(--fpst-ui);
}

/* Titoli-articolo più incisivi: interlinea più stretta, quasi-nero. */
.fpst-news-grid__title,
.fpst-cardlist__title,
.fpst-grid-dense__title,
.fpst-hero-post__title,
.fpst-slide__title {
	line-height: 1.16;
	letter-spacing: -0.01em;
}

/* Edge netti (meno "soft blog"): immagini e riquadri a 2px, non 4. */
.fpst-news-grid__img img,
.fpst-grid-dense__img img,
.fpst-cardlist__img img,
.fpst-hero-post__img img,
.fpst-featured__img img,
.fpst-slide,
.fpst-related__img,
.fpst-widget {
	border-radius: 2px;
}

/* Card compatte come lista "rigata" (struttura da giornale, non card sparse).
   ⚠️ Il filetto va sui `.wp-block-post` (figli DIRETTI della griglia), NON su
   `.fpst-cardlist__item`: quest'ultimo è figlio unico del proprio <li>, quindi
   `:nth-child` lo matcherebbe sempre come 1° (stesso gotcha dell'allineamento).
   La prima riga (2 card) non prende il filetto: c'è già il bordo
   dell'intestazione di sezione sopra. */
.fpst-cardlist > .wp-block-post {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}
.fpst-cardlist > .wp-block-post:nth-child(-n+2) {
	padding-top: 0;
	border-top: 0;
}

/* Frecce dello slider: spostate in alto a destra come coppia, così non
   cadono MAI sul titolo/badge in basso a sinistra (a qualunque altezza
   dell'immagine — con l'immagine più bassa le frecce a top:50% finivano
   sopra il titolo). Dots in basso, invariati. */
.fpst-featured-slider .fp-salkit__slider-arrow {
	top: 16px;
	bottom: auto;
	transform: none;
	width: 40px;
	height: 40px;
	font-size: 22px;
}
.fpst-featured-slider .fp-salkit__slider-arrow.prev { left: auto; right: 64px; }
.fpst-featured-slider .fp-salkit__slider-arrow.next { right: 16px; }

/* ==========================================================================
   RISTRUTTURAZIONE "prima pagina" (Cronaca) — v0.31
   Titoli-articolo in Fraunces (serif contemporaneo, già nel tema) al posto di
   Playfair per un taglio più editoriale/moderno. Blocco di apertura: storia
   grande + colonna titoli, come la prima pagina di un quotidiano.
   ========================================================================== */
@font-face { font-family: 'Fraunces'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/fraunces-700.woff2') format('woff2'); }
:root { --fpst-serif: 'Fraunces', Georgia, 'Times New Roman', serif; }

/* H1 nascosto (accessibilità/SEO) — la home apre con le notizie, non con un titolo. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Titoli-articolo dei componenti news → Fraunces. */
.fpst-lead__title,
.fpst-lead__rail-title,
.fpst-news-grid__title,
.fpst-hero-post__title,
.fpst-cardlist__title,
.fpst-grid-dense__title,
.fpst-slide__title,
.fpst-featured__title,
.fpst-related__title {
	font-family: var(--fpst-serif);
}

/* --- Blocco di apertura "prima pagina" --- */
.fpst-lead__cols { gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
/* Filo verticale tra la notizia grande e "Altre notizie": prima le due
   colonne erano separate solo dallo spazio bianco del gap, senza un bordo
   che le distinguesse come due zone — la rail sembrava un'appendice
   fluttuante invece di un modulo "digest" a se stante. */
.fpst-lead__cols > .wp-block-column:last-child {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: 1.5rem;
}
@media (max-width: 781px) {
	.fpst-lead__cols > .wp-block-column:last-child {
		border-left: 0;
		padding-left: 0;
	}
}

.fpst-lead__main-item { display: block; }
.fpst-lead__img { margin: 0 0 0.9rem; display: block; }
.fpst-lead__img img {
	display: block;
	width: 100%;
	/* Prima height:clamp(240px,26vw,360px): legato alla larghezza del
	   viewport, non della colonna (62% su desktop), quindi il rapporto non
	   era davvero 16:9 costante. 16:9 vero, come il primo elemento di
	   .fpst-news-grid e .fpst-cardlist — stesso trattamento "hero" ovunque. */
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	border-radius: 2px;
}
.fpst-lead__title {
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2.15rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0.35em 0 0.3em;
}
/* Prima la storia principale non aveva data né autore, mentre le
   notizie secondarie nella rail sì — il pezzo più importante della
   pagina aveva meno contesto di quelli minori. */
.fpst-lead__meta {
	margin-bottom: 0.6rem;
	gap: 0.4em;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
.fpst-lead__meta .wp-block-post-author-name a { color: var(--wp--preset--color--muted); text-decoration: none; }
.fpst-lead__meta .wp-block-post-author-name a:hover { color: var(--wp--preset--color--accent-text); }
.fpst-lead__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.fpst-lead__main-item:hover .fpst-lead__title a { color: var(--wp--preset--color--accent-text); }
.fpst-lead__excerpt {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* Colonna titoli a lato: elenco rigato, senza immagini, denso. */
.fpst-lead__rail { display: block; }
.fpst-lead__rail > .wp-block-post {
	margin-block-start: 0;
	/* Il filetto sopra ogni voce è stato tolto (troppe righe vicine col
	   bordo verticale della colonna): solo spazio. */
	padding: 0.3rem 0;
}
.fpst-lead__rail > .wp-block-post:first-child { padding-top: 0; }
.fpst-lead__rail-title {
	margin: 0.15em 0 0;
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.fpst-lead__rail-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0.3em 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
.fpst-lead__rail-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.fpst-lead__rail-item:hover .fpst-lead__rail-title a { color: var(--wp--preset--color--accent-text); }

/* Separatore sotto tutto il blocco di apertura, come stacco dalla sezione dopo. */
.fpst-lead {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   MODALITÀ TESTATA (.fpst-news, body class dal flag `fpst_topbar`) —
   restyle di articolo singolo e archivi sui template CONDIVISI col cluster:
   attivo SOLO dove la modalità news è accesa, i siti brand non cambiano.
   ========================================================================== */

/* Titolo articolo: Fraunces quasi-nero (il titolo BLU Playfair era il
   segnale "blog datato" più forte rimasto), interlinea serrata. Filetto
   sopra: apre il pezzo come un articolo di giornale stampato, non un post
   di blog che comincia col titolo e basta. */
.fpst-news.single h1.wp-block-post-title {
	padding-top: 0.8rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.fpst-news h1.wp-block-post-title {
	font-family: var(--fpst-serif);
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

/* Riga byline (autore · data · categoria · lettura): Inter, compatta, con
   filetto sotto — da testata, non da blog. Il filetto era solo nel
   commento, mai scritto in CSS: aggiunto ora sul gruppo che contiene la
   riga (individuato da :has, non ha una classe propria). */
.fpst-news.single main .wp-block-group:has(> .wp-block-post-author-name) {
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fpst-news .wp-block-post-author-name,
.fpst-news .wp-block-post-date,
.fpst-news .wp-block-post-terms,
.fpst-news .fpst-reading-time {
	font-family: var(--fpst-ui);
	/* Minuta e spaziata (wire service: Reuters/AP), non "normale" come un
	   blog: la riga di metadati va letta come dato tecnico, non come testo. */
	font-size: 0.8rem !important;
	letter-spacing: 0.02em;
}
.fpst-news .wp-block-post-author-name a {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.fpst-news .wp-block-post-author-name a:hover { color: var(--wp--preset--color--accent-text); }
.fpst-news .fpst-byline__avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
	margin-right: 0.4em;
	margin-bottom: 0.15em; /* riallinea il centro del cerchio al testo minuscolo */
}
/* Byline più grande per i pezzi Collaboratori, a dare risalto alla firma esterna.
   Il nome (core/post-author-name) rende un <div>, cioè block-level: da solo va a
   capo sotto l'avatar inline invece di stargli accanto. Flex row forza i due
   elementi sulla stessa riga indipendentemente dal loro display naturale —
   segnalato da Francesco su un byline Collaboratori impilato verticalmente. */
.fpst-news .fpst-byline--collab {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.fpst-news .fpst-byline__avatar--collab {
	width: 36px;
	height: 36px;
	margin-right: 0;
	margin-bottom: 0;
}
.fpst-news .fpst-byline--collab .wp-block-post-author-name {
	/* .has-small-font-size di Gutenberg applica font-size con !important */
	font-size: 1.0625rem !important;
}
.fpst-news .wp-block-post-date { color: var(--wp--preset--color--muted); }
.fpst-news .fpst-updated { font-style: italic; opacity: 0.85; }
.fpst-news .fpst-reading-time__long {
	display: inline-block;
	padding: 0.1em 0.5em;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 2px;
}

/* Testata archivi ("Categoria: X", ricerca, ecc.): Fraunces quasi-nero con
   barra accent a sinistra — coerente con le sezioni della home. */
.fpst-news h1.wp-block-query-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--fpst-serif);
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}
.fpst-news h1.wp-block-query-title::before {
	content: "";
	align-self: stretch;
	width: 6px;
	border-radius: 1px;
	background: var(--wp--preset--color--accent);
}
.fpst-news .wp-block-term-description {
	font-family: var(--fpst-ui);
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
}

/* Corpo articolo: primo paragrafo come "attacco" leggermente più grande
   (convenzione da quotidiano). Link riconoscibili dal solo colore accent +
   peso (niente sottolineato, per scelta editoriale). */
.fpst-news .wp-block-post-content > p:first-child {
	font-size: 1.14rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}
.fpst-news .wp-block-post-content a {
	text-decoration: none;
	font-weight: 600;
}
.fpst-news .wp-block-post-content a:hover {
	color: color-mix(in srgb, var(--wp--preset--color--accent) 75%, black);
}

/* Titoli H2/H3 interni all'articolo: Fraunces coerente col titolo. */
.fpst-news .wp-block-post-content h2,
.fpst-news .wp-block-post-content h3 {
	font-family: var(--fpst-serif);
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
}

/* "Articoli correlati" e widget: heading in Inter maiuscolo con tab, come le
   sezioni della home. */
.fpst-news .fpst-related__heading,
.fpst-news .fpst-widget__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--fpst-ui);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	border-bottom: 0;
}
.fpst-news .fpst-related__heading::before,
.fpst-news .fpst-widget__title::before {
	content: "";
	width: 5px;
	height: 1.05em;
	border-radius: 1px;
	background: var(--wp--preset--color--accent);
}
.fpst-news .fpst-widget__title { padding-bottom: 0; }

/* Modalità testata — residui: card ricerca, footer, paginazione. */

/* Card dei risultati di ricerca (fpst-postcard senza immagine): titolo
   Fraunces ink, come tutto il resto — era rimasto blu Playfair. */
.fpst-news .fpst-postcard .wp-block-post-title,
.fpst-news .fpst-postcard .wp-block-post-title a {
	font-family: var(--fpst-serif);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.fpst-news .fpst-postcard .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-text); }

/* Footer: nome testata in Fraunces (coerente coi titoli), colonne in Inter. */
.fpst-news footer .wp-block-site-title,
.fpst-news footer .wp-block-site-title a {
	font-family: var(--fpst-serif);
}
.fpst-news footer .wp-block-heading,
.fpst-news .fpst-footer__cols .wp-block-heading {
	font-family: var(--fpst-ui);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
}

/* Paginazione archivi: numeri come riquadri Inter, pagina corrente piena in
   accent — la fila di numeri "nudi" era l'ultimo pezzo da blog. */
.fpst-news .wp-block-query-pagination {
	font-family: var(--fpst-ui);
	font-size: 0.9rem;
	align-items: center;
}
.fpst-news .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 0.4em;
	margin-right: 4px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
}
.fpst-news .wp-block-query-pagination-numbers .page-numbers:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}
.fpst-news .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}
.fpst-news .wp-block-query-pagination-numbers .page-numbers.dots {
	border: 0;
	min-width: auto;
}
.fpst-news .wp-block-query-pagination-previous,
.fpst-news .wp-block-query-pagination-next {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.fpst-news .wp-block-query-pagination-previous:hover,
.fpst-news .wp-block-query-pagination-next:hover { color: var(--wp--preset--color--accent-text); }

/* Niente sottolineati (scelta editoriale): il core WP li applica di default
   ai link di post-terms (categoria/tag nella byline) e al link del logo —
   qui li spegniamo. Lo skip-link resta com'è (visibile solo a focus, a11y). */
.fpst-news .wp-block-post-terms a,
.fpst-news a.custom-logo-link {
	text-decoration: none;
}

/* ==========================================================================
   CODICI COLORE PER SEZIONE (stile Guardian) + micro-interazioni + header
   compatto — modalità testata (.fpst-news) e componenti .fpst-*.
   ========================================================================== */
:root {
	/* Palette rivista (2026-07-18): 12 tinte percettivamente distinte, una per
	   categoria attiva. Prima "attualità" (35 post, la più usata) ricadeva sul
	   blu accent di default — indistinguibile da viterbo/salute/video, mai
	   assegnate a un colore proprio. Ora ogni categoria ha una tinta dedicata;
	   "attualità" resta neutra (grigio-ardesia) perché è il contenitore
	   generico, mentre le categorie tematiche portano il colore. */
	--fpst-c-attualita: #475569;
	--fpst-c-politica: #b71c1c;
	--fpst-c-provincia: #00695c;
	--fpst-c-ambiente: #2e7d32;
	--fpst-c-economia: #c2660c;
	--fpst-c-idee: #a6790a;
	--fpst-c-italia: #0277bd;
	--fpst-c-mondo: #3949ab;
	--fpst-c-viterbo: #5e35b1;
	--fpst-c-cultura: #7b1fa2;
	--fpst-c-libri: #5d4037;
	--fpst-c-salute: #ad1457;
	--fpst-c-dossier: #01579b;
	/* Rubrica di opinione (L'Osservatore): bordeaux dedicato, deliberatamente
	   fuori dalla palette "notizia" per segnalare che qui si esce dal registro
	   cronaca/imparziale ed entra un punto di vista personale. */
	--fpst-c-osservatore: #6b2737;
	/* Rubrica di benessere/crescita interiore ("Radici"): terracotta caldo,
	   distinto sia dal marrone di "libri" sia dal verde di "ambiente" —
	   evoca terra/radicamento coerentemente col nome della rubrica. */
	--fpst-c-radici: #a1623c;
	/* Rubrica "Collaboratori" (opinioni firmate con nome vero, non pseudonimo
	   come L'Osservatore): teal scuro, deliberatamente fuori dalla palette
	   "notizia" per lo stesso motivo del bordeaux di --fpst-c-osservatore, ma
	   una tinta diversa per non essere confusa con quella rubrica. */
	--fpst-c-collaboratori: #0f5257;
	/* Rubrica "Elzeviro" (recensioni e riflessioni colte): il giallo della
	   bandiera di Viterbo (i colori della città sono giallo e blu — lo
	   stemma è "d'azzurro", il giallo è l'oro araldico del leone, gli stessi
	   colori dei costumi degli Sbandieratori). Chiesto da Francesco: sfondo
	   giallo, testo e barretta in blu — l'INVERSO della fascia
	   "Approfondimenti" qui sopra (sfondo blu, barretta oro). */
	--fpst-c-elzeviro: #ffcc00;
	/* Rubrica "Controluce" (vignetta satirica settimanale IA): arancio fiamma/vermiglio (#e64a19),
	   deliberatamente fuori dalla palette "notizia", distinto sia dal giallo di elzeviro (#ffcc00),
	   sia dal bordeaux dell'osservatore (#6b2737) e dal teal dei collaboratori (#0f5257). */
	--fpst-c-controluce: #e64a19;
}

/* Badge categoria colorati per sezione: il link del badge punta all'archivio
   della categoria → si colora via attributo href (regge anche le categorie
   annidate tipo /category/viterbo/politica grazie a $= sul segmento finale). */
/* Meno rumore visivo (2026-07-18): i badge categoria sulle CARD erano colorati
   uno per uno (10+ tinte) → un feed misto diventava un arcobaleno. Ora sono
   UNIFORMI e sobri (grigio tenue, vedi regola base). L'identità cromatica di
   sezione resta dove orienta davvero — la linguetta colorata delle testate di
   sezione in home e il kicker dello slider — mentre le card restano calme.
   Hover unico: pieno accent. */
.fpst-news .taxonomy-category.wp-block-post-terms a:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

/* Linguetta e "Tutte ›" delle sezioni home nel colore della sezione. */
.fpst-section:has(a[href$="/attualita"]) .fpst-section__title::before         { background: var(--fpst-c-attualita); }
.fpst-section:has(a[href$="/politica"]) .fpst-section__title::before          { background: var(--fpst-c-politica); }
.fpst-section:has(a[href$="/provincia"]) .fpst-section__title::before         { background: var(--fpst-c-provincia); }
.fpst-section:has(a[href$="/ambiente"]) .fpst-section__title::before          { background: var(--fpst-c-ambiente); }
.fpst-section:has(a[href$="/economia-e-lavoro"]) .fpst-section__title::before { background: var(--fpst-c-economia); }
.fpst-section:has(a[href$="/idee"]) .fpst-section__title::before              { background: var(--fpst-c-idee); }
.fpst-section:has(a[href$="/italia"]) .fpst-section__title::before            { background: var(--fpst-c-italia); }
.fpst-section:has(a[href$="/mondo"]) .fpst-section__title::before             { background: var(--fpst-c-mondo); }
.fpst-section:has(a[href$="/viterbo"]) .fpst-section__title::before           { background: var(--fpst-c-viterbo); }
.fpst-section:has(a[href$="/cultura"]) .fpst-section__title::before           { background: var(--fpst-c-cultura); }
.fpst-section:has(a[href$="/libri"]) .fpst-section__title::before             { background: var(--fpst-c-libri); }
.fpst-section:has(a[href$="/salute"]) .fpst-section__title::before            { background: var(--fpst-c-salute); }
.fpst-section:has(a[href$="/osservatore"]) .fpst-section__title::before       { background: var(--fpst-c-osservatore); }
.fpst-section:has(a[href$="/radici"]) .fpst-section__title::before            { background: var(--fpst-c-radici); }
.fpst-section:has(a[href$="/collaboratori"]) .fpst-section__title::before     { background: var(--fpst-c-collaboratori); }
.fpst-section:has(a[href$="/controluce"]) .fpst-section__title::before         { background: var(--fpst-c-controluce); }
.fpst-section:has(a[href$="/attualita"]) .fpst-section__more a         { color: var(--fpst-c-attualita); }
.fpst-section:has(a[href$="/politica"]) .fpst-section__more a          { color: var(--fpst-c-politica); }
.fpst-section:has(a[href$="/provincia"]) .fpst-section__more a         { color: var(--fpst-c-provincia); }
.fpst-section:has(a[href$="/ambiente"]) .fpst-section__more a          { color: var(--fpst-c-ambiente); }
.fpst-section:has(a[href$="/economia-e-lavoro"]) .fpst-section__more a { color: var(--fpst-c-economia); }
.fpst-section:has(a[href$="/idee"]) .fpst-section__more a              { color: var(--fpst-c-idee); }
.fpst-section:has(a[href$="/italia"]) .fpst-section__more a            { color: var(--fpst-c-italia); }
.fpst-section:has(a[href$="/mondo"]) .fpst-section__more a             { color: var(--fpst-c-mondo); }
.fpst-section:has(a[href$="/viterbo"]) .fpst-section__more a           { color: var(--fpst-c-viterbo); }
.fpst-section:has(a[href$="/cultura"]) .fpst-section__more a           { color: var(--fpst-c-cultura); }
.fpst-section:has(a[href$="/libri"]) .fpst-section__more a             { color: var(--fpst-c-libri); }
.fpst-section:has(a[href$="/salute"]) .fpst-section__more a            { color: var(--fpst-c-salute); }
.fpst-section:has(a[href$="/osservatore"]) .fpst-section__more a       { color: var(--fpst-c-osservatore); }
.fpst-section:has(a[href$="/radici"]) .fpst-section__more a           { color: var(--fpst-c-radici); }
.fpst-section:has(a[href$="/collaboratori"]) .fpst-section__more a    { color: var(--fpst-c-collaboratori); }
.fpst-section:has(a[href$="/controluce"]) .fpst-section__more a       { color: var(--fpst-c-controluce); }

/* Sulla SOLA home i 15 colori per categoria tornano monocromi (accento del
   brand): con molte sezioni visibili insieme uno per sezione il multicolore
   distraeva, "da app" più che da prima pagina. Nelle pagine archivio/categoria
   restano colorati — lì servono a orientarsi. Stessa specificità delle regole
   sopra: vince per ordine (sta dopo). */
/* !important: le regole per-categoria sopra usano :has(a[href$="..."]),
   che aggiunge la specificità del selettore interno (0,2,1 la sola :has) —
   il solo ordine/tre classi qui non basta a vincere. */
.fpst-news.home .fpst-section__title::before { background: var(--wp--preset--color--accent) !important; }
.fpst-news.home .fpst-section__more a { color: var(--wp--preset--color--accent-text) !important; }

/* Kicker dello slider colorato per categoria (classe slug dal PHP). Resta a
   tinta piena (non chip discreto): è sovrapposto alla foto hero, dove una
   tinta leggera sarebbe illeggibile su sfondi fotografici vari. */
.fpst-slide__cat.fpst-cat--attualita { background: var(--fpst-c-attualita); }
.fpst-slide__cat.fpst-cat--politica  { background: var(--fpst-c-politica); }
.fpst-slide__cat.fpst-cat--provincia { background: var(--fpst-c-provincia); }
.fpst-slide__cat.fpst-cat--ambiente  { background: var(--fpst-c-ambiente); }
.fpst-slide__cat.fpst-cat--economia-e-lavoro { background: var(--fpst-c-economia); }
.fpst-slide__cat.fpst-cat--idee      { background: var(--fpst-c-idee); }
.fpst-slide__cat.fpst-cat--italia    { background: var(--fpst-c-italia); }
.fpst-slide__cat.fpst-cat--mondo     { background: var(--fpst-c-mondo); }
.fpst-slide__cat.fpst-cat--viterbo   { background: var(--fpst-c-viterbo); }
.fpst-slide__cat.fpst-cat--cultura   { background: var(--fpst-c-cultura); }
.fpst-slide__cat.fpst-cat--libri     { background: var(--fpst-c-libri); }
.fpst-slide__cat.fpst-cat--salute    { background: var(--fpst-c-salute); }
.fpst-slide__cat.fpst-cat--osservatore { background: var(--fpst-c-osservatore); }
.fpst-slide__cat.fpst-cat--radici    { background: var(--fpst-c-radici); }
.fpst-slide__cat.fpst-cat--collaboratori { background: var(--fpst-c-collaboratori); }
/* Monocromo sulla home, stesso principio del blocco sopra (lo slider oggi
   vive solo in home, ma esplicito comunque). */
.fpst-news.home .fpst-slide__cat[class*="fpst-cat--"] { background: var(--wp--preset--color--accent); }

/* Micro-interazione: zoom leggero dell'immagine all'hover della card
   (figure con overflow nascosto, transform sull'img). Reduced-motion safe. */
.fpst-news-grid__img,
.fpst-grid-dense__img,
.fpst-cardlist__img,
.fpst-lead__img,
.fpst-related__item { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.fpst-news-grid__img img,
	.fpst-grid-dense__img img,
	.fpst-cardlist__img img,
	.fpst-lead__img img,
	.fpst-related__img {
		transition: transform 0.35s ease;
	}
	.fpst-news-grid__item:hover .fpst-news-grid__img img,
	.fpst-grid-dense__item:hover .fpst-grid-dense__img img,
	.fpst-cardlist__item:hover .fpst-cardlist__img img,
	.fpst-lead__main-item:hover .fpst-lead__img img,
	.fpst-related__item:hover .fpst-related__img {
		transform: scale(1.04);
	}
}

/* Header più compatto in modalità news (154px → ~120px): meno aria sopra e
   sotto il logo, logo leggermente più basso, navbar più attaccata.
   !important per battere il padding inline del template part. */
.fpst-news .fpst-header {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	/* Filetto sotto la testata: prima l'header non aveva alcun bordo a
	   separarlo dal resto della pagina — le testate vere quasi sempre hanno
	   una riga netta sotto il nameplate, è un ancoraggio strutturale. */
	border-bottom: 3px solid var(--wp--preset--color--gold);
}
.fpst-news .fpst-header__logo img { max-height: 58px; }
@media (min-width: 782px) {
	.fpst-news .fpst-header__navbar {
		margin-top: 8px;
		padding-top: 8px;
	}
}

/* In modalità news OGNI badge categoria è un chip (anche nel lead, nella
   rail e nella byline articolo — prima lo stile pillola valeva solo nelle
   card, e i badge fuori da quei contesti restavano testo su fondo
   trasparente). Solo taxonomy-category: i tag restano testo semplice.
   Chip discreto (2026-07-18): prima era una pillola a tinta piena con testo
   bianco — troppo "urlata" su una pagina con molte card. Ora è testo colorato
   su una tinta leggera (10% del colore categoria), stesso principio dei tag
   editoriali (NYT/Guardian): riconoscibile ma non compete con foto e titoli. */
.fpst-news .taxonomy-category.wp-block-post-terms a {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, #fff);
	color: var(--wp--preset--color--muted, #5b616e);
	font-family: var(--fpst-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	/* Prima 0.22em verticale = ~23px di altezza totale, sotto i 32px minimi.
	   Solo il verticale sale (0.22→0.55em): stesso peso visivo discreto
	   della chip rivista il 2026-07-18 (non una pillola piena), area di
	   tocco più comoda. */
	padding: 0.55em 0.7em;
	border-radius: 999px;
}

/* Occhiello (`_fpst_kicker`): NON è una chip e non deve sembrarlo. La chip di
   categoria è un'etichetta di archivio — cliccabile, ripetuta, uguale su venti
   pezzi; l'occhiello è testo di redazione scritto per quella notizia sola. Due
   cose diverse, due trattamenti diversi: qui niente fondo e niente pillola, ma
   il serif della testata (Fraunces, gli stessi caratteri dei titoli) in blu, con
   un trattino oro davanti. È il sopratitolo dei quotidiani di carta, non
   l'etichetta di un sito.

   Tre scelte deliberate:
   · niente maiuscolo — l'occhiello di un giornale non urla, e il maiuscolo lo
     avrebbe fatto somigliare esattamente a ciò che non deve somigliare;
   · niente corsivo — Fraunces qui è self-hosted nei soli pesi 600/700 tondi:
     un `font-style: italic` sarebbe sintetizzato dal browser, e su un serif da
     titolazione il finto corsivo si riconosce a occhio;
   · `min-height` pari all'altezza della chip che sostituisce, perché card con
     occhiello e card con categoria stanno affiancate nella stessa griglia e
     qualunque scarto si vedrebbe come un dente nella riga. */
.fpst-news .taxonomy-category.wp-block-post-terms .fpst-kicker__text {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 30px;
	background: none;
	padding: 0;
	border-radius: 0;
	font-family: var(--fpst-serif);
	font-size: 0.9rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	color: var(--wp--preset--color--accent);
}
/* In scuro l'accent resta il blu elettrico della testata (#0026ff): su fondo
   quasi nero fa 2,19:1 di contrasto, cioè illeggibile — misurato, non stimato.
   Si schiarisce verso il bianco conservando la tinta, invece di ripiegare su un
   grigio che avrebbe tolto all'occhiello la sua unica marca di colore. */
:root[data-theme="dark"] .fpst-news .taxonomy-category.wp-block-post-terms .fpst-kicker__text {
	color: color-mix(in srgb, var(--wp--preset--color--accent) 42%, #ffffff);
}
.fpst-news .taxonomy-category.wp-block-post-terms .fpst-kicker__text::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 2px;
	background: var(--wp--preset--color--gold);
}

/* Eccezione al chip uniforme, solo per "L'Osservatore": è l'unica rubrica di
   opinione del sito (non cronaca), e deve restare riconoscibile a colpo
   d'occhio anche fra le card di notizia — stessa logica del bordeaux
   dedicato in --fpst-c-osservatore. */
.fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/osservatore"] {
	background: color-mix(in srgb, var(--fpst-c-osservatore) 12%, #fff);
	color: var(--fpst-c-osservatore);
}
.fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/osservatore"]:hover {
	background: var(--fpst-c-osservatore);
	color: #fff;
}

/* Eccezione analoga per "Radici" (benessere/crescita interiore): stessa
   logica dell'Osservatore, colore diverso. */
.fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/radici"] {
	background: color-mix(in srgb, var(--fpst-c-radici) 12%, #fff);
	color: var(--fpst-c-radici);
}
.fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/radici"]:hover {
	background: var(--fpst-c-radici);
	color: #fff;
}

/* Eccezione analoga per "Collaboratori" (opinioni firmate con nome vero):
   stessa logica dell'Osservatore, teal dedicato invece del bordeaux. */
.fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/collaboratori"] {
	background: color-mix(in srgb, var(--fpst-c-collaboratori) 12%, #fff);
	color: var(--fpst-c-collaboratori);
}
.fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/collaboratori"]:hover {
	background: var(--fpst-c-collaboratori);
	color: #fff;
}

/* Striscia di apertura dell'archivio "L'Osservatore": segnala subito che si
   esce dal registro cronaca ed entra in un contributo di opinione firmato
   con pseudonimo. Iniettata via PHP solo su questo archivio di categoria. */
.fpst-osservatore-strip {
	display: flex;
	align-items: center;
	gap: 0.6em;
	background: var(--fpst-c-osservatore);
	color: #fff;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.6em 1em;
	border-radius: 3px;
	margin-bottom: 1.2em;
}
.fpst-osservatore-strip::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
}

/* Striscia analoga per l'archivio "Collaboratori": stesso meccanismo, teal
   dedicato e testo che chiarisce che qui la firma è reale (non pseudonima
   come L'Osservatore). Iniettata via PHP solo su questo archivio. */
.fpst-collaboratori-strip {
	display: flex;
	align-items: center;
	gap: 0.6em;
	background: var(--fpst-c-collaboratori);
	color: #fff;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.6em 1em;
	border-radius: 3px;
	margin-bottom: 1.2em;
}
.fpst-collaboratori-strip::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
}

/* Riquadro bio-autore in cima alla pagina archivio-autore (vedi shortcode
   [fpst_author_bio] in functions.php + templates/author.html). Avatar +
   nome + bio + temi ricorrenti, per i collaboratori con firma reale. */
.fpst-authorbio {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.fpst-authorbio__avatarwrap { flex-shrink: 0; }
.fpst-authorbio__avatar { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.fpst-authorbio__name {
	font-family: var(--fpst-serif);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--accent-text);
}
.fpst-authorbio__desc {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--muted);
	max-width: 60ch;
}
.fpst-authorbio__topics { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fpst-authorbio__topic {
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.22em 0.7em;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-text);
	text-decoration: none;
}
.fpst-authorbio__topic:hover { background: var(--wp--preset--color--gold); color: #fff; }

/* Variante in fondo agli articoli "Collaboratori" (non la pagina-autore):
   box a sé con bordo, non solo un separatore — coerente con .fpst-micropoll
   e .fpst-tipcta che la precedono/seguono nello stesso punto della pagina. */
.fpst-news .fpst-authorbio--inline {
	margin: 2rem 0 1.5rem;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--fpst-c-collaboratori);
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: color-mix(in srgb, var(--fpst-c-collaboratori) 4%, #fff);
}
.fpst-news .fpst-authorbio--inline .fpst-authorbio__avatar { width: 72px; height: 72px; }
.fpst-news .fpst-authorbio--inline .fpst-authorbio__eyebrow {
	margin: 0 0 0.2rem;
	font-family: var(--fpst-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fpst-c-collaboratori);
}
.fpst-news .fpst-authorbio--inline .fpst-authorbio__name {
	font-size: 1.25rem;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--ink);
}
.fpst-news .fpst-authorbio--inline .fpst-authorbio__desc { font-size: 0.92rem; }
.fpst-news .fpst-authorbio--inline .fpst-authorbio__link {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--fpst-c-collaboratori);
	text-decoration: none;
}
.fpst-news .fpst-authorbio--inline .fpst-authorbio__link:hover { text-decoration: underline; }
@media (max-width: 600px) {
	.fpst-news .fpst-authorbio--inline { flex-direction: column; text-align: center; }
}
.fpst-authorline {
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--fpst-ui);
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}
.fpst-authorline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fpst-authorline a:hover { color: var(--wp--preset--color--ink); }

@media (max-width: 600px) {
	.fpst-authorbio { flex-direction: column; text-align: center; }
	.fpst-authorbio__topics { justify-content: center; }
}

/* Vetrina collaboratori in cima all'archivio di categoria (più autori
   insieme, a differenza di .fpst-authorbio che è per la pagina di UN
   autore) — stesso linguaggio visivo (avatar tondo, nome in accent) in
   formato card compatta. Iniettata via PHP solo su questo archivio. */
.fpst-collab-showcase { margin-bottom: var(--wp--preset--spacing--60); }
.fpst-collab-showcase__label {
	margin: 0 0 0.8rem;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fpst-c-collaboratori);
}
/* Colonne a pavimento fisso, non a numero fisso (3/9/2026): `repeat(4,
   minmax(0, 1fr))` dentro la colonna stretta della pagina "Chi Siamo /
   Redazione" dava card da ~150px; tolto l'avatar (56px + gap) restavano
   ~85px di testo e la biografia andava a capo quasi parola per parola,
   con le parole spezzate a metà dalla regola break-word che WordPress
   mette sul body (vedi la nota delle tabelle su schermo stretto, sopra).
   Con `auto-fill` e un minimo di 240px le colonne sono larghe quante ce
   ne stanno davvero: 4 su schermo largo, 3/2 man mano che restringe, 1
   su telefono — senza media query da mantenere a mano. `auto-fill` e non
   `auto-fit` apposta: con pochi autori (la redazione vera sono poche
   persone) `auto-fit` collasserebbe le tracce vuote e gonfierebbe le
   card rimaste a tutta larghezza, rendendo la bio una riga chilometrica.
   L'altezza uniforme sulla riga la dà lo stretch di default del grid. */
.fpst-collab-showcase__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}
.fpst-collab-card {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.fpst-collab-card:hover { border-color: var(--fpst-c-collaboratori); }
.fpst-collab-card__avatar { display: block; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.fpst-collab-card__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
/* Nome e bio mai spezzati a metà parola: `word-break: normal` annulla il
   break-word aggressivo ereditato dal body (stessa cura delle tabelle su
   schermo stretto, vedere la nota in cima al foglio), `hyphens: none`
   spegne la sillabazione automatica. `overflow-wrap: break-word` resta
   come valvola: taglia SOLO una parola più lunga della riga, che in una
   bio capita raramente — meglio un taglio ogni tanto che il trabocco. */
.fpst-collab-card__name {
	font-family: var(--fpst-serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	word-break: normal;
	hyphens: none;
	overflow-wrap: break-word;
}
/* Bio troncata a tre righe con i puntini: alcune biografie sono lunghe e
   altre assenti, e la differenza sbilanciava la griglia — la card con la
   bio-lunga occupava dieci volte lo spazio del nome. La bio intera resta
   sulla pagina autore, dove la card porta. Nota per il clamp: qui
   funziona perché lo <span> è markup nostro dentro l'output dello
   shortcode, NON un blocco WordPress con layout flow-root — il caso in
   cui -webkit-line-clamp è inerte è documentato nel changelog 0.100.6. */
.fpst-collab-card__bio {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	word-break: normal;
	hyphens: none;
	overflow-wrap: break-word;
}
.fpst-collab-card__count {
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fpst-c-collaboratori);
}

/* Indice redazionale [fpst_masthead] ("Chi Siamo / Redazione"): stessi
   componenti della vetrina sopra, ma diviso in due gruppi — «La redazione»
   e «I collaboratori» (3/9/2026). I titoli sono <h2> veri: serif, peso e
   colore li ereditano dagli stili heading di theme.json (elements.heading),
   come le intestazioni del resto della pagina — qui si regolano solo
   corpo e margine. Spazio extra tra un gruppo e l'altro: due sezioni
   distinte, non un'unica griglia con un'etichetta in mezzo. */
.fpst-masthead__group + .fpst-masthead__group {
	margin-top: var(--wp--preset--spacing--60);
}
.fpst-masthead__title {
	margin: 0 0 0.8rem;
	font-size: var(--wp--preset--font-size--large);
}

/* Nell'indice, a differenza della vetrina sopra, le card stanno una per
   riga a tutta larghezza della colonna (3/9/2026): in due colonne lo
   spazio per il testo era troppo poco e le biografie finivano troncate
   dai puntini. La redazione e' poca gente e le bio poche righe: si
   leggono qui, intere. Le proporzioni crescono insieme alla riga per non
   lasciarla alta e sguarnita — avatar a 72px (la taglia nativa di
   get_avatar, niente scaling sfocato), nome e corpo piu' generosi,
   padding da card autore (.fpst-authorbio--inline usa gli stessi
   1.2rem 1.3rem). Ogni regola e' figlia di .fpst-masthead apposta: la
   vetrina della categoria «Collaboratori» condivide le classi ma non il
   contenitore, e resta a card affiancate con bio troncata a tre righe.
   Su telefono il layout era gia' a colonna singola e non cambia. */
.fpst-masthead .fpst-collab-showcase__grid { grid-template-columns: 1fr; }
.fpst-masthead .fpst-collab-card {
	padding: 1.2rem 1.3rem;
	gap: 1.1rem;
}
.fpst-masthead .fpst-collab-card__avatar { width: 72px; height: 72px; }
.fpst-masthead .fpst-collab-card__body { gap: 0.3rem; }
.fpst-masthead .fpst-collab-card__name { font-size: 1.2rem; }
/* Solo qui via il troncamento: `display: block` smonta il -webkit-box da
   cui dipende il clamp, e line-clamp/overflow tornano a riposo — la bio
   si legge tutta. Le protezioni contro le parole spezzate a meta'
   (word-break/hyphens/overflow-wrap) stanno nella regola base della bio
   e valgono anche qui. */
.fpst-masthead .fpst-collab-card__bio {
	display: block;
	-webkit-line-clamp: none;
	overflow: visible;
	font-size: 0.9rem;
	line-height: 1.55;
}

/* Versione compatta di .fpst-collab-showcase (home, [fpst_collab_faces]):
   solo volto + nome in fila, niente card/bio/conteggio. Margini propri: in
   home vive da sola tra il sondaggio e il footer, non incollata alla
   fascia precedente come capitava nella vetrina completa (che aveva
   il respiro della sezione .fpst-appr che la conteneva). */
.fpst-collab-showcase--compact {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
}
.fpst-collab-showcase--compact .fpst-collab-showcase__faces {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
}
.fpst-collab-face {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}
.fpst-collab-face__avatar { display: block; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.fpst-collab-face__name {
	font-family: var(--fpst-ui);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.fpst-collab-face:hover .fpst-collab-face__name { color: var(--fpst-c-collaboratori); }

/* Ticker "ULTIME" ([fpst_ticker]): striscia sotto l'header con gli ultimi
   titoli in scorrimento continuo. Marquee CSS-only. */
.fpst-ticker {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}
.fpst-ticker__label {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0.45rem 0.9rem;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--fpst-ui);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.fpst-ticker__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* dissolvenza ai bordi: i titoli entrano/escono morbidi */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.fpst-ticker__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: fpst-ticker-scroll 55s linear infinite;
}
.fpst-ticker__track > span[aria-hidden] { display: inline-flex; align-items: center; }
.fpst-ticker:hover .fpst-ticker__track { animation-play-state: paused; }
.fpst-ticker__item {
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding: 0.45rem 0;
}
.fpst-ticker__item:hover { color: var(--wp--preset--color--accent-text); }
/* Etichetta "Ultim'ora": rosso, distinto dall'oro del ticker stesso, solo
   sui pezzi pubblicati nelle ultime 3 ore (PHP in functions.php). */
.fpst-ticker__breaking {
	display: inline-block;
	margin-right: 0.4em;
	padding: 0.1em 0.5em;
	background: #c1121f;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 2px;
}
.fpst-ticker__sep {
	margin: 0 0.9rem;
	color: var(--wp--preset--color--gold);
	font-size: 0.6rem;
}
@keyframes fpst-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.fpst-ticker__track { animation: none; }
	.fpst-ticker__viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
	.fpst-ticker__track > span[aria-hidden] { display: none; }
}

/* "Più letti" come classifica numerata: numeroni Fraunces in colonna. */
.fpst-most-read { counter-reset: fpst-rank; }
.fpst-most-read li {
	counter-increment: fpst-rank;
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: start;
	padding: 0.45rem 0;
	transition: background 0.15s ease;
}
.fpst-most-read li:not(:last-child) {
	border-bottom: 1px dashed color-mix(in srgb, var(--wp--preset--color--line) 70%, transparent);
}
.fpst-most-read li::before {
	content: counter(fpst-rank);
	grid-row: 1 / span 2;
	font-family: var(--fpst-serif);
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 65%, white);
	text-align: center;
}
.fpst-most-read li a {
	grid-column: 2;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.15s ease;
}
.fpst-most-read li a:hover {
	color: var(--wp--preset--color--accent-text);
}
.fpst-most-read .fpst-most-read__count { grid-column: 2; }

/* Densità da quotidiano (visto lo screenshot: troppa aria = "blog").
   Estratto del lead limitato a 3 righe; conteggio letture nascosto al
   pubblico (con numeri piccoli "1 lettura" è controproducente — la
   classifica resta, ordinata dai conteggi reali); sezioni affiancabili a
   coppie con lista a colonna singola. */
.fpst-lead__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.98rem;
}
.fpst-most-read__count { display: none; }

/* Coppie di sezioni affiancate: dentro .fpst-section-row ogni sezione usa la
   lista a colonna singola (4 titoli impilati stretti). */
.fpst-section-row { gap: clamp(1.5rem, 3vw, 2.5rem); }
.fpst-section-row .fpst-cardlist { grid-template-columns: 1fr; gap: 12px; }
.fpst-section-row .fpst-cardlist > .wp-block-post { padding-top: 12px; }
/* Filo tra un titolo e l'altro (colonna di giornale): prima si fermava a
   :nth-child(-n+2), quindi solo la 2a riga aveva il filo, dalla 3a in poi
   niente — incompleto. :not(:first-child) lo applica a ogni riga tranne la
   prima. */
.fpst-section-row .fpst-cardlist > .wp-block-post:not(:first-child) { border-top: 1px solid var(--wp--preset--color--line); }
.fpst-section-row .fpst-cardlist > .wp-block-post:first-child { padding-top: 0; border-top: 0; }
.fpst-section-row .fpst-section { margin-bottom: var(--wp--preset--spacing--50); }
@media (max-width: 781px) {
	.fpst-section-row { gap: var(--wp--preset--spacing--50); }
}

/* Rifiniture guidate dallo screenshot (categoria + articolo). */

/* Titoli card della griglia densa: il colore ink era sul wrapper ma il LINK
   dentro prendeva il blu dei link di theme.json → titoli tutti blu (visto
   nello screenshot della categoria). */
.fpst-news .fpst-grid-dense__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.fpst-news .fpst-grid-dense__item:hover .fpst-grid-dense__title a { color: var(--wp--preset--color--accent-text); }

/* Badge sovrapposto all'angolo dell'immagine nella griglia densa (portale
   moderno) invece che appoggiato tra foto e titolo. Solo se la card ha
   l'immagine (:has), altrimenti resta in flusso. */
.fpst-grid-dense__item { position: relative; }
.fpst-grid-dense__item:has(.fpst-grid-dense__img) .wp-block-post-terms {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 0;
	z-index: 2;
}
.fpst-grid-dense__item:has(.fpst-grid-dense__img) .wp-block-post-terms a {
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
/* 🚨 L'OCCHIELLO in overlay ha bisogno di un fondo suo. L'occhiello nasce
   senza pillola di proposito (sopratitolo serif blu con trattino oro, stile
   giornale di carta — vedi il blocco `.fpst-kicker__text`) e su fondo chiaro
   funziona. Ma qui il badge e' `position:absolute` SOPRA la fotografia: la
   pillola della categoria resta leggibile perche' ha il suo fondo, l'occhiello
   diventava testo blu nudo su una foto scura. Misurato l'1/09/2026 sulla
   pagina «Tutte le notizie»: pillola `background: srgb .95` + padding
   `6.16px 7.84px`, occhiello `background: transparent` + padding `0`.
   Qui — e SOLO qui — prende lo stesso fondo e la stessa ombra della pillola,
   conservando cio' che lo distingue: il serif, il trattino oro, il blu. */
.fpst-grid-dense__item:has(.fpst-grid-dense__img) .wp-block-post-terms .fpst-kicker__text {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, #fff);
	padding: 0.3em 0.7em;
	border-radius: 999px;
	min-height: 0;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
/* In scuro la card resta chiara: l'occhiello in overlay tiene il blu pieno,
   non la variante schiarita pensata per il fondo quasi nero. */
:root[data-theme="dark"] .fpst-grid-dense__item:has(.fpst-grid-dense__img)
	.wp-block-post-terms .fpst-kicker__text {
	color: var(--wp--preset--color--accent);
}

/* Contatore commenti in overlay, in alto a DESTRA — speculare al badge di
   categoria. Esiste solo sugli articoli che hanno commenti (il PHP esce presto
   con `count < 1`), quindi in flusso aggiungeva una riga a quelle sole card:
   con 48 articoli in pagina ne restava una sola piu' alta di 30px, e bastava
   a rompere la griglia appena sistemata. Fuori dal flusso il problema non si
   pone piu' a prescindere da quanti articoli abbiano commenti. */
.fpst-grid-dense__item:has(.fpst-grid-dense__img) .fpst-comment-count {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	margin-top: 0;
	padding: 0.3em 0.7em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, #fff);
	font-size: 0.7rem;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Sidebar: link in ink (erano tutti blu → pagina pesante), hover accent. */
.fpst-news .fpst-widget a { color: var(--wp--preset--color--ink); }
.fpst-news .fpst-widget a:hover { color: var(--wp--preset--color--accent-text); }

/* Byline in stile testata: "DI NOME AUTORE" maiuscoletto, come una vera
   testata (non un blog con nome+avatar). text-transform:uppercase copre
   anche il fallback "redazione" (prima solo capitalize → "Redazione"). */
.fpst-news .wp-block-post-author-name a {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.fpst-news .wp-block-post-author-name a::before { content: "Di "; }

/* "Lascia un commento" / titolo commenti: Fraunces ink, non blu. */
.fpst-news .wp-block-post-comments-form .comment-reply-title,
.fpst-news .wp-block-comments-title {
	font-family: var(--fpst-serif);
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.3rem;
}

/* Riquadro del form: prima era testo nudo sullo sfondo della pagina, ora ha
   una cornice propria — coerente con gli altri box costruiti quest'anno
   (sondaggio, spazio commenti). */
.fpst-news .comment-respond {
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
	padding: 1.5rem 1.6rem 1.7rem;
	margin: 1.5rem 0 2rem;
}

/* "Il tuo indirizzo email non sarà pubblicato" + "campi obbligatori...":
   prima ereditavano il testo grosso del corpo articolo e l'asterisco finale
   andava a capo da solo, sembrava un refuso. Una riga piccola e muta. */
.fpst-news .comment-notes {
	margin: 0 0 1.1rem;
	font-family: var(--fpst-ui);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.fpst-news .comment-notes .required { color: var(--wp--preset--color--gold); }

/* "Connesso come X. Modifica il tuo profilo. Uscire?" — visibile solo a chi
   ha già un account (redazione), mai ai lettori anonimi: stessa riga piccola
   e muta, link in accent invece del blu di default. */
.fpst-news .logged-in-as {
	margin: 0 0 1.1rem;
	font-family: var(--fpst-ui);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}
.fpst-news .logged-in-as a { color: var(--wp--preset--color--accent-text); text-decoration: none; }
.fpst-news .logged-in-as a:hover { text-decoration: underline; }

/* ── Modulo e lista commenti — allineati al resto del sito ────────────────
   Prima erano campi/bottone di default del browser, blu, senza nulla del
   brand. "required" resta solo sul nome (vedi functions.php: solo il nome
   è obbligatorio, l'email è facoltativa — niente iscrizione per commentare). */
.fpst-news .comment-form p { margin: 0 0 1rem; }
.fpst-news .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.fpst-news .comment-form .required { color: var(--wp--preset--color--gold); }
.fpst-news .fpst-comment-optional {
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	text-transform: none;
	letter-spacing: 0;
}
.fpst-news .comment-form input[type="text"],
.fpst-news .comment-form input[type="email"],
.fpst-news .comment-form input[type="url"],
.fpst-news .comment-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
}
.fpst-news .comment-form input[type="text"]:focus,
.fpst-news .comment-form input[type="email"]:focus,
.fpst-news .comment-form input[type="url"]:focus,
.fpst-news .comment-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
}
.fpst-news .comment-form textarea { min-height: 9rem; resize: vertical; }
.fpst-news .comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-family: var(--fpst-ui);
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}
.fpst-news .comment-form .form-submit input[type="submit"] {
	display: inline-block;
	padding: 0.6rem 1.3rem;
	border: 0;
	border-radius: 7px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.fpst-news .comment-form .form-submit input[type="submit"]:hover { background: var(--wp--preset--color--accent); color: #fff; }

/* Lista commenti */
.fpst-news .wp-block-comment-template { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.2rem; margin-top: 1.2rem; }
.fpst-news .wp-block-comment-template:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fpst-news .wp-block-avatar img { border-radius: 50%; display: block; }
.fpst-news .wp-block-comment-author-name,
.fpst-news .wp-block-comment-author-name a {
	font-family: var(--fpst-serif);
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.fpst-news .wp-block-comment-date,
.fpst-news .wp-block-comment-date a {
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.fpst-news .wp-block-comment-content p { margin: 0.4rem 0 0; font-family: var(--fpst-ui); font-size: 0.95rem; line-height: 1.6; color: var(--wp--preset--color--ink); }
.fpst-news .wp-block-comment-reply-link a {
	font-family: var(--fpst-ui);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
	text-decoration: none;
}
.fpst-news .wp-block-comment-reply-link a:hover { text-decoration: underline; }
.fpst-news .wp-block-comments-pagination a {
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-text);
}

/* Blocco di apertura: la colonna dei titoli (destra) riempie tutta l'altezza
   della storia grande (sinistra), così i due fondi coincidono e non resta il
   "buco" sotto l'ultimo titolo. I 6 titoli si distribuiscono uniformemente
   (space-between). Solo desktop: sotto 782px le colonne si impilano. */
@media (min-width: 782px) {
	.fpst-lead__cols > .wp-block-column:has(.fpst-lead__rail) {
		display: flex;
		flex-direction: column;
	}
	.fpst-lead__cols > .wp-block-column:has(.fpst-lead__rail) > .wp-block-query {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.fpst-lead__rail {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Fascia "Approfondimenti" ([fpst_approfondimenti]) — pannello accent con i
   temi in profondità della redazione, subito dopo il blocco di apertura.
   ========================================================================== */
/* Il contenuto della fascia si allinea alla colonna del resto della pagina.
   Il fondo resta a tutta larghezza — e' l'espediente che da' ritmo — ma prima
   il testo partiva a 42px mentre le sezioni sopra partono a 123: due allineamenti
   diversi nella stessa pagina leggono come disordine, non come varieta'
   (segnalato da Francesco l'1/09/2026). `content-size` e non `wide-size`: qui
   valgono 1180 e 1440. Vale anche per il dossier: prima riempiva tutta la propria
   larghezza interna, risultando 9px piu' largo per lato delle fasce vicine
   (segnalato da Francesco il 2/09/2026, misurato a 1280px: dossier 34px/1197px
   contro 43px/1180px degli altri). */
.fpst-appr__in,
.fpst-dossier > *,
.fpst-poll-band > * {
	box-sizing: border-box;
	max-width: min(var(--wp--style--global--content-size, 1180px), 100%);
	margin-inline: auto;
}
.fpst-appr {
	background: var(--wp--preset--color--accent);
	border-radius: 4px;
	margin: var(--wp--preset--spacing--60) 0;
	padding: clamp(1.5rem, 3vw, 2.6rem);
	color: #fff;
	box-sizing: border-box;
}
/* Il pannello rientra dai bordi invece di sfondare il margine (chiesto da
   Francesco l'1/09/2026: era l'unico blocco a tutta larghezza, e con un colore
   pieno la cosa si vedeva). La larghezza e' la colonna del contenuto PIU' il
   padding di questo stesso pannello: cosi' il testo dentro resta sulla
   verticale delle altre sezioni (x=123 a 1440px) invece di spostarsi dentro
   di 42px.
   La soglia serve: sotto i 1400px lo spazio non basta per avere insieme un
   margine visibile e l'allineamento del testo — misurato a 1280px, il pannello
   si stringeva e il titolo scivolava 16px a destra rispetto alle sezioni
   sopra. Li' resta a tutta larghezza, com'e' sempre stato. */
@media (min-width: 1400px) {
	.fpst-appr {
		max-width: calc(
			var(--wp--style--global--content-size, 1180px) + 2 * clamp(1.5rem, 3vw, 2.6rem)
		);
		margin-inline: auto;
	}
}
/* Due fasce Approfondimenti consecutive (es. "Idee" + "L'Osservatore"):
   restano un blocco unico affiancato, senza lo spazio crema tra l'una e
   l'altra — solo un cambio di colore, niente margine bianco in mezzo. */
.fpst-appr + .fpst-appr {
	margin-top: calc(-1 * var(--wp--preset--spacing--60));
	border-radius: 0;
}
/* Stesso principio quando la fascia sondaggio precede un Approfondimenti
   (es. home): .fpst-poll-band non ha più margine proprio, ma .fpst-appr sì
   — restava una sottile striscia bianca (lo sfondo della pagina) tra la
   crema del vassoio e il colore pieno della fascia successiva. */
.fpst-poll-band + .fpst-appr { margin-top: 0; }
.fpst-appr__head { margin-bottom: 1.3rem; }
.fpst-appr__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-family: var(--fpst-ui);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	/* !important: l'h2 è dentro .wp-block-post-content (la home è una pagina)
	   e catturerebbe la regola scura dei titoli interni articolo. */
	color: #fff !important;
}
.fpst-appr__label::before {
	content: "";
	width: 8px;
	height: 1em;
	border-radius: 1px;
	background: var(--wp--preset--color--gold);
}
.fpst-appr__sub {
	margin: 0.35rem 0 0;
	/* Il sottotitolo ora arriva dalla descrizione della categoria e può essere
	   una frase intera, non più una riga corta scritta nel tema: senza tetto
	   si stenderebbe per tutta la fascia, che è larga quanto la pagina. */
	max-width: 72ch;
	font-family: var(--fpst-ui);
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}
.fpst-appr__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 900px) { .fpst-appr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fpst-appr__grid { grid-template-columns: 1fr; } }
.fpst-appr__card { display: block; text-decoration: none; color: #fff; }
.fpst-appr__imgwrap { display: block; overflow: hidden; border-radius: 3px; margin-bottom: 0.6rem; }
.fpst-appr__img { display: block; width: 100%; height: 140px; object-fit: cover; transition: transform 0.35s ease; }
.fpst-appr__card:hover .fpst-appr__img { transform: scale(1.05); }
.fpst-appr__title {
	display: block;
	font-family: var(--fpst-serif);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}
.fpst-appr__card:hover .fpst-appr__title { color: var(--wp--preset--color--gold); }
/* Prima solo immagine + titolo: nessun contesto su chi ha scritto, quando,
   né su cosa parla il pezzo. Niente badge categoria (l'intera fascia è già
   una categoria sola, ripeterlo su ogni card sarebbe rumore identico). */
.fpst-appr__meta {
	display: block;
	margin-top: 0.35em;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.65);
}
.fpst-appr__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.3em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
}
.fpst-appr__more {
	display: inline-block;
	margin-top: 1.3rem;
	font-family: var(--fpst-ui);
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	/* Area di tocco: prima l'altezza era solo quella del testo. */
	padding: 0.5rem 0;
}
.fpst-appr__more:hover { color: var(--wp--preset--color--gold); }

/* Variante scura/neutra: separa Inchieste dalla fascia blu successiva senza
   introdurre un nuovo colore editoriale nella palette. */
.fpst-appr.fpst-appr--variant-scura { background: var(--wp--preset--color--ink, #111); }
.fpst-appr.fpst-appr--variant-scura .fpst-appr__label::before { background: var(--wp--preset--color--gold); }
.fpst-appr.fpst-appr--variant-scura .fpst-appr__card:hover .fpst-appr__title,
.fpst-appr.fpst-appr--variant-scura .fpst-appr__more:hover { color: var(--wp--preset--color--gold); }

/* Variante bordeaux per la fascia "L'Osservatore" ([fpst_approfondimenti
   category="osservatore"]): stessa struttura della fascia Approfondimenti,
   ma deliberatamente FUORI dalla coppia blu/oro del resto della home — è
   una rubrica di opinione, non cronaca, e deve leggersi come tale a colpo
   d'occhio anche in home, non solo nel suo archivio. */
.fpst-appr--osservatore { background: var(--fpst-c-osservatore); }
.fpst-appr--osservatore .fpst-appr__label::before { background: rgba(255, 255, 255, 0.85); }
.fpst-appr--osservatore .fpst-appr__card:hover .fpst-appr__title,
.fpst-appr--osservatore .fpst-appr__more:hover { color: #e8c9a0; }

/* Variante teal per la fascia "Collaboratori" ([fpst_approfondimenti
   category="collaboratori"]): stessa struttura, colore dedicato — opinioni
   firmate con nome vero, distinta sia dal blu/oro di cronaca sia dal
   bordeaux di "L'Osservatore" (pseudonimo). */
.fpst-appr--collaboratori { background: var(--fpst-c-collaboratori); }
.fpst-appr--collaboratori .fpst-appr__label::before { background: rgba(255, 255, 255, 0.85); }
.fpst-appr--collaboratori .fpst-appr__card:hover .fpst-appr__title,
.fpst-appr--collaboratori .fpst-appr__more:hover { color: #7fd4d0; }

/* Rubrica "Elzeviro": sfondo giallo bandiera, testo blu — l'inverso delle
   altre varianti qui sopra (che restano scure con testo bianco). Su un
   fondo chiaro il bianco non si legge: ogni elemento di testo della fascia
   (non solo label e barretta) va ridefinito, altrimenti eredita il bianco
   della regola base pensata per sfondi scuri — verificato: bianco su questo
   giallo dà un contrasto di 1,4:1, illeggibile. Il blu scelto (stesso
   `--wp--preset--color--accent` della fascia "Approfondimenti") dà 5,7:1,
   sopra la soglia WCAG AA. */
.fpst-appr--elzeviro { background: var(--fpst-c-elzeviro); }
.fpst-appr--elzeviro .fpst-appr__label { color: var(--wp--preset--color--accent) !important; }
.fpst-appr--elzeviro .fpst-appr__label::before { background: var(--wp--preset--color--accent); }
.fpst-appr--elzeviro .fpst-appr__sub { color: rgba(0, 0, 60, 0.82); }
.fpst-appr--elzeviro .fpst-appr__card,
.fpst-appr--elzeviro .fpst-appr__title,
.fpst-appr--elzeviro .fpst-appr__more { color: var(--wp--preset--color--accent); }
.fpst-appr--elzeviro .fpst-appr__meta { color: rgba(0, 0, 60, 0.65); }
.fpst-appr--elzeviro .fpst-appr__excerpt { color: rgba(0, 0, 60, 0.78); }
.fpst-appr--elzeviro .fpst-appr__card:hover .fpst-appr__title,
.fpst-appr--elzeviro .fpst-appr__more:hover { color: #00003d; }

/* Vetrina "Chi scrive qui" dentro la fascia home (sfondo teal pieno):
   stessa struttura di .fpst-collab-showcase sull'archivio, ma testo chiaro
   invece di ink-su-bianco. */
.fpst-appr--collaboratori .fpst-collab-showcase { margin: 1.6rem 0 0; }
.fpst-appr--collaboratori .fpst-collab-showcase__label { color: rgba(255, 255, 255, 0.85); }
.fpst-appr--collaboratori .fpst-collab-card {
	border-color: rgba(255, 255, 255, 0.28);
}
.fpst-appr--collaboratori .fpst-collab-card:hover { border-color: #fff; }
.fpst-appr--collaboratori .fpst-collab-card__name { color: #fff; }
.fpst-appr--collaboratori .fpst-collab-card__bio { color: rgba(255, 255, 255, 0.75); }
.fpst-appr--collaboratori .fpst-collab-card__count { color: #7fd4d0; }

/* Conteggio accanto alle categorie ([fpst_categories]). */
.fpst-widget__cats .fpst-cat-count {
	font-family: var(--fpst-ui);
	font-size: 0.82em;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Pulsante toggle dark mode (iniettato nell'header da darkmode.js).
   ========================================================================== */
.fpst-darktoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.fpst-darktoggle:hover { background: rgba(255, 255, 255, 0.28); }
.fpst-darktoggle:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.fpst-darktoggle__moon { display: none; }
:root[data-theme="dark"] .fpst-darktoggle__sun { display: none; }
:root[data-theme="dark"] .fpst-darktoggle__moon { display: inline; }

/* ==========================================================================
   TEMA SCURO (:root[data-theme="dark"]) — override dei token brand + ritocchi
   sui componenti con sfondo/bordi letterali.
   ========================================================================== */
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #16181c;
	--wp--preset--color--shell: #101114;
	--wp--preset--color--surface: #1e2127;
	--wp--preset--color--ink: #e9eaec;
	--wp--preset--color--muted: #9aa4ad;
	--wp--preset--color--line: #2c3038;
	/* Il blu del brand NON cambia in scuro (richiesto da Francesco il
	   23/8/2026) — sfondi, bordi e badge restano il blu esatto. Solo
	   --accent-text, usata esclusivamente per il colore del testo, resta più
	   chiara: il blu pieno come testo su queste superfici scure ha un
	   contrasto reale di ~2:1, sotto la soglia leggibile. */
	--wp--preset--color--accent-text: #5566ff;
}
/* Il fondo pagina è impostato da theme.json con un colore letterale (shell
   chiaro): il solo override della variabile non basta, va forzato. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .wp-site-blocks {
	background-color: #101114 !important;
	color: var(--wp--preset--color--ink);
}
:root[data-theme="dark"] .fpst-topbar { background: #16181c; border-color: #2c3038; }
:root[data-theme="dark"] .fpst-topbar__date { color: #e9eaec; }
:root[data-theme="dark"] .fpst-ticker { background: #16181c; border-color: #2c3038; }
:root[data-theme="dark"] .fpst-widget { background: #1e2127; border-color: #2c3038; }
:root[data-theme="dark"] .fpst-news .wp-block-post-content,
:root[data-theme="dark"] .fpst-news .wp-block-post-content > p:first-child { color: #e9eaec; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .wp-block-search__input {
	background: #1e2127;
	color: #e9eaec;
	border-color: #2c3038;
}
/* Card senza immagine (ricerca) e liste: il testo segue --ink, già chiaro. */

/* ══════════════════════════════════════════════════════════════════════════
   AUDIT TEMA SCURO 23/8/2026 — richiesto da Francesco dopo i bug trovati
   sulla pagina Eventi. Due famiglie di errore, cercate su tutto il file:
   1) sfondo mischiato con #fff letterale mentre il testo sopra usa un token
      che in scuro diventa chiaro (--ink, --muted, --accent-text) → testo
      chiaro su sfondo rimasto quasi bianco, stesso bug del badge eventi e
      del box commenti/sondaggio già corretti oggi;
   2) stato :hover con una sola dichiarazione (es. solo border-color) che la
      regola dark-mode generica del componente batte per specificità, quindi
      l'hover non si vede in tema scuro (rilevante solo desktop, il touch non
      ha hover — impatto minore ma comunque un'incoerenza reale).
   ══════════════════════════════════════════════════════════════════════════ */

/* Chip categoria generico (badge su card/lead/rail/byline): stesso bug del
   badge eventi, mix ancorato a #fff mentre il testo (--muted) schiarisce. */
:root[data-theme="dark"] .fpst-news .taxonomy-category.wp-block-post-terms a {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 10%, #16181d);
}
/* Box "Collaboratori" in fondo agli articoli firmati: stesso bug, testo
   eredita --ink (schiarisce) su uno sfondo rimasto quasi bianco. */
:root[data-theme="dark"] .fpst-news .fpst-authorbio--inline {
	background: color-mix(in srgb, var(--fpst-c-collaboratori) 10%, #16181d);
}
/* Contatore articoli sulla pagina Luoghi: testo --accent-text schiarisce,
   sfondo ancorato a #fff restava chiaro. */
:root[data-theme="dark"] .fpst-news .fpst-luoghi__count {
	background: color-mix(in srgb, var(--fpst-accent, #5566ff) 20%, #16181d);
}
/* Box "nessun sondaggio attivo" sulla pagina Sondaggi: testo eredita --ink. */
:root[data-theme="dark"] .fpst-news .fpst-polls__none {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, #16181d);
}
/* Barra di riempimento del mini-sondaggio: solo decorativa (non porta testo
   sopra), ma restava ancorata al bianco come le altre. */
:root[data-theme="dark"] .fpst-news .fpst-micropoll__fill {
	background: color-mix(in srgb, var(--fpst-accent, #5566ff) 55%, #16181d);
}

/* Stati :hover che la regola dark-mode generica del componente batteva per
   specificità (stesso schema del fix su .is-active di stamattina). */
:root[data-theme="dark"] .fpst-news .fpst-eventi__daychip:hover { border-color: var(--fpst-accent, #5566ff); }
:root[data-theme="dark"] .fpst-news .fpst-eventi__chip:hover { border-color: var(--fpst-accent, #5566ff); }
:root[data-theme="dark"] .fpst-news .fpst-micropoll__btn:hover { background: var(--fpst-accent, #5566ff); color: #16181d; }
:root[data-theme="dark"] .fpst-news .fpst-luoghi__item:hover { border-color: var(--wp--preset--color--accent); }

/* Data + tempo di lettura sotto i titoli della colonna del blocco di apertura:
   riempiono lo spazio verticale così i 6 titoli non restano troppo distanziati. */
.fpst-lead__rail-date {
	margin: 0.25rem 0 0;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}
.fpst-rail-rt { color: var(--wp--preset--color--muted); }

/* Meteo Viterbo nella barra data (weather.js). */
.fpst-topbar__left { display: inline-flex; align-items: center; gap: 0.7rem; }
.fpst-topbar__weather {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.02em;
}
.fpst-topbar__weather[hidden] { display: none; }

/* ==========================================================================
   Footer ridisegnato (modalità testata): scuro/premium invece del blu piatto,
   filo accent in cima, intestazioni colonne in Inter, separatore corretto.
   Scoped .fpst-news → i siti brand del cluster tengono il footer accent+scudo.
   ========================================================================== */
.fpst-news .fpst-footer {
	background: #14161a !important;
	border-top: 3px solid var(--wp--preset--color--accent);
	color: #cfd3d9;
}
.fpst-news .fpst-footer__brand,
.fpst-news .fpst-footer__brand a {
	font-family: var(--fpst-serif);
	color: #fff;
}
.fpst-news .fpst-footer__tagline { color: #9aa4ad; }
.fpst-news .fpst-footer__h {
	font-family: var(--fpst-ui);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.9rem;
}
.fpst-news .fpst-footer__nav a,
.fpst-news .fpst-footer__pages a {
	color: #cfd3d9;
	opacity: 1;
	/* Area di tocco: prima il link vestiva solo l'altezza del testo (~23px),
	   sotto lo standard di 32px minimo. display:block sull'intera lista
	   verticale del footer non rompe nulla (non ci sono link affiancati). */
	display: block;
	padding: 0.45rem 0;
}
.fpst-news .fpst-footer__nav a:hover,
.fpst-news .fpst-footer__pages a:hover { color: #fff; }
.fpst-news .fpst-footer__pages { list-style: none; margin: 0; padding: 0; }
.fpst-news .fpst-footer__pages li { padding: 0; }
/* Separatore: WP rende i separator di default come lineetta corta centrata —
   forziamo la riga piena e discreta. */
.fpst-news .fpst-footer__rule {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: none !important;
	opacity: 1;
	color: transparent;
}
.fpst-news .fpst-footer__bottom { color: #8a929b; }
.fpst-news .fpst-footer__bottom p { margin: 0; font-size: 0.82rem; }
.fpst-news .fpst-footer__social .wp-social-link { color: #cfd3d9; }
.fpst-news .fpst-footer__social .wp-social-link:hover { color: #fff; }

/* ==========================================================================
   Passata UI/UX: pagine statiche leggibili, 404 curato, meteo più visibile.
   ========================================================================== */

/* Pagine statiche (Contatti, Chi Siamo, Privacy…): colonna a misura di lettura
   invece che a tutta larghezza (righe troppo lunghe = affaticanti). */
.fpst-news .fpst-page-main {
	max-width: 46rem;
	margin-inline: auto;
}
.fpst-news .fpst-page-main .wp-block-post-content { font-size: 1.05rem; line-height: 1.65; }
/* Eventi non è testo da leggere: è una lista con day-picker, filtri e una
   griglia lead+rail — la colonna a 46rem pensata per Contatti/Chi Siamo la
   strizzava, su un desktop 1280px restavano vuoti ~270px per lato. Larghezza
   dedicata solo per questa pagina, le altre pagine statiche restano invariate.
   Segnalato da Francesco. */
.fpst-news .fpst-page-main:has(.fpst-eventi) { max-width: 68rem; }
.fpst-news .fpst-page-main h1.wp-block-post-title { margin-bottom: 0; }

/* 404: blocco centrato e ordinato invece di elementi sparsi a tutta larghezza. */
.fpst-news .fpst-404-main {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
}
.fpst-news .fpst-404__code {
	font-family: var(--fpst-serif);
	font-size: clamp(4rem, 12vw, 7rem) !important;
	line-height: 1;
	color: var(--wp--preset--color--accent-text);
	margin: 0;
}
.fpst-news .fpst-404__title {
	font-family: var(--fpst-serif);
	color: var(--wp--preset--color--ink);
	margin: 0.2em 0 0.4em;
}
.fpst-news .fpst-404__text { color: var(--wp--preset--color--muted); margin: 0 auto; }
.fpst-news .fpst-404__search { max-width: 26rem; margin-inline: auto; }
.fpst-news .fpst-404-main .wp-block-buttons { justify-content: center; }

/* Meteo nella barra data: più leggibile, con separatore dalla data. */
.fpst-topbar__left { gap: 0.85rem; }
.fpst-topbar__weather {
	position: relative;
	padding-left: 0.95rem;
	font-size: 0.8rem;
}
.fpst-topbar__weather::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 0.9em;
	background: var(--wp--preset--color--line);
}
/* "Edizione online": stesso separatore del meteo, dettaglio da masthead
   vero (le testate segnalano sempre l'edizione accanto alla data). */
.fpst-topbar__edition {
	position: relative;
	padding-left: 0.85rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.fpst-topbar__edition::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 0.9em;
	background: var(--wp--preset--color--line);
}
@media (max-width: 600px) { .fpst-topbar__edition { display: none; } }

/* ==========================================================================
   Passata di innovazione grafica: barra lettura, capolettera, pallino "in
   diretta", sollevamento card, entrata sezioni allo scroll.
   ========================================================================== */

/* Barra di avanzamento lettura in cima all'articolo (innovate.js). */
.fpst-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 200;
	pointer-events: none;
	background: transparent;
}
.fpst-progress__fill {
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--gold));
	transition: transform 0.08s linear;
}

/* Capolettera editoriale sul primo paragrafo dell'articolo.
   `first-of-type` e non `first-child`: davanti al testo può esserci il box
   "In breve", che altrimenti farebbe perdere il capolettera.
   `:not(.fpst-credit)`: esclude la riga di credito foto — se il corpo non ha
   `<p>` diretti (testo in `<span>`), il credito sarebbe l'unico `p:first-of-type`
   e prenderebbe il capolettera per errore.
   `:not(.fpst-solo-em)` + regola successiva: esclude anche un'etichetta
   breve tutta in corsivo davanti al testo vero (es. `<p><em>Editoriale</em></p>`,
   usata negli editoriali) — senza questa esclusione il capolettera si attacca
   alla "E" di "Editoriale" invece che al paragrafo che segue. Quando il primo
   `<p>` è un'etichetta così, il capolettera passa al paragrafo successivo.
   La classe è marcata lato PHP (render_block, functions.php), NON dedotta
   qui con `:has(> em:only-child)` come in una versione precedente: quel
   selettore sembrava verificare "tutto il paragrafo è un solo em" ma non lo
   fa — `:only-child` in CSS conta gli elementi, non i nodi di testo, quindi
   risultava vero anche su un paragrafo lunghissimo con un solo `<em>` in
   mezzo a molto altro testo (es. un titolo di libro in corsivo). Bug reale:
   su un elzeviro il capolettera è saltato dal paragrafo giusto a quello
   dopo (8/9/2026). Il PHP fa il controllo corretto — tutto l'HTML avvolto
   in un unico `<em>...</em>` dall'inizio alla fine — e marca la classe.
   `:not(.fpst-no-dropcap)`: il PHP marca il paragrafo-attacco anche quando
   apre con una virgoletta/punteggiatura (« " ( ecc.) o con una parola elisa
   ("C'è", vedi `.fpst-dropcap-elisa` sotto), perché un drop-cap preceduto da
   una virgoletta sospesa è graficamente sgraziato → su quegli attacchi si
   rinuncia al capolettera nativo. Marcatura lato server = nessun flash (la
   classe è già nell'HTML iniziale). */
.fpst-news.single .wp-block-post-content > p:first-of-type:not(.fpst-credit):not(.fpst-no-dropcap):not(.fpst-solo-em)::first-letter,
.fpst-news.single .wp-block-post-content > p:first-of-type.fpst-solo-em + p:not(.fpst-no-dropcap)::first-letter {
	float: left;
	margin: 0.02em 0.12em 0 0;
	font-family: var(--fpst-serif);
	font-size: 3.6em;
	line-height: 0.78;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
}

/* Capolettera su una parola elisa in apertura ("C'è", "L'idea"): la sola
   lettera vera, avvolta lato server in questo span (functions.php) perché
   `::first-letter` includerebbe anche l'apostrofo che segue. Stesso stile
   della regola sopra, spostato dallo pseudo-elemento allo span esplicito. */
.fpst-news.single .wp-block-post-content > p:first-of-type .fpst-dropcap-elisa {
	float: left;
	margin: 0.02em 0.12em 0 0;
	font-family: var(--fpst-serif);
	font-size: 3.6em;
	line-height: 0.78;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
}

/* Didascalia sotto la singola foto (figure > img + figcaption), da usare
   per le prossime foto invece del solo credito accorpato in coda
   all'articolo — le testate vere hanno la didascalia attaccata alla foto,
   non un'unica riga di credito staccata alla fine. Non retroattivo sugli
   articoli già pubblicati (andrebbero riscritti uno per uno). */
.fpst-news .wp-block-post-content figure.wp-block-image figcaption,
.fpst-news .fpst-caption {
	margin-top: 0.5em;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--fpst-muted, #667085);
}

/* Riga di credito foto in coda all'articolo: didascalia piccola e tenue,
   mai capolettera. */
.fpst-news .fpst-credit {
	margin-top: 1.2em;
	font-size: 0.82em;
	color: var(--fpst-muted, #667085);
}
.fpst-news .fpst-credit::first-letter {
	float: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Pallino "in diretta" pulsante accanto a "Ultime" nel ticker. */
.fpst-ticker__label::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 0.5em;
	border-radius: 50%;
	background: #e00;
	box-shadow: 0 0 0 0 rgba(238, 0, 0, 0.55);
	animation: fpst-live-pulse 1.7s ease-out infinite;
}
@keyframes fpst-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(238, 0, 0, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(238, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(238, 0, 0, 0); }
}

/* Sollevamento morbido delle card compatte all'hover (oltre allo zoom foto). */
@media (prefers-reduced-motion: no-preference) {
	.fpst-cardlist__item,
	.fpst-grid-dense__item {
		transition: transform 0.2s ease;
	}
	.fpst-cardlist__item:hover,
	.fpst-grid-dense__item:hover {
		transform: translateY(-3px);
	}
}

/* Entrata in dissolvenza delle sezioni categoria allo scroll (reveal.js le
   marca con .fpst-reveal; qui il fade-up è già definito sopra per .fpst-reveal). */

@media (prefers-reduced-motion: reduce) {
	.fpst-ticker__label::before { animation: none; }
	.fpst-progress { display: none; }
}

/* ==========================================================================
   Rifinitura editoriale: header archivio nel colore della sezione + corpo
   articolo "da rivista" (citazioni, didascalie, liste).
   ========================================================================== */

/* La barra accent della testata archivio prende il colore della categoria
   (WP aggiunge la body class `category-{slug}` sugli archivi di categoria). */
.fpst-news.category-attualita h1.wp-block-query-title::before         { background: var(--fpst-c-attualita); }
.fpst-news.category-politica h1.wp-block-query-title::before          { background: var(--fpst-c-politica); }
.fpst-news.category-provincia h1.wp-block-query-title::before         { background: var(--fpst-c-provincia); }
.fpst-news.category-ambiente h1.wp-block-query-title::before          { background: var(--fpst-c-ambiente); }
.fpst-news.category-economia-e-lavoro h1.wp-block-query-title::before { background: var(--fpst-c-economia); }
.fpst-news.category-cultura h1.wp-block-query-title::before           { background: var(--fpst-c-cultura); }
.fpst-news.category-mondo h1.wp-block-query-title::before             { background: var(--fpst-c-mondo); }
.fpst-news.category-viterbo h1.wp-block-query-title::before           { background: var(--fpst-c-viterbo); }
.fpst-news.category-italia h1.wp-block-query-title::before            { background: var(--fpst-c-italia); }
.fpst-news.category-idee h1.wp-block-query-title::before              { background: var(--fpst-c-idee); }
.fpst-news.category-libri h1.wp-block-query-title::before             { background: var(--fpst-c-libri); }
.fpst-news.category-salute h1.wp-block-query-title::before            { background: var(--fpst-c-salute); }
.fpst-news.category-controluce h1.wp-block-query-title::before          { background: var(--fpst-c-controluce); }

/* Citazione come "pull-quote" editoriale (Fraunces, filetto accent). */
.fpst-news .wp-block-post-content .wp-block-quote {
	margin: 1.8rem 0;
	padding: 0.2rem 0 0.2rem 1.4rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	font-family: var(--fpst-serif);
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}
.fpst-news .wp-block-post-content .wp-block-quote p { margin: 0 0 0.4rem; }
.fpst-news .wp-block-post-content .wp-block-pullquote {
	border: 0;
	border-top: 3px solid var(--wp--preset--color--accent);
	border-bottom: 3px solid var(--wp--preset--color--accent);
	padding: 1.4rem 0;
	text-align: center;
}
.fpst-news .wp-block-post-content .wp-block-pullquote p {
	font-family: var(--fpst-serif);
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

/* Didascalie immagini: piccole, muted, con filetto sopra. */
.fpst-news .wp-block-post-content figure figcaption,
.fpst-news .wp-block-post-content .wp-block-image figcaption {
	margin-top: 0.5rem;
	padding-top: 0.4rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--fpst-ui);
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

/* Immagini nel corpo: angoli coerenti + leggera ombra. */
.fpst-news .wp-block-post-content .wp-block-image img {
	border-radius: 3px;
}

/* Liste articolo: spaziatura respirata, marcatori accent. */
.fpst-news .wp-block-post-content ul,
.fpst-news .wp-block-post-content ol {
	padding-left: 1.3rem;
	line-height: 1.6;
}
.fpst-news .wp-block-post-content ul li::marker { color: var(--wp--preset--color--accent-text); }
.fpst-news .wp-block-post-content li { margin: 0.35rem 0; }

/* Prima notizia di ogni sezione più prominente (gerarchia editoriale): foto
   grande in cima + titolo più grande, invece di tutte le card uguali. */
.fpst-section-row .fpst-cardlist > .wp-block-post:first-child .fpst-cardlist__item {
	grid-template-columns: 1fr;
	gap: 0.5rem;
}
.fpst-section-row .fpst-cardlist > .wp-block-post:first-child .fpst-cardlist__img img {
	width: 100%;
	/* Prima era height:190px fisso: con width:100% il rapporto slittava a
	   seconda della larghezza della colonna. 16:9 per il trattamento "quasi
	   hero" di questo primo elemento, coerente con .fpst-lead__img. */
	aspect-ratio: 16 / 9;
	height: auto;
}
.fpst-section-row .fpst-cardlist > .wp-block-post:first-child .fpst-cardlist__title {
	font-size: 1.18rem;
	line-height: 1.25;
}

/* Pulsante "torna su" (innovate.js). */
.fpst-totop {
	position: fixed;
	/* Safe-area: sui telefoni con angoli arrotondati / barra home il pulsante a
	   22px dal bordo finiva sotto quella zona e appariva tagliato. */
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	right: calc(22px + env(safe-area-inset-right, 0px));
	z-index: 150;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.fpst-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.fpst-totop:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 82%, black); }
.fpst-totop:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
@media (max-width: 600px) {
	.fpst-totop {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		right: calc(16px + env(safe-area-inset-right, 0px));
		width: 40px;
		height: 40px;
	}
}

/* ── Sondaggio civico ─────────────────────────────────────────────────────── */
/* Identità propria (inchiostro+oro) invece del generico bianco/accent: usata
   sia nella card sidebar sia nella fascia home ([fpst_poll] è lo stesso
   shortcode in entrambi i posti) — un solo posto da cambiare per "renderlo
   più evidente ovunque", come richiesto. Il contrasto scuro spezza anche il
   susseguirsi di fasce a colore pieno (blu Approfondimenti, bordeaux
   Osservatore, terracotta Radici) invece di aggiungersene una uguale. */
/* L'ancora deve lasciare spazio alla testata sticky: su mobile corrisponde al
   logo da 56px più i due padding da 16px; da desktop include il logo da 72px
   e la riga di navigazione sotto alla barra principale. */
.fpst-poll#sondaggio {
	scroll-margin-top: calc(56px + (2 * var(--wp--preset--spacing--40)));
}
@media (min-width: 782px) {
	.fpst-poll#sondaggio {
		scroll-margin-top: calc(72px + (2 * var(--wp--preset--spacing--40)) + 2rem);
	}
}

/* Richiamo del sondaggio in alto: non dipende da .fpst-news perché il blocco
   può vivere fuori da quel contenitore. */
.fpst-poll-banner {
	display: block;
	box-sizing: border-box;
	/* non a tutta larghezza: sta nella colonna del contenuto come il resto
	   della home, altrimenti il genitore alignfull lo manda da bordo a bordo. */
	max-width: var(--wp--style--global--content-size, 1180px);
	margin-inline: auto;
	padding: 1.3rem 1.4rem;
	border-radius: 3px;
	background: #14140f;
	background: var(--wp--preset--color--ink, #14140f);
	color: #fff;
	font-family: var(--fpst-ui, sans-serif);
}
.fpst-poll-banner__label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #f5c518;
	color: var(--wp--preset--color--gold, #f5c518);
	margin-bottom: 0.55rem;
}
.fpst-poll-banner__question {
	font-family: var(--fpst-serif, Georgia, serif);
	font-size: 1.35rem;
	line-height: 1.3;
	margin: 0 0 1rem;
	color: #fff;
}
.fpst-poll-banner__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.fpst-poll-banner__count {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
}
.fpst-poll-banner__count b {
	color: #f5c518;
	color: var(--wp--preset--color--gold, #f5c518);
	font-size: 1.05rem;
	font-weight: 700;
}
.fpst-poll-banner__link,
.fpst-poll-banner__link:visited {
	padding: 0.55rem 1.2rem;
	border-radius: 3px;
	font-size: 0.92rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	/* valore esplicito prima della variabile: fuori dal contesto dei blocchi
	   le variabili non sono definite, il bottone resterebbe trasparente. */
	background: #f5c518;
	background: var(--wp--preset--color--gold, #f5c518);
	color: #14140f;
	color: var(--wp--preset--color--ink, #14140f);
	transition: background 0.15s ease, color 0.15s ease;
}
.fpst-poll-banner__link:hover {
	background: #ffffff;
	color: #14140f;
	color: var(--wp--preset--color--ink, #14140f);
}
.fpst-poll-banner__link:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
@media (max-width: 800px) {
	/* Su schermi stretti la misura massima non morde e il banner arrivava ai due
	   bordi, unico blocco della home a farlo: qui si stringe da solo. */
	.fpst-poll-banner {
		width: calc(100% - 2 * var(--wp--preset--spacing--40, 1rem));
		margin-inline: auto;
	}
}
@media (max-width: 620px) {
	.fpst-poll-banner__question {
		font-size: 1.15rem;
	}
	.fpst-poll-banner__link {
		width: 100%;
		text-align: center;
	}
}

.fpst-news .fpst-poll {
	border: 0;
	border-top: 3px solid var(--wp--preset--color--gold);
	border-radius: 10px;
	padding: 1.1rem 1.15rem 1.25rem;
	/* Letterale, non var(--ink): stessa identità "sempre scura" del box
	   commenti qui sotto — testo bianco fisso in ogni riga del componente
	   (__q, __curator, __desc, __label). Con la variabile, in tema scuro
	   --ink diventa quasi bianco (#e9eaec) e l'intero sondaggio sparisce:
	   testo bianco su sfondo quasi bianco. Misurato dal vivo il 23/8/2026. */
	background: #2b2f33;
}
.fpst-news .fpst-poll__head {
	margin-bottom: 0.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	flex-wrap: wrap;
}
.fpst-news .fpst-poll__kicker {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.fpst-news .fpst-poll__curator {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.65);
}
.fpst-news .fpst-poll__q {
	font-family: var(--fpst-serif, serif);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.85rem;
	color: #fff;
}
/* Testo di contesto sotto la domanda (facoltativo): spiega di cosa si tratta */
.fpst-news .fpst-poll__desc {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: -0.35rem 0 0.95rem;
	color: rgba(255, 255, 255, 0.68);
}
/* Il link dell'articolo nel sondaggio: il selettore NON passa piu' da .fpst-news,
   perche' in home il riquadro non e' dentro quel contenitore e il link ereditava il
   blu dei link del tema, illeggibile sul fondo scuro. Colore e stati sono dichiarati
   tutti, visited e focus compresi, per non lasciare buchi. */
.fpst-poll a.fpst-poll__link,
.fpst-poll a.fpst-poll__link:link,
.fpst-poll a.fpst-poll__link:visited {
	display: inline-block;
	margin: -0.25rem 0 1rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	color: #f5c518;
	text-decoration: underline;
	text-underline-offset: 0.16em;
}
.fpst-poll a.fpst-poll__link:hover,
.fpst-poll a.fpst-poll__link:focus {
	color: #ffffff;
	text-decoration: underline;
}
.fpst-pastpoll a.fpst-poll__link,
.fpst-pastpoll a.fpst-poll__link:link,
.fpst-pastpoll a.fpst-poll__link:visited { color: #0026ff; }
.fpst-pastpoll a.fpst-poll__link:hover { color: #14140f; }
.fpst-news .fpst-poll__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.fpst-news .fpst-poll__opt { position: relative; }
/* Il sondaggio dentro il contenuto della home ereditava due regole generiche
   più forti: ".wp-block-post-content ul" (rientro 1.3rem, opzioni spostate a
   destra) e ".fpst-widget li" (riga sotto ogni opzione, doppia col riquadro). */
.fpst-news .fpst-poll .fpst-poll__list { padding: 0; margin: 0; }
.fpst-news .fpst-poll .fpst-poll__opt { border-bottom: 0; margin: 0; padding: 0; }
.fpst-news .fpst-poll__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.92rem;
	line-height: 1.3;
	cursor: pointer;
	padding: 0.5rem 0.65rem;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 7px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.fpst-news .fpst-poll__label:hover { border-color: var(--wp--preset--color--gold); }
.fpst-news .fpst-poll__label input { accent-color: var(--wp--preset--color--gold); flex: 0 0 auto; }
.fpst-news .fpst-poll__text { flex: 1 1 auto; }
.fpst-news .fpst-poll__pct {
	display: none;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
	font-size: 0.85rem;
	/* la percentuale non si spezza mai: su schermo stretto "100%" andava a capo
	   fra il numero e il simbolo, e si leggeva "10" / "0%". */
	white-space: nowrap;
	flex: 0 0 auto;
}
/* Barra risultati: nascosta finché non si è votato */
.fpst-news .fpst-poll__bar { display: none; }

/* Stato "manca selezione" */
.fpst-news .fpst-poll.is-needsel .fpst-poll__label { border-color: color-mix(in srgb, var(--wp--preset--color--gold) 60%, transparent); }

/* Pulsante Vota */
.fpst-news .fpst-poll__vote {
	margin-top: 0.9rem;
	width: 100%;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--gold);
	border: 0;
	border-radius: 7px;
	padding: 0.6rem 1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.fpst-news .fpst-poll__vote:hover { background: #fff; }
.fpst-news .fpst-poll__vote:disabled { opacity: 0.6; cursor: default; }
.fpst-news .fpst-poll__error {
	margin: 0.6rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.8rem;
	color: #ff8a8a;
	text-align: center;
}
.fpst-news .fpst-poll__total {
	display: none;
	margin: 0.75rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.6);
	text-align: right;
}

/* ── Dopo il voto ─────────────────────────────────────────────────────────── */
.fpst-news .fpst-poll.is-voted .fpst-poll__vote { display: none; }
.fpst-news .fpst-poll.is-voted .fpst-poll__total { display: block; }
.fpst-news .fpst-poll.is-voted .fpst-poll__label {
	cursor: default;
	border-color: transparent;
	padding: 0.35rem 0.65rem 0.15rem;
	background: none;
}
.fpst-news .fpst-poll.is-voted .fpst-poll__label:hover { border-color: transparent; }
.fpst-news .fpst-poll.is-voted .fpst-poll__label input { display: none; }
.fpst-news .fpst-poll.is-voted .fpst-poll__pct { display: inline; }
.fpst-news .fpst-poll.is-voted .fpst-poll__bar {
	display: block;
	height: 8px;
	margin: 0 0.65rem;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.14);
	overflow: hidden;
}
.fpst-news .fpst-poll.is-voted .fpst-poll__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent);
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fpst-news .fpst-poll.is-voted .fpst-poll__opt.is-top .fpst-poll__fill { background: var(--wp--preset--color--gold); }
.fpst-news .fpst-poll.is-voted .fpst-poll__opt.is-top .fpst-poll__text { font-weight: 700; }

/* Il fondo è già scuro by design (non segue il toggle chiaro/scuro): nessun
   override dark-mode necessario, a differenza di prima. */

/* ── Fascia sondaggio in home ─────────────────────────────────────────────── */
/* Vassoio a tutta larghezza (stesso ingombro delle fasce vicine, vedi nota
   storica sotto) con due colonne: a sinistra la sezione "Sondaggi" spiegata
   e linkata come una rubrica vera, non solo un widget; a destra la card di
   voto. Prima la card galleggiava da sola al centro del vassoio, con un
   grande vuoto ai lati — la colonna di testo riempie quello spazio con un
   ruolo editoriale, non solo decorazione. */
.fpst-poll-band {
	max-width: none;
	/* Sopra i 1400px rientra come le altre due fasce a tutta larghezza della
	   home (Santa Rosa e Approfondimenti, sistemate lo stesso giorno): senza
	   questo era l'unica delle tre a restare sempre bordo a bordo, e le tre
	   bande impilate non allineavano piu' i lati (richiesto da Francesco
	   l'1/09/2026, stesso principio gia' applicato alle altre due). Sotto la
	   soglia resta cosi', per lo stesso motivo di misura delle altre due: non
	   c'e' spazio per avere insieme un margine visibile e l'allineamento del
	   testo interno. */
	/* Non piu' "surface" (grigio neutro, sembrava un banale sfondo bianco):
	   crema tinta d'oro, la stessa famiglia di colore della card ink+oro che
	   contiene — il vassoio ora sembra fatto apposta per il sondaggio, non
	   un contenitore generico riciclato da altrove. */
	background: color-mix(in srgb, var(--wp--preset--color--gold) 7%, var(--wp--preset--color--shell));
	border-radius: 4px;
	/* Margine tolto e padding verticale ridotto: prima si sommavano ai 40px
	   di padding-bottom del blocco sopra, ~128px di vuoto crema prima che
	   comparisse la parola "SONDAGGI" (e altrettanto sotto, verso la fascia
	   successiva) — sembrava un buco, non uno stacco voluto. */
	/* Minimo orizzontale a 24px come la colonna: sotto ~800px i clamp diversi
	   disallineavano le fasce (screenshot mobile di Francesco, 2/09/2026). */
	padding: clamp(1.3rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2rem);
	margin: 0;
	box-sizing: border-box;
}
@media (min-width: 1400px) {
	.fpst-poll-band {
		max-width: calc(
			var(--wp--style--global--content-size, 1180px) + 2 * clamp(1.2rem, 3vw, 2rem)
		);
		margin-inline: auto;
	}
}
.fpst-poll-band__cols.wp-block-columns { align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
/* Il filetto oro proseguiva per 270px nel vuoto dopo il pulsante — la colonna
   veniva tirata all'altezza della card del sondaggio accanto, e il blocco
   sembrava incompiuto (segnalato da Francesco l'1/09/2026).

   ⚠️ `.fpst-poll-band__intro` E' la colonna, non un suo figlio: porta anche la
   classe `wp-block-column`. Un primo tentativo con
   `.wp-block-column:has(.fpst-poll-band__intro)` non agganciava niente, perche'
   `:has()` cerca un discendente. L'`align-self` va messo qui. */
.fpst-poll-band__intro {
	align-self: start;
	/* Bordo oro a sinistra: ancora la colonna come "coppia" della card ink+oro
	   accanto, non testo che galleggia sullo sfondo. Prima, con poco testo,
	   restava mezza colonna di vuoto sotto il link — ora la statistica reale
	   (vedi .fpst-poll-band__stat) riempie quello spazio con un dato vero. */
	padding-left: 1.2rem;
	border-left: 3px solid var(--wp--preset--color--gold);
}
.fpst-poll-band__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.fpst-poll-band__title {
	margin: 0 0 0.8rem;
	font-family: var(--fpst-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.fpst-poll-band__desc {
	margin: 0 0 1.4rem;
	font-family: var(--fpst-ui);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.fpst-poll-band__stat { margin: 0 0 1.5rem; }
.fpst-poll-band__stat-value {
	display: block;
	font-family: var(--fpst-serif);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}
.fpst-poll-band__stat-label {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
.fpst-poll-band__link a {
	display: inline-block;
	padding: 0.55rem 1.3rem;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-family: var(--fpst-ui);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.fpst-poll-band__link a:hover { background: var(--wp--preset--color--ink); color: #fff; }
.fpst-news .fpst-poll-band .fpst-poll { max-width: 100%; margin: 0; padding: 1.6rem 1.8rem 1.9rem; border-radius: 12px; }
.fpst-poll-band .fpst-poll__q { font-size: 1.35rem; }
@media (max-width: 781px) {
	.fpst-poll-band__intro { text-align: left; margin-bottom: 1.5rem; border-left: 0; padding-left: 0; border-top: 3px solid var(--wp--preset--color--gold); padding-top: 1rem; }
}

/* Nella riga compatta accanto a Controluce (.fpst-section-row) resta solo il
   widget del sondaggio (niente più intro/statistica/link, tolti perché
   allungavano troppo la colonna) — nessuna colonna interna da forzare. */
.fpst-section-row .fpst-poll { max-width: 100%; }

/* Sondaggio e Controluce alla stessa altezza. .fpst-section-row è condivisa
   con le altre 15 sezioni categoria: la selezione è ristretta con :has() a
   QUESTA riga sola, per non toccare il layout delle altre. !important batte
   .is-layout-flex{align-items:center} di WP core sullo stesso elemento. */
.fpst-section-row:has(.fpst-controluce) {
	align-items: stretch !important;
}
.fpst-section-row:has(.fpst-controluce) > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.fpst-section-row:has(.fpst-controluce) .fpst-poll,
.fpst-section-row:has(.fpst-controluce) .fpst-controluce {
	flex: 1 1 auto;
}

/* Bottone core "outline" (es. "Vedi tutte le notizie" a fondo home): di
   default e' lo stile grezzo di WordPress (bordo nero squadrato). Pillola
   sul colore accent del brand, coerente con .fpst-poll-band__link a. */
.wp-block-button.is-style-outline .wp-block-button__link {
	display: inline-block;
	padding: 0.65rem 1.6rem;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	font-family: var(--fpst-ui);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--accent);
	background: transparent;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
}
:root[data-theme="dark"] .fpst-news .fpst-poll.is-voted .fpst-poll__bar { background: color-mix(in srgb, var(--fpst-accent, #5566ff) 22%, #16181d); }
/* .fpst-poll-band__link a:hover riempie lo sfondo con --ink e forza il testo
   a #fff fisso: corretto in chiaro (--ink scuro → riempimento scuro, testo
   bianco leggibile), ma in scuro --ink diventa quasi bianco (#e9eaec) e il
   testo bianco fisso ci sparisce sopra. Il resto della regola (bordo/testo
   di base = var(--ink)) si inverte già correttamente da solo. */
:root[data-theme="dark"] .fpst-poll-band__link a:hover { color: #101114; }
/* Il sondaggio in sidebar porta anche la classe generica .fpst-widget, la
   cui regola dark-mode (:root[data-theme="dark"] .fpst-widget, 3 livelli di
   classe) ha specificità più alta di .fpst-news .fpst-poll (2 livelli) e
   vinceva comunque, riportando lo sfondo a #1e2127 — misurato dal vivo il
   23/8/2026, il fix sopra non bastava per questa variante. */
:root[data-theme="dark"] .fpst-news .fpst-poll.fpst-widget { background: #2b2f33; }

/* ── Eventi della Tuscia ─────────────────────────────────────────────────────── */
.fpst-news .fpst-eventi { max-width: 100%; }
.fpst-news .fpst-eventi__title {
	font-family: var(--fpst-serif, serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 1rem;
}
.fpst-news .fpst-eventi--empty p {
	font-family: var(--fpst-ui, sans-serif);
	color: var(--fpst-muted, #6b6b6b);
	padding: 1.5rem;
	border: 1px dashed var(--fpst-line, #e2ddd3);
	border-radius: 10px;
	text-align: center;
}
.fpst-news .fpst-eventi__day {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fpst-accent-text, #0026ff);
	margin: 1.6rem 0 0.6rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--fpst-accent, #0026ff);
}
.fpst-news .fpst-eventi__daynote { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fpst-muted, #6b6b6b); }

/* ── Eventi: fascia "in evidenza" (flag editoriale _fpst_ev_top) ─────────────
   Stesso schema del modulo lead della home (lead grande + rail accanto),
   riapplicato qui. Vuota se nessun evento ha il flag: la redazione sceglie,
   non un punteggio automatico — vedi fpst_render_eventi_top_band(). */
.fpst-news .fpst-eventi-top { margin: 0 0 2rem; }
.fpst-news .fpst-eventi-top__heading { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 1rem; }
.fpst-news .fpst-eventi-top__heading h3 {
	font-family: var(--fpst-serif, serif);
	font-size: 1.15rem;
	margin: 0;
	white-space: nowrap;
}
.fpst-news .fpst-eventi-top__hr { flex: 1; height: 1px; background: var(--fpst-line, #e2ddd3); }

/* Card uguali (v0.89.19): non un evento "guida" grande + una rail di
   miniature — sono tutti eventi in evidenza allo stesso titolo, la nearness
   cronologica non ne fa uno più importante degli altri. Francesco: "non sono
   una cosa a due colonne perché una più grande". Stesso trattamento scheda
   della lista sotto (bordo, radius 12px, ombra), locandina quadrata uguale
   per tutti — object-fit:contain, mai tagliata. */
.fpst-news .fpst-eventi-top__grid {
	/* auto-fit, non auto-fill: con pochi eventi in evidenza (spesso 2-3)
	   auto-fill riserva comunque le colonne vuote, lasciando la riga a metà
	   con tanto spazio morto a destra. auto-fit le collassa e fa allargare
	   le card presenti a riempire la riga — "era bello a 2 colonne"
	   (Francesco). */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}
.fpst-news .fpst-eventi-top__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--fpst-line, #e2ddd3);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fpst-news .fpst-eventi-top__card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07); }
.fpst-news .fpst-eventi-top__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--fpst-surface, #f2f0ea);
}
.fpst-news .fpst-eventi-top__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fpst-news .fpst-eventi-top__body { padding: 0.85rem 1rem 1rem; }
.fpst-news .fpst-eventi-top__badge {
	display: inline-block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fpst-accent-text, #0026ff);
	background: color-mix(in srgb, var(--fpst-accent, #0026ff) 10%, #fff);
	padding: 0.22rem 0.55rem;
	border-radius: 4px;
	margin-bottom: 0.4rem;
}
.fpst-news .fpst-eventi-top__title {
	font-family: var(--fpst-serif, serif);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.3rem;
	color: var(--fpst-ink, #1a1a1a);
}
.fpst-news .fpst-eventi-top__card:hover .fpst-eventi-top__title {
	text-decoration: underline;
	text-decoration-color: var(--fpst-accent-text, #0026ff);
}
.fpst-news .fpst-eventi-top__meta {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--fpst-accent-text, #0026ff);
	margin: 0;
}

:root[data-theme="dark"] .fpst-news .fpst-eventi-top__card { background: #1e2127; border-color: #2a2d34; }
:root[data-theme="dark"] .fpst-news .fpst-eventi-top__title { color: #e9eaec; }
:root[data-theme="dark"] .fpst-news .fpst-eventi-top__media { background: #22252b; }
:root[data-theme="dark"] .fpst-news .fpst-eventi-top__hr { background: #2a2d34; }
/* Il badge mischiava l'accent con #fff letterale, non un token: in scuro il
   testo (--accent-text, chiaro) restava su uno sfondo quasi bianco fisso —
   stessa famiglia di bug del box commenti/sondaggio corretti oggi. Mischio
   con lo sfondo scuro delle superfici invece che con il bianco. */
:root[data-theme="dark"] .fpst-news .fpst-eventi-top__badge {
	background: color-mix(in srgb, var(--fpst-accent, #0026ff) 18%, #16181d);
}

/* Picker orizzontale dei giorni: filtra davvero la lista sul giorno scelto
   (come i chip di categoria) invece di limitarsi a scorrere fino a lì — con
   15-20 giorni di eventi "in corso" sovrapposti anche saltando al giorno
   giusto restava una lista lunga comunque. Segnalato da Francesco. Sono
   <button>, non <a>: da qui il reset dei valori di default del browser
   (font/cursor/appearance) prima delle regole vere e proprie. */
.fpst-news .fpst-eventi__daypicker {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.3rem;
	margin: 0 0 0.9rem;
	scrollbar-width: thin;
}
.fpst-news .fpst-eventi__daychip {
	appearance: none;
	font: inherit;
	cursor: pointer;
	flex: 0 0 auto;
	width: 58px;
	text-align: center;
	padding: 0.5rem 0.3rem;
	border-radius: 11px;
	border: 1px solid var(--fpst-line, #e2ddd3);
	background: #fff;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.fpst-news .fpst-eventi__daychip:hover { border-color: var(--fpst-accent, #0026ff); }
/* Il chip "Tutti i giorni" ha testo, non un numero: niente larghezza fissa
   a 58px, deve poter contenere la scritta senza andare a capo male. */
.fpst-news .fpst-eventi__daychip--all {
	width: auto;
	white-space: nowrap;
	padding: 0.5rem 0.9rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fpst-ink, #1a1a1a);
}
.fpst-news .fpst-eventi__daychip--all.is-active { color: #fff; }
.fpst-news .fpst-eventi__daychip-n {
	display: block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fpst-muted, #6b6b6b);
}
.fpst-news .fpst-eventi__daychip-d {
	display: block;
	font-family: var(--fpst-serif, serif);
	font-weight: 700;
	font-size: 1.05rem;
	margin-top: 0.1rem;
	color: var(--fpst-ink, #1a1a1a);
}
.fpst-news .fpst-eventi__daychip-c {
	display: block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.58rem;
	color: var(--fpst-muted, #6b6b6b);
	margin-top: 0.1rem;
	white-space: nowrap;
}
.fpst-news .fpst-eventi__daychip.is-active {
	background: var(--fpst-accent, #0026ff);
	border-color: var(--fpst-accent, #0026ff);
}
.fpst-news .fpst-eventi__daychip.is-active .fpst-eventi__daychip-n,
.fpst-news .fpst-eventi__daychip.is-active .fpst-eventi__daychip-d,
.fpst-news .fpst-eventi__daychip.is-active .fpst-eventi__daychip-c { color: #fff; }
/* L'id sulla sezione (#giorno-Y-m-d) non è più usato dal picker (che ora
   filtra, non scorre), ma resta nell'HTML: un link diretto a un giorno
   preciso continua a funzionare. La testata è sticky: senza scroll-margin
   l'ancora ci finirebbe sotto. */
.fpst-news .fpst-eventi__daygroup { scroll-margin-top: 6.5rem; }

/* Barra filtri per categoria (chip) */
.fpst-news .fpst-eventi__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}
.fpst-news .fpst-eventi__chip {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--fpst-line, #e2ddd3);
	border-radius: 999px;
	background: #fff;
	color: var(--fpst-ink, #1a1a1a);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.fpst-news .fpst-eventi__chip:hover {
	border-color: var(--fpst-accent, #0026ff);
	transform: translateY(-1px);
}
.fpst-news .fpst-eventi__chip.is-active {
	background: var(--fpst-accent, #0026ff);
	border-color: var(--fpst-accent, #0026ff);
	color: #fff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--fpst-accent, #0026ff) 35%, transparent);
}

/* Schede a masonry (v0.89.17): la griglia a righe (v0.89.16) risolveva
   l'allineamento ma ogni riga restava alta quanto la scheda più alta —
   sotto una scheda corta si apriva un vuoto grande quanto la differenza,
   perché la riga successiva parte comunque dal bordo della riga prima.
   Con le colonne CSS ogni scheda scende nella colonna più corta, senza
   vuoti: "farei masonry" (Francesco). break-inside:avoid tiene ogni
   scheda intera, non spezzata fra due colonne. */
.fpst-news .fpst-eventi__list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-width: 280px;
	column-gap: 1.25rem;
}
.fpst-news .fpst-evento {
	display: flex;
	flex-direction: column;
	break-inside: avoid;
	margin: 0 0 1.25rem;
	border: 1px solid var(--fpst-line, #e2ddd3);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fpst-news .fpst-evento:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07); }
.fpst-news .fpst-evento::before { content: none; }
.fpst-news .fpst-evento__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--fpst-surface, #f2f0ea);
}
.fpst-news .fpst-evento__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.fpst-news .fpst-evento__body { flex: 1 1 auto; min-width: 0; padding: 0.85rem 1rem 1rem; }
.fpst-news .fpst-evento__badge {
	display: inline-block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	padding: 0.16rem 0.45rem;
	border-radius: 4px;
	margin-bottom: 0.3rem;
}
.fpst-news .fpst-evento__name {
	font-family: var(--fpst-serif, serif);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.15rem;
	color: var(--fpst-ink, #1a1a1a);
}
.fpst-news .fpst-evento__meta {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--fpst-muted, #6b6b6b);
	margin: 0;
}
.fpst-news .fpst-evento__source {
	display: inline-block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fpst-accent-text, #0026ff);
	text-decoration: none;
	margin-top: 0.15rem;
}
.fpst-news .fpst-evento__source:hover { text-decoration: underline; }
:root[data-theme="dark"] .fpst-news .fpst-evento { background: #1e2127; border-color: #2a2d34; }
:root[data-theme="dark"] .fpst-news .fpst-evento__name { color: #e9eaec; }
:root[data-theme="dark"] .fpst-news .fpst-eventi__chip { background: #16181d; border-color: #2a2d34; color: #e9eaec; }
:root[data-theme="dark"] .fpst-news .fpst-evento__media { background: #22252b; }
:root[data-theme="dark"] .fpst-news .fpst-eventi__daychip { background: #16181d; border-color: #2a2d34; }
/* Le due righe sopra hanno più specificità di .is-active (4 livelli di classe
   contro 3) e vincevano sempre: cliccando un giorno o una categoria in tema
   scuro il pulsante restava del grigio di base invece di diventare blu —
   segnalato da Francesco sul day-picker eventi, stesso bug già corretto
   stamattina sul sondaggio (.fpst-poll.fpst-widget). */
:root[data-theme="dark"] .fpst-news .fpst-eventi__daychip.is-active {
	background: var(--fpst-accent, #0026ff);
	border-color: var(--fpst-accent, #0026ff);
}
:root[data-theme="dark"] .fpst-news .fpst-eventi__chip.is-active {
	background: var(--fpst-accent, #0026ff);
	border-color: var(--fpst-accent, #0026ff);
}

/* ── Mini-sondaggio a fine articolo (D'accordo / Non d'accordo) ─────────────── */
.fpst-news .fpst-micropoll {
	box-sizing: border-box;
	max-width: 100%;
	margin: 2rem 0 1.5rem;
	padding: 1.1rem 1.2rem 1.2rem;
	border: 1px solid var(--fpst-line, #e2ddd3);
	border-left: 3px solid var(--fpst-accent, #0026ff);
	border-radius: 10px;
	background: color-mix(in srgb, var(--fpst-accent, #0026ff) 4%, #fff);
}
/* Elenco "Le domande sotto gli articoli" (pagina Sondaggi): stesso box
   votabile dell'articolo, ripetuto — solo un po' di respiro tra un box e
   l'altro, e il link all'articolo di origine in fondo. */
.fpst-micropoll-item + .fpst-micropoll-item .fpst-micropoll { margin-top: 0; }
.fpst-news .fpst-micropoll__source {
	display: inline-block;
	margin-top: 0.9rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--fpst-accent-text, #0026ff);
	text-decoration: none;
}
.fpst-news .fpst-micropoll__source:hover { text-decoration: underline; }

.fpst-news .fpst-micropoll__label {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fpst-accent-text, #0026ff);
	margin: 0 0 0.35rem;
}
.fpst-news .fpst-micropoll__q {
	font-family: var(--fpst-serif, serif);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.95rem;
	color: var(--fpst-ink, #1a1a1a);
}
.fpst-news .fpst-micropoll__actions {
	display: flex;
	gap: 0.6rem;
}
/* Tre o quattro risposte: uno per riga. Affiancate, le etichette lunghe vanno
   a capo dentro bottoni stretti e sul telefono l'area di tocco si assottiglia. */
.fpst-news .fpst-micropoll--multi .fpst-micropoll__actions {
	flex-direction: column;
	gap: 0.45rem;
}
.fpst-news .fpst-micropoll--multi .fpst-micropoll__btn {
	width: 100%;
	text-align: left;
}
.fpst-news .fpst-micropoll__btn {
	flex: 1 1 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--fpst-accent, #0026ff);
	border-radius: 7px; /* standard pulsanti-azione, era 8px */
	background: #fff;
	color: var(--fpst-accent-text, #0026ff);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.fpst-news .fpst-micropoll__btn:hover { background: var(--fpst-accent, #0026ff); color: #fff; }
.fpst-news .fpst-micropoll__btn:disabled { opacity: 0.55; cursor: default; }
.fpst-news .fpst-micropoll__error {
	margin: 0.5rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	color: #c0392b;
}

/* Risultati: nascosti finché non si vota */
.fpst-news .fpst-micropoll__results { display: none; margin-top: 0.25rem; }
.fpst-news .fpst-micropoll__row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.4rem 0;
}
.fpst-news .fpst-micropoll__rowlabel {
	flex: 0 0 8.5rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.9rem;
	color: var(--fpst-ink, #1a1a1a);
}
.fpst-news .fpst-micropoll__bar {
	flex: 1 1 auto;
	height: 8px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--fpst-accent, #0026ff) 12%, #fff);
	overflow: hidden;
}
.fpst-news .fpst-micropoll__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: color-mix(in srgb, var(--fpst-accent, #0026ff) 45%, #fff);
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fpst-news .fpst-micropoll__row.is-top .fpst-micropoll__fill { background: var(--fpst-accent, #0026ff); }
.fpst-news .fpst-micropoll__row.is-top .fpst-micropoll__rowlabel { font-weight: 700; }
.fpst-news .fpst-micropoll__pct {
	flex: 0 0 auto;
	font-family: var(--fpst-ui, sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--fpst-accent-text, #0026ff);
	min-width: 2.6rem;
	text-align: right;
}
.fpst-news .fpst-micropoll__total {
	display: none;
	margin: 0.6rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	color: var(--fpst-muted, #6b6b6b);
	text-align: right;
}
.fpst-news .fpst-micropoll.is-voted .fpst-micropoll__actions { display: none; }
.fpst-news .fpst-micropoll.is-voted .fpst-micropoll__results { display: block; }
.fpst-news .fpst-micropoll.is-voted .fpst-micropoll__total { display: block; }

/* Sondaggio chiuso: risultato definitivo, niente bottoni. La riga di chiusura
   sta sotto il totale e usa lo stesso tono sommesso — è un'informazione di
   servizio, non deve competere con le percentuali. */
.fpst-news .fpst-micropoll__closed {
	margin: 0.15rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.74rem;
	color: var(--fpst-muted, #6b6b6b);
	text-align: right;
	font-style: italic;
}

/* ── Domanda al lettore (risposta aperta) ──────────────────────────────
   Stessa cassa del mini-sondaggio, così in coda all'articolo i due riquadri
   si leggono come una cosa sola. Qui però si scrive, quindi il campo di testo
   deve invitare: pieno larghezza, non un rigo. */
.fpst-news .fpst-domanda {
	margin: 2rem 0 0;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--fpst-rule, #e3e3e3);
	border-radius: 4px;
	background: var(--fpst-surface, #fbfbfa);
}
.fpst-news .fpst-domanda__label {
	margin: 0 0 0.3rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fpst-muted, #6b6b6b);
}
.fpst-news .fpst-domanda__q {
	margin: 0 0 0.8rem;
	font-weight: 600;
	line-height: 1.35;
}
.fpst-news .fpst-domanda__testo {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--fpst-rule, #d8d8d8);
	border-radius: 3px;
	font: inherit;
	font-size: 0.95rem;
	background: var(--fpst-bg, #fff);
	color: inherit;
	resize: vertical;
}
.fpst-news .fpst-domanda__meta {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}
.fpst-news .fpst-domanda__meta input {
	flex: 1 1 12rem;
	box-sizing: border-box;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--fpst-rule, #d8d8d8);
	border-radius: 3px;
	font: inherit;
	font-size: 0.85rem;
	background: var(--fpst-bg, #fff);
	color: inherit;
}
/* Campo esca: fuori dallo schermo, non `display:none` — alcuni bot saltano
   quello che è nascosto in modo ovvio. */
.fpst-news .fpst-domanda__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.fpst-news .fpst-domanda__consenso {
	margin: 0.6rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.82rem;
	line-height: 1.4;
}
.fpst-news .fpst-domanda__nota {
	margin: 0.35rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.74rem;
	color: var(--fpst-muted, #6b6b6b);
}
.fpst-news .fpst-domanda__invia {
	margin-top: 0.7rem;
	padding: 0.5rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: none;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.85rem;
	color: var(--fpst-accent-text, #0026ff);
	cursor: pointer;
}
.fpst-news .fpst-domanda__invia:hover { background: var(--fpst-accent-text, #0026ff); color: #fff; }
.fpst-news .fpst-domanda__invia[disabled] { opacity: 0.55; cursor: default; }
.fpst-news .fpst-domanda__esito {
	margin: 0.6rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.85rem;
}
.fpst-news .fpst-domanda__esito:empty { display: none; }
.fpst-news .fpst-domanda__esito.is-ko { color: #a11; }

:root[data-theme="dark"] .fpst-news .fpst-domanda {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .fpst-news .fpst-domanda__testo,
:root[data-theme="dark"] .fpst-news .fpst-domanda__meta input {
	background: rgba(0, 0, 0, 0.25);
	border-color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 480px) {
	.fpst-news .fpst-micropoll__rowlabel { flex-basis: 7rem; }
}

/* Mini-sondaggio — modalità scura */
:root[data-theme="dark"] .fpst-news .fpst-micropoll {
	background: color-mix(in srgb, var(--fpst-accent, #5566ff) 10%, #16181d);
	border-color: #2a2d34;
}
:root[data-theme="dark"] .fpst-news .fpst-micropoll__q { color: #e9eaec; }
:root[data-theme="dark"] .fpst-news .fpst-micropoll__rowlabel { color: #e9eaec; }
:root[data-theme="dark"] .fpst-news .fpst-micropoll__btn { background: #16181d; }
:root[data-theme="dark"] .fpst-news .fpst-micropoll__bar { background: color-mix(in srgb, var(--fpst-accent, #5566ff) 22%, #16181d); }

/* ── Invito a commentare in evidenza ("spazio commenti") ─────────────────── */
/* Scuro sempre, come .fpst-poll: non segue il tema chiaro/scuro del sito. */
.fpst-news .fpst-comment-prompt {
	border: 0;
	border-top: 3px solid var(--wp--preset--color--gold);
	border-radius: 10px;
	padding: 1.3rem 1.4rem 1.5rem;
	/* Letterale, non var(--wp--preset--color--ink): il box è pensato per
	   restare sempre un riquadro scuro con testo bianco, come un callout —
	   ma --ink è uno dei token che il tema scuro ribalta (diventa quasi
	   bianco, #e9eaec, per il testo del corpo pagina). Con la variabile lo
	   sfondo diventava chiaro mentre il testo restava #fff fisso: bianco su
	   quasi-bianco, illeggibile. Misurato dal vivo il 23/8/2026. */
	background: #2b2f33;
	margin: 2rem 0;
}
.fpst-news .fpst-comment-prompt__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.fpst-news .fpst-comment-prompt__q {
	margin: 0 0 1rem;
	font-family: var(--fpst-serif, serif);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}
.fpst-news .fpst-comment-prompt__btn {
	display: inline-block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	/* Letterale per lo stesso motivo dello sfondo del box qui sopra: serve
	   sempre testo scuro sull'oro, in entrambi i temi. */
	color: #2b2f33;
	background: var(--wp--preset--color--gold);
	border-radius: 7px;
	padding: 0.55rem 1.1rem;
	text-decoration: none;
	transition: background 0.15s ease;
}
.fpst-news .fpst-comment-prompt__btn:hover { background: #fff; }
.fpst-news .fpst-comment-prompt__counter {
	margin: 0.5rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	text-align: right;
}
.fpst-news .fpst-comment-prompt__counter.is-over { color: #c0392b; font-weight: 700; }

/* Colonne SEMPRE a 4 (dalla regola base .fpst-appr__grid), qualunque sia il
   numero di card: con meno di 4 pezzi restano colonne vuote a destra invece
   di card più larghe. Scelta deliberata (2026-08-17): card più larghe per
   sezioni con poche card rompeva l'allineamento tra fasce con conteggi
   diversi (es. Osservatore a 4 card sopra Collaboratori a 1 card) — le
   colonne non coincidevano più tra una fascia e l'altra. Ora coincidono
   sempre, a costo di lasciare spazio vuoto quando una fascia è giovane. */

/* ── Slider "in evidenza": full-bleed (edge-to-edge) e più alto ──────────────
   Il gruppo è reso `align:full` nel contenuto home, quindi arriva ai bordi
   viewport (root-padding-aware, niente scroll orizzontale). Qui: angoli vivi
   e altezza maggiore — quasi quadrato su mobile come richiesto. */
.fpst-featured-slider .fpst-slide { border-radius: 0; }
/* 38vw (non 42): con lo slider piu' alto il payoff sotto finiva fuori schermo
   su desktop. Cosi' resta above the fold senza sacrificare l'impatto. */
.fpst-featured-slider .fpst-slide__img { height: clamp(400px, 36vw, 580px); }
/* Su desktop: contenuto nella stessa larghezza del resto della pagina, non
   più full-bleed. Il gruppo di blocco ha perso l'align:full, ma il layout
   "flow" non applica da solo il vincolo di larghezza (solo "constrained" lo
   farebbe) — vincolo esplicito qui. L'altezza resta legata al viewport
   (36vw), quindi una larghezza minore significa meno crop, non un riquadro
   più basso: foto non panoramiche (verticali/quadre) si vedono per intero
   invece di essere tagliate ai lati. */
@media (min-width: 782px) {
	.fpst-featured-slider {
		max-width: 1180px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 781px) {
	/* Quasi quadrato: la slide è larga 100vw, l'altezza la insegue (cap 600). */
	/* Altezza legata all'ALTEZZA dello schermo, non alla larghezza: cosi' lo
	   slider riempie da solo la prima schermata e la foto dell'articolo dopo
	   resta sotto la piega su ogni telefono. 355px = testata + ticker + payoff
	   + respiro. `svh` = viewport "piccolo" (con le barre del browser visibili). */
	.fpst-featured-slider .fpst-slide__img {
		/* -354px: 292 (testata+payoff+respiro) + 62 della barra fissa in fondo. */
		height: clamp(300px, calc(100svh - 354px), 640px);
	}
	/* Slider attaccato al ticker, senza stacco. */
	.fpst-featured-slider { margin-top: 0 !important; }
}

/* ── Ticker "ULTIME": full-bleed solo su mobile ──────────────────────────────
   Il gruppo è `align:full` come lo slider. Su desktop lo ri-conteniamo alla
   larghezza dei contenuti (aspetto invariato); su mobile resta edge-to-edge,
   come una fascia (via bordi/angoli laterali). */
@media (min-width: 782px) {
	.fpst-ticker-wrap.alignfull {
		max-width: var(--wp--style--global--content-size, 1180px);
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 781px) {
	/* Fascia a tutta larghezza: via bordi e angoli laterali, resta la riga
	   sopra/sotto per staccare dal resto. */
	.fpst-ticker-wrap.alignfull .fpst-ticker {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}
	/* Attaccato sopra (header) e sotto (slider): nessun margine verticale. */
	.fpst-ticker-wrap.alignfull { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ── Blocco di apertura: etichetta "Altre notizie" + rail più leggibile ──────
   La lista laterale (rail) su mobile diventava un elenco fitto di titoli a 14px
   subito sotto la notizia grande, senza separazione → poco chiaro. Aggiunta
   un'etichetta di sezione e titoli più grandi/arieggiati su mobile. */
.fpst-news .fpst-lead__rail-label {
	margin: 0 0 0.9rem;
	padding-bottom: 0.4rem;
	font-family: var(--fpst-ui);
	font-weight: 800;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--accent);
}
@media (max-width: 781px) {
	/* Titoli rail: da 14px a ~16.5px, più respiro tra le voci. */
	.fpst-news .fpst-lead__rail-title { font-size: 1.03rem; line-height: 1.32; }
	.fpst-news .fpst-lead__rail-item { padding-block: 0.35rem 0.5rem; }
	.fpst-news .fpst-lead__rail-date { font-size: 0.84rem; }
	/* Un po' di stacco tra la notizia grande e "Altre notizie". */
	.fpst-news .fpst-lead__rail-label { margin-top: 0.6rem; }
}

/* ── Card compatte sezioni: testo allineato in alto con la miniatura ─────────
   Il `.fpst-cardlist__body` è il 2° figlio di un gruppo `is-layout-constrained`,
   quindi WP gli applica un margin-block-start (block-gap ~24px). Dentro la
   griglia questo spinge in basso titolo+data disallineandoli dalla foto.
   Azzerato: la spaziatura viene già dal `gap` della griglia (colonna per le
   card compatte, riga per la card in evidenza). */
.fpst-cardlist__body { margin-block-start: 0; }

/* ── Allineamento liste + immagine articolo in evidenza full-bleed su mobile ──
   Le liste post-template (card di sezione, apertura, rail) avevano un
   padding-inline-start residuo (~20px) da <ul>, che spostava a destra le card
   rispetto ai titoli di sezione. Azzerato: tutto allineato al bordo contenuti. */
.fpst-news .fpst-cardlist,
.fpst-news .fpst-lead__main,
.fpst-news .fpst-lead__rail { padding-inline-start: 0 !important; }

@media (max-width: 781px) {
	/* Immagine dell'articolo in evidenza (apertura + prima card di ogni sezione)
	   a tutta larghezza, edge-to-edge (root padding = spacing|50). `!important`
	   perché il margine delle figure è forzato da un altro foglio (Kit/core). */
	.fpst-news .fpst-lead__img,
	.fpst-news .fpst-section-row .fpst-cardlist > .wp-block-post:first-child .fpst-cardlist__img {
		margin-left: calc(var(--wp--preset--spacing--50) * -1) !important;
		margin-right: calc(var(--wp--preset--spacing--50) * -1) !important;
		max-width: none !important;
		width: auto !important;
		border-radius: 0 !important;
	}
	.fpst-news .fpst-lead__img img,
	.fpst-news .fpst-section-row .fpst-cardlist > .wp-block-post:first-child .fpst-cardlist__img img {
		width: 100% !important;
		border-radius: 0 !important;
	}
}

/* Sondaggio: è un <div> grezzo (non un blocco WP) quindi non eredita il
   border-box → width + padding sforavano il contenitore causando scroll
   orizzontale su mobile. Forzato border-box. */
.fpst-news .fpst-poll { box-sizing: border-box; max-width: 100%; }

/* ── "Altre notizie": card compatte con miniatura (non più solo testo) ───────
   La lista solo-testo risultava povera e fuori scala col resto del sito, dove
   ogni notizia ha la sua foto. Stessa griglia delle card di sezione:
   miniatura a sinistra, pill + titolo + data a destra. */
.fpst-news .fpst-lead__rail-item {
	display: grid;
	/* Prima 88px: stesso peso visivo di .fpst-cardlist__img (104px), non
	   una terza misura scelta a parte. */
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
}
/* Filo tra un titolo e l'altro, stessa logica delle card di sezione sopra:
   il `<li>` (.wp-block-post) è il figlio diretto della lista, non
   .fpst-lead__rail-item — va la' sopra il :not(:first-child). */
.fpst-news .fpst-lead__rail > .wp-block-post:not(:first-child) .fpst-lead__rail-item {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 0.6rem;
	margin-top: 0.6rem;
}
/* Articolo senza immagine in evidenza: il testo prende tutta la larghezza. */
.fpst-news .fpst-lead__rail-item:not(:has(.fpst-lead__rail-img)) {
	grid-template-columns: minmax(0, 1fr);
}
.fpst-news .fpst-lead__rail-img {
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
}
.fpst-news .fpst-lead__rail-img img {
	display: block;
	/* Prima 88px come .fpst-lead__rail-item sopra. */
	width: 104px;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.fpst-news .fpst-lead__rail-item:hover .fpst-lead__rail-img img { transform: scale(1.05); }
/* Stesso gotcha delle card: il body è 2° figlio → WP gli mette block-gap. */
.fpst-news .fpst-lead__rail-body {
	margin-block-start: 0;
	min-width: 0;
}
/* Pill categoria più contenuta in questo contesto stretto. */
.fpst-news .fpst-lead__rail-body .wp-block-post-terms { margin-bottom: 0.3em; }

/* Approfondimenti: un'unica altezza immagine, sempre — non più legata al
   numero di card (1-2 card diventavano molto più alte di 3-4: due fasce con
   conteggi diversi, come Osservatore e Collaboratori appena nato, finivano
   visibilmente disallineate anche stando una sopra l'altra in home). */
.fpst-appr__img { height: 190px; }

/* ── Box "In breve" (riassunto in cima all'articolo) ─────────────────────────── */
.fpst-news .fpst-summary {
	margin: 0 0 2rem;
	padding: 1.1rem 1.25rem 1.2rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 0 4px 4px 0;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, #fff);
}
.fpst-news .fpst-summary__label {
	margin: 0 0 0.6rem;
	font-family: var(--fpst-ui);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
}
.fpst-news .fpst-summary__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.fpst-news .fpst-summary__list li {
	position: relative;
	margin: 0;
	padding-left: 1.15rem;
	font-family: var(--fpst-ui);
	font-size: 0.98rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	list-style: none;
}
/* Pallino accent (il tema azzera i marker delle liste: disegnato a mano). */
.fpst-news .fpst-summary__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
:root[data-theme="dark"] .fpst-news .fpst-summary {
	background: #1a1d24;
}
:root[data-theme="dark"] .fpst-news .fpst-summary__list li { color: #e9eaec; }
@media (max-width: 600px) {
	.fpst-news .fpst-summary { padding: 1rem 1.05rem; margin-bottom: 1.6rem; }
	.fpst-news .fpst-summary__list li { font-size: 0.94rem; }
}

/* Card in evidenza di sezione: la figura non si allargava alla cella della
   griglia, così la sua larghezza veniva dedotta dall'immagine (altezza 190px x
   proporzione ~= 338px) e restava rientrata/centrata rispetto al titolo.
   Forzata a piena larghezza: foto allineata ai margini del titolo. */
.fpst-section-row .fpst-cardlist > .wp-block-post:first-child .fpst-cardlist__img {
	width: 100%;
	justify-self: stretch;
	box-sizing: border-box;
}

/* Radice del disallineamento nelle card: i figli (figura e body) sono
   contenitori di layout WP `is-layout-constrained`, quindi ricevono
   `margin-inline: auto` + `max-width`. Dentro una griglia questo li fa
   restringere al contenuto e centrare nella cella → foto e titolo rientrati e
   non allineati tra loro. Forzati a riempire la propria cella. */
.fpst-cardlist__item > *,
.fpst-lead__rail-item > * {
	margin-inline: 0;
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

/* Logo testata più grande su desktop (su mobile resta contenuto: l'header
   sticky non deve rubare schermo). */
@media (min-width: 782px) {
	.fpst-news .fpst-header__logo img { max-height: 92px; }
}

/* ── Richiamo segnalazioni in fondo agli articoli ────────────────────────────── */
.fpst-news .fpst-tipcta {
	margin: 2.5rem 0 0;
	padding: 1.5rem 1.6rem;
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
	color: #fff;
}
.fpst-news .fpst-tipcta__label {
	margin: 0 0 0.4rem;
	font-family: var(--fpst-ui);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.fpst-news .fpst-tipcta__text {
	margin: 0 0 1rem;
	font-family: var(--fpst-serif);
	font-size: 1.18rem;
	line-height: 1.35;
	color: #fff;
}
.fpst-news .fpst-tipcta__btn {
	display: inline-block;
	padding: 0.6rem 1.3rem;
	/* 7px, non 4px: standard dei pulsanti-azione del sito (voto sondaggio,
	   box commenti, invio commento) — segnalato da Francesco confrontando
	   questo box con quello dei commenti nella stessa pagina. */
	border-radius: 7px;
	background: #fff;
	color: var(--wp--preset--color--accent-text);
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.fpst-news .fpst-tipcta__btn:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }

/* ── Indice dei luoghi (comuni + quartieri) ──────────────────────────────────── */
.fpst-news .fpst-luoghi { margin-bottom: 2.5rem; }
.fpst-news .fpst-luoghi__title {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	font-family: var(--fpst-ui);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--wp--preset--color--accent);
}
.fpst-news .fpst-luoghi__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.6rem;
}
.fpst-news .fpst-luoghi__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.fpst-news .fpst-luoghi__item:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}
.fpst-news .fpst-luoghi__name {
	font-family: var(--fpst-serif);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.fpst-news .fpst-luoghi__count {
	flex: 0 0 auto;
	min-width: 1.6em;
	padding: 0.1em 0.45em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, #fff);
	color: var(--wp--preset--color--accent-text);
	font-family: var(--fpst-ui);
	font-size: 0.76rem;
	font-weight: 700;
	text-align: center;
}
:root[data-theme="dark"] .fpst-news .fpst-luoghi__item { background: #1e2127; border-color: #2c3038; }

/* ── "Altre notizie da <luogo>" in fondo all'articolo ────────────────────────── */
.fpst-news .fpst-place {
	margin: 2.5rem 0 0;
	padding: 1.2rem 1.4rem;
	border-left: 4px solid var(--wp--preset--color--gold);
	background: color-mix(in srgb, var(--wp--preset--color--gold) 8%, #fff);
	border-radius: 0 4px 4px 0;
}
.fpst-news .fpst-place__label {
	margin: 0 0 0.7rem;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
.fpst-news .fpst-place__list { margin: 0 0 0.9rem; padding: 0; list-style: none; }
.fpst-news .fpst-place__list li { margin: 0 0 0.5rem; list-style: none; }
.fpst-news .fpst-place__list a {
	font-family: var(--fpst-serif);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.fpst-news .fpst-place__list a:hover { color: var(--wp--preset--color--accent-text); }
.fpst-news .fpst-place__more {
	font-family: var(--fpst-ui);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
	text-decoration: none;
}
:root[data-theme="dark"] .fpst-news .fpst-place { background: #1e2127; }
:root[data-theme="dark"] .fpst-news .fpst-place__list a,
:root[data-theme="dark"] .fpst-news .fpst-place__label { color: #e9eaec; }

/* ── "Ascolta l'articolo" ─────────────────────────────────────────────────────
   Il contenitore è vuoto finché listen.js non crea il pulsante: senza sintesi
   vocale nel browser non deve occupare spazio. */
.fpst-news .fpst-listen:empty { display: none; }
.fpst-news .fpst-listen { margin: 0 0 1.5rem; }
.fpst-news .fpst-listen__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--accent-text);
	font-family: var(--fpst-ui);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.fpst-news .fpst-listen__btn:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
}
.fpst-news .fpst-listen.is-playing .fpst-listen__btn {
	background: var(--wp--preset--color--accent);
	color: #fff;
}
.fpst-news .fpst-listen__icon { font-size: 0.8em; line-height: 1; }
.fpst-news .fpst-listen__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ── Fascia di allerta meteo ─────────────────────────────────────────────────── */
.fpst-alert {
	font-family: var(--fpst-ui);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.fpst-alert__in {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	/* Stessa larghezza della topbar (content-size, non wide-size): i margini
	   laterali delle due righe in cima devono coincidere. */
	max-width: var(--wp--style--global--content-size, 1180px);
	margin: 0 auto;
	padding: 0.5rem var(--wp--preset--spacing--50);
	font-size: 0.85rem;
}
.fpst-alert__badge {
	flex: 0 0 auto;
	padding: 0.15em 0.6em;
	border-radius: 3px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.fpst-alert__text { flex: 1 1 auto; font-weight: 600; }
.fpst-alert__src {
	flex: 0 0 auto;
	font-weight: 700;
	text-decoration: none;
	opacity: 0.75;
}
.fpst-alert__src:hover { opacity: 1; }

/* Livelli: giallo / arancione / rosso (colori della protezione civile). */
.fpst-alert--gialla    { background: #ffd54a; color: #3a2c00; }
.fpst-alert--gialla .fpst-alert__badge { background: #3a2c00; color: #ffd54a; }
.fpst-alert--gialla .fpst-alert__src   { color: #3a2c00; }

.fpst-alert--arancione { background: #f08a24; color: #3a1e00; }
.fpst-alert--arancione .fpst-alert__badge { background: #3a1e00; color: #f08a24; }
.fpst-alert--arancione .fpst-alert__src   { color: #3a1e00; }

.fpst-alert--rossa     { background: #c62828; color: #fff; }
.fpst-alert--rossa .fpst-alert__badge { background: #fff; color: #c62828; }
.fpst-alert--rossa .fpst-alert__src   { color: #fff; }

@media (max-width: 600px) {
	/* Su mobile niente flex: con nowrap + centratura il contenuto sforava a
	   destra. Qui la fascia e' semplicemente una riga di testo centrata.
	   Il rimando alla fonte e' secondario -> nascosto. */
	.fpst-alert__in {
		display: block;
		text-align: center;
		padding-inline: 0.75rem;
		font-size: 0.76rem;
		line-height: 1.4;
	}
	.fpst-alert__src { display: none; }
	.fpst-alert__badge {
		display: inline-block;
		margin-right: 0.4rem;
		padding: 0.15em 0.5em;
		font-size: 0.62rem;
		vertical-align: 0.05em;
	}
	.fpst-alert__text { display: inline; font-weight: 600; }
}

/* ── "I numeri di Viterbo": schede-dato con fonte ────────────────────────────── */
.fpst-news .fpst-num-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 2.5rem;
}
.fpst-news .fpst-num {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 4px solid var(--wp--preset--color--accent);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fpst-news .fpst-num:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}
.fpst-news .fpst-num__value {
	font-family: var(--fpst-serif);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--accent-text);
}
.fpst-news .fpst-num__label {
	margin-top: 0.35rem;
	font-family: var(--fpst-ui);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.fpst-news .fpst-num__note {
	margin-top: 0.5rem;
	flex: 1 1 auto;
	font-family: var(--fpst-ui);
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}
.fpst-news .fpst-num__src {
	margin-top: 0.9rem;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
	text-decoration: none;
}
.fpst-news .fpst-num__src:hover { text-decoration: underline; }
/* Sfumature per tema: i numeri "negativi" in rosso mattone, i positivi in verde. */
.fpst-news .fpst-num--bad  { border-top-color: #c62828; }
.fpst-news .fpst-num--bad .fpst-num__value,
.fpst-news .fpst-num--bad .fpst-num__src { color: #c62828; }
.fpst-news .fpst-num--good { border-top-color: #2e7d32; }
.fpst-news .fpst-num--good .fpst-num__value,
.fpst-news .fpst-num--good .fpst-num__src { color: #2e7d32; }
:root[data-theme="dark"] .fpst-news .fpst-num { background: #1e2127; border-color: #2c3038; }

/* ── Sezione Video / interviste ──────────────────────────────────────────────── */
.fpst-news .fpst-video {
	background: #14161a;
	color: #fff;
	padding: clamp(2rem, 4vw, 3rem) 0;
}
.fpst-news .fpst-video__in {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	padding-inline: var(--wp--preset--spacing--50);
}
.fpst-news .fpst-video__label {
	margin: 0 0 1.4rem;
	font-family: var(--fpst-ui);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}
.fpst-news .fpst-video__label::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 1em;
	margin-right: 0.6rem;
	vertical-align: -0.12em;
	background: var(--wp--preset--color--gold);
}
.fpst-news .fpst-video__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}
.fpst-news .fpst-video__card { display: block; text-decoration: none; color: #fff; }
.fpst-news .fpst-video__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	background: #23262c;
}
.fpst-news .fpst-video__img,
.fpst-news .fpst-video__ph {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.fpst-news .fpst-video__card:hover .fpst-video__img { transform: scale(1.05); }
/* Simbolo play: dice a colpo d'occhio che è un video, non un articolo. */
.fpst-news .fpst-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	transition: background 0.2s ease;
}
.fpst-news .fpst-video__play::before {
	content: "";
	position: absolute;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
.fpst-news .fpst-video__play { text-indent: 0.15em; }
.fpst-news .fpst-video__card:hover .fpst-video__play { background: rgba(0, 0, 0, 0.15); }
.fpst-news .fpst-video__title {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--fpst-serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}
.fpst-news .fpst-video__card:hover .fpst-video__title { color: var(--wp--preset--color--gold); }
.fpst-news .fpst-video__more {
	display: inline-block;
	margin-top: 1.4rem;
	font-family: var(--fpst-ui);
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.fpst-news .fpst-video__more:hover { color: var(--wp--preset--color--gold); }
/* Il player dentro l'articolo deve essere responsive. */
.fpst-news .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Logo nel footer (al posto del titolo testuale). */
.fpst-news .fpst-footer__logo { display: inline-block; margin-bottom: 0.6rem; }
.fpst-news .fpst-footer__logo-img {
	display: block;
	width: auto;
	max-width: 230px;
	height: auto;
}
@media (max-width: 781px) {
	.fpst-news .fpst-footer__logo-img { max-width: 190px; }
}

/* Footer, colonna del marchio: logo e payoff centrati fra loro. */
.fpst-news .fpst-footer__cols > .wp-block-column:first-child { text-align: center; }
.fpst-news .fpst-footer__logo { display: block; }
.fpst-news .fpst-footer__logo-img { margin-inline: auto; }
/* Il payoff ha `max-width: 34ch` e resta ancorato a sinistra: senza margini
   automatici il testo si centrerebbe dentro quel riquadro stretto, non sotto
   il logo. */
.fpst-news .fpst-footer__tagline { text-align: center; margin-inline: auto; }
.fpst-news .fpst-footer__social { justify-content: center; }

/* Topbar su mobile: data e meteo centrati, come la fascia di allerta sotto. */
@media (max-width: 600px) {
	.fpst-news .fpst-topbar__in { justify-content: center; }
	.fpst-news .fpst-topbar__left { justify-content: center; }
}

/* ══ MOBILE: hamburger a destra, logo al centro ═══════════════════════════════
   Il toggle scuro dell'header (.fpst-header__actions) su mobile finiva nella
   cella sinistra della barra — condivisa con i social, che ci sono davvero
   (non erano ancora stati aggiunti quando questa regola è nata): si
   sovrapponevano, segnalato da Francesco con uno screenshot. Il toggle mobile
   ora vive nel piede del menu a tutto schermo (.fpst-darktoggle--overlay, vedi
   sotto): qui basta nascondere la copia dell'header e lasciare il posto
   assoluto solo all'hamburger. */
@media (max-width: 781px) {
	/* :not(--overlay) e' necessario: .fpst-overlay (col toggle spostato nel
	   piede del menu) e' annidato dentro .fpst-header__bar > .fpst-header__actions
	   nel markup — un selettore generico .fpst-header__bar .fpst-darktoggle
	   nascondeva anche la copia nel menu, non solo quella dell'header. */
	.fpst-news .fpst-header__bar .fpst-darktoggle:not(.fpst-darktoggle--overlay) { display: none; }

	/* Hamburger a destra, allineato verticalmente al logo — nella griglia
	   finiva 12px più in basso. */
	.fpst-news .fpst-header__bar { position: relative; }
	.fpst-news .fpst-header__bar .fpst-burger {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		margin: 0;
	}
}

/* Variante del toggle nel piede del menu mobile: non più solo un\'icona
   circolare (adatta a stare accanto ad altre icone nell'header), ma una
   pillola con etichetta — è un comando del menu, deve leggersi come tale. */
.fpst-darktoggle__label { display: none; }
.fpst-darktoggle--overlay {
	width: auto;
	height: auto;
	padding: 0.55rem 1.3rem;
	gap: 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 0.9rem;
}
.fpst-darktoggle--overlay:hover { background: rgba(255, 255, 255, 0.2); }
.fpst-darktoggle--overlay .fpst-darktoggle__sun,
.fpst-darktoggle--overlay .fpst-darktoggle__moon { font-size: 14px; }
.fpst-darktoggle--overlay .fpst-darktoggle__label { display: inline; }

/* ══ MENU A TUTTO SCHERMO (overlay) — direttorio a tile, non più una lista ════
   Il blocco core/navigation qui non renderizza più <ul><li>: functions.php
   (filtro render_block_core/navigation su className fpst-overlay__menu)
   sostituisce il markup con questa griglia raggruppata — segnalato da
   Francesco come "lista confusionaria, non un posto dove navigare". Le
   vecchie regole per <li>/sottomenu restano SOLO nella parte non prefissata
   .fpst-news (righe ~254+ e ~1213): servono ancora agli altri siti del
   cluster che condividono questo tema e non hanno questo filtro attivo. */
.fpst-news .fpst-overlaymenu { text-align: left; width: 100%; max-width: 420px; margin: 0 auto; }

.fpst-news .fpst-overlaymenu__featured {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	padding: 0.9rem 1.1rem;
	margin: 0 0 1.3rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent);
	background: linear-gradient(120deg, color-mix(in srgb, var(--wp--preset--color--gold) 18%, transparent), transparent);
	text-decoration: none;
	color: #fff;
}
.fpst-news .fpst-overlaymenu__featured-t {
	display: block;
	font-family: var(--fpst-serif, serif);
	font-weight: 700;
	font-size: 1.05rem;
}
.fpst-news .fpst-overlaymenu__featured-n {
	display: block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.74rem;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 0.15rem;
}
.fpst-news .fpst-overlaymenu__arrow { color: var(--wp--preset--color--gold); font-size: 1.15rem; flex-shrink: 0; }

.fpst-news .fpst-overlaymenu__label {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 1.3rem 0 0.6rem;
}
.fpst-news .fpst-overlaymenu__label:first-of-type { margin-top: 0; }

.fpst-news .fpst-overlaymenu__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem;
}
/* Accento a sinistra colorato per categoria (var(--fpst-c-*), stessa palette
   delle linguette di sezione in home) — le tile erano tutte identiche, stesso
   sfondo traslucido: "indistinguibili fra loro", segnalato da Francesco. Il
   colore di default (var non impostata dall'inline style, caso improbabile)
   resta lo stesso grigio traslucido di prima: nessuna tile senza accento resta
   comunque leggibile. */
.fpst-news .fpst-overlaymenu__tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
	min-height: 60px;
	padding: 0.7rem 0.8rem 0.7rem 0.7rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-left: 3px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.fpst-news .fpst-overlaymenu__tile:hover,
.fpst-news .fpst-overlaymenu__tile:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}
.fpst-news .fpst-overlaymenu__tile--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.fpst-news .fpst-overlaymenu__tile-t {
	font-family: var(--fpst-serif, serif);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.25;
	color: #fff;
}

/* Entrata scaglionata: il menu "si apre" invece di apparire secco. */
@media (prefers-reduced-motion: no-preference) {
	.fpst-news .fpst-overlaymenu__featured,
	.fpst-news .fpst-overlaymenu__label,
	.fpst-news .fpst-overlaymenu__grid {
		opacity: 0;
		transform: translateY(10px);
	}
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__featured,
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__label,
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__grid {
		animation: fpst-menu-in 0.42s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
	}
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__featured { animation-delay: 0.05s; }
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__label:nth-of-type(1) { animation-delay: 0.1s; }
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__grid:nth-of-type(1) { animation-delay: 0.14s; }
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__label:nth-of-type(2) { animation-delay: 0.18s; }
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__grid:nth-of-type(2) { animation-delay: 0.22s; }
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__label:nth-of-type(3) { animation-delay: 0.26s; }
	.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlaymenu__grid:nth-of-type(3) { animation-delay: 0.3s; }
}
@keyframes fpst-menu-in {
	to { opacity: 1; transform: none; }
}

/* Piede del menu: richiamo alle segnalazioni + payoff. */
.fpst-news .fpst-overlay__foot {
	margin-top: 2.2rem;
	text-align: center;
	animation: fpst-menu-in 0.5s cubic-bezier(0.2, 0.72, 0.2, 1) 0.48s both;
}
.fpst-news .fpst-overlay__cta {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: #111;
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.fpst-news .fpst-overlay__cta:hover { background: #fff; color: var(--wp--preset--color--accent-text); }
.fpst-news .fpst-overlay__tag {
	margin: 1.1rem 0 0;
	font-family: var(--fpst-ui);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

/* ══ PAYOFF sopra la prima notizia ════════════════════════════════════════════ */
.fpst-news .fpst-payoff {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 3vw, 2rem);
	margin: clamp(1.4rem, 3vw, 2.2rem) 0;
}
.fpst-news .fpst-payoff::before,
.fpst-news .fpst-payoff::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp--preset--color--line);
}
.fpst-news .fpst-payoff__text {
	flex: 0 1 auto;
	margin: 0;
	font-family: var(--fpst-serif);
	font-size: clamp(1.2rem, 2.3vw, 1.75rem);
	font-style: italic;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--ink);
}
.fpst-news .fpst-payoff__text strong {
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
}
@media (max-width: 600px) {
	.fpst-news .fpst-payoff { gap: 0.7rem; margin: 1.1rem 0; }
	.fpst-news .fpst-payoff__text { font-size: 1.35rem; }
}

/* L'overlay e' un flex CENTRATO: aggiungendo il piede (CTA + payoff) i due
   figli — menu e piede — si affiancavano. In colonna, e con un po' d'aria. */
.fpst-news .fpst-overlay {
	/* Sfondo con profondità invece del blu accent piatto: era un unico
	   colore pieno a piena pagina (rgb(0,0,254)), su cui le tile — già un
	   tono di grigio traslucido molto tenue — si perdevano quasi del tutto.
	   Un gradiente sottile (più chiaro in alto, più scuro in basso) dà
	   rilievo allo sfondo stesso, così le tile hanno più contrasto contro
	   cui staccare. Scoped a .fpst-news: la regola base (riga ~232) resta
	   piatta per gli altri siti del tema, mai testati con un gradiente qui. */
	background: linear-gradient(165deg,
		color-mix(in srgb, var(--wp--preset--color--accent) 88%, white) 0%,
		var(--wp--preset--color--accent) 40%,
		color-mix(in srgb, var(--wp--preset--color--accent) 65%, black) 100%);
	flex-direction: column;
	/* NON justify-content:center: era pensato per un menu breve che stava
	   nello schermo. Il direttorio a tile è più alto del viewport su mobile
	   (ricerca + card Eventi + 3 sezioni + piede supera facilmente gli 812px
	   di un iPhone) — centrare contenuto che sborda spinge la METÀ SUPERIORE
	   sopra y:0, fuori vista e non raggiungibile scorrendo verso il basso
	   (bisognerebbe scorrere verso l'alto, innaturale e spesso bloccato dai
	   browser mobili). Segnalato da Francesco: "taglia tutta la prima parte".
	   flex-start parte sempre dall'alto: se il contenuto è più corto del
	   viewport resta semplicemente più in alto, mai tagliato. */
	justify-content: flex-start;
	gap: 0.5rem;
	/* Aria in cima: la ricerca finiva sotto il pulsante X di chiusura. */
	padding: 5.5rem 1.5rem 2rem;
}
.fpst-news .fpst-overlay__foot { margin-top: 1.6rem; }

/* Payoff su due righe + aria sotto, cosi' la foto dell'articolo successivo non
   sbuca sopra la piega. Lo spazio e' in vh (non in px) per adattarsi alle varie
   altezze di schermo. */
.fpst-news .fpst-payoff__text br { display: inline; }
.fpst-news .fpst-payoff { margin-bottom: clamp(2rem, 8vh, 5rem); }
@media (max-width: 781px) {
	/* Margine di sicurezza: sui telefoni reali (barre del browser, altezze
	   diverse) un lembo della foto riusciva ancora a sbucare. Questo spinge giu'
	   la foto senza spostare il payoff. */
	.fpst-news .fpst-payoff { margin-bottom: 4.5rem; }
}

/* ── Menu: X di chiusura dedicata ──────────────────────────────────────────── */
/* Prima la X era l'hamburger dell'header (z-index 10001 sopra l'overlay):
   bersaglio di 30×30px con right:0, flush al bordo e a ~5px dalla ricerca —
   sotto i 44×44px delle linee guida per il tocco (WCAG 2.5.5), difficile da
   centrare col dito su schermi piccoli, segnalato da un dispositivo reale.
   Ora è un label dedicato dentro il pannello (stessa checkbox via `for`):
   44×44 di area cliccabile e 16px di stacco dal bordo. `position: fixed` e
   non `absolute` perché l'overlay scorre (overflow-y: auto) e un figlio
   assoluto scorrerebbe via col contenuto; l'overlay è esso stesso fisso a
   inset:0, quindi i 16px cadono dal bordo del pannello in ogni caso (con o
   senza il containing block creato dal backdrop-filter). */
.fpst-news .fpst-overlay__close { display: none; }
.fpst-news .fpst-nav-toggle:checked ~ .fpst-overlay .fpst-overlay__close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	color: #fff;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
}
/* A menu aperto l'hamburger resterebbe sopra l'overlay (z-index 10001):
   nascosto, altrimenti sullo stesso angolo comparirebbero DUE X (la sua e
   quella dedicata). Vale solo nello stato :checked — chiuso, l'header e il
   suo hamburger sono esattamente come prima. */
.fpst-news .fpst-nav-toggle:checked ~ .fpst-burger { display: none; }
/* La checkbox resta l'elemento attivabile da tastiera (il label è
   aria-hidden): il contorno di focus, che segnava l'hamburger, segnala ora
   la X dedicata quando il menu è aperto. */
.fpst-news .fpst-nav-toggle:focus-visible ~ .fpst-overlay .fpst-overlay__close {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

/* ── Menu: ricerca in cima ─────────────────────────────────────────────────── */
.fpst-news .fpst-overlay__search {
	display: flex;
	align-items: stretch;
	width: min(340px, 100%);
	margin: 0 auto 1.8rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	animation: fpst-menu-in 0.4s cubic-bezier(0.2, 0.72, 0.2, 1) 0.02s both;
}
.fpst-news .fpst-overlay__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.7rem 1.1rem;
	color: #fff;
	font-family: var(--fpst-ui);
	font-size: 0.95rem;
}
.fpst-news .fpst-overlay__search input::placeholder { color: rgba(255, 255, 255, 0.65); }
.fpst-news .fpst-overlay__search input:focus { outline: none; }
.fpst-news .fpst-overlay__search button {
	flex: 0 0 auto;
	border: 0;
	padding: 0 1.1rem;
	background: var(--wp--preset--color--gold);
	color: #111;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.fpst-news .fpst-overlay__search button:hover { background: #fff; }


/* Separatore leggero prima del piede. */
.fpst-news .fpst-overlay__foot {
	position: relative;
	padding-top: 1.8rem;
}
.fpst-news .fpst-overlay__foot::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
}

/* L'overlay e' un flex column con altezza fissa: quando il contenuto (ricerca +
   voci + piede) supera lo schermo, i flex item vengono COMPRESSI — la ricerca
   finiva schiacciata ad altezza 0. Vietato comprimere: se non ci sta, si scorre
   (l'overlay ha gia' overflow-y: auto). */
.fpst-news .fpst-overlay > * { flex-shrink: 0; }
.fpst-news .fpst-overlay__search { flex: 0 0 auto; }
/* (il padding-top mobile è consolidato più sotto, un'unica regola — c'erano
   due dichiarazioni per la stessa proprietà allo stesso breakpoint, quella
   scritta dopo vinceva silenziosamente e lasciava troppo poco spazio: la X
   di chiusura (fissa sull'header, fuori da qui) finiva sopra la ricerca,
   segnalato da Francesco). */

/* Il sottomenu "Viterbo" (WordPress core, riquadro bianco di default) non
   esiste più in questo contesto: il direttorio a tile sopra rende le 5
   sottovoci come tile piatte nella griglia "Cronaca", nessun accordion. */

/* ══ BARRA FISSA IN FONDO (solo mobile) ══════════════════════════════════════ */
.fpst-tabbar { display: none; }
@media (max-width: 781px) {
	.fpst-news .fpst-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 140;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		background: #14161a;
		border-top: 2px solid var(--wp--preset--color--accent);
		/* Safe-area: sui telefoni con barra home la riga finirebbe sotto di essa. */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.fpst-news .fpst-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		padding: 0.5rem 0.25rem 0.55rem;
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		font-family: var(--fpst-ui);
	}
	.fpst-news .fpst-tabbar__icon { font-size: 1.05rem; line-height: 1; }
	.fpst-news .fpst-tabbar__label {
		font-size: 0.66rem;
		font-weight: 700;
		letter-spacing: 0.02em;
	}
	.fpst-news .fpst-tabbar__item:active,
	.fpst-news .fpst-tabbar__item:hover { color: var(--wp--preset--color--gold); }
	/* Il sondaggio e' l'invito a partecipare: si distingue. */
	.fpst-news .fpst-tabbar__item--poll { color: var(--wp--preset--color--gold); }

	/* Il pallino "riapri preferenze cookie" di FP Privacy e' fixed in basso e
	   finirebbe SOPRA la barra dei tasti: lo solleviamo sopra la barra (~64px)
	   piu' un margine, rispettando la safe-area del telefono. */
	.fpst-news .fp-privacy-reopen {
		bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Spazio in fondo alla pagina: la barra copre l'ultimo pezzo di contenuto. */
	.fpst-news .wp-site-blocks { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
	/* Il pulsante "torna su" non deve finire dietro la barra. */
	.fpst-news .fpst-totop { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Pagina Sondaggi (in corso + storico) ────────────────────────────────────── */
.fpst-news .fpst-polls__h {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--wp--preset--color--accent);
}
.fpst-news .fpst-polls__h::before {
	content: "";
	width: 8px;
	height: 1em;
	border-radius: 1px;
	background: var(--wp--preset--color--gold);
	flex-shrink: 0;
}
.fpst-news .fpst-polls__now { margin-bottom: 3rem; }
.fpst-news .fpst-polls__note {
	margin: 0 0 1.6rem;
	font-family: var(--fpst-ui);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.fpst-news .fpst-polls__none {
	padding: 1.2rem 1.3rem;
	border-left: 4px solid var(--wp--preset--color--line);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 4%, #fff);
	font-family: var(--fpst-ui);
}
/* Sondaggio passato */
.fpst-news .fpst-pastpoll {
	padding: 1.3rem 1.4rem;
	margin-bottom: 1.2rem;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--gold);
	border-radius: 4px;
	background: #fff;
}
.fpst-news .fpst-pastpoll__more {
	display: block;
	width: fit-content;
	margin: 1rem 0 0 auto;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
	text-decoration: none;
}
.fpst-news .fpst-pastpoll__more:hover { text-decoration: underline; }
.fpst-news .fpst-pastpoll__date {
	margin: 0 0 0.35rem;
	font-family: var(--fpst-ui);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.fpst-news .fpst-pastpoll__q {
	margin: 0 0 1rem;
	font-family: var(--fpst-serif);
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.3;
}
.fpst-news .fpst-pastpoll__list { margin: 0; padding: 0; list-style: none; }
.fpst-news .fpst-pastpoll__opt { margin: 0 0 0.7rem; list-style: none; }
.fpst-news .fpst-pastpoll__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
}
.fpst-news .fpst-pastpoll__pct { flex: 0 0 auto; font-weight: 700; color: var(--wp--preset--color--muted); }
.fpst-news .fpst-pastpoll__bar {
	display: block;
	height: 7px;
	margin-top: 0.3rem;
	border-radius: 5px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, #fff);
	overflow: hidden;
}
.fpst-news .fpst-pastpoll__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 40%, #fff);
}
/* L'opzione vincente si legge a colpo d'occhio. */
.fpst-news .fpst-pastpoll__opt.is-top .fpst-pastpoll__fill { background: var(--wp--preset--color--accent); }
.fpst-news .fpst-pastpoll__opt.is-top .fpst-pastpoll__label { font-weight: 700; }
.fpst-news .fpst-pastpoll__opt.is-top .fpst-pastpoll__pct { color: var(--wp--preset--color--accent-text); }
.fpst-news .fpst-pastpoll__total {
	margin: 0.9rem 0 0;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	text-align: right;
}
:root[data-theme="dark"] .fpst-news .fpst-pastpoll { background: #1e2127; border-color: #2c3038; }

/* Due strade nel riquadro "Partecipa": segnalare un fatto o proporre un tema. */
.fpst-news .fpst-tipcta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}
.fpst-news .fpst-tipcta__btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.fpst-news .fpst-tipcta__btn--ghost:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	box-shadow: none;
}

/* ── Box newsletter ──────────────────────────────────────────────────────────── */
.fpst-news .fpst-nl {
	box-sizing: border-box;
	max-width: 100%;
	margin-bottom: var(--wp--preset--spacing--50);
	padding: 1.2rem 1.3rem 1.35rem;
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
	color: #fff;
}
.fpst-news .fpst-nl__kicker {
	margin: 0 0 0.4rem;
	font-family: var(--fpst-ui);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.fpst-news .fpst-nl__title {
	margin: 0 0 0.5rem;
	font-family: var(--fpst-serif);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}
.fpst-news .fpst-nl__text {
	margin: 0 0 1rem;
	font-family: var(--fpst-ui);
	font-size: 0.86rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
}
/* Il form del plugin: reso coerente col box (campi chiari su fondo accent). */
.fpst-news .fpst-nl input[type="email"],
.fpst-news .fpst-nl input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.9rem;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
}
.fpst-news .fpst-nl button,
.fpst-news .fpst-nl input[type="submit"] {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.6rem;
	padding: 0.65rem 1rem;
	border: 0;
	border-radius: 7px; /* standard pulsanti-azione, era 4px */
	background: var(--wp--preset--color--gold);
	color: #111;
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
}
.fpst-news .fpst-nl button:hover { background: #fff; }
.fpst-news .fpst-nl label,
.fpst-news .fpst-nl a { color: rgba(255, 255, 255, 0.9); font-size: 0.8rem; }
.fpst-news .fpst-nl a { text-decoration: underline; }

/* Il titolo del box newsletter ereditava il colore scuro dei titoli del tema:
   su fondo accent risultava illeggibile. */
.fpst-news .fpst-nl .fpst-nl__title,
.fpst-news .fpst-nl .fpmail-subscribe__title { color: #fff !important; }
.fpst-news .fpst-nl .fpmail-subscribe__label { color: rgba(255, 255, 255, 0.9); font-weight: 700; }
/* Riga del consenso: spunta e testo allineati. */
.fpst-news .fpst-nl .fpmail-subscribe__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.4;
}
.fpst-news .fpst-nl .fpmail-subscribe__consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.15em;
	accent-color: var(--wp--preset--color--gold);
}

/* Menu a tutto schermo su mobile: il contenuto finiva SOTTO la barra fissa in
   fondo (il pulsante "Segnalaci una notizia" era tagliato). Spaziature ridotte
   e spazio in coda pari all'altezza della barra. */
@media (max-width: 781px) {
	.fpst-news .fpst-overlay {
		/* La X di chiusura dedicata (.fpst-overlay__close) arriva a 60px dal
		   top (16px di stacco + 44px di area tattile): 7rem (112px) la lascia
		   a 52px dalla ricerca. Il valore nasceva per l'hamburger dell'header
		   (fino a ~92px dal top, misurato dal vivo, con sovrapposizioni a
		   3.5rem) e resta il più largo dei due. */
		padding-top: 7rem;
		padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
		gap: 0;
	}
	.fpst-news .fpst-overlay__search { margin-bottom: 1.1rem; }
	.fpst-news .fpst-overlay__foot { margin-top: 1rem; padding-top: 1.1rem; }
	.fpst-news .fpst-overlay__cta,
	.fpst-news .fpst-darktoggle--overlay {
		padding: 0.55rem 1.3rem;
		font-size: 0.88rem;
		/* Stesso padding e font-size non bastavano: restavano di altezza
		   diversa (40.8px contro 33.7px, misurato dal vivo) perché il CTA
		   (un <a>, content-box, line-height ereditato dal body) e il toggle
		   (un <button>, border-box, line-height:1 dalla regola base) calcolano
		   il box in due modi diversi. Segnalato da Francesco: stando vicini
		   nel piede del menu, il salto di dimensione si vedeva subito. */
		box-sizing: border-box;
		line-height: 1.2;
	}
	.fpst-news .fpst-overlay__cta {
		/* Il toggle ha un bordo di 1px che conta nel border-box; il CTA no —
		   un bordo trasparente della stessa larghezza pareggia l'altezza
		   senza aggiungere un contorno visibile sul pulsante dorato. */
		border: 1px solid transparent;
	}
	.fpst-news .fpst-overlay__tag { margin-top: 0.7rem; font-size: 0.72rem; }
}

/* Allineamenti nel box newsletter: etichetta attaccata al campo, spunta e testo
   del consenso sulla stessa riga. */
.fpst-news .fpst-nl .fpmail-subscribe__row { margin-bottom: 0.9rem; }
.fpst-news .fpst-nl .fpmail-subscribe__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8rem;
}
.fpst-news .fpst-nl .fpmail-subscribe__consent { margin-bottom: 1rem; }
.fpst-news .fpst-nl .fpmail-subscribe__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
}
.fpst-news .fpst-nl .fpmail-subscribe__consent span { flex: 1 1 auto; line-height: 1.4; }
.fpst-news .fpst-nl .fpmail-subscribe__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0.12em 0 0;
}

/* I due pulsanti del riquadro "Partecipa" della stessa larghezza (griglia a
   colonne uguali invece che a larghezza-contenuto). */
.fpst-news .fpst-tipcta__btns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.7rem;
}
.fpst-news .fpst-tipcta__btn {
	text-align: center;
	box-sizing: border-box;
	width: 100%;
}

/* Resta un <br> iniettato da WordPress dentro la riga del consenso: in un
   contenitore flex diventa un ELEMENTO a sé e apre un vuoto tra spunta e testo. */
.fpst-news .fpst-nl br { display: none; }

/* Barra di avanzamento lettura: un filo sottile con una traccia di sfondo
   leggera. Ridotta da 8px a 4px (2026-07-18): 8px risultava troppo spessa e
   invadente, soprattutto su mobile dove sta fissa in cima. */
.fpst-news .fpst-progress {
	height: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}
.fpst-news .fpst-progress__fill {
	/* Meno rumore visivo (2026-07-18): prima gradiente accent→oro con alone
	   dorato luminoso. Ora tinta accent piena e sobria, senza glow. */
	background: var(--wp--preset--color--accent);
	box-shadow: none;
}
:root[data-theme="dark"] .fpst-news .fpst-progress {
	background: rgba(255, 255, 255, 0.12);
}

/* ── Mappa interattiva ───────────────────────────────────────────────────────── */
.fpst-news .fpst-map { margin: 2rem 0; }
.fpst-news .fpst-map__title {
	margin: 0 0 0.6rem;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
}
.fpst-news .fpst-map__canvas {
	height: 420px;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--line);
	background: #eef0f2;
}
@media (max-width: 600px) {
	.fpst-news .fpst-map__canvas { height: 320px; }
}
/* Elenco testuale: resta leggibile anche senza mappa. */
.fpst-news .fpst-map__list {
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.4rem 1.2rem;
}
.fpst-news .fpst-map__list li {
	margin: 0;
	padding-left: 1rem;
	position: relative;
	list-style: none;
	font-family: var(--fpst-ui);
	font-size: 0.88rem;
	line-height: 1.45;
}
.fpst-news .fpst-map__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
/* Leaflet: i popup coerenti col resto. */
.fpst-news .leaflet-popup-content { font-family: var(--fpst-ui); font-size: 0.9rem; }

/* Icone SVG della barra in fondo (prima erano caratteri unicode, con pesi e
   allineamenti diversi tra loro e da un dispositivo all'altro). */
@media (max-width: 781px) {
	.fpst-news .fpst-tabbar__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		font-size: 0;
	}
	.fpst-news .fpst-tabbar__icon svg {
		width: 22px;
		height: 22px;
		display: block;
	}
	.fpst-news .fpst-tabbar__item { gap: 0.25rem; padding-top: 0.55rem; }
	.fpst-news .fpst-tabbar__label { font-size: 0.68rem; }
	/* Pagina corrente: la voce si accende. */
	.fpst-news .fpst-tabbar__item[aria-current="page"] { color: var(--wp--preset--color--gold); }
}

/* ── Mappa: contenimento e marker su misura ──────────────────────────────────
   Leaflet usa z-index molto alti (pannelli 400, controlli 800, popup 700): senza
   un contesto di impilamento proprio, la mappa passava SOPRA l'header sticky.
   `isolation: isolate` + z-index 0 la confinano dentro il proprio riquadro. */
.fpst-news .fpst-map {
	position: relative;
	z-index: 0;
	isolation: isolate;
}
.fpst-news .fpst-map__canvas { z-index: 0; }

/* Marker numerati, colori del brand (al posto dei segnaposti azzurri di serie). */
.fpst-news .fpst-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--fpst-ui);
	font-size: 0.82rem;
	font-weight: 800;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease, background 0.15s ease;
}
.fpst-news .fpst-pin.is-active,
.fpst-news .leaflet-marker-icon:hover .fpst-pin {
	background: var(--wp--preset--color--gold);
	color: #111;
	transform: scale(1.22);
}

/* Scheda del marker */
.fpst-news .fpst-pop .leaflet-popup-content-wrapper { border-radius: 5px; }
.fpst-news .fpst-pop .leaflet-popup-content { margin: 0.8rem 0.95rem; font-family: var(--fpst-ui); }
.fpst-news .fpst-pop__name {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--fpst-serif);
	font-size: 1rem;
}
.fpst-news .fpst-pop__note { display: block; font-size: 0.85rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
.fpst-news .fpst-pop__link {
	display: inline-block;
	margin-top: 0.55rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
	text-decoration: none;
}

/* Elenco = legenda cliccabile della mappa */
.fpst-news .fpst-map__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.35rem 0.45rem;
	border-radius: 4px;
	transition: background 0.15s ease;
}
.fpst-news .fpst-map__list li::before { content: none; }
.fpst-news .fpst-map__list li.is-clickable { cursor: pointer; }
.fpst-news .fpst-map__list li.is-clickable:hover,
.fpst-news .fpst-map__list li.is-active {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}
.fpst-news .fpst-map__list li:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
.fpst-news .fpst-map__n {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 0.05em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
}
.fpst-news .fpst-map__list li.is-active .fpst-map__n {
	background: var(--wp--preset--color--gold);
	color: #111;
}
.fpst-news .fpst-map__txt { flex: 1 1 auto; }


/* ============================================================
   [fpst_dossier] — riquadro di servizio per un evento in corso
   ============================================================
   Deliberatamente diverso dalle sezioni per categoria e dalla fascia
   Approfondimenti: quelle sono raccolte di ARTICOLI (foto, autore, riassunto),
   questo e' un pannello di INFORMAZIONI in cui il titolo e' solo il link dove
   leggere per esteso. Da qui le tre differenze volute:
   · nessuna immagine — la foto in evidenza qui non aggiunge informazione;
   · riquadro contenuto con margini ai lati, non una fascia da bordo a bordo;
   · voci a due colonne separate da filetti, come un sommario, non come card. */
.fpst-dossier {
	/* Stessa regola della fascia Approfondimenti subito sotto (vedi .fpst-appr):
	   a tutta larghezza fino a 1400px, poi rientra alla colonna del contenuto
	   PIU' il proprio padding. Prima qui c'era un inset fisso e indipendente
	   dalla soglia: sotto i 1400px il pannello Santa Rosa risultava piu' stretto
	   della fascia blu appena sotto, le due bande impaginate una sull'altra non
	   allineavano piu' i bordi (osservato da Francesco l'1/09/2026 — misurato a
	   1280px: dossier fermo a 1180px, appr a 1265px, 85px di scarto). */
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--50) 0;
	/* Minimo orizzontale a 24px come la colonna: sotto ~800px i clamp diversi
	   disallineavano le fasce (screenshot mobile di Francesco, 2/09/2026). */
	padding: clamp(22px, 3vw, 34px) clamp(24px, 3vw, 34px) clamp(18px, 2.4vw, 26px);
	/* 4px, non 14px: e' lo stesso raggio della fascia Approfondimenti e della
	   fascia sondaggi, e questo pannello ci sta esattamente sopra nel flusso
	   della home. 14px lo faceva sembrare di una famiglia diversa — troppo
	   arrotondato accanto a un vicino squadrato (segnalato da Francesco
	   l'1/09/2026, confronto diretto in pagina). */
	border-radius: 4px;
	/* Nero inchiostro, non blu. Tre tentativi, per arrivarci:
	   · `#0000fe` puro (l'accent) steso su cinquecento pixel vibra e stanca;
	   · il blu petrolio `#01579b` messo sopra la fascia Approfondimenti, che e'
	     blu elettrico, sembrava sbiadito — due blu diversi a contatto leggono
	     come un errore, non come due sezioni.
	   Il primo nero provato, `#16181c`, toglieva il confronto ma pesava troppo:
	   un buco nella pagina («forse questo nero così è troppo»). Ora e' l'ink del
	   tema, cioe' lo stesso scuro che il sito usa gia' per il testo: scuro ma non
	   assoluto, e non un colore inventato per l'occasione. L'oro delle etichette
	   canta lo stesso. */
	background: var(--wp--preset--color--ink, #2b2f33);
	color: #fff;
	position: relative;
	overflow: hidden;
}
@media (min-width: 1400px) {
	.fpst-dossier {
		max-width: calc(
			var(--wp--style--global--content-size, 1180px) + 2 * clamp(20px, 3vw, 34px)
		);
		margin-inline: auto;
	}
}
/* Sfondo fotografico per il pannello Santa Rosa 2026 (richiesto da Francesco
   l'1/09/2026): la Macchina in piazza durante il Trasporto, invece del piatto
   nero inchiostro. Non e' background-image diretta sull'aside: serve un
   pseudo-elemento sotto perche' la foto va scurita per il contrasto del testo
   bianco sopra, e un filtro va applicato a un livello, non a tutto il pannello
   (altrimenti scurirebbe anche il testo). Il gradiente e' piu' scuro in alto a
   sinistra, dove sta il titolo, e piu' chiaro verso il basso a destra, dove la
   foto — gia' scura di suo, e' notturna — regge di piu' da sola. */
.fpst-dossier--santa-rosa-2026::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(20, 18, 14, 0.86) 0%, rgba(20, 18, 14, 0.72) 45%, rgba(20, 18, 14, 0.55) 100%),
		url('../img/santa-rosa-2026-dossier-bg.jpg') center 30% / cover no-repeat;
	z-index: 0;
}
.fpst-dossier--santa-rosa-2026 > * { position: relative; z-index: 1; }
.fpst-dossier__testi { flex: 1 1 18rem; min-width: 0; }
/* La data in alto a destra, all'estremo opposto del titolo: e' il primo dato
   che il lettore cerca. Sotto il sottotitolo finiva appiccicata al filetto
   dell'elenco. */
.fpst-dossier__data {
	margin: 0.25rem 0 0;
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.42rem 0.8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: #1b1b1b;
	font-family: var(--fpst-ui);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.fpst-dossier__head {
	/* Due poli sulla stessa riga: a sinistra chi parla (titolo e sottotitolo), a
	   destra quando (la data). Su schermo stretto la data va a capo sotto, che e'
	   comunque l'ordine di lettura giusto. */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.6rem 1.5rem;
	margin-bottom: 1.25rem;
	padding-left: 0.9rem;
	/* Segno verticale oro: è lo stesso stilema delle intestazioni di sezione, che
	   hanno il loro filetto blu. Lega il riquadro al resto della pagina invece di
	   farlo sembrare un blocco importato. */
	border-left: 5px solid var(--wp--preset--color--gold);
}
/* La specificita' e' voluta: lo shortcode vive dentro il contenuto della pagina
   home, dove `.fpst-news .wp-block-post-content h2` impone il colore --ink e
   vincerebbe su una classe sola. Il titolo usciva quasi nero sul blu. */
.fpst-news .wp-block-post-content h2.fpst-dossier__title,
.fpst-dossier__title {
	margin: 0;
	/* Stesso trattamento delle intestazioni di sezione riviste in 0.96.0: serif
	   della testata, tondo con la sola iniziale maiuscola. Il maiuscoletto in
	   Inter faceva sembrare il riquadro un avviso di sistema invece di una
	   sezione del giornale. */
	font-family: var(--fpst-serif);
	font-weight: 700;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-transform: none;
	color: #fff;
}
.fpst-dossier__sub {
	margin: 0.45rem 0 0;
	max-width: 70ch;
	font-family: var(--fpst-ui);
	font-size: 0.92rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}
.fpst-dossier__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(20px, 3vw, 42px);
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}
/* Il padding: 0 era sovrascritto dalla regola generica sugli ul dei contenuti;
   il margine negativo era doppio rispetto a quello del link. Segnalato da
   Francesco il 2/09/2026: testo a 34px contro i 24px del resto. */
.fpst-news .wp-block-post-content .fpst-dossier__list { padding-left: 0; }
/* Prima voce a tutta larghezza e corpo maggiore: e' la porta d'ingresso al
   dossier, le altre sono di servizio. */
.fpst-dossier__item--primo { grid-column: 1 / -1; }
.fpst-dossier__item--primo .fpst-dossier__testo { font-size: 1.28rem; line-height: 1.25; }
.fpst-dossier__item--primo .fpst-dossier__link { padding-block: 1rem; }
@media (max-width: 760px) { .fpst-dossier__list { grid-template-columns: 1fr; } }
.fpst-dossier__item { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.fpst-dossier__link {
	display: block;
	position: relative;
	padding: 0.8rem 1.6rem 0.8rem 0.7rem;
	margin-inline: -0.7rem;
	border-radius: 4px;
	text-decoration: none;
	color: #fff;
	transition: background-color .15s ease;
}
/* 🚨 WordPress emette una regola globale
   `:root :where(a:where(:not(.wp-element-button)):hover){color:var(--wp--preset--color--gold)}`
   che vale per QUALUNQUE link del sito. Sui fondi chiari va bene; sul blu di
   questo riquadro il titolo diventava una riga senape illeggibile (segnalato da
   Francesco l'1/09/2026). Qui il colore si riafferma e l'evidenza si dà con lo
   sfondo della riga, non cambiando il colore del testo. La stessa regola vale
   per le card della fascia Approfondimenti, che sono anch'esse link su blu. */
.fpst-news .wp-block-post-content .fpst-dossier__link:hover,
.fpst-news .wp-block-post-content .fpst-dossier__link:hover .fpst-dossier__testo,
.fpst-news .wp-block-post-content .fpst-dossier__link:focus-visible,
.fpst-news .wp-block-post-content .fpst-dossier__link:focus-visible .fpst-dossier__testo { color: #fff; }
.fpst-dossier__link:hover,
.fpst-dossier__link:focus-visible { background: rgba(255, 255, 255, 0.10); }
/* La freccia compare solo al passaggio: dice "questo porta all'articolo" senza
   ripetere una decorazione su ogni riga. */
.fpst-dossier__link::after {
	content: "›";
	position: absolute;
	right: 0.55rem;
	top: 50%;
	transform: translate(-4px, -50%);
	opacity: 0;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	transition: opacity .15s ease, transform .15s ease;
}
.fpst-dossier__link:hover::after,
.fpst-dossier__link:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.fpst-news .wp-block-post-content .fpst-appr__card:hover,
.fpst-news .wp-block-post-content .fpst-appr__card:hover .fpst-appr__title { color: #fff; }
.fpst-dossier__kicker {
	display: block;
	margin-bottom: 0.18rem;
	font-family: var(--fpst-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	/* Oro sul blu: e' la stessa coppia della testata, e distingue l'etichetta
	   dal titolo senza introdurre un terzo colore. */
	color: var(--wp--preset--color--gold);
}
.fpst-dossier__testo {
	display: block;
	font-family: var(--fpst-serif);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.3;
}
.fpst-dossier__more {
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--wp--preset--color--gold);
}
.fpst-dossier__more:hover { text-decoration: underline; }
/* Allineato a destra, sulla verticale dell'ultimo filetto: a sinistra restava
   isolato sotto la colonna, come una riga dimenticata. La regola sta qui e non
   dentro il blocco sopra perche' li' `display:inline-block` vince e i margini
   automatici non si applicano. */
.fpst-dossier .fpst-dossier__more {
	display: block;
	width: fit-content;
	margin: 1.1rem 0 0 auto;
}


/* Navigazione di servizio nella striscia in alto (vedi fpst_topbar_servizi()).
   Deve leggersi come utilita', non competere col menu delle sezioni sotto:
   corpo piccolo, stesso grigio della data a sinistra, separatori sottili. */
.fpst-topbar__servizi { margin-left: auto; }
.fpst-topbar__servizi .wp-block-navigation {
	gap: 0;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.fpst-topbar__servizi .wp-block-navigation__container { gap: 0; flex-wrap: nowrap; }
.fpst-topbar__servizi .wp-block-navigation-item { position: relative; }
.fpst-topbar__servizi .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 0.85em;
	transform: translateY(-50%);
	background: color-mix(in srgb, currentColor 30%, transparent);
}
.fpst-topbar__servizi .wp-block-navigation-item__content {
	padding: 0 0.7rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.fpst-topbar__servizi .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
/* Sotto i 900px la striscia diventa stretta: le voci di servizio spariscono,
   perche' su telefono le stesse destinazioni sono gia' nella barra in basso. */
@media (max-width: 900px) {
	.fpst-topbar__servizi { display: none; }
}

/* ============================================================
   Articoli "tracker" — [fpst_tracker_badge] e [fpst_tracker]
   ============================================================ */
/* Pillola nella riga dei metadati dell'articolo (data/autore/categoria):
   segnala che il pezzo si aggiorna e con che data. Bordo invece di sfondo
   pieno: la riga byline e' gia' fatta di testo piccolo, un blocco di colore
   lì avrebbe pesato piu' del titolo appena sopra. */
.fpst-tracker-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.2em 0.65em;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 999px;
	font-family: var(--fpst-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: color-mix(in srgb, var(--wp--preset--color--gold) 65%, var(--wp--preset--color--ink));
}
.fpst-tracker-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.fpst-tracker-badge__dot { animation: fpst-tracker-pulse 2.2s ease-in-out infinite; }
}
@keyframes fpst-tracker-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* La fascia [fpst_tracker]. Deliberatamente NON un pannello a tutta larghezza
   come Approfondimenti o il dossier Santa Rosa: e' un elenco di servizio, non
   una vetrina, e la home ha gia' abbastanza pannelli colorati (segnalato da
   Francesco l'1/09/2026, stessa sessione in cui abbiamo rimesso ordine nei
   margini di quei pannelli). Card bordate su fondo bianco, dentro la colonna
   del contenuto — piu' vicine alla sezione Collaboratori che ad Approfondimenti. */
.fpst-tracker {
	box-sizing: border-box;
	/* Stessa formula del dossier Santa Rosa: senza il secondo termine del min()
	   restava senza margini laterali sotto i 1180px, cioe' su ogni telefono —
	   lo shortcode e' figlio diretto di .entry-content.alignfull e non eredita
	   il padding di root (segnalato da Francesco l'1/09/2026 su uno screenshot
	   mobile: titolo e testo attaccati al bordo dello schermo). */
	/* Minimo laterale a 24px come la colonna: sotto ~800px i clamp diversi
	   disallineavano le fasce (screenshot mobile di Francesco, 2/09/2026). */
	max-width: min(var(--wp--style--global--content-size, 1180px), calc(100% - 2 * clamp(24px, 4vw, 40px)));
	margin: var(--wp--preset--spacing--60) auto;
}
.fpst-tracker__head { margin-bottom: 1.1rem; }
.fpst-tracker__title-main {
	font-family: var(--fpst-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	gap: 0.55em;
}
/* Lo stesso puntino animato del badge sul singolo articolo, qui piu' grande:
   e' la stessa idea ("questo si muove") ripetuta a scala di sezione. */
.fpst-tracker__title-main::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.fpst-tracker__title-main::before { animation: fpst-tracker-pulse 2.2s ease-in-out infinite; }
}
.fpst-tracker__sub {
	margin: 0.4rem 0 0;
	max-width: 65ch;
	font-family: var(--fpst-ui);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.fpst-tracker__list {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.fpst-tracker__item {
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: 4px;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.fpst-tracker__thumb {
	box-sizing: border-box;
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	max-width: 100%;
	overflow: hidden;
	border-radius: 3px;
}
.fpst-tracker__thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fpst-tracker__item:hover {
	border-color: var(--wp--preset--color--gold);
	background: color-mix(in srgb, var(--wp--preset--color--gold) 5%, transparent);
}
/* 🚨 stessa regola globale del dossier Santa Rosa: WordPress colora di senape
   gli hover dei link non-bottone. Qui il fondo e' chiaro, quindi va bene di
   suo — ma il titolo deve restare leggibile e non saltare colore due volte
   (una volta per l'hover del link, una per quello del testo dentro). */
.fpst-news .wp-block-post-content .fpst-tracker__item:hover,
.fpst-news .wp-block-post-content .fpst-tracker__item:hover .fpst-tracker__title {
	color: var(--wp--preset--color--ink);
}
.fpst-tracker__body {
	box-sizing: border-box;
	max-width: 100%;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.fpst-tracker__kicker {
	font-family: var(--fpst-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--gold) 70%, var(--wp--preset--color--ink));
}
.fpst-tracker__title {
	font-family: var(--fpst-serif);
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.fpst-tracker__excerpt {
	font-family: var(--fpst-ui);
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	/* due righe al massimo, poi taglia: qui conta il titolo e la data, non il
	   riassunto per intero */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fpst-tracker__when {
	flex: 0 0 auto;
	padding-top: 0.15rem;
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
}
/* === La Viterbo che puo essere ([fpst_viterbo_possibile]) =================
   Una sola storia alla volta: la doppia immagine ha il peso visivo della
   sezione, mentre testo e archivio la rendono una porta d'ingresso editoriale. */
.fpst-viterbo-possibile {
	box-sizing: border-box;
	max-width: min(var(--wp--style--global--content-size, 1180px), calc(100% - 2 * clamp(24px, 4vw, 40px)));
	margin: var(--wp--preset--spacing--60) auto;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	border-top: 4px solid var(--wp--preset--color--gold);
	background: #f1eee7;
}
.fpst-viterbo-possibile__in {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 0.8fr);
	gap: clamp(1.4rem, 3vw, 3rem);
	align-items: center;
}
.fpst-viterbo-possibile__images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem;
}
.fpst-viterbo-possibile__figure { margin: 0; }
.fpst-viterbo-possibile__img,
.fpst-viterbo-possibile__missing {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.fpst-viterbo-possibile__missing {
	display: grid;
	place-items: center;
	padding: 1rem;
	background: var(--wp--preset--color--ink, #111);
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	line-height: 1.4;
	text-align: center;
}
.fpst-viterbo-possibile__figure figcaption {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-family: var(--fpst-ui);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #111);
}
.fpst-viterbo-possibile__figure--possible figcaption strong {
	max-width: 15ch;
	color: var(--wp--preset--color--accent);
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	text-align: right;
	text-transform: uppercase;
}
.fpst-viterbo-possibile__eyebrow {
	margin: 0 0 0.55rem;
	font-family: var(--fpst-ui);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.fpst-viterbo-possibile__title {
	margin: 0;
	font-family: var(--fpst-serif);
	font-size: clamp(1.55rem, 2.5vw, 2.25rem);
	line-height: 1.08;
}
.fpst-viterbo-possibile__title a { color: var(--wp--preset--color--ink, #111); text-decoration: none; }
.fpst-viterbo-possibile__title a:hover { color: var(--wp--preset--color--accent); }
.fpst-viterbo-possibile__desc { margin: 0.9rem 0 0; line-height: 1.55; }
.fpst-viterbo-possibile__more {
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--fpst-ui);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}
@media (max-width: 760px) {
	.fpst-viterbo-possibile__in { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
	.fpst-viterbo-possibile__images { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.fpst-tracker__item { gap: 0.65rem; padding: 0.85rem; flex-wrap: wrap; }
	.fpst-tracker__thumb {
		flex-basis: 56px;
		width: 56px;
		height: 56px;
	}
	/* Base 0, non auto: con flex-wrap attivo la base auto vale la larghezza
	   max-content del titolo, più larga dello spazio accanto alla miniatura,
	   e il corpo andava a capo sotto la foto invece di starle accanto. */
	.fpst-tracker__body { flex: 1 1 0; }
	/* "Aggiornato X fa" a larghezza fissa (nowrap) sulla stessa riga del
	   titolo gli lasciava troppo poco spazio: titolo a capo dopo 2-3 parole
	   (segnalato da Francesco il 9/09/2026). flex-basis:100% forza la data
	   su una riga propria sotto titolo/estratto, che così usano tutta la
	   larghezza disponibile. */
	.fpst-tracker__when {
		/* border-box obbligatorio: con content-box "100% + padding-left" sfora la
		   card di ~68px e, non potendo restringersi (shrink 0), crea overflow
		   orizzontale. Su Chrome Android l'overflow allarga il viewport degli
		   elementi fixed: barra tasti e banner cookie finivano fuori schermo. */
		box-sizing: border-box;
		flex: 1 0 100%;
		padding-top: 0.3rem;
		padding-left: calc(56px + 0.65rem);
		font-size: 0.72rem;
	}
}
.fpst-tracker__more {
	display: inline-block;
	margin-top: 1.1rem;
	font-family: var(--fpst-ui);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}
.fpst-tracker__more:hover { text-decoration: underline; }

/* === Confronto «La Viterbo che può essere» ([fpst_confronto]) ============
   Una fotografia reale e la simulazione dello stesso luogo curato, in un'
   immagine sola con barra verticale trascinabile: a sinistra la foto, a
   destra la simulazione. La forma DEGRADATA è il default del CSS: le due
   immagini impilate, ciascuna con la propria didascalia sotto — è un sito di
   informazione, il contenuto non può dipendere dallo script. La classe
   .fpst-confronto--live arriva SOLO da assets/js/confronto.js e trasforma la
   pila nel confronto; ogni regola che la presuppone sta sotto quella classe.
   Il rapporto del riquadro (--fpst-confronto-ratio, stampato dallo shortcode
   sull'elemento) è quello della foto reale: la simulazione, se ha proporzioni
   diverse, viene tagliata al centro da object-fit, mai deformata. */
.fpst-confronto {
	box-sizing: border-box;
	/* Stessa formula del tracker: regge anche se lo shortcode finisce figlio
	   diretto di un blocco alignfull, dove non eredita il padding di root. */
	max-width: min(var(--wp--style--global--content-size, 1180px), calc(100% - 2 * clamp(24px, 4vw, 40px)));
	margin: var(--wp--preset--spacing--60) auto;
}
.fpst-confronto__layer { position: relative; }
.fpst-confronto__img {
	display: block;
	width: 100%;
	height: auto;
}
/* Didascalie della forma degradata: ognuna sotto la PROPRIA immagine, perché
   una riga unica in fondo non direbbe a quale delle due si riferisce. */
.fpst-confronto__cap {
	margin: 0.3rem 0 1.4rem;
	font-family: var(--fpst-ui);
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}
.fpst-confronto__cap--possibile { margin-bottom: 0; }
.fpst-confronto__tag {
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
.fpst-confronto__cap--possibile .fpst-confronto__tag,
.fpst-confronto__col--possibile .fpst-confronto__tag {
	/* Il viola della categoria Viterbo distingue la simulazione a colpo
	   d'occhio, coerente con la palette per sezione. */
	color: var(--fpst-c-viterbo, var(--wp--preset--color--ink));
}
/* Etichetta non rimovibile, requisito editoriale: queste immagini verranno
   scaricate e ricondivise fuori dal sito e una piazza restaurata senza
   etichetta è indistinguibile da un progetto vero. Bianco su nero al 72%:
   composito anche sul caso peggiore (foto bianca dietro) resta ~8.7:1,
   sopra la soglia 4.5:1. Angolo in alto a destra, cioè dal lato della
   simulazione nel confronto. */
.fpst-confronto__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	padding: 0.32em 0.6em;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-family: var(--fpst-ui);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
	pointer-events: none;
}
/* Maniglia e riga di didascalia unica nascono nascosti e li accende il JS:
   senza script non esiste uno slider inerte. */
.fpst-confronto__handle,
.fpst-confronto__caption { display: none; }

/* --- Confronto attivo (solo con JS) ------------------------------------ */
.fpst-confronto--live .fpst-confronto__view {
	position: relative;
	aspect-ratio: var(--fpst-confronto-ratio, 16 / 9);
	overflow: hidden;
	border-radius: 6px;
	cursor: ew-resize;
	/* Il dito che trascina la barra deve muovere la barra, non la pagina. */
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.fpst-confronto--live .fpst-confronto__layer {
	position: absolute;
	inset: 0;
}
/* La simulazione è la base (mai ritagliata: l'etichetta che porta resta
   visibile in ogni posizione della barra); la foto reale sta sopra e il clip
   la riduce alla sinistra della barra. Trascinando a sinistra si vede più
   fotografia reale, a destra più simulazione. */
.fpst-confronto--live .fpst-confronto__layer--reale { z-index: 1; }
.fpst-confronto--live .fpst-confronto__img {
	width: 100%;
	height: 100%;
	/* Rapporti diversi fra le due immagini: si normalizza sul rapporto della
	   foto reale e la seconda si taglia al centro, senza deformarla. */
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
}
.fpst-confronto--live .fpst-confronto__layer--reale .fpst-confronto__img {
	clip-path: inset(0 calc((100 - var(--fpst-confronto-pos, 50)) * 1%) 0 0);
}
.fpst-confronto--live .fpst-confronto__cap { display: none; }
.fpst-confronto--live .fpst-confronto__caption {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
	margin: 0.5rem 0 0;
	font-family: var(--fpst-ui);
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}
.fpst-confronto__col--possibile { text-align: right; }
/* La maniglia: 44px di area touch (linee guida), centrata sulla barra. È un
   <button role="slider">: focalizzabile, il focus del tema (filetto gold) qui
   più aderente alla striscia. */
.fpst-confronto--live .fpst-confronto__handle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: calc(var(--fpst-confronto-pos, 50) * 1%);
	width: 44px;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: ew-resize;
}
.fpst-confronto--live .fpst-confronto__handle:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
	border-radius: 8px;
}
.fpst-confronto__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	transform: translateX(-50%);
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}
.fpst-confronto__knob {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.18);
	color: var(--wp--preset--color--ink, #111);
	font-family: var(--fpst-ui);
	font-size: 13px;
	font-weight: 700;
	/* accosta i due triangolini in un'unica maniglia ◂▸ */
	letter-spacing: -0.14em;
	pointer-events: none;
}
@media (max-width: 560px) {
	/* Una sotto l'altra anche la riga di didascalia: le due diciture non
	   stanno in mezza colonna ciascuna. */
	.fpst-confronto--live .fpst-confronto__caption {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
	.fpst-confronto__col--possibile { text-align: left; }
}

/* Mappe Leaflet dentro un articolo.
   Leaflet alza i propri pannelli fino a z-index 1000 e, senza un contesto di
   impilamento proprio, la mappa passa SOPRA la testata sticky (visto il
   04/09/2026 sul pezzo delle piste ciclabili). La classe la mette il blocco
   HTML dell'articolo; vale per qualunque mappa, non solo per quella. */
.fpst-mappa-ciclabile,
.fpst-mappa {
	position: relative;
	z-index: 0;
	isolation: isolate;
}
.fpst-mappa-ciclabile .leaflet-pane,
.fpst-mappa-ciclabile .leaflet-top,
.fpst-mappa-ciclabile .leaflet-bottom,
.fpst-mappa .leaflet-pane,
.fpst-mappa .leaflet-top,
.fpst-mappa .leaflet-bottom {
	z-index: 1;
}

/* Archivio e richiamo dei dossier tematici: elementi editoriali nel flusso
   dell'articolo, percio' mai a tutta larghezza come una fascia di home. */
.fpst-dossierarchivio {
	box-sizing: border-box;
	max-width: min(var(--wp--style--global--content-size, 1180px), 100%);
	margin: 2.5rem auto;
}
.fpst-dossierarchivio-head,
.fpst-dossierarchivio-list { box-sizing: border-box; max-width: 100%; }
.fpst-dossierarchivio-head { margin-bottom: 1.25rem; }
.fpst-dossierarchivio-title-main {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
}
.fpst-dossierarchivio-intro,
.fpst-dossierarchivio-count {
	margin: 0.55rem 0 0;
	color: var(--wp--preset--color--muted);
}
.fpst-dossierarchivio-count { font-family: var(--fpst-ui); font-size: 0.88rem; }
.fpst-dossierarchivio-list { border-top: 1px solid var(--wp--preset--color--line, #d9d5ce); }
.fpst-dossierarchivio-year {
	margin: 1.5rem 0 0;
	font-family: var(--fpst-ui);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.fpst-dossierarchivio-item {
	box-sizing: border-box;
	max-width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line, #d9d5ce);
	list-style: none;
}
.fpst-dossierarchivio-date {
	padding-top: 0.16rem;
	font-family: var(--fpst-ui);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}
.fpst-dossierarchivio-body { box-sizing: border-box; min-width: 0; max-width: 100%; }
.fpst-dossierarchivio-title { font-weight: 700; }
.fpst-dossierarchivio-categories {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--fpst-ui);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}
.fpst-dossierbox {
	max-width: var(--wp--style--global--content-size, 1180px);
	margin: 2rem auto 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--wp--preset--color--line, #d9d5ce);
	background: rgba(178, 126, 44, 0.08);
	background: color-mix(in srgb, var(--wp--preset--color--gold, #b27e2c) 8%, transparent);
}
.fpst-dossierbox-eyebrow {
	margin: 0 0 0.25rem;
	font-family: var(--fpst-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* Il preset "gold" sul sito vale #ffcc00: su fondo chiaro l'occhiello
	   sparisce. Si usa il blu del giornale, che e' la sua marca e si legge. */
	color: var(--wp--preset--color--accent);
}
.fpst-dossierbox-title { margin: 0; font-size: 1.3rem; }
.fpst-dossierbox-text { margin: 0.55rem 0; }
.fpst-dossierbox-link { font-family: var(--fpst-ui); font-weight: 700; }
@media (max-width: 800px) {
	.fpst-dossierarchivio-item { grid-template-columns: 1fr; gap: 0.3rem; }
	.fpst-dossierarchivio-date { padding-top: 0; }
}

/* Fascia [fpst_dossier_cards]: i temi persistenti della redazione, senza
   immagini per non ripetere quelle già presenti nello slider della home. */
.fpst-dossiercards {
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--60) 0;
	padding: clamp(1.5rem, 3vw, 2.6rem);
	border-radius: 4px;
	background: var(--wp--preset--color--ink);
	color: #fff;
}
.fpst-dossiercards__in {
	box-sizing: border-box;
	max-width: min(var(--wp--style--global--content-size, 1180px), 100%);
	margin-inline: auto;
}
@media (min-width: 1400px) {
	.fpst-dossiercards {
		max-width: calc(
			var(--wp--style--global--content-size, 1180px) + 2 * clamp(1.5rem, 3vw, 2.6rem)
		);
		margin-inline: auto;
	}
}
.fpst-dossiercards__head { margin-bottom: 1.5rem; }
.fpst-dossiercards__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1;
	color: #fff !important;
}
.fpst-dossiercards__subtitle {
	max-width: 68ch;
	margin: 0.5rem 0 0;
	font-family: var(--fpst-ui);
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}
.fpst-dossiercards__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.4rem);
}
.fpst-dossiercards__card {
	display: flex;
	min-height: 15rem;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 1.8rem);
	border: 1px solid rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.03);
	color: #fff;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}
.fpst-dossiercards__card:hover,
.fpst-dossiercards__card:focus-visible {
	border-color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}
.fpst-dossiercards__card:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}
.fpst-dossiercards__eyebrow {
	font-family: var(--fpst-ui);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.fpst-dossiercards__name {
	margin-top: 0.55rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.65rem, 3vw, 2.45rem);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
}
.fpst-dossiercards__description {
	margin-top: 0.7rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}
.fpst-dossiercards__meta {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 1.5rem;
}
.fpst-dossiercards__count {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 0.85;
	color: var(--wp--preset--color--gold);
}
.fpst-dossiercards__service {
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 900px) {
	.fpst-dossiercards__grid { grid-template-columns: 1fr; }
}

/* Le card con copertina: la foto in alto, il testo sotto. La copertina e'
   quella della pagina del dossier, scelta a mano — non degli articoli. */
.fpst-dossiercards__card.has-figure { padding: 0; }
.fpst-dossiercards__figure {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.06);
}
.fpst-dossiercards__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.fpst-dossiercards__card:hover .fpst-dossiercards__figure img,
.fpst-dossiercards__card:focus-visible .fpst-dossiercards__figure img {
	transform: scale(1.04);
}
.fpst-dossiercards__card.has-figure .fpst-dossiercards__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 1.8rem);
}
.fpst-dossiercards__card:not(.has-figure) .fpst-dossiercards__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}
@media (prefers-reduced-motion: reduce) {
	.fpst-dossiercards__figure img { transition: none; }
	.fpst-dossiercards__card:hover .fpst-dossiercards__figure img { transform: none; }
}

.fpst-dossierarchivio-gruppo {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line, #d9d5ce);
}
.fpst-dossierarchivio-gruppo-title {
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem 0.7rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.6rem, 2.8vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
}
.fpst-dossierarchivio-gruppo-number {
	box-sizing: border-box;
	flex: 0 0 auto;
	align-self: center;
	padding: 0.15rem 0.45rem;
	border-radius: 3px;
	background: #14140f;
	font-family: var(--fpst-ui);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #fff;
}
/* Il numero e' una pastiglia scura: nel tema scuro il fondo pagina la
   inghiottirebbe, quindi passa al giallo del giornale con testo scuro. */
:root[data-theme="dark"] .fpst-dossierarchivio-gruppo-number {
	background: #ffcc00;
	color: #14140f;
}
.fpst-dossierarchivio-gruppo-name { min-width: 0; }
.fpst-dossierarchivio-gruppo-count {
	font-family: var(--fpst-ui);
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.fpst-dossierhero {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 2rem;
}
.fpst-dossierhero-image {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 21 / 9;
	border-radius: 4px;
	object-fit: cover;
}
.fpst-dossierhero-caption {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 0.45rem;
	font-family: var(--fpst-ui);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}
@media (max-width: 700px) {
	.fpst-dossierhero-image { aspect-ratio: 16 / 9; }
}

/* Registro richieste agli uffici [fpst_richieste]: fascia per la home che
   rende pubblico l'accesso agli atti e il monitoraggio civico. Stesso schema di
   larghezza e centratura di fpst-dossiercards per non rompere il flusso. */
.fpst-richieste-section {
	box-sizing: border-box;
	max-width: 100%;
	margin: var(--wp--preset--spacing--60, 3rem) 0;
	padding: clamp(1.5rem, 3vw, 2.6rem);
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--line, #e2ddd3);
	background: color-mix(in srgb, var(--wp--preset--color--surface, #fbfbfa) 60%, #fff);
	color: var(--wp--preset--color--ink, #14140f);
}
.fpst-richieste-in {
	box-sizing: border-box;
	max-width: min(var(--wp--style--global--content-size, 1180px), 100%);
	margin-inline: auto;
}
@media (min-width: 1400px) {
	.fpst-richieste-section {
		max-width: calc(
			var(--wp--style--global--content-size, 1180px) + 2 * clamp(1.5rem, 3vw, 2.6rem)
		);
		margin-inline: auto;
	}
}
.fpst-richieste-head {
	box-sizing: border-box;
	max-width: 100%;
	margin-bottom: 1.1rem;
}
.fpst-richieste-title {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	line-height: 1.15;
	color: var(--wp--preset--color--ink, #14140f);
}
.fpst-richieste-subtitle {
	box-sizing: border-box;
	max-width: 68ch;
	margin: 0.5rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #666);
}
.fpst-richieste-summary {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0.55rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--muted, #666);
}
.fpst-richieste-list {
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.fpst-richieste-row {
	box-sizing: border-box;
	max-width: 100%;
	padding: 1rem 1.2rem;
	border: 1px solid var(--wp--preset--color--line, #e2ddd3);
	border-left: 3px solid #b06d00;
	border-radius: 4px;
	background: var(--wp--preset--color--surface, #fbfbfa);
}
.fpst-richieste-row:has(.fpst-richieste-status--reply) {
	border-left-color: #137333;
}
.fpst-richieste-main {
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--fpst-ui, sans-serif);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.fpst-richieste-recipient {
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #875400;
}
.fpst-richieste-subject {
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--fpst-serif, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #14140f);
}
.fpst-richieste-service {
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.25rem 0.55rem;
	margin-top: 0.15rem;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--muted, #666);
}
.fpst-richieste-date {
	box-sizing: border-box;
	max-width: 100%;
}
.fpst-richieste-status {
	box-sizing: border-box;
	max-width: 100%;
	font-weight: 700;
}
/* Senza separatore la data e lo stato si leggono come una parola sola:
   «5 settembre 2026In attesa da 2 giorni». */
.fpst-richieste-status::before {
	content: "·";
	margin-right: 0.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted, #666);
}
@media (max-width: 600px) {
	.fpst-richieste-status::before { content: none; }
}
.fpst-richieste-status--reply {
	color: #137333;
}
.fpst-richieste-status--awaiting {
	color: #875400;
}
.fpst-richieste-wait {
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 0.35rem;
}
.fpst-richieste-wait__track {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wp--preset--color--line, #e2ddd3);
}
.fpst-richieste-wait__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
}
.fpst-richieste-wait__fill--awaiting { background: #b06d00; }
.fpst-richieste-wait__fill--reply { background: #137333; }
.fpst-richieste-wait__label {
	box-sizing: border-box;
	max-width: 100%;
	flex: 0 0 auto;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.68rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--muted, #666);
}

/* ===========================================================================
   Contrasto nel tema scuro: le fasce editoriali hanno testo chiaro per scelta,
   quindi non possono ereditare i token che in questo tema diventano chiari.
   =========================================================================== */
:root[data-theme="dark"] {
	/* Il blu resta riconoscibile, ma come testo sul fondo pagina deve superare
	   la soglia WCAG: il blu pieno del logo qui non ci arriva. */
	--wp--preset--color--accent: #7d8bff;
	--wp--preset--color--accent-text: #7d8bff;
}
/* L'accento e' usato quasi in parti uguali come colore di testo (36 punti) e come
   sfondo (39): schiarirlo per il testo lo schiarisce anche sotto il testo bianco.
   Dove l'accento fa da FONDO a del testo torna quindi il blu pieno del giornale,
   che con il bianco sopra sta a 8,6:1 e con il giallo a 5,7:1. Sui filetti e sulle
   barre decorative il blu chiaro va bene e resta. */
:root[data-theme="dark"] .fpst-nl,
:root[data-theme="dark"] .fpst-slide__cat {
	background: #0000fe;
}
/* La testata: la regola base porta !important per pareggiare la classe
   has-base-background-color di WordPress, quindi anche qui serve. */
:root[data-theme="dark"] .fpst-header {
	background: #0000fe !important;
}
/* Le voci del menu stanno sulla testata: con il blu pieno tornano leggibili. */
:root[data-theme="dark"] .fpst-header .wp-block-navigation-item__label,
:root[data-theme="dark"] .fpst-header .wp-block-navigation-item__content,
:root[data-theme="dark"] .fpst-header a {
	color: #fff;
}
:root[data-theme="dark"] .fpst-nl__title,
:root[data-theme="dark"] .fpst-slide__cat {
	color: #fff;
}
/* In home i badge dello slider sono tutti dell'accento di proposito (riga ~2348,
   selettore piu' specifico): li' il fondo deve restare il blu pieno, altrimenti il
   bianco sopra scende a 3:1. */
:root[data-theme="dark"] .fpst-news.home .fpst-slide__cat[class*="fpst-cat--"] {
	background: #0000fe;
	color: #fff;
}
:root[data-theme="dark"] .fpst-nl__kicker {
	color: #ffcc00;
}
:root[data-theme="dark"] .fpmail-subscribe__label,
:root[data-theme="dark"] .fpst-nl label,
:root[data-theme="dark"] .fpst-nl a {
	color: #fff;
}
/* Le voci del menu di navigazione tenevano il colore scuro del tema chiaro:
   scuro su scuro, 1:1. */
:root[data-theme="dark"] .wp-block-navigation-item__label,
:root[data-theme="dark"] .wp-block-navigation-item__content {
	color: #e9eaec;
}
/* Queste fasce sono uno stacco scuro intenzionale: invertirle cancellerebbe
   la gerarchia editoriale e lascerebbe il loro testo bianco senza contrasto. */
:root[data-theme="dark"] .fpst-appr,
:root[data-theme="dark"] .fpst-appr.fpst-appr--variant-scura,
:root[data-theme="dark"] .fpst-poll-banner,
:root[data-theme="dark"] .fpst-dossiercards,
:root[data-theme="dark"] .fpst-viterbo-possibile {
	background: #1e2127;
}
:root[data-theme="dark"] .fpst-viterbo-possibile__missing {
	background: #101114;
}
/* Le card sono parte della fascia scura: i loro elementi non devono riprendere
   i colori scuri dei titoli generici definiti fuori dal componente. */
:root[data-theme="dark"] .fpst-dossiercards__card,
:root[data-theme="dark"] .fpst-dossiercards__name,
:root[data-theme="dark"] .fpst-dossiercards__description,
:root[data-theme="dark"] .fpst-dossiercards__service {
	color: #fff;
}
/* Giallo e blu restano fondi brand fissi: il testo deve conservare il colore
   previsto per ciascun fondo, non il token ink del tema scuro. */
:root[data-theme="dark"] .fpst-ticker__label,
:root[data-theme="dark"] .fpst-poll-banner__link,
:root[data-theme="dark"] .fpst-poll-banner__link:visited,
:root[data-theme="dark"] .fpst-poll-banner__link:hover,
:root[data-theme="dark"] .fpst-news .fpst-poll__vote {
	color: #14140f;
}
:root[data-theme="dark"] .wp-block-search__button {
	background: #0000fe;
	color: #fff;
}
:root[data-theme="dark"] .wp-block-social-link-label {
	color: #fff;
}
/* I tre badge solo testuali qui sotto usano tinte nate per il fondo chiaro;
   nei blocchi scuri le schiariamo senza toccare quelli a riempimento pieno. */
:root[data-theme="dark"] .fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/osservatore"] {
	color: #e1a9b8;
}
:root[data-theme="dark"] .fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/radici"] {
	color: #efbd91;
}
:root[data-theme="dark"] .fpst-news .taxonomy-category.wp-block-post-terms a[href*="/category/collaboratori"] {
	color: #7fd4d0;
}
/* Questa fascia non puo' mantenere il mix con il bianco: in scuro diventava
   un pannello chiaro mentre link e titoli ereditavano colori chiari. */
:root[data-theme="dark"] .fpst-richieste-section {
	background: #1e2127;
	border-color: #3b414b;
	color: #e9eaec;
}
:root[data-theme="dark"] .fpst-richieste-status--reply {
	color: #c7f2d1;
}
:root[data-theme="dark"] .fpst-richieste-status--awaiting {
	color: #ffe19c;
}
:root[data-theme="dark"] .fpst-richieste-wait__track {
	/* Il filetto chiaro del tema sparisce sul pannello scuro: qui resta una
	   scala leggibile dell'attesa, non una decorazione aggiuntiva. */
	background: #3b414b;
}
:root[data-theme="dark"] .fpst-richieste-wait__fill--awaiting { background: #d79a2b; }
:root[data-theme="dark"] .fpst-richieste-wait__fill--reply { background: #62b883; }
:root[data-theme="dark"] .fpst-richieste-wait__label { color: #c5c9d0; }
.fpst-richieste-note {
	box-sizing: border-box;
	max-width: 100%;
	margin: 1rem 0 0;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted, #666);
}
:root[data-theme="dark"] .fpst-richieste-row {
	border-color: #3b414b;
	border-left-color: #d79a2b;
	background: #101114;
}
:root[data-theme="dark"] .fpst-richieste-row:has(.fpst-richieste-status--reply) {
	border-left-color: #62b883;
}
:root[data-theme="dark"] .fpst-richieste-title,
:root[data-theme="dark"] .fpst-richieste-subject {
	color: #f4f4f2;
}
:root[data-theme="dark"] .fpst-richieste-subtitle,
:root[data-theme="dark"] .fpst-richieste-summary,
:root[data-theme="dark"] .fpst-richieste-service,
:root[data-theme="dark"] .fpst-richieste-note {
	color: #c5c9d0;
}
:root[data-theme="dark"] .fpst-richieste-recipient {
	color: #ffe19c;
}
.fpst-richieste-article-wrap {
	box-sizing: border-box;
	max-width: 100%;
}
.fpst-richieste-article {
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--wp--preset--color--accent, #0026ff);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fpst-richieste-article:hover {
	color: var(--wp--preset--color--gold, #f5c518);
}
@media (max-width: 600px) {
	/* Sul telefono la data precede il titolo: resta un riferimento di lettura,
	   senza comprimere il soggetto nella stessa riga. */
	.fpst-richieste-recipient { order: 1; }
	.fpst-richieste-service { order: 2; gap: 0.2rem 0.45rem; }
	.fpst-richieste-subject { order: 3; }
	.fpst-richieste-article-wrap { order: 4; }
}


/* ===========================================================================
   Tema scuro — blocchi impaginati DENTRO gli articoli (tabelle e grafici scritti
   nel contenuto con il loro <style>: tariffe, confronti fra citta', costi, stato
   dei tratti ciclabili, elenco degli atti). Quel CSS nasce nel pezzo e non sa
   niente del tema, quindi porta colori pensati per la carta chiara: qui vengono
   riportati sul fondo scuro. Il testo di servizio in grigio #5d6873 su #101114
   sta a 3,3:1, sotto la soglia; le righe evidenziate in giallo chiaro con testo
   chiaro sopra arrivano a 1,1:1.
   =========================================================================== */
:root[data-theme="dark"] .fpst-atti__t,
:root[data-theme="dark"] .fpst-atti__n,
:root[data-theme="dark"] .fpst-atti .cig,
:root[data-theme="dark"] .fpst-costi__t,
:root[data-theme="dark"] .fpst-costi__n,
:root[data-theme="dark"] .fpst-barre__t,
:root[data-theme="dark"] .fpst-barre__n,
:root[data-theme="dark"] .fpst-conf__t,
:root[data-theme="dark"] .fpst-conf__n,
:root[data-theme="dark"] .fpst-stati__t,
:root[data-theme="dark"] .fpst-stati__f {
	color: #aeb6c0;
}
:root[data-theme="dark"] .fpst-atti table,
:root[data-theme="dark"] .fpst-costi table {
	color: #e9eaec;
}
:root[data-theme="dark"] .fpst-atti th,
:root[data-theme="dark"] .fpst-costi th {
	border-bottom-color: #6d7681;
	color: #e9eaec;
}
:root[data-theme="dark"] .fpst-atti td,
:root[data-theme="dark"] .fpst-costi td,
:root[data-theme="dark"] .fpst-stati__l li {
	border-bottom-color: #2c3038;
}
/* La riga in evidenza: il giallo chiaro della carta diventa un ambra scuro, cosi'
   resta un'evidenziazione e non un buco bianco. */
:root[data-theme="dark"] .fpst-atti tr.ora td,
:root[data-theme="dark"] .fpst-costi tr.forte td {
	background: #33290a;
	color: #ffe9a8;
}
/* I grigi scritti in linea dentro le celle (span di servizio sotto il nome). */
:root[data-theme="dark"] .fpst-atti td span[style],
:root[data-theme="dark"] .fpst-costi td span[style] {
	color: #aeb6c0 !important;
}

/* Separatori del filo di briciole e riquadro «Partecipa»: grigi da fondo chiaro. */
:root[data-theme="dark"] .fpst-breadcrumb__sep {
	color: #8b939d;
}
/* Il riquadro «Partecipa» usa l'accento come FONDO: con il blu schiarito il
   bianco sopra scende a 3:1, e i pulsanti bianchi restavano bianchi su bianco. */
:root[data-theme="dark"] .fpst-tipcta {
	background: #0000fe;
}
:root[data-theme="dark"] .fpst-tipcta__label {
	color: #ffcc00;
}
:root[data-theme="dark"] .fpst-tipcta__btn {
	background: #fff;
	color: #14140f;
	border-color: #fff;
}

/* ── Rubrica "Controluce" (vignetta satirica settimanale IA) ────────────────── */
/* Il blocco [fpst_controluce] è pensato per occupare il 50% di una riga
   a due colonne (wp:columns) affiancato al sondaggio [fpst_poll variant="full"].
   Su schermi mobili (<= 781px) collassa a colonna singola (stack verticale). */
.fpst-controluce {
	--fpst-c-controluce: #e64a19;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 1.1rem 1.15rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line, #e0e0e0);
	border-top: 3px solid var(--fpst-c-controluce);
	border-radius: 10px;
	background: var(--wp--preset--color--base, #ffffff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] .fpst-controluce {
	background: #1e2127;
	border-color: rgba(255, 255, 255, 0.12);
	border-top-color: var(--fpst-c-controluce);
}

.fpst-controluce__in {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.fpst-controluce__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.fpst-controluce__kicker {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fpst-c-controluce);
}

.fpst-controluce__subtitle {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.78rem;
	font-style: italic;
	color: var(--wp--preset--color--muted, #5d6873);
}

.fpst-controluce__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.fpst-controluce__imgwrap {
	position: relative;
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
	background: color-mix(in srgb, var(--fpst-c-controluce) 4%, var(--wp--preset--color--surface, #f6f7f8));
	display: flex;
	align-items: center;
	justify-content: center;
}

.fpst-controluce__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 440px;
	object-fit: contain;
	border-radius: 6px;
}

.fpst-controluce__caption-wrap {
	margin-top: 0.65rem;
}

.fpst-controluce__caption {
	margin: 0 0 0.25rem;
	font-family: var(--fpst-serif, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #2b2f33);
}

:root[data-theme="dark"] .fpst-controluce__caption {
	color: #e9eaec;
}

.fpst-controluce__date {
	display: block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #5d6873);
}

.fpst-controluce__footer {
	margin-top: auto;
	padding-top: 0.85rem;
	text-align: right;
}

.fpst-controluce__more,
.fpst-controluce__more:link,
.fpst-controluce__more:visited {
	display: inline-block;
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--fpst-c-controluce);
	text-decoration: none;
	transition: color 0.15s ease;
}

.fpst-controluce__more:hover,
.fpst-controluce__more:focus,
.fpst-news .wp-block-post-content .fpst-controluce__more:hover {
	color: color-mix(in srgb, var(--fpst-c-controluce) 75%, black);
	text-decoration: underline;
}

@media (max-width: 781px) {
	.fpst-controluce {
		height: auto;
		margin-bottom: 1.5rem;
		padding: 1rem;
	}
	.fpst-controluce__img {
		max-height: 380px;
	}
	.fpst-controluce__caption {
		font-size: 0.98rem;
	}
}

/* ── Storico vignette ([fpst_controluce_storico]) ─────────────────────────── */
.fpst-controluce-storico {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1180px);
	margin-inline: auto;
	box-sizing: border-box;
	padding: 1.5rem 0;
}

.fpst-controluce-storico__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fpst-controluce-storico__item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--line, #e0e0e0);
	border-top: 3px solid var(--fpst-c-controluce);
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--base, #ffffff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 0.85rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fpst-controluce-storico__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .fpst-controluce-storico__item {
	background: #1e2127;
	border-color: rgba(255, 255, 255, 0.12);
	border-top-color: var(--fpst-c-controluce);
}

.fpst-controluce-storico__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.fpst-controluce-storico__imgwrap {
	border-radius: 6px;
	overflow: hidden;
	background: color-mix(in srgb, var(--fpst-c-controluce) 4%, var(--wp--preset--color--surface, #f6f7f8));
	display: flex;
	align-items: center;
	justify-content: center;
}

.fpst-controluce-storico__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
}

.fpst-controluce-storico__meta {
	margin-top: 0.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.fpst-controluce-storico__date {
	font-family: var(--fpst-ui, sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--fpst-c-controluce);
}

.fpst-controluce-storico__caption {
	font-family: var(--fpst-serif, Georgia, serif);
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #2b2f33);
}

:root[data-theme="dark"] .fpst-controluce-storico__caption {
	color: #e9eaec;
}

.fpst-controluce-storico--empty {
	padding: 2rem;
	text-align: center;
	font-family: var(--fpst-ui, sans-serif);
	color: var(--wp--preset--color--muted, #5d6873);
	background: var(--wp--preset--color--surface, #f6f7f8);
	border-radius: 8px;
}

@media (max-width: 600px) {
	.fpst-controluce-storico__grid {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}
}