/*
 * Tema fti: sistema grafico della Fase 1a (specifica appendice I, 11, 15.1).
 * Solo i token della 11.2: nessun altro colore in questo file.
 */

:root {
	color-scheme: light;
	--fti-arancio: #F57E25;
	--fti-nero: #231F20;
	--fti-bianco: #FFFFFF;
	--fti-blu: #0066B3;
	--fti-rosso: #ED1C24;
	--fti-grigio: #9A989A;
	--fti-focus-su-chiaro: var(--fti-blu);
	--fti-focus-su-arancio: var(--fti-nero);
	--fti-focus-su-blu: var(--fti-bianco);
	/* Aree di rispetto dei loghi, misurate sulla «F» (11.4, L-20). */
	--fti-rispetto-header: 18px;
}

/* Contenuto largo al massimo 1200 px (appendice I; 1440 con D-85, di nuovo 1200 dal commit 16, L-58), margini laterali
   clamp(20px, 4vw, 40px), sezioni a 96 px. Su body e non su :root: WordPress definisce lì il margine della pagina, e una
   variabile si risolve dove è definita. */
body {
	--fti-larghezza: var(--wp--style--global--wide-size, 75rem);
	--fti-margine: var(--wp--style--root--padding-left, 1.25rem);
	--fti-bordo: max(var(--fti-margine), calc((100% - var(--fti-larghezza)) / 2));
	--fti-sezione: 6rem;
}

/* Testo per i soli lettori di schermo (per esempio «(apre un altro sito)» dopo i link esterni). */
.fti-nascosto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Il ® che segue FIRST: stesso corpo, appena sollevato (C-01). */
.fti-first {
	font-style: italic;
}

.fti-first + sup {
	font-size: 0.6em;
	line-height: 0;
	vertical-align: super;
}

/* Focus sempre visibile: blu sui fondi chiari, nero sull'arancio (11.3), anche dove testi e icone sono bianchi (L-59). */
:focus-visible {
	outline: 2px solid var(--fti-focus-su-chiaro);
	outline-offset: 3px;
}

.wp-block-button:not(.is-style-secondario):not(.is-style-link) .wp-element-button:focus-visible {
	outline-color: var(--fti-focus-su-arancio);
}

/* Fascia del titolo arancione (commit 36, L-78): fuoco nero. Gli avvisi restano blu, con il fuoco bianco. */
.fti-fascia :focus-visible {
	outline-color: var(--fti-focus-su-arancio);
}

/* Link «salta al contenuto» e testi per lettori di schermo del core, con i colori della palette (il core usa grigi propri). */
#wp-skip-link:focus,
.screen-reader-text:focus {
	background-color: var(--fti-bianco);
	color: var(--fti-blu);
	box-shadow: 0 0 0 2px var(--fti-blu);
}

main {
	scroll-margin-top: 1rem;
}

/* Header, contenuto e footer si toccano: gli spazi li danno fasce e footer, non il blockGap della radice. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Nei contenitori del tema gli spazi li dà gap: niente margini del layout «flow» del core tra i figli. */
.fti-griglia > *,
.fti-due-colonne > *,
.fti-con-dato > *,
.fti-avviso > *,
.fti-eventi > *,
.fti-evento > *,
.fti-sponsor > *,
.fti-data-frase > *,
.fti-casella > *,
.fti-riquadro > * {
	margin-block: 0;
}

/* Pulsanti (appendice I, 13) ------------------------------------------------ */

/* inline-block e non flex: dentro un pulsante gli spazi tra il testo e il corsivo di FIRST restano. */
.wp-block-button__link {
	display: inline-block;
	box-sizing: border-box;
	min-height: 52px;
	padding-block: 0.75rem;
	line-height: 1.5;
}

/* Secondario: bianco con bordo nero (componente 13), anche dentro gli avvisi arancio. */
.wp-block-button.is-style-secondario .wp-block-button__link {
	border: 2px solid var(--fti-nero);
	background-color: var(--fti-bianco);
	color: var(--fti-nero);
}

/* Link: stesso blocco pulsante, aspetto di link in grassetto; interno o esterno come i link nel testo (sotto). */
.wp-block-button.is-style-link .wp-block-button__link {
	min-height: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--fti-nero);
	text-align: start;
	text-decoration: underline;
}

/* Link nel testo (D-85, brief docs/design/revisione-31-ottobre.md, 1.1) ---------- */

/* Interni: neri con la sottolineatura arancio, come il menu; la sottolineatura distingue il link dal testo (1.4.1), il
   colore è decorativo. Esterni (classe fti-link-esterno, dal filtro fti_link_esterni): blu FIRST, sottolineati, con la
   freccia disegnata dal CSS e fuori dall'albero accessibile; il testo «(apre un altro sito)» è nel link, nascosto. Le
   email e, dal commit 41 (L-85), il telefono restano blu, senza freccia. Sui fondi arancio e di stagione i link prendono
   il colore del testo; nelle zone di BIOBUZZ il giallo del gioco (stagioni.css). */
.fti-main a:not(.wp-element-button),
.fti-main .wp-block-button.is-style-link .wp-block-button__link {
	text-decoration-color: var(--fti-arancio);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.fti-main a.fti-link-esterno:not(.wp-element-button),
.fti-main .wp-block-button.is-style-link .fti-link-esterno,
.fti-main a[href^="mailto:"]:not(.wp-element-button),
.fti-main .wp-block-button.is-style-link a[href^="mailto:"],
.fti-main a[href^="tel:"]:not(.wp-element-button) {
	color: var(--fti-blu);
	text-decoration-color: currentColor;
}

.fti-main a:not(.wp-element-button):hover,
.fti-main .wp-block-button.is-style-link .wp-block-button__link:hover {
	color: var(--fti-nero);
	text-decoration-color: currentColor;
}

.fti-link-esterno::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-inline-start: 0.25em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fti-fascia-home .wp-block-button.is-style-link .wp-block-button__link {
	color: var(--fti-bianco);
}

/* Header del tema 2 (brief 2, versione 3; D-82, L-47) --------------------------- */

/* Bianco e fisso in alto durante lo scorrimento; quando la pagina è scorsa, un'ombra leggera e una linea grigia in basso
   lo staccano dal contenuto (sito.js). Le ancore e il fuoco si fermano sotto l'header: sito.js ne scrive l'altezza in
   --fti-altezza-header (WCAG 2.4.11). */
html {
	scroll-padding-top: calc(var(--fti-altezza-header, 6rem) + 1rem);
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: var(--fti-bianco);
	color: var(--fti-nero);
	transition: box-shadow 0.2s;
}

/* La linea è un'ombra senza sfocatura: non cambia l'altezza dell'header. */
.wp-site-blocks > header.fti-header--scorsa {
	box-shadow: 0 1px 0 var(--fti-grigio), 0 4px 12px -6px var(--fti-nero);
}

/* Sul video della home e nel footer nero (commit 41, L-85) il fuoco è bianco. Nell'header bianco resta il blu, come nel
   resto del sito. */
.fti-fascia-home :focus-visible,
.fti-footer :focus-visible {
	outline-color: var(--fti-bianco);
}

.fti-header {
	display: flex;
	gap: 0 2rem;
	align-items: center;
	justify-content: space-between;
	padding-inline: var(--fti-bordo);
}

.fti-header > * {
	margin-block: 0;
}

/* Logo: altezza fissa, mai ridotto sotto il minimo (C-03, 60 px: L-44); l'area di rispetto è padding vuoto, quindi
   l'header è alto 96 px (60 + 2 × 18). Il margine negativo allinea il logo al bordo del contenuto senza far entrare
   niente nell'area di rispetto. */
.fti-logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.fti-logo img {
	max-width: none;
	width: auto;
	height: 60px;
}

.fti-header > .fti-logo--header {
	margin-inline-start: max(calc(-1 * var(--fti-rispetto-header)), calc(-1 * var(--fti-margine)));
	padding: var(--fti-rispetto-header);
}

/* Menu unico con tendine (D-83, brief menu-unico 1) ------------------------- */

/* Voci nere in grassetto, con la sottolineatura arancio al passaggio, al fuoco e sulla voce corrente o sulla sua
   sezione (aria-current): la sottolineatura è decorativa, il fuoco è l'anello blu. Niente bianco su arancio (11.3). */
.fti-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* I link del menu, non il pulsante «Crea un team» del pannello dei telefoni, che resta un pulsante principale: testo
   bianco sull'arancio come nell'header e nelle pagine (D-87, L-62). */
.fti-menu a:not(.wp-element-button) {
	color: var(--fti-nero);
	text-decoration: none;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.4em;
}

.fti-menu a:not(.wp-element-button):hover,
.fti-menu a:not(.wp-element-button):focus-visible,
.fti-menu a:not(.wp-element-button)[aria-current] {
	color: var(--fti-nero);
	text-decoration: underline;
	text-decoration-color: var(--fti-arancio);
}

.fti-menu__primo {
	font-weight: 700;
}

/* Voci di primo livello del menu unico in maiuscolo, anche nel pannello dei telefoni, con una spaziatura leggera
   (Maurizio, 31/10/2026, L-63; al posto del maiuscoletto, che il Roboto servito non ha e il browser simulava più
   sottile). Il testo resta quello del menu. Le voci delle tendine, «Crea un team», «International teams (EN)» e i menu
   del footer restano come sono. */
.fti-menu--pannello .fti-menu__primo {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Voce di primo livello con la tendina (commit 33, L-75): non è un link, è un pulsante con il nome della voce e la
   freccia, che apre e chiude la tendina; la freccia gira quando è aperta. Il nome si sottolinea in arancio al
   passaggio e sulla sezione corrente, come i link del menu. */
.fti-menu__freccia {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--fti-nero);
	cursor: pointer;
}

.fti-menu__punta {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
}

.fti-menu__freccia[aria-expanded="true"] .fti-menu__punta {
	transform: translateY(25%) rotate(-135deg);
}

.fti-menu__freccia:hover .fti-menu__punta {
	border-color: var(--fti-arancio);
}

.fti-menu__primo.fti-menu__freccia {
	gap: 0.5rem;
	width: auto;
	height: auto;
	font-family: inherit;
	line-height: inherit;
	text-align: start;
}

.fti-menu__testo {
	text-decoration-thickness: 3px;
	text-underline-offset: 0.4em;
}

.fti-menu__freccia:hover .fti-menu__testo,
.fti-menu__primo--corrente .fti-menu__testo {
	text-decoration: underline;
	text-decoration-color: var(--fti-arancio);
	text-decoration-thickness: 3px;
}

.fti-menu__sotto a {
	display: block;
	font-weight: 400;
}

/* Voci di secondo livello in maiuscolo, un po' più piccole di quelle di primo livello (commit 36, L-78). */
.fti-menu--pannello .fti-menu__sotto a {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Ultima voce del menu, la pagina inglese (commit 36, L-78): in corsivo, su due righe. Nell'header inglese «Italiano»
   ha lo stesso stile. */
.fti-menu .fti-menu__inglese,
.fti-servizio a {
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
}

.fti-menu--pannello .fti-menu__inglese {
	font-size: 0.8125rem;
}

.fti-servizio a {
	color: var(--fti-nero);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Con JavaScript le tendine si aprono solo con il pulsante (o con il passaggio del mouse, comandato da sito.js). */
.fti-js .fti-menu__sotto {
	display: none;
}

.fti-js .fti-menu__voce--aperta > .fti-menu__sotto {
	display: block;
}

/* Pulsante principale accanto al menu e, accanto, il pulsante secondario della pagina inglese (commit 33, L-75). */
.fti-header__azione {
	display: flex;
	gap: 0.5rem 0.75rem;
	align-items: center;
	justify-content: flex-end;
}

.fti-header__azione .wp-block-button__link,
.fti-menu__azione .wp-block-button__link,
.fti-menu__inglese .wp-block-button__link,
.fti-servizio .wp-block-button__link {
	min-height: 48px;
	padding-block: 0.6875rem;
	padding-inline: 1.5rem;
	font-size: 1.0625rem;
}

/* Menu per nome senza pannello (header inglese): «Italiano» come pulsante secondario (commit 33, L-75), centrato
   nell'altezza dell'header. */
.fti-header > .fti-servizio {
	flex-shrink: 0;
	grid-row: 1 / -1;
	align-self: center;
	margin-inline-start: auto;
}

.fti-servizio .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 599px) {
	.fti-servizio .wp-block-button__link {
		padding-inline: 0.875rem;
	}
}

.fti-servizio .fti-menu__voci {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	justify-content: flex-end;
	font-size: 0.875rem;
}

.fti-servizio a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Sotto i 1024 px: logo, pulsante principale (da 600 px) e pulsante «Menu», che apre il pannello sotto l'header; le
   tendine diventano fisarmoniche e in fondo al pannello ci sono il pulsante principale (sotto i 600 px) e il link alla
   pagina inglese. Senza JavaScript il pannello resta aperto sotto il logo, e l'header non è fisso. */
@media (max-width: 1023px) {
	.fti-header {
		position: relative;
		flex-wrap: wrap;
	}

	.fti-header__azione {
		order: 2;
		margin-inline-start: auto;
	}

	.fti-header__inglese {
		display: none;
	}

	.fti-menu--pannello {
		flex-shrink: 0;
		order: 3;
		margin-inline-start: 1.25rem;
	}

	/* Con JavaScript l'header resta su una riga, alto 96 px (appendice I, 1): se il pulsante «Menu» non ci sta, per
	   esempio con il testo ingrandito nelle impostazioni del telefono, sito.js aggiunge fti-menu--compatto e l'etichetta
	   resta solo per i lettori di schermo, come sotto i 390 px. */
	.fti-js .fti-header {
		flex-wrap: nowrap;
	}

	.fti-menu--compatto .fti-menu__etichetta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.fti-menu--compatto .fti-menu__apri {
		width: 48px;
		padding: 0;
		justify-content: center;
	}

	.fti-header__azione .wp-block-button__link {
		white-space: nowrap;
	}

	.fti-menu__apri {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		height: 48px;
		padding: 0 0.75rem;
		border: 2px solid var(--fti-nero);
		border-radius: 4px;
		background-color: var(--fti-bianco);
		color: var(--fti-nero);
		font-family: inherit;
		font-size: 1rem;
		font-weight: 700;
		cursor: pointer;
	}

	.fti-menu__etichetta {
		line-height: 1;
	}

	/* Tre linee, che diventano una X quando il pannello è aperto. */
	.fti-menu__icona {
		position: relative;
		width: 1.25rem;
		height: 2px;
		background-color: currentColor;
	}

	.fti-menu__icona::before,
	.fti-menu__icona::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: currentColor;
	}

	.fti-menu__icona::before {
		top: -6px;
	}

	.fti-menu__icona::after {
		top: 6px;
	}

	.fti-menu__apri[aria-expanded="true"] .fti-menu__icona {
		background-color: transparent;
	}

	.fti-menu__apri[aria-expanded="true"] .fti-menu__icona::before {
		top: 0;
		transform: rotate(45deg);
	}

	.fti-menu__apri[aria-expanded="true"] .fti-menu__icona::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.fti-js .fti-menu__pannello {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: calc(100vh - var(--fti-altezza-header, 6rem) - var(--wp-admin--admin-bar--height, 0px));
		max-height: calc(100dvh - var(--fti-altezza-header, 6rem) - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0.5rem var(--fti-bordo) 2rem;
		border-top: 1px solid var(--fti-grigio);
		background-color: var(--fti-bianco);
		box-shadow: 0 12px 16px -12px var(--fti-nero);
	}

	.fti-js .fti-menu--aperto .fti-menu__pannello {
		display: block;
	}

	html:not(.fti-js) .wp-site-blocks > header.wp-block-template-part {
		position: static;
	}

	html:not(.fti-js) .fti-menu__apri {
		display: none;
	}

	html:not(.fti-js) .fti-menu--pannello {
		flex-basis: 100%;
		margin-inline-start: 0;
		padding-bottom: 1.5rem;
	}

	.fti-menu__voce {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--fti-grigio);
	}

	.fti-menu__primo {
		flex: 1;
		padding-block: 0.75rem;
		font-size: 1.25rem;
	}

	.fti-menu__primo.fti-menu__freccia {
		justify-content: space-between;
		min-height: 48px;
	}

	.fti-menu__freccia {
		width: 48px;
		height: 48px;
	}

	.fti-menu__sotto {
		flex-basis: 100%;
		padding: 0 0 0.75rem 1rem;
	}

	.fti-menu--pannello .fti-menu__sotto a {
		padding-block: 0.5rem;
		font-size: 0.9375rem;
	}

	.fti-menu--pannello .fti-menu__inglese {
		font-size: 1rem;
	}

	.fti-menu__fondo {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		align-items: flex-start;
		padding-top: 1.5rem;
	}

}

/* Da 600 a 1023 px il pulsante principale sta nell'header, quindi non si ripete nel pannello. */
@media (min-width: 600px) and (max-width: 1023px) {
	.fti-menu__azione {
		display: none;
	}
}

@media (max-width: 599px) {
	.fti-header {
		gap: 0;
		padding-inline-end: 0.75rem;
	}

	.fti-header__azione {
		display: none;
	}

	.fti-menu--pannello {
		margin-inline-start: auto;
	}
}

/* Sotto i 390 px logo (237 px + 2 × 18 px di rispetto, C-03) e pulsante con etichetta non stanno su una riga: il
   pulsante resta da 48 px con la sola icona, e il nome «Menu» per i lettori di schermo. Sotto i 340 px il pulsante è
   da 44 px e il logo parte dal bordo dello schermo: 273 + 44 px stanno in 320 px. L'area di rispetto non si taglia mai,
   nemmeno dal bordo dello schermo (L-27). */
@media (max-width: 389px) {
	.fti-menu__etichetta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.fti-menu__apri {
		width: 48px;
		padding: 0;
		justify-content: center;
	}
}

@media (max-width: 339px) {
	.fti-header {
		padding-inline: 0 2px;
	}

	.fti-header > .fti-logo--header {
		margin-inline-start: 0;
	}

	.fti-menu__apri {
		width: 44px;
		height: 44px;
	}
}

/* Da 1024 px: il menu è una riga di voci con le tendine sotto. Da 1024 a 1279 px logo, link inglese e pulsante sulla
   prima riga e il menu sulla seconda; da 1280 px il menu sta accanto al logo, sotto il link e il pulsante. */
@media (min-width: 1024px) {
	.fti-header {
		display: grid;
		grid-template-areas:
			"logo azione"
			"menu menu";
		grid-template-columns: auto 1fr;
		column-gap: 2rem;
		align-items: center;
	}

	.fti-header > .fti-logo--header {
		grid-area: logo;
	}

	.fti-header__azione {
		grid-area: azione;
	}

	.fti-menu--pannello {
		grid-area: menu;
		padding-bottom: 0.5rem;
	}

	.fti-menu__apri,
	.fti-menu__fondo {
		display: none;
	}

	.fti-menu__voci {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.25rem;
		align-items: center;
	}

	.fti-menu__voce {
		position: relative;
		display: flex;
		align-items: center;
	}

	.fti-menu__primo {
		padding-block: 0.5rem;
		font-size: 1rem;
	}

	.fti-menu__freccia {
		width: 1.75rem;
		height: 2.5rem;
	}

	.fti-menu__sotto {
		position: absolute;
		top: 100%;
		left: -1rem;
		z-index: 10;
		min-width: 15rem;
		padding-block: 0.5rem;
		border: 1px solid var(--fti-grigio);
		border-radius: 4px;
		background-color: var(--fti-bianco);
		box-shadow: 0 12px 16px -12px var(--fti-nero);
	}

	/* Le ultime due tendine si aprono verso sinistra, dentro lo schermo. */
	.fti-menu__voce:nth-last-child(-n + 2) > .fti-menu__sotto {
		right: 0;
		left: auto;
	}

	.fti-menu__sotto a {
		padding: 0.625rem 1rem;
		white-space: nowrap;
	}

	html:not(.fti-js) .fti-menu__sotto {
		display: none;
	}

	html:not(.fti-js) .fti-menu__voce--tendina:hover > .fti-menu__sotto,
	html:not(.fti-js) .fti-menu__voce--tendina:focus-within > .fti-menu__sotto {
		display: block;
	}
}

@media (min-width: 1280px) {
	.fti-header {
		grid-template-areas:
			"logo azione"
			"logo menu";
		row-gap: 0;
	}

	.fti-header__azione {
		align-self: end;
	}

	.fti-menu--pannello {
		justify-self: end;
		align-self: start;
		padding-bottom: 0;
	}

	.fti-menu__voci {
		justify-content: flex-end;
	}

	/* In maiuscolo le sette voci sono più larghe: un po' più piccole perché stiano su una riga a 1280 px (L-63); lo
	   spazio tra una voce e l'altra non cambia. */
	.fti-menu__primo {
		font-size: 0.9375rem;
	}
}

/* Fasce (appendice I, 4; brief 3.1 e 5) ------------------------------------- */

/* Fascia del titolo arancione con testo bianco (commit 36, L-78; blu nel commit 34): 2,7:1, eccezione voluta (D-87,
   aggiornata con la D-97); fuoco nero. */
.fti-fascia {
	display: flex;
	flex-direction: column;
	background-color: var(--fti-arancio);
	color: var(--fti-bianco);
}

.fti-main .fti-fascia a,
.fti-main .fti-fascia a:hover {
	color: var(--fti-bianco);
	text-decoration-color: currentColor;
}

/* I titoli prendono il nero da theme.json: sull'arancio il colore della fascia o dell'avviso (L-59). */
.fti-fascia .wp-block-heading,
.fti-fascia__titolo,
.fti-avviso .wp-block-heading {
	color: inherit;
}

/* Fasce arancioni delle pagine più basse del tema 1: padding ridotto di un terzo (brief 5). La foto non entra più nella
   fascia (D-85): nelle notizie e negli eventi sta accanto al testo (.fti-articolo). */
.fti-fascia {
	padding: 1.6667rem var(--fti-bordo) 2.3333rem;
}

.fti-fascia__interno {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fti-fascia__titolo {
	max-width: 14em;
	margin: 0;
}

.fti-fascia__sottotitolo {
	max-width: 36em;
	margin: 0;
	font-size: 1.3125rem;
	line-height: 1.45;
}

.fti-percorso {
	font-size: 0.9375rem;
}

.fti-percorso ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fti-percorso li + li::before {
	content: "›" / "";
	margin-inline-end: 0.5rem;
}

/* Fascia iniziale della home con il video (brief 3.1): a tutta larghezza, alta il 70% della finestra (60% sui telefoni),
   titolo e testo bianchi in basso, sul video senza velo, con l'ombra (D-88, L-61). Senza video resta il blu. */
.wp-block-post-content > .fti-home-apertura {
	margin-block-start: 0;
}

.fti-fascia-home {
	display: flex;
	position: relative;
	isolation: isolate;
	flex-direction: column;
	gap: 1.5rem;
	justify-content: flex-end;
	box-sizing: border-box;
	min-height: calc(100vh - var(--fti-altezza-header, 6rem) - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--fti-altezza-header, 6rem) - var(--wp-admin--admin-bar--height, 0px));
	padding: 4rem var(--fti-bordo) 5.5rem;
	overflow: hidden;
	background-color: var(--fti-blu);
	color: var(--fti-bianco);
}

.fti-fascia-home > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

.fti-fascia-home > .fti-video {
	position: absolute;
	z-index: 0;
	inset: 0;
}

.fti-video__file {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Testo sul video senza velo (D-88, L-61; prima il velo blu di D-85 e L-58): titolo, testo e pulsanti bianchi con
   un'ombra scura sotto le lettere, nel nero FIRST semitrasparente, una stretta e una più morbida, quanto basta per
   staccarle dal fondo anche sui fotogrammi chiari (il tendone bianco). Il contrasto sul video non è garantito:
   eccezione voluta. Senza video resta il fondo blu della fascia. */
.fti-fascia-home {
	text-shadow: 0 1px 2px color-mix(in srgb, var(--fti-nero) 75%, transparent), 0 0 18px color-mix(in srgb, var(--fti-nero) 55%, transparent);
}

/* Pulsante per fermare il video (WCAG 2.2.2), discreto (commit 34, L-76): solo l'icona di pausa o di avvio disegnata
   dal CSS, in basso a destra, 32 × 32 px (più dei 24 della WCAG 2.5.8), su un velo nero perché si veda su ogni
   fotogramma; il nome («Ferma il video» / «Riprendi il video», dalle Impostazioni) è nel testo nascosto; fuoco bianco. */
.fti-fascia-home > .fti-video__pausa {
	display: inline-flex;
	position: absolute;
	z-index: 2;
	right: var(--fti-bordo);
	bottom: 1.25rem;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--fti-bianco) 70%, transparent);
	border-radius: 4px;
	background-color: color-mix(in srgb, var(--fti-nero) 60%, transparent);
	color: var(--fti-bianco);
	cursor: pointer;
}

.fti-video__pausa::before {
	content: "";
	width: 10px;
	height: 12px;
	border-inline: 3px solid currentColor;
	box-sizing: border-box;
}

.fti-video__pausa--fermo::before {
	width: 0;
	height: 0;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid currentColor;
	border-inline-end: 0;
}

.fti-titolo-home {
	max-width: 11em;
	color: var(--fti-bianco);
	font-size: clamp(2.75rem, 6.5vw, 5rem);
	line-height: 0.98;
	letter-spacing: -1.5px;
}

.fti-introduzione {
	max-width: 32em;
	font-size: 1.375rem;
	line-height: 1.45;
}

.fti-fascia-home .wp-block-buttons {
	gap: 1rem 1.5rem;
	margin-top: 0.5rem;
}

/* «Scopri il programma» sul video (commit 34, L-76): bordo e testo bianchi su un velo nero al 70%, che anche sul
   fotogramma più chiaro (bianco) dà al testo bianco almeno 4,5:1 (circa 6:1). */
.fti-fascia-home .wp-block-button.is-style-secondario .wp-block-button__link {
	border-color: var(--fti-bianco);
	background-color: color-mix(in srgb, var(--fti-nero) 70%, transparent);
	color: var(--fti-bianco);
}

@media (max-width: 599px) {
	.fti-fascia-home {
		padding-bottom: 5rem;
	}

	.fti-introduzione {
		font-size: 1.1875rem;
	}
}

/* Corpo delle pagine: colonna larga 1200 px; la colonna di testo parte dallo stesso bordo del titolo. */
.fti-main > .fti-corpo {
	margin-block-start: 0;
}

.fti-corpo {
	max-width: calc(var(--fti-larghezza) + 2 * var(--fti-margine));
	margin-inline: auto;
	padding-top: var(--fti-sezione);
}

.fti-corpo > :not(.wp-block-post-content) {
	margin-inline: var(--fti-margine);
}

.wp-block-post-content > .fti-sezione {
	margin-block-start: var(--fti-sezione);
}

.wp-block-post-content > .fti-sezione:first-child {
	margin-block-start: 0;
}

/* Notizie ed eventi (D-85, brief 1.8): la foto in evidenza accanto al testo (la notizia, o la scheda dell'evento),
   allineata in alto, 3:2, dentro la colonna come nelle sezioni «Testo e foto» (L-58); sui telefoni sopra il testo.
   Senza foto il testo resta da solo. Il contenuto della notizia sta nella colonna: niente margine del layout. */
.fti-corpo > .fti-articolo {
	display: grid;
	gap: 2rem 4rem;
	align-items: start;
	margin-block: 0 3rem;
}

.fti-articolo > * {
	margin: 0;
}

.fti-articolo > .wp-block-post-content {
	padding-inline: 0;
}

.fti-articolo__foto img {
	display: block;
	width: 100%;
	object-fit: cover;
}

@media (min-width: 50rem) {
	.fti-articolo:has(> .fti-articolo__foto) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.fti-articolo > * {
		grid-row: 1;
		grid-column: 1;
	}

	.fti-articolo > .fti-articolo__foto {
		grid-column: 2;
	}
}

.fti-corpo > .fti-aggiornata {
	margin-top: 3rem;
	font-size: 0.9375rem;
}

.fti-corpo > .fti-etichetta {
	margin-top: 2rem;
	font-weight: 700;
}

/* Sezioni e componenti (appendice I, 5–11) ---------------------------------- */

.fti-sezione > .wp-block-heading:first-child {
	margin: 0 0 2.5rem;
}

/* Colonna di testo di 40em. La specificità supera quella delle regole del core per i blocchi larghi
   (:root :where(.is-layout-constrained) > .alignwide e .wp-container-… > .alignwide), che altrimenti la allargano a
   75rem in ogni pagina (L-39). */
.fti-corpo .fti-sezione.fti-sezione--testo {
	max-width: 40em;
}

/* Il glossario delle Domande frequenti sta a tutta larghezza, in due colonne (commit 31, L-73). */
.fti-corpo .fti-sezione.fti-sezione--testo.fti-sezione--glossario {
	max-width: none;
}

.fti-sezione--testo > .wp-block-heading:first-child {
	margin-bottom: 1.25rem;
	font-size: 2rem;
}

.fti-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
	gap: 3rem;
}

/* Quattro schede: al massimo due per riga, così nessuna resta da sola (appendice I, 8). Ogni colonna è larga almeno
   metà della griglia, quindi le colonne non sono mai più di due; sotto i 18,75 rem resta una colonna sola. Con la
   colonna di 1200 px quattro su una riga non ci stanno bene (testo di circa 30 caratteri per riga, «Hai già un team?»
   al bordo): restano due per riga (commit 16, L-58; con D-85 erano quattro da 1280 px). */
.fti-griglia:has(> .fti-scheda:nth-child(4):last-child) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(18.75rem, calc((100% - 3rem) / 2))), 1fr));
}

/* Sei schede (i Core Values della pagina I valori): tre per riga da 64 rem, così nessuna resta da sola (D-85). */
@media (min-width: 64rem) {
	.fti-griglia:has(> .fti-scheda:nth-child(6):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.fti-due-colonne {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
	gap: 3rem;
	align-items: start;
}

.fti-scheda,
.fti-testo-breve,
.fti-casella,
.fti-riquadro,
.fti-canale,
.fti-avviso__testo,
.fti-evento__testo,
.fti-passo__testo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fti-scheda > *,
.fti-testo-breve > *,
.fti-dato > *,
.fti-casella > *,
.fti-riquadro > *,
.fti-canale > *,
.fti-avviso__testo > *,
.fti-evento__testo > *,
.fti-passo__testo > *,
.fti-data-frase > * {
	margin: 0;
}

/* Piastrelle: icona 96 px, numero 56 px, data 96 px. Unico accento grafico del sito. Icone, numeri e date in bianco
   sull'arancio (2,7:1): eccezione voluta ai contrasti (D-87, L-59). */
.fti-piastrella,
.fti-data,
.fti-passo__numero {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	background-color: var(--fti-arancio);
	color: var(--fti-bianco);
}

.fti-piastrella {
	width: 96px;
	height: 96px;
}

.fti-piastrella svg {
	display: block;
}

.fti-passo__testo .wp-block-heading {
	font-size: 1.5rem;
}

/* Schede con barra (brief 3.2, al posto delle schede con piastrella in tutto il sito): barra arancio verticale di 6 px
   per tutta l'altezza; icona bianca di 28 px (decorativa; D-87, L-59, prima nera) in un quadrato arancio di 48 px
   accanto al titolo, centrato con il titolo (D-85, brief 1.6); sotto, testo e invito all'azione in stile secondario con la freccia, disegnata dal CSS e
   fuori dall'albero accessibile. Le schede di una riga sono alte uguali (la griglia le stira) e il testo prende lo
   spazio in più: l'invito all'azione sta in fondo, alla stessa altezza in tutte. */
/* Più spazio verticale tra le righe di schede (commit 36, L-78). */
.fti-griglia:has(> .fti-scheda) {
	gap: 3rem 1.5rem;
}

.fti-scheda {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: 1rem;
	align-items: start;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-inline-start: 6px solid var(--fti-arancio);
}

.fti-scheda > * {
	grid-column: 1 / -1;
}

.fti-scheda > .fti-piastrella {
	grid-row: 1;
	grid-column: 1;
	width: 48px;
	height: 48px;
}

.fti-scheda .fti-piastrella svg {
	width: 28px;
	height: 28px;
}

.fti-scheda > .wp-block-heading {
	grid-row: 1;
	grid-column: 2;
	align-self: center;
	font-size: 1.75rem;
	line-height: 1.25;
}

.fti-scheda > .wp-block-buttons {
	align-self: end;
	padding-top: 0.5rem;
}

.fti-scheda .wp-block-button.is-style-secondario .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-inline-start: 0.625rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-0.1em) rotate(45deg);
}

/* Home: sezioni più vicine tra loro (brief 3.2). */
.fti-main--home {
	--fti-sezione: 4rem;
}

/* Avviso e chiusura (D-85, brief 1.5): fascia arancio a tutta larghezza con il contenuto nella colonna, icona, titolo,
   testo e link bianchi (eccezione voluta ai contrasti, D-87, L-59; prima neri), titolo 28 px, pulsanti secondari
   (bianchi con il bordo nero, componente 13). Lo sfondo va a tutta larghezza con ::before, come le fasce di stagione;
   la piastrella perde il suo arancio e resta l'icona. Fuoco nero: si vede sull'arancio. */
.fti-sezione:has(> .fti-avviso) {
	position: relative;
	isolation: isolate;
}

.fti-sezione:has(> .fti-avviso)::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	background-color: var(--fti-blu);
}

.fti-avviso {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	align-items: center;
	padding-block: 3rem;
	color: var(--fti-bianco);
}

.fti-avviso > .fti-piastrella {
	background: none;
}

/* Fasce blu che accolgono una sezione (bando, Formazione scuola-lavoro, Come iscriversi, Sicurezza e tutela: commit 36,
   L-78): il riquadro del dato con la barra bianca, i pulsanti come negli avvisi. */
.fti-avviso .fti-dato {
	border-inline-start-color: var(--fti-bianco);
}

.fti-avviso--fascia .fti-avviso__testo {
	flex-basis: 40rem;
	gap: 1rem;
}

.fti-main .fti-avviso a:not(.wp-element-button),
.fti-main .fti-avviso a:not(.wp-element-button):hover,
.fti-main .fti-avviso .wp-block-button.is-style-link .wp-block-button__link,
.fti-main .fti-avviso .wp-block-button.is-style-link .wp-block-button__link:hover {
	color: var(--fti-bianco);
	text-decoration-color: currentColor;
}

.fti-sezione:has(> .fti-avviso) :focus-visible {
	outline-color: var(--fti-focus-su-blu);
}

/* Due avvisi uno dopo l'altro stanno nella stessa fascia, separati da una linea nera sottile (L-40, L-54). */
.wp-block-post-content > .fti-sezione:has(> .fti-avviso) + .fti-sezione:has(> .fti-avviso) {
	margin-block-start: 0;
}

.fti-sezione:has(> .fti-avviso) + .fti-sezione > .fti-avviso {
	border-top: 1px solid var(--fti-nero);
}

.fti-avviso__testo {
	flex: 1 1 26.25rem;
	gap: 0.5rem;
}

.fti-avviso__testo > .wp-block-heading {
	font-size: 1.75rem;
	line-height: 1.2;
}

.fti-avviso--canali {
	align-items: flex-start;
}

.fti-avviso--canali .fti-avviso__testo {
	flex-basis: 37.5rem;
	gap: 1.5rem;
}

.fti-avviso--canali .fti-griglia {
	width: 100%;
	gap: 2rem;
}

.fti-canale {
	gap: 0.375rem;
}

.fti-canale .wp-block-heading {
	font-size: 1.25rem;
}

/* Elenchi (commit 44, L-87; prima righe separate da linee grigie): senza linee, con un quadrato arancione al posto del
   punto, allineato alla prima riga; con le spunte per «cosa serve». Anche gli elenchi scritti nell'editor. */
.fti-elenco,
.fti-main ul.wp-block-list:not(.fti-elenco) {
	max-width: 44em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fti-elenco > li,
.fti-main ul.wp-block-list:not(.fti-elenco) > li {
	position: relative;
	margin: 0;
	padding-block: 0.375rem;
}

.fti-elenco:not(.fti-elenco--spunte) > li,
.fti-main ul.wp-block-list:not(.fti-elenco) > li {
	padding-left: 1.5rem;
}

.fti-elenco:not(.fti-elenco--spunte) > li::before,
.fti-main ul.wp-block-list:not(.fti-elenco) > li::before {
	content: "";
	position: absolute;
	top: calc(0.375rem + 0.775em - 0.25rem);
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--fti-arancio);
}

/* Elenco dentro una voce (Bando in Da FIRST LEGO League): un po' di spazio sopra. */
.fti-elenco > li > .fti-elenco {
	margin-top: 0.375rem;
}

/* La spunta sta fuori dal flusso del testo: con display:flex corsivo, ® e link della voce diventavano colonne separate. */
.fti-elenco--spunte > li {
	position: relative;
	padding-left: calc(24px + 1rem);
}

.fti-elenco--spunte > li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	height: 24px;
	background: url("../icone/spunta.svg") center / contain no-repeat;
	transform: translateY(-50%);
}

/* Passi numerati: righe tra linee grigie, oppure affiancati. Nell'editor i numeri li conta il CSS. */
.fti-passi {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--fti-grigio);
	list-style: none;
	counter-reset: fti-passo;
}

.fti-passo {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin: 0;
	padding-block: 1.5rem;
	border-top: 1px solid var(--fti-grigio);
	counter-increment: fti-passo;
}

.fti-passo__numero {
	width: 56px;
	height: 56px;
	font-size: 1.625rem;
	font-weight: 700;
}

.fti-passo__numero:empty::before {
	content: counter(fti-passo);
}

.fti-passo__testo {
	gap: 0.375rem;
	max-width: 40em;
}

.fti-passi--griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
	gap: 2.5rem;
	border: 0;
}

.fti-passi--griglia .fti-passo {
	flex-direction: column;
	gap: 0.875rem;
	padding: 0;
	border: 0;
}

/* Date: piena se confermata, con bordo grigio se da confermare o passata; mesi in minuscolo (NF-06). */
.fti-data {
	flex-direction: column;
	width: 96px;
	height: 96px;
	line-height: 1.1;
	text-align: center;
}

.fti-data--da-confermare,
.fti-data--passata {
	border: 1px solid var(--fti-grigio);
	background-color: var(--fti-bianco);
	color: var(--fti-nero);
}

.fti-data__giorno {
	font-size: 1.625rem;
	font-weight: 700;
}

.fti-data--lungo .fti-data__giorno {
	font-size: 1.25rem;
}

.fti-data__mese {
	font-size: 0.9375rem;
}

.fti-data-frase {
	display: flex;
	gap: 1.25rem;
	align-items: center;
}

.fti-griglia--date {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
	gap: 2rem;
}

/* Iscrizioni, «Le date» (commit 36, L-78): quadrati bianchi con bordo e testo arancioni, 2,7:1, eccezione voluta (D-97). */
.fti-griglia--date .fti-data:not(.fti-data--da-confermare):not(.fti-data--passata) {
	border: 3px solid var(--fti-arancio);
	background-color: var(--fti-bianco);
	color: var(--fti-arancio);
}

/* Eventi: righe con la piastrella della data. */
.fti-eventi {
	border-bottom: 1px solid var(--fti-grigio);
}

.fti-evento {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	padding-block: 1.25rem;
	border-top: 1px solid var(--fti-grigio);
}

.fti-evento__testo {
	flex: 1 1 18.75rem;
	gap: 0.25rem;
}

.fti-evento__testo .wp-block-heading {
	font-size: 1.375rem;
	line-height: 1.3;
}

.fti-eventi--brevi {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	border: 0;
}

.fti-eventi--brevi .fti-evento {
	flex-wrap: nowrap;
	gap: 1.25rem;
	padding: 0;
	border: 0;
}

.fti-eventi--brevi .fti-evento__testo {
	flex-basis: auto;
}

.fti-eventi--brevi .fti-evento__testo .wp-block-heading {
	font-size: 1.25rem;
}

/* Elenchi automatici degli eventi (D-78): stesse righe di quelle scritte a mano, con il titolo come link. */
ol.fti-eventi {
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

/* Riga scritta a mano (eventi ancora senza date) e subito sotto l'elenco automatico: una sola linea tra le due. */
.fti-eventi + .fti-eventi {
	margin-top: 0;
}

.fti-eventi + .fti-eventi > :first-child {
	border-top: 0;
}

.fti-evento__testo .wp-block-heading a {
	color: var(--fti-nero);
}

.fti-stato-evento {
	padding: 0.125rem 0.5rem;
	border: 2px solid var(--fti-nero);
	font-size: 0.9375rem;
	font-weight: 700;
}

.fti-eventi-vuoto {
	margin-bottom: 0;
}

/* Home: prossimi eventi e link a «Eventi». */
.fti-prossimi {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

.fti-prossimi > * {
	margin: 0;
}

/* Pagina di un evento: scheda con date, sede, tipo e contatto; dicitura di licenza in fondo. */
.fti-scheda-evento {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	max-width: 55rem;
}

.fti-corpo > .fti-scheda-evento {
	margin-bottom: 3rem;
}

.fti-scheda-evento > * {
	margin: 0;
}

.fti-scheda-evento__dati {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1.5rem 2rem;
	align-self: stretch;
	padding-block: 1.5rem;
	border-block: 1px solid var(--fti-grigio);
}

.fti-scheda-evento__dati dt {
	margin-bottom: 0.25rem;
	font-weight: 700;
}

.fti-scheda-evento__dati dd {
	margin: 0;
}

/* Dicitura di licenza (A.3): in fondo al modello o, dal commit 31 (L-73), nel contenuto prima dell'avviso di chiusura. */
.fti-corpo > .fti-licenza,
.wp-block-post-content > .fti-licenza {
	max-width: 45rem;
	margin-top: 3rem;
	font-size: 0.875rem;
}

/* Fasce delle stagioni (brief 3.4 e 3.8, versione 3; L-47): i colori sono in stagioni.css, qui la struttura. La fascia
   sta nella colonna del sito, larga al massimo 1200 px con gli stessi margini delle altre sezioni; solo lo sfondo e le
   linee di accento vanno a tutta larghezza, con ::before. Il logo largo almeno 336 px con l'area di rispetto (variabile
   --fti-rispetto-logo di ogni stagione) sta a sinistra, con il bordo allineato a quello dei titoli; dove lo spazio non
   basta, al suo posto c'è il nome del gioco scritto. */
.fti-main {
	overflow-x: clip;
}

.wp-block-post-content > .fti-stagione-fascia {
	margin-block-start: var(--fti-sezione);
}

.wp-block-post-content > .fti-stagione-fascia:first-child {
	margin-block-start: 0;
}

/* Una pagina che comincia con una fascia di stagione: la fascia tocca quella arancio del titolo. */
.fti-corpo:has(> .wp-block-post-content:first-child > .fti-stagione-fascia:first-child) {
	padding-top: 0;
}

/* Fasce di stagione una dopo l'altra (pagina Stagioni): si toccano, con una sola linea di accento tra le due. */
.wp-block-post-content > .fti-stagione-fascia + .fti-stagione-fascia {
	margin-block-start: 0;
}

.fti-stagione-fascia + .fti-stagione-fascia::before {
	border-top: 0;
}

.fti-stagione-fascia {
	position: relative;
	isolation: isolate;
	padding-block: 3rem;
	color: var(--fti-tinta-testo);
}

.fti-stagione-fascia::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	border-block: 6px solid var(--fti-tinta-accento);
	background-color: var(--fti-tinta-fondo);
}

.fti-stagione-fascia__interno {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-start;
	container: fti-stagione / inline-size;
}

.fti-stagione-fascia__logo {
	flex: 0 0 auto;
	line-height: 0;
}

.fti-stagione-fascia__img {
	display: block;
	width: var(--fti-larghezza-logo, 336px);
	max-width: none;
	height: auto;
	padding: var(--fti-rispetto-logo, 0px);
	margin-inline-start: calc(-1 * var(--fti-rispetto-logo, 0px));
}

/* Pagina Stagioni, con più fasce una dopo l'altra (D-85, commit 14), dove logo e testo stanno affiancati (container
   query): il logo sta, centrato, in una colonna di larghezza fissa, così il testo comincia sempre allo stesso punto, e
   il suo bordo alto è allineato a quello del titolo della fascia; la fascia è alta quanto il contenuto. L'area di
   rispetto resta tutta nella colonna e nella fascia: può stare nel margine della fascia, non sulla linea di accento
   (--fti-rientro-logo, al massimo 3rem - 6px); quello che avanza spinge giù il testo. Da 61rem la colonna è di 584 px
   e i loghi hanno la stessa area (stagioni.css, commit 16, L-58). Più stretto, il logo sta sopra il testo come nelle
   altre fasce. */
@container fti-stagione (min-width: 61rem) {
	.wp-block-post-content:has(> .fti-stagione-fascia + .fti-stagione-fascia) :is(.fti-stagione-fascia__logo, .fti-stagione-fascia__contenuto) {
		--fti-logo-mostrato: var(--fti-larghezza-logo-pari);
		--fti-rispetto-mostrato: var(--fti-rispetto-logo-pari);
		--fti-colonna-logo: var(--fti-colonna-logo-pari);
		--fti-rientro-logo: min(var(--fti-rispetto-mostrato), 3rem - 6px);
	}

	.wp-block-post-content:has(> .fti-stagione-fascia + .fti-stagione-fascia) .fti-stagione-fascia__logo {
		display: flex;
		justify-content: center;
		width: var(--fti-colonna-logo);
		margin-block: calc(-1 * var(--fti-rientro-logo));
	}

	.wp-block-post-content:has(> .fti-stagione-fascia + .fti-stagione-fascia) .fti-stagione-fascia__img {
		width: var(--fti-logo-mostrato);
		padding: var(--fti-rispetto-mostrato);
		margin-inline-start: 0;
	}

	.wp-block-post-content:has(> .fti-stagione-fascia + .fti-stagione-fascia) .fti-stagione-fascia__contenuto {
		padding-block-start: calc(var(--fti-rispetto-mostrato) - var(--fti-rientro-logo));
	}
}

.fti-stagione-fascia__nome {
	display: none;
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

.fti-stagione-fascia__contenuto {
	display: flex;
	flex: 1 1 22rem;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	min-width: 0;
}

.fti-stagione-fascia__contenuto > * {
	margin: 0;
}

.fti-stagione-fascia__contenuto > .wp-block-heading:first-child {
	margin: 0;
}

.fti-stagione-fascia__contenuto > .fti-eventi,
.fti-stagione-fascia__contenuto > ol.fti-eventi,
.fti-stagione-fascia__contenuto > .fti-passi,
.fti-stagione-fascia__contenuto > .fti-prossimi {
	align-self: stretch;
}

/* Nelle fasce di stagione testo, link e linee nel colore del testo; fuoco nero, visibile su tutti i fondi chiari di
   stagione; piastrelle con data e numeri nel colore di stagione, con testo nero. I pulsanti secondari prendono i colori
   di pulsante della stagione, se li ha (BIOBUZZ: nero con il testo giallo, D-85), altrimenti restano bianchi e neri. */
.fti-main .fti-stagione-fascia a:not(.wp-element-button),
.fti-main .fti-stagione-fascia .fti-evento__testo .wp-block-heading a,
.fti-main .fti-stagione-fascia .wp-block-button.is-style-link .wp-block-button__link {
	color: var(--fti-tinta-testo);
	text-decoration-color: currentColor;
}

.fti-stagione-fascia .wp-block-button.is-style-secondario .wp-block-button__link {
	border-color: var(--fti-tinta-pulsante, var(--fti-nero));
	background-color: var(--fti-tinta-pulsante, var(--fti-bianco));
	color: var(--fti-tinta-pulsante-testo, var(--fti-nero));
}

.fti-stagione-fascia :focus-visible {
	outline-color: var(--fti-tinta-testo);
}

.fti-stagione-fascia .fti-data:not(.fti-data--da-confermare):not(.fti-data--passata),
.fti-stagione-fascia .fti-passo__numero {
	background-color: var(--fti-tinta-piastrella);
	color: var(--fti-tinta-testo);
}

/* Commit 36 (L-78): nelle fasce di stagione i quadrati delle date hanno il bordo nel colore d'accento della stagione
   e la data un po' più grande. */
.fti-stagione-fascia .fti-data {
	border: 3px solid var(--fti-tinta-accento);
}

.fti-stagione-fascia .fti-data__giorno {
	font-size: 1.875rem;
}

.fti-stagione-fascia .fti-data--lungo .fti-data__giorno {
	font-size: 1.375rem;
}

.fti-stagione-fascia .fti-eventi,
.fti-stagione-fascia .fti-evento,
.fti-stagione-fascia .fti-passi,
.fti-stagione-fascia .fti-passo {
	border-color: var(--fti-tinta-testo);
}

.fti-segno-stagione {
	padding: 0.125rem 0.5rem;
	border: 2px solid var(--fti-tinta-testo);
	font-size: 0.9375rem;
	font-weight: 700;
}

.fti-stagione-fascia__video {
	font-weight: 700;
}

/* Home: il link «Le stagioni precedenti» subito sotto la fascia della stagione (versione 3, L-47). */
.wp-block-post-content > .fti-sezione--link {
	margin-block-start: 1.5rem;
}

.fti-testo-breve {
	gap: 1rem;
	max-width: 34em;
}

.fti-due-colonne > .wp-block-image {
	margin: 0;
}

/* Indirizzi email delle schede di Contatti (L-65, L-67): il dominio va a capo intero, dopo la «@», mai a metà parola.
   Un inline-block non riceve la sottolineatura del link: la prende da sé, con lo stesso colore e spessore. */
.fti-dominio {
	display: inline-block;
	text-decoration: inherit;
}

/* Sezione di testo con il riquadro del dato chiave (commit 22, L-65): titolo sopra; sotto, il testo nella colonna di
   sinistra e, nella colonna di destra, il riquadro nello stile delle schede: barra arancio, titolo, due righe. Le
   colonne sono quelle di «Testo e foto» (commit 31, L-73). Sui telefoni il riquadro va sotto il testo. */
.fti-sezione--con-dato > .wp-block-heading:first-child {
	margin-bottom: 1.25rem;
	font-size: 2rem;
}

.fti-con-dato {
	display: grid;
	gap: 2rem 4rem;
	align-items: start;
}

.fti-con-dato > .fti-testo-breve {
	max-width: 40em;
}

/* Una sola griglia per gli impaginati a due colonne (commit 31, L-73): «Testo e foto», testi affiancati, testo con il
   riquadro del dato e «Testo e loghi» hanno le stesse due colonne uguali e lo stesso spazio tra loro, 4rem; a 1440 px
   112–680 e 744–1312. La verifica di lancio controlla che la colonna di destra cominci allo stesso punto in tutti. */
@media (min-width: 50rem) {
	.fti-con-dato {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 4rem;
	}

	.fti-due-colonne--testi {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 4rem;
	}
}

.fti-dato {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-inline-start: 6px solid var(--fti-arancio);
}

.fti-dato > .wp-block-heading {
	font-size: 1.5rem;
	line-height: 1.25;
}

/* Testi affiancati (commit 14): due colonne di testo, ognuna con il titolo come quello delle sezioni di testo (2rem e
   1,25rem sotto, con lo spazio del gruppo). */
.fti-due-colonne--testi > .fti-testo-breve > .wp-block-heading:first-child {
	margin-bottom: 0.25rem;
	font-size: 2rem;
}

.fti-due-colonne > .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Sezioni «Testo e foto» (D-85, brief 1.3): la foto è allineata in alto al titolo della sezione e sta nella colonna,
   come titolo e testo (niente più foto fino al bordo della finestra: L-58). Nella pagina si alternano: la prima con la foto a
   destra, la seconda a sinistra, e così via. Sui telefoni la foto sta sopra, poi titolo e testo. Il gruppo delle due
   colonne si apre (display: contents) e titolo, testo e foto stanno nella griglia della sezione. Senza foto, finché non
   è nella libreria (D-76), il testo resta da solo come in una sezione di testo. */
.fti-sezione--foto:has(> .fti-due-colonne > .wp-block-image) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.fti-sezione--foto:has(> .fti-due-colonne > .wp-block-image) > .fti-due-colonne {
	display: contents;
}

.fti-sezione--foto:has(> .fti-due-colonne > .wp-block-image) > .wp-block-heading:first-child {
	margin: 0;
}

.fti-sezione--foto > .fti-due-colonne > .wp-block-image {
	order: -1;
}

@media (min-width: 50rem) {
	.fti-sezione--foto:has(> .fti-due-colonne > .wp-block-image) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 1.25rem 4rem;
	}

	.fti-sezione--foto > .wp-block-heading:first-child,
	.fti-sezione--foto > .fti-due-colonne > .fti-testo-breve {
		grid-column: 1;
	}

	.fti-sezione--foto > .fti-due-colonne > .wp-block-image {
		grid-row: 1 / span 2;
		grid-column: 2;
	}

	.fti-sezione--foto:nth-child(even of .fti-sezione--foto) > .wp-block-heading:first-child,
	.fti-sezione--foto:nth-child(even of .fti-sezione--foto) > .fti-due-colonne > .fti-testo-breve {
		grid-column: 2;
	}

	.fti-sezione--foto:nth-child(even of .fti-sezione--foto) > .fti-due-colonne > .wp-block-image {
		grid-column: 1;
	}
}

/* Sezione nei colori della stagione (Stagione Attuale, commit 36, L-78): fondo e linee della stagione a tutta
   larghezza, schede con la barra e le piastrelle della stagione, pulsanti nei colori di pulsante della stagione. */
.fti-sezione--tinta {
	position: relative;
	isolation: isolate;
	padding-block: 4rem;
	color: var(--fti-tinta-testo);
}

.fti-sezione--tinta::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	border-block: 6px solid var(--fti-tinta-accento);
	background-color: var(--fti-tinta-fondo);
}

.wp-block-post-content > .fti-stagione-fascia + .fti-sezione--tinta {
	margin-block-start: 0;
}

.fti-sezione--tinta .fti-scheda {
	border-inline-start-color: var(--fti-tinta-accento);
}

.fti-sezione--tinta .fti-piastrella {
	background-color: var(--fti-tinta-piastrella);
	color: var(--fti-tinta-testo);
}

.fti-sezione--tinta .wp-block-button.is-style-secondario .wp-block-button__link {
	border-color: var(--fti-tinta-pulsante, var(--fti-nero));
	background-color: var(--fti-tinta-pulsante, var(--fti-bianco));
	color: var(--fti-tinta-pulsante-testo, var(--fti-nero));
}

.fti-sezione--tinta :focus-visible {
	outline-color: var(--fti-tinta-testo);
}

/* Riquadro nei colori della stagione nella colonna di testo (Risorse per i team, commit 36, L-78): fondo, linee e testo
   della stagione, con il pulsante secondario nei colori di pulsante della stagione; la foto accanto resta fuori. */
.fti-riquadro-stagione {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	align-self: stretch;
	padding: 1.5rem;
	border-block: 6px solid var(--fti-tinta-accento);
	background-color: var(--fti-tinta-fondo);
	color: var(--fti-tinta-testo);
}

.fti-riquadro-stagione > * {
	margin: 0;
}

.fti-riquadro-stagione .wp-block-button.is-style-secondario .wp-block-button__link {
	border-color: var(--fti-tinta-pulsante, var(--fti-nero));
	background-color: var(--fti-tinta-pulsante, var(--fti-bianco));
	color: var(--fti-tinta-pulsante-testo, var(--fti-nero));
}

.fti-riquadro-stagione :focus-visible {
	outline-color: var(--fti-tinta-testo);
}

/* Loghi centrati sotto il titolo (Partner, commit 36, L-78): una colonna, loghi affiancati, tutti alti 120 px, così
   hanno lo stesso peso visivo. */
.fti-sezione--loghi-centrati {
	text-align: center;
}

.fti-sezione--loghi-centrati .fti-sponsor {
	justify-content: center;
	gap: 2rem 4rem;
}

.fti-sezione--loghi-centrati .fti-sponsor img {
	height: 120px;
}

/* «Testo e loghi» (Partner, commit 31, L-73): come «Testo e foto», titolo e testo a sinistra e i loghi a destra,
   allineati in alto al titolo; sui telefoni i loghi vanno sotto il testo. I loghi nelle colonne stanno a sinistra. */
.fti-sezione--loghi > .fti-due-colonne,
.fti-sezione--carosello > .fti-due-colonne {
	display: contents;
}

.fti-sezione--loghi,
.fti-sezione--carosello {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.fti-sezione--loghi > .wp-block-heading:first-child,
.fti-sezione--carosello > .wp-block-heading:first-child {
	margin: 0;
}

@media (min-width: 50rem) {
	.fti-sezione--loghi,
	.fti-sezione--carosello {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 1.25rem 4rem;
	}

	.fti-sezione--loghi > .wp-block-heading:first-child,
	.fti-sezione--loghi > .fti-due-colonne > .fti-testo-breve,
	.fti-sezione--carosello > .wp-block-heading:first-child,
	.fti-sezione--carosello > .fti-due-colonne > .fti-testo-breve {
		grid-column: 1;
	}

	.fti-sezione--loghi > .fti-due-colonne > .fti-sponsor,
	.fti-sezione--carosello > .fti-due-colonne > .fti-carosello {
		grid-row: 1 / span 2;
		grid-column: 2;
	}
}

/* Carosello (commit 34, L-76): una foto 3:2 alla volta, scroll-snap. Dal commit 36 (L-78) niente pallini: le frecce
   stanno sopra la foto, centrate in verticale ai due lati, con testo e bordo bianchi su un velo nero, come «Scopri il
   programma» sul video. Con il movimento ridotto lo scorrimento è immediato. */
.fti-carosello__vista {
	position: relative;
}
.fti-carosello {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.fti-carosello__binario {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.fti-carosello__binario::-webkit-scrollbar {
	display: none;
}

.fti-carosello__elenco {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fti-carosello__voce {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.fti-carosello__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.fti-carosello__freccia {
	display: inline-flex;
	position: absolute;
	top: 50%;
	z-index: 1;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--fti-bianco);
	border-radius: 4px;
	background-color: color-mix(in srgb, var(--fti-nero) 70%, transparent);
	color: var(--fti-bianco);
	cursor: pointer;
	transform: translateY(-50%);
}

.fti-carosello__freccia--precedente {
	left: 0.75rem;
}

.fti-carosello__freccia--successiva {
	right: 0.75rem;
}

.fti-carosello__freccia:focus-visible {
	outline-color: var(--fti-bianco);
}

.fti-carosello__freccia::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}

.fti-carosello__freccia--precedente::before {
	transform: translateX(2px) rotate(-135deg);
}

.fti-carosello__freccia:disabled {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.fti-carosello__binario {
		scroll-behavior: auto;
	}
}

.fti-testo-breve > .fti-sponsor {
	margin-top: 0.5rem;
}

/* Riquadri di approfondimento e caselle di contatto. */
.fti-riquadro {
	gap: 0.5rem;
	padding: 1.5rem;
	border: 1px solid var(--fti-grigio);
}

.fti-riquadro .is-style-link .wp-block-button__link {
	color: var(--fti-nero);
	font-size: 1.375rem;
	text-decoration: none;
}

.fti-riquadro .is-style-link .wp-block-button__link:hover {
	text-decoration: underline;
}

.fti-casella {
	gap: 0.5rem;
	padding-top: 1.25rem;
	border-top: 6px solid var(--fti-arancio);
}

.fti-casella .wp-block-heading {
	font-size: 1.375rem;
	line-height: 1.3;
}

/* Schede notizie: foto 3:2, data, titolo, estratto; bordo e ombre no (11.6). */
.fti-schede-notizie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
	gap: 2.5rem;
}

.fti-schede-notizie > li {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
}

.fti-schede-notizie > li > * {
	margin: 0;
}

.fti-schede-notizie .wp-block-post-date {
	font-size: 0.9375rem;
}

.fti-schede-notizie .wp-block-post-title {
	font-size: 1.25rem;
	line-height: 1.3;
}

.fti-schede-notizie .wp-block-post-title a {
	color: var(--fti-nero);
}

.fti-schede-notizie .wp-block-post-excerpt,
.fti-schede-notizie .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 1rem;
}

.fti-notizie + .wp-block-buttons {
	margin-top: 2rem;
}

.fti-paginazione {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--fti-grigio);
}

.fti-paginazione a {
	font-weight: 700;
}

/* Sostegno: i loghi approvati di BDR Thermea Foundation e Baxi Italia affiancati, alla stessa altezza; il nome resta
   nei testi alternativi (brief 3.7, C-16, C-39). Riga e loghi centrati (D-85, brief 2.6). */
.fti-piccolo {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

.fti-sponsor {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	align-items: center;
}

.fti-sezione--sostegno {
	text-align: center;
}

.fti-sezione--sostegno .fti-sponsor {
	justify-content: center;
}

.fti-sponsor > * {
	margin: 0;
}

/* Loghi dei sostenitori alti 96 px (L-71, il 50% in più dei 64 px di prima del commit 21; 80 px con L-63), con il link al
   sito del sostenitore, senza freccia. */
.fti-sponsor img {
	width: auto;
	max-width: 100%;
	height: 96px;
	object-fit: contain;
}

.fti-sponsor a {
	display: block;
	line-height: 0;
}

/* Numeri del programma e citazioni (D-84) ------------------------------------- */

/* Fascia blu FIRST a tutta larghezza, attaccata alla fascia del video (D-85, brief 2.2; blu al posto del nero dal commit
   16, L-58): numeri, righe, barre, titolo e nota in bianco (5,9:1 sul blu; l'arancio sul blu fa 2,2:1). Due numeri per
   riga sui telefoni, tutti e quattro su una riga dai 48 rem. Numero e riga stanno nella stessa voce dell'elenco. */
.fti-sezione--numeri {
	position: relative;
	isolation: isolate;
	padding-block: 4rem;
	color: var(--fti-bianco);
}

.fti-sezione--numeri::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	background-color: var(--fti-arancio);
}

.wp-block-post-content > .fti-home-apertura + .fti-sezione--numeri {
	margin-block-start: 0;
}

.fti-sezione--numeri > .wp-block-heading {
	color: var(--fti-bianco);
}

/* Numeri su fascia arancione con testo bianco (commit 36, L-78): eccezione voluta (D-97); fuoco nero. */
.fti-sezione--numeri :focus-visible {
	outline-color: var(--fti-focus-su-arancio);
}

.fti-numeri__elenco {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.fti-numeri__elenco {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fti-numeri__voce {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-inline-start: 1.25rem;
	border-inline-start: 6px solid var(--fti-bianco);
	font-size: 1.25rem;
	line-height: 1.35;
}

.fti-main .fti-sezione--numeri a:not(.wp-element-button) {
	color: var(--fti-bianco);
	text-decoration-color: currentColor;
}

.fti-numeri__valore {
	color: var(--fti-bianco);
	font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
	font-weight: 700;
	line-height: 1;
}

.fti-numeri__nota {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

/* Citazione (blocco Citazione del core): Woodie Flowers in Il programma, le testimonianze in Per le famiglie. */
.wp-block-quote {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-inline-start: 6px solid var(--fti-arancio);
	font-size: 1.25rem;
}

.wp-block-quote > p {
	margin: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 1rem;
	font-style: normal;
}

/* Domande frequenti a fisarmonica (D-85, brief 3): ogni domanda è un blocco Dettagli; la domanda è il pulsante che apre
   e chiude la risposta, con il più e il meno disegnati dal CSS. Righe tra linee grigie, come gli elenchi. Una risposta
   aperta alla volta: name uguale per tutte (fti_domanda) e sito.js dove il browser non lo supporta. */
.fti-domanda {
	margin: 0;
	border-top: 1px solid var(--fti-grigio);
}

.fti-domanda:not(:has(+ .fti-domanda)) {
	border-bottom: 1px solid var(--fti-grigio);
}

.fti-domanda > summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding-block: 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.fti-domanda > summary::-webkit-details-marker {
	display: none;
}

.fti-domanda > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.fti-domanda[open] > summary::after {
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.fti-domanda > summary:hover {
	text-decoration: underline;
	text-decoration-color: var(--fti-arancio);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.fti-domanda > :not(summary) {
	margin: 0 0 1rem;
}

.fti-testo-breve > .fti-domanda,
.fti-sezione--testo > .fti-domanda {
	align-self: stretch;
	margin-block: 0;
}

.fti-testo-breve:has(> .fti-domanda) {
	gap: 0;
}

/* Tutti i gruppi di domande larghi uguale (commit 14): la colonna di testo di 40em, come le sezioni di testo; su
   computer non più larga della colonna di testo della prima sezione, quella con la foto (metà della sezione meno metà
   del suo spazio tra le colonne, 4rem). Vale anche per il glossario in fondo. */
.fti-sezione--foto > .fti-due-colonne > .fti-testo-breve:has(> .fti-domanda) {
	max-width: 40em;
}

@media (min-width: 50rem) {
	.fti-corpo .wp-block-post-content:has(.fti-domanda) > .fti-sezione.fti-sezione--testo:not(.fti-sezione--glossario) {
		max-width: min(40em, (100% - 4rem) / 2);
	}
}

/* Glossario delle Domande frequenti (commit 31, L-73): a tutta larghezza, in due colonne con lo spazio di 4rem della
   griglia a due colonne; una voce non si spezza tra le colonne. Sui telefoni una colonna. */
@media (min-width: 50rem) {
	.fti-sezione--glossario > .fti-elenco {
		max-width: none;
		columns: 2;
		column-gap: 4rem;
	}

	.fti-sezione--glossario > .fti-elenco > li {
		break-inside: avoid;
	}
}

/* Galleria (blocco fti/galleria; brief 3.5) ---------------------------------- */

/* Tre foto 3:2 su computer, una e mezza sui telefoni; scorrimento con scroll-snap, con le frecce o con il dito. */
.fti-sezione--galleria:not(:has(.fti-galleria)) {
	display: none;
}

.fti-galleria {
	position: relative;
	align-self: stretch;
}

.fti-galleria__binario {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
	.fti-galleria__binario {
		scroll-behavior: smooth;
	}
}

.fti-galleria__elenco {
	display: grid;
	grid-auto-columns: calc((100% - 2rem) / 3);
	grid-auto-flow: column;
	gap: 1rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
}

@media (max-width: 599px) {
	.fti-galleria__elenco {
		grid-auto-columns: 66%;
	}
}

.fti-galleria__voce {
	margin: 0;
	scroll-snap-align: start;
}

.fti-galleria__apri {
	display: block;
	line-height: 0;
}

.fti-galleria__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Frecce ai lati, cerchi neri da 48 px con la freccia bianca disegnata dal CSS; grigie quando non c'è altro da vedere. */
.fti-galleria__freccia {
	display: flex;
	position: absolute;
	z-index: 1;
	top: calc(50% - 24px - 0.25rem);
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--fti-bianco);
	border-radius: 50%;
	background-color: var(--fti-nero);
	color: var(--fti-bianco);
	cursor: pointer;
}

.fti-galleria__freccia::before {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}

.fti-galleria__freccia--precedenti {
	left: 0.5rem;
}

.fti-galleria__freccia--precedenti::before {
	transform: translateX(2px) rotate(-135deg);
}

.fti-galleria__freccia--successive {
	right: 0.5rem;
}

.fti-galleria__freccia:disabled {
	background-color: var(--fti-grigio);
	cursor: default;
}

.fti-galleria--ferma > .fti-galleria__freccia {
	display: none;
}

.fti-galleria :focus-visible {
	outline-color: var(--fti-nero);
}

/* Foto a tutto schermo: fondo nero FIRST, foto intera, didascalia e conteggio bianchi, pulsanti bianchi. */
.fti-galleria__dialogo {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 4.5rem 4rem 2rem;
	border: 0;
	background-color: var(--fti-nero);
	color: var(--fti-bianco);
}

.fti-galleria__dialogo::backdrop {
	background-color: var(--fti-nero);
}

.fti-galleria__dialogo[open] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
}

.fti-galleria__dialogo :focus-visible {
	outline-color: var(--fti-bianco);
}

.fti-galleria__grande {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	min-height: 0;
	margin: 0;
}

.fti-galleria__grande img {
	max-width: 100%;
	max-height: calc(100vh - 12rem);
	object-fit: contain;
}

.fti-galleria__grande figcaption,
.fti-galleria__conteggio {
	margin: 0;
	text-align: center;
}

.fti-galleria__conteggio {
	color: var(--fti-grigio);
	font-size: 0.9375rem;
}

.fti-galleria__chiudi {
	position: absolute;
	top: 1rem;
	right: 1rem;
	min-height: 44px;
	padding: 0 1rem;
	border: 2px solid var(--fti-bianco);
	border-radius: 4px;
	background-color: var(--fti-nero);
	color: var(--fti-bianco);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 599px) {
	.fti-galleria__dialogo {
		padding-inline: 0.75rem;
	}

	.fti-galleria__dialogo .fti-galleria__freccia {
		top: auto;
		bottom: 1rem;
	}
}

/* Newsletter (blocco fti/newsletter di fti-core; brief 3.6) ----------------- */

/* Home e Notizie: notizie a sinistra, «Resta aggiornato» a destra; sui telefoni il riquadro viene dopo le notizie. Se il
   modulo non c'è, le notizie prendono tutta la riga. */
.fti-notizie-newsletter {
	display: grid;
	gap: 3rem;
	align-items: start;
}

.fti-notizie-newsletter > * {
	margin-block: 0;
}

@media (min-width: 960px) {
	.fti-notizie-newsletter:has(.fti-newsletter) {
		grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
	}

	.fti-notizie-newsletter:has(.fti-newsletter) .fti-schede-notizie {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	}
}

.fti-notizie-newsletter > :not(:has(.fti-newsletter)):last-child:not(:first-child),
.fti-sezione--newsletter:not(:has(.fti-newsletter)) {
	display: none;
}

.fti-newsletter {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 34em;
	padding: 1.5rem;
	border: 1px solid var(--fti-grigio);
	border-inline-start: 6px solid var(--fti-arancio);
	background-color: var(--fti-bianco);
}

.fti-newsletter > *,
.fti-newsletter__modulo > *,
.fti-newsletter__modulo p {
	margin: 0;
}

.fti-newsletter__titolo {
	font-size: 1.75rem;
}

.fti-newsletter__modulo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fti-newsletter__campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.fti-newsletter__campo label {
	font-weight: 700;
}

.fti-newsletter__campo input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--fti-nero);
	border-radius: 4px;
	background-color: var(--fti-bianco);
	color: var(--fti-nero);
	font: inherit;
}

/* Caselle da 24 px almeno (WCAG 2.5.8), con l'etichetta accanto. */
.fti-newsletter__casella {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.fti-newsletter__casella input {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0.125rem 0 0;
	accent-color: var(--fti-nero);
}

.fti-newsletter__invio .wp-element-button {
	min-height: 52px;
	padding: 0.75rem 1.75rem;
	border: 0;
	cursor: pointer;
}

.fti-newsletter__invio .wp-element-button:disabled {
	cursor: wait;
}

.fti-newsletter__informativa {
	font-size: 0.9375rem;
}

/* Campo trappola: fuori dallo schermo e fuori dall'albero accessibile; lo compilano solo i programmi automatici. */
.fti-newsletter__trappola {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fti-newsletter__esito:empty {
	display: none;
}

.fti-newsletter__esito {
	padding: 0.75rem 1rem;
	border: 2px solid var(--fti-nero);
	font-weight: 700;
}

.fti-newsletter__esito--campi,
.fti-newsletter__esito--errore {
	border-color: var(--fti-rosso);
}

/* Pagina d'errore: mosaico 3×3 con una piastrella mancante. */
.fti-errore {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem 4rem;
	align-items: center;
	padding: var(--fti-sezione) var(--fti-bordo) 2rem;
}

.fti-errore__mosaico {
	display: grid;
	flex: 0 0 auto;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	width: 216px;
	height: 216px;
}

.fti-errore__piena {
	background-color: var(--fti-arancio);
}

.fti-errore__vuota {
	border: 1px solid var(--fti-grigio);
}

.fti-errore__mancante {
	border: 1px dashed var(--fti-grigio);
}

.fti-errore__testo {
	display: flex;
	flex: 1 1 26.25rem;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 34em;
}

.fti-errore .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.fti-errore__testo h1,
.fti-errore__frase {
	margin: 0;
}

.fti-errore__frase {
	font-size: 1.3125rem;
	line-height: 1.45;
}

/* Footer del tema 2 (brief 4, D-82) ----------------------------------------- */

/* Nero FIRST (Maurizio, 02/11/2026, commit 41, L-85; grigio dal commit 36, arancione nel 34, blu dal 16, prima nero):
   testi, link, icone e linee in bianco, 16,3:1, non più un'eccezione ai contrasti. I loghi restano nei quadrati
   bianchi; fuoco bianco. */
.fti-footer {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: var(--fti-sezione);
	padding: 2.5rem var(--fti-bordo) 2rem;
	background-color: var(--fti-nero);
	color: var(--fti-bianco);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.fti-footer a {
	color: var(--fti-bianco);
}

.fti-footer p,
.fti-footer h2 {
	margin: 0;
}

/* Riga 1: gli enti affiancati; niente logo del programma, che l'header fisso mostra sempre (versione 3, L-47). */
.fti-footer__enti {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.5rem 2.5rem;
}

.fti-footer__ente {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.fti-footer__dati {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.fti-footer__titolo {
	color: var(--fti-bianco);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Ogni logo in un quadrato bianco di 96 px con gli angoli smussati, aderente al logo (L-58; 64 px fino al commit 31,
   L-73): 6 px intorno, quanto basta perché gli angoli di 12 px non taglino un logo che arriva al bordo del suo file
   (12 × (1 − 1/√2) = 3,5 px). Il logo sta intero, centrato, nei suoi colori e senza modifiche: il bianco è il fondo su
   cui è pensato. */
.fti-targhetta {
	display: flex;
	flex: 0 0 auto;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	padding: 6px;
	border-radius: 12px;
	background-color: var(--fti-bianco);
	line-height: 0;
}

.fti-targhetta a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Nobodies Studios (L-63): il logo riempie il quadrato, senza margine bianco; gli angoli smussati ne coprono un poco. */
.fti-targhetta--a-filo {
	padding: 0;
	overflow: hidden;
}

.fti-targhetta__logo {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
}

/* Riga 2: link di «Informazioni» a sinistra, social a destra; quando la riga va a capo, le icone ripartono da sinistra. */
.fti-footer__link {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	align-items: center;
	justify-content: space-between;
}

.fti-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fti-footer__social ul {
	gap: 0.5rem;
	margin-inline: -8px;
}

/* Bersaglio di 44 px intorno all'icona di 28 px (WCAG 2.5.8). */
.fti-footer__icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--fti-bianco);
}

/* Al passaggio una linea bianca sotto l'icona: l'arancio sul blu fa 2,2:1. */
.fti-footer__icona:hover {
	box-shadow: inset 0 -3px 0 var(--fti-bianco);
}

/* Riga 3: diciture sui marchi, piccole; link legali e ©. */
.fti-footer__fondo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--fti-bianco);
	color: var(--fti-bianco);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.fti-footer__marchi {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.fti-footer__riga {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	margin-top: 0.5rem;
}

.fti-footer__riga ul {
	gap: 0.5rem 1.25rem;
}

/* Sui telefoni le righe vanno in colonna: loghi e dati, informazioni, social, diciture (brief 4, versione 3). */
@media (max-width: 599px) {
	.fti-footer__link {
		flex-direction: column;
		align-items: flex-start;
	}

	.fti-footer__ente {
		flex-direction: column;
	}
}

/* Campi dei blocchi del tema nell'editor. */
.fti-data__campi {
	display: grid;
	gap: 0.5rem;
	max-width: 20rem;
	margin-top: 0.75rem;
}

/* Movimento solo se richiesto (11.8). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* La progressione dei programmi FIRST (Dalla FIRST LEGO League, commit 37, L-79): grafica a barre delle età fatta di
   gruppi e paragrafi. Una griglia con la colonna dei nomi e tredici colonne, una per anno dai 5 ai 18: la linea 2 è
   l'età di 5 anni, la linea 15 quella di 18. Ogni riga ha il nome con le età scritte (si legge anche senza barre) e la
   barra nel colore del programma; la zona in cui le età si sovrappongono (12–18) è una fascia blu chiara tratteggiata
   dietro le barre. Sui telefoni il nome va sopra la sua barra. */
.fti-progressione {
	display: grid;
	grid-template-columns: minmax(0, 20rem) repeat(13, minmax(0, 1fr));
	gap: 1rem 0;
	align-items: center;
	margin-block: 1rem;
}

.fti-progressione > *,
.fti-progressione__riga > *,
.fti-progressione__scala > * {
	margin-block: 0;
}

.fti-progressione__riga,
.fti-progressione__scala {
	display: contents;
}

/* Righe esplicite: con il posizionamento automatico la fascia, che occupa le righe 1–3, spingerebbe le barre più in basso. */
.fti-progressione__riga--fll > * {
	grid-row: 1;
}

.fti-progressione__riga--ftc > * {
	grid-row: 2;
}

.fti-progressione__riga--frc > * {
	grid-row: 3;
}

.fti-progressione__nome {
	grid-column: 1;
	padding-inline-end: 1.5rem;
	line-height: 1.35;
}

.fti-progressione__barra {
	height: 2rem;
	border-radius: 1rem;
	position: relative;
	z-index: 1;
}

.fti-progressione__riga--fll > .fti-progressione__barra {
	grid-column: 2 / 13;
	background: var(--fti-rosso);
}

.fti-progressione__riga--ftc > .fti-progressione__barra {
	grid-column: 9 / 15;
	background: var(--fti-arancio);
}

.fti-progressione__riga--frc > .fti-progressione__barra {
	grid-column: 11 / 15;
	background: var(--fti-blu);
}

.fti-progressione__comune {
	grid-column: 9 / 15;
	grid-row: 1 / 4;
	align-self: stretch;
	margin: -0.5rem 0;
	border: 2px dashed var(--fti-blu);
	background: color-mix(in srgb, var(--fti-blu) 10%, var(--fti-bianco));
}

.fti-progressione__scala > p {
	grid-row: 4;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.fti-progressione__eta--5 {
	grid-column: 2;
}

.fti-progressione__eta--12 {
	grid-column: 9;
}

.fti-progressione__eta--14 {
	grid-column: 11;
}

.fti-progressione__eta--16 {
	grid-column: 13;
}

.fti-progressione__eta--18 {
	grid-column: 14;
	justify-self: end;
}

.fti-progressione__legenda {
	font-size: 0.875rem;
}

@media (max-width: 49.99rem) {
	.fti-progressione {
		grid-template-columns: repeat(13, minmax(0, 1fr));
		gap: 0.25rem 0;
	}

	.fti-progressione__nome {
		grid-column: 1 / -1;
		padding: 0.75rem 0 0;
	}

	.fti-progressione__barra {
		height: 1.25rem;
	}

	.fti-progressione__riga--fll > .fti-progressione__nome {
		grid-row: 1;
	}

	.fti-progressione__riga--fll > .fti-progressione__barra {
		grid-row: 2;
	}

	.fti-progressione__riga--ftc > .fti-progressione__nome {
		grid-row: 3;
	}

	.fti-progressione__riga--ftc > .fti-progressione__barra {
		grid-row: 4;
	}

	.fti-progressione__riga--frc > .fti-progressione__nome {
		grid-row: 5;
	}

	.fti-progressione__riga--frc > .fti-progressione__barra {
		grid-row: 6;
	}

	.fti-progressione__riga--fll > .fti-progressione__barra {
		grid-column: 1 / 12;
	}

	.fti-progressione__riga--ftc > .fti-progressione__barra {
		grid-column: 8 / 14;
	}

	.fti-progressione__riga--frc > .fti-progressione__barra {
		grid-column: 10 / 14;
	}

	.fti-progressione__comune {
		grid-column: 8 / 14;
		grid-row: 1 / 7;
		margin: 0;
		/* I nomi passano sopra la fascia: niente linee laterali che taglino il testo. */
		border-inline: 0;
	}

	.fti-progressione__scala > p {
		grid-row: 7;
	}

	.fti-progressione__eta--5 {
		grid-column: 1;
	}

	.fti-progressione__eta--12 {
		grid-column: 8;
	}

	.fti-progressione__eta--14 {
		grid-column: 10;
	}

	.fti-progressione__eta--16 {
		grid-column: 12;
	}

	.fti-progressione__eta--18 {
		grid-column: 13;
	}
}

/* I ruoli (Volontari e Coach e mentor, commit 37, L-79): gruppi a fisarmonica come le Domande frequenti; dentro, per ogni
   ruolo la descrizione e sotto il link alla sua pagina, vicini tra loro e staccati dal ruolo dopo. In Volontari i gruppi
   stanno su due colonne, sotto il titolo e la riga in testa. Dopo le fisarmoniche, la riga e il link che chiudono la
   colonna tornano a respirare. */
.fti-domanda > p + .wp-block-buttons {
	margin-top: -0.5rem;
	margin-bottom: 1.5rem;
}

.fti-domanda > .wp-block-buttons:last-child {
	margin-bottom: 1.25rem;
}

.fti-testo-breve:has(> .fti-domanda) > .fti-domanda + p {
	margin-top: 1.5rem;
}

.fti-testo-breve:has(> .fti-domanda) > p + .wp-block-buttons {
	margin-top: 0.5rem;
}

.fti-testo-breve:has(> .fti-domanda) > .wp-block-heading + p {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.fti-sezione--ruoli > .fti-due-colonne {
	margin-top: 1.5rem;
}

@media (min-width: 50rem) {
	.fti-sezione--ruoli > .fti-due-colonne,
	.fti-sezione--risorse > .fti-due-colonne {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 4rem;
	}
}

.fti-sezione--risorse > .fti-due-colonne {
	margin-top: 1.25rem;
}

/* Revisione dei testi con Beatrice (commit 40, L-84) ------------------------ */

/* «Italy Championship» va a capo insieme nel titolo del passo del Programma (NOTA del file delle correzioni). */
.fti-insieme {
	white-space: nowrap;
}

/* Tabelle (Cookie Policy, «In pratica» in Da FIRST LEGO League): righe separate dalle linee grigie degli elenchi,
   intestazione in grassetto sopra una linea nera. I selettori con .wp-block-table battono quelli del core (bordi
   neri di 1 px, linea di 3 px sotto l'intestazione, parole spezzate a metà nella disposizione fissa). */
.wp-block-table.fti-tabella {
	margin: 0;
}

.wp-block-table.fti-tabella table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table.fti-tabella thead {
	border-bottom: 0;
}

.wp-block-table.fti-tabella th,
.wp-block-table.fti-tabella td {
	padding: 0.75rem 1rem 0.75rem 0;
	border: 0;
	border-bottom: 1px solid var(--fti-grigio);
	text-align: start;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: normal;
}

.wp-block-table.fti-tabella th {
	border-bottom: 2px solid var(--fti-nero);
	font-weight: 700;
}

.wp-block-table.fti-tabella th:last-child,
.wp-block-table.fti-tabella td:last-child {
	padding-inline-end: 0;
}

/* I nomi lunghi dei cookie vanno a capo dentro la loro cella, così a 390 px la tabella non esce dalla colonna. */
.wp-block-table.fti-tabella code {
	overflow-wrap: anywhere;
}

/* Sui telefoni le colonne prendono la larghezza che serve al loro testo, con un corpo un po' più piccolo. */
@media (max-width: 599px) {
	.wp-block-table.fti-tabella table {
		table-layout: auto;
		font-size: 0.9375rem;
	}

	.wp-block-table.fti-tabella th,
	.wp-block-table.fti-tabella td {
		padding-inline-end: 0.75rem;
	}

	.wp-block-table.fti-tabella td:first-child {
		width: 34%;
	}
}

/* Elenco di link (Risorse per i team, I documenti in Bandi): le righe degli elenchi, con il link in grassetto. */
.fti-elenco--link > li > a {
	font-weight: 700;
}

/* Sottosezioni su due colonne con i titoli h3 («Che cosa vi aspetta» in Da FIRST LEGO League). */
.fti-due-colonne--sottosezioni {
	margin-top: 1.25rem;
}

.fti-due-colonne--sottosezioni > .fti-testo-breve > .wp-block-heading:not(:first-child) {
	margin-top: 1.5rem;
}

@media (min-width: 50rem) {
	.fti-due-colonne--sottosezioni {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 4rem;
	}
}

/* Pagina inglese (NOTA): in testa il video della home con il titolo della pagina, senza la fascia arancione; i testi
   del pulsante di pausa sono quelli inglesi delle Impostazioni (la pagina è in en_US). */
.wp-block-post-content > .fti-home-apertura--inglese .fti-titolo-home {
	max-width: 9em;
}

/* «International Teams (EN)» allineata a destra (NOTA): tra 1024 e 1279 px il menu è largo quanto l'header e la voce
   va in fondo a destra; da 1280 px il menu è già allineato a destra. Le due righe sono allineate a destra. */
@media (min-width: 1024px) {
	.fti-menu__voce--inglese {
		margin-inline-start: auto;
	}

	.fti-menu .fti-menu__inglese {
		text-align: end;
	}
}

/* BIOBUZZ con i colori di FIRST CANOPY (commit 41, L-85) --------------------- */

/* Le zone di BIOBUZZ: le fasce della stagione (home, Calendario, Championship), «La sfida della stagione» in Risorse
   per i team (fti-sezione--tinta) e tutta la pagina Stagione Attuale sotto la fascia arancione del titolo
   (fti-zona-stagione, un solo fondo per tutte le sezioni, senza stacchi). I colori sono le variabili di
   .fti-tinta--biobuzz in stagioni.css; le altre stagioni non hanno --fti-tinta-immagine e restano come sono. */
.fti-stagione-fascia::before,
.fti-sezione--tinta::before,
.fti-zona-stagione::before {
	background-image: var(--fti-tinta-immagine, none);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.fti-tinta--biobuzz::before {
	border-block: 0;
}

.wp-block-post-content > .fti-zona-stagione {
	position: relative;
	isolation: isolate;
	margin-block: 0;
	padding-block-end: var(--fti-sezione);
	color: var(--fti-tinta-testo);
}

.fti-zona-stagione::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(50% - 50vw);
	background-color: var(--fti-tinta-fondo);
}

/* La zona tocca la fascia arancione del titolo e il footer. */
.fti-corpo:has(> .wp-block-post-content:first-child > .fti-zona-stagione:first-child) {
	padding-top: 0;
}

body:has(.fti-zona-stagione) .fti-footer {
	margin-top: 0;
}

/* Nella zona le sezioni non dipingono un fondo loro: lo fa la zona. */
.fti-zona-stagione > .fti-stagione-fascia {
	margin-block: 0;
}

.fti-zona-stagione > .fti-stagione-fascia::before,
.fti-zona-stagione > .fti-sezione--tinta::before {
	content: none;
}

.fti-zona-stagione > .fti-sezione {
	margin-block-start: var(--fti-sezione);
}

/* Titoli e testi bianchi sul teal (12,1:1). */
.fti-tinta--biobuzz :is(h2, h3, h4) {
	color: inherit;
}

/* Link nel testo e link con l'aspetto di link: nel giallo del gioco, sottolineati (9,2:1), anche al passaggio; la freccia dei link
   esterni prende lo stesso colore. */
.fti-main .fti-tinta--biobuzz a:not(.wp-element-button),
.fti-main .fti-tinta--biobuzz a:not(.wp-element-button):hover,
.fti-main .fti-tinta--biobuzz .wp-block-button.is-style-link .wp-block-button__link,
.fti-main .fti-tinta--biobuzz .wp-block-button.is-style-link .wp-block-button__link:hover {
	color: var(--fti-tinta-link);
	text-decoration-color: currentColor;
}

/* Pulsanti nel giallo del gioco con il testo nero (16:1), come nelle fasce e nelle sezioni di stagione. */
.fti-zona-stagione .wp-block-button.is-style-secondario .wp-block-button__link {
	border-color: var(--fti-tinta-pulsante);
	background-color: var(--fti-tinta-pulsante);
	color: var(--fti-tinta-pulsante-testo);
}

/* Fuoco bianco sul teal, nero nelle schede gialle. */
.fti-tinta--biobuzz :focus-visible,
.fti-zona-stagione :focus-visible {
	outline-color: var(--fti-tinta-testo);
}

/* Schede e riquadri nel giallo chiaro di BIOBUZZ con il testo nero (16,8:1): le schede di Stagione Attuale e gli eventi
   delle fasce, che diventano schede separate da uno spazio al posto delle linee. Dentro, link e fuoco neri; il pulsante
   giallo ha il bordo nero, perché sul giallo chiaro si distingua. */
.fti-tinta--biobuzz .fti-scheda,
.fti-tinta--biobuzz .fti-evento {
	padding: 1.25rem 1.5rem;
	border: 0;
	background-color: var(--fti-tinta-scheda);
	color: var(--fti-tinta-scheda-testo);
}

.fti-tinta--biobuzz .fti-eventi {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border: 0;
}

.fti-tinta--biobuzz .fti-eventi--brevi {
	width: 100%;
	max-width: 34rem;
}

.fti-tinta--biobuzz .fti-eventi--brevi .fti-evento {
	padding: 1rem 1.25rem;
}

.fti-main .fti-tinta--biobuzz :is(.fti-scheda, .fti-evento) a:not(.wp-element-button),
.fti-main .fti-tinta--biobuzz :is(.fti-scheda, .fti-evento) a:not(.wp-element-button):hover {
	color: var(--fti-tinta-scheda-testo);
}

.fti-tinta--biobuzz :is(.fti-scheda, .fti-evento) :focus-visible {
	outline-color: var(--fti-tinta-scheda-testo);
}

.fti-tinta--biobuzz .fti-scheda .wp-block-button.is-style-secondario .wp-block-button__link {
	border-color: var(--fti-tinta-scheda-testo);
}

/* Date ed etichette: pillole del fondo teal con il testo bianco, senza bordo. */
.fti-tinta--biobuzz .fti-data,
.fti-tinta--biobuzz .fti-data:not(.fti-data--da-confermare):not(.fti-data--passata),
.fti-tinta--biobuzz .fti-piastrella,
.fti-tinta--biobuzz .fti-segno-stagione {
	border: 0;
	border-radius: 1rem;
	background-color: var(--fti-tinta-piastrella);
	color: var(--fti-tinta-testo);
}

.fti-tinta--biobuzz .fti-piastrella {
	border-radius: 50%;
}

.fti-tinta--biobuzz .fti-segno-stagione {
	border-radius: 999px;
	padding-inline: 0.75rem;
}

/* Date dei calendari nelle zone di BIOBUZZ (commit 44, L-87): un esagono al posto del quadrato, come le celle
   dell'alveare; a lati piatti in alto e in basso, così la riga del giorno ha tutta la larghezza. */
.fti-tinta--biobuzz .fti-data {
	width: 7rem;
	height: 6.0625rem;
	border-radius: 0;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* Esagoni dell'alveare come decorazione (contorno giallo, alcuni pieni oro, i colori del gioco): un fondo del CSS, fuori dall'albero
   accessibile come aria-hidden. Stanno nel margine della finestra, tagliati dal suo bordo, e non toccano mai il testo
   né il logo con la sua area di rispetto: il logo è a sinistra, gli esagoni a destra (in alto nelle fasce, in basso
   nelle sezioni; nella pagina Stagione Attuale anche in basso a sinistra, sotto l'ultima sezione). Se ne vedono 100 px,
   nel margine di 120 px che la colonna di 1200 px lascia da 1440 px in su; più stretto il margine non basta e gli
   esagoni non ci sono. */
.fti-tinta--biobuzz.fti-stagione-fascia::after,
.fti-tinta--biobuzz.fti-sezione--tinta::after,
.fti-zona-stagione::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 170px;
	height: 168px;
	background: var(--fti-tinta-decoro, none) center / contain no-repeat;
	pointer-events: none;
}

.fti-tinta--biobuzz.fti-stagione-fascia::after {
	top: 1.5rem;
	right: calc(50% - 50vw - 70px);
}

.fti-tinta--biobuzz.fti-sezione--tinta::after {
	right: calc(50% - 50vw - 70px);
	bottom: 1.5rem;
}

.fti-zona-stagione::after {
	bottom: 1.5rem;
	left: calc(50% - 50vw - 70px);
	transform: scaleX(-1);
}

@media (max-width: 89.99rem) {
	.fti-tinta--biobuzz.fti-stagione-fascia::after,
	.fti-tinta--biobuzz.fti-sezione--tinta::after,
	.fti-zona-stagione::after {
		content: none;
	}
}

/* Telefono nel footer (commit 41, L-85): subito dopo i link di «Informazioni», i social restano a destra. */
.fti-footer .fti-footer__telefono {
	margin-inline-end: auto;
}

.fti-footer__etichetta {
	font-weight: 700;
}

/* Grafica delle età più curata (Maurizio, 02/11/2026: «tienila, ma falla più accattivante»; commit 41, L-85): pannello
   grigio chiaro con gli angoli smussati, barre più alte con una sfumatura nel colore del programma, un pallino dello
   stesso colore accanto al nome, l'asse delle età con le tacche e la zona in comune con gli angoli smussati. Con
   «movimento» consentito le barre crescono da sinistra all'apertura (con prefers-reduced-motion niente animazione). */
.fti-progressione {
	padding: 2rem 2rem 1.5rem;
	border-radius: 16px;
	background: color-mix(in srgb, var(--fti-grigio) 12%, var(--fti-bianco));
}

.fti-progressione__barra {
	height: 2.5rem;
	border-radius: 1.25rem;
	box-shadow: 0 6px 12px -8px var(--fti-nero);
	transform-origin: left center;
}

.fti-progressione__riga--fll > .fti-progressione__barra {
	background: linear-gradient(90deg, color-mix(in srgb, var(--fti-rosso) 70%, var(--fti-bianco)), var(--fti-rosso));
}

.fti-progressione__riga--ftc > .fti-progressione__barra {
	background: linear-gradient(90deg, color-mix(in srgb, var(--fti-arancio) 70%, var(--fti-bianco)), var(--fti-arancio));
}

.fti-progressione__riga--frc > .fti-progressione__barra {
	background: linear-gradient(90deg, color-mix(in srgb, var(--fti-blu) 70%, var(--fti-bianco)), var(--fti-blu));
}

.fti-progressione__nome strong::before {
	content: "";
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-inline-end: 0.5rem;
	border-radius: 50%;
	vertical-align: 0.05em;
}

.fti-progressione__riga--fll strong::before {
	background-color: var(--fti-rosso);
}

.fti-progressione__riga--ftc strong::before {
	background-color: var(--fti-arancio);
}

.fti-progressione__riga--frc strong::before {
	background-color: var(--fti-blu);
}

.fti-progressione__comune {
	border-radius: 12px;
}

/* Asse delle età: una linea sotto le barre e una tacca sopra ogni età scritta. */
.fti-progressione::after {
	content: "";
	grid-row: 4;
	grid-column: 2 / 15;
	align-self: start;
	border-top: 2px solid var(--fti-nero);
}

.fti-progressione__scala > p {
	position: relative;
	padding-top: 0.625rem;
}

.fti-progressione__scala > p::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 0.5rem;
	background-color: var(--fti-nero);
}

.fti-progressione__eta--18::before {
	right: 0;
	left: auto;
}

@media (max-width: 49.99rem) {
	.fti-progressione {
		padding: 1.25rem 1rem 1rem;
	}

	.fti-progressione__barra {
		height: 1.5rem;
	}

	.fti-progressione::after {
		grid-row: 7;
		grid-column: 1 / 14;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fti-progressione__barra {
		animation: fti-barra-cresce 0.9s ease-out both;
	}

	.fti-progressione__riga--ftc > .fti-progressione__barra {
		animation-delay: 0.15s;
	}

	.fti-progressione__riga--frc > .fti-progressione__barra {
		animation-delay: 0.3s;
	}
}

@keyframes fti-barra-cresce {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}