@charset "UTF-8";
/* ==========================================================================
   Kizomba Italia — ridisegno 2026
   --------------------------------------------------------------------------
   Caricato dopo i fogli del template Charity, di cui riscrive la resa senza
   toccarne il markup: il template resta quello, cambia come appare.

   COLORE — invariato, come richiesto. #41a0fa e' il blu gia' impostato nel
   template (s5_highlightcolor1) ed e' quello del logo. I fondi scuri vengono
   dalla tavolozza esistente (#0f0f0f, #15181d, #282828), portati a una scala
   coerente invece di restare tre grigi scelti in momenti diversi.

   CARATTERI — Righteous per i titoli, Poppins per il testo. E' l'abbinamento
   che il sistema di design indica per musica, eventi e festival. Roboto Slab,
   il graziato di prima, e' un carattere da rivista: corretto ma fermo, ed e'
   una delle ragioni per cui il sito sembrava vecchio.

   PROFONDITA' — tutto sta su piani diversi lungo l'asse z. L'apertura ha una
   scena tridimensionale vera dietro il contenuto; le schede si inclinano verso
   il puntatore; le sezioni salgono dal fondo entrando nello schermo. Il
   movimento e' governato da js/ki-3d.js, che scrive nelle variabili --ki-rx,
   --ki-ry, --ki-tz lette qui sotto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Token
   -------------------------------------------------------------------------- */

:root {
	/* Piani, dal piu' lontano alla superficie */
	--ki-abisso:     #06080c;
	--ki-fondo:      #0a0e14;
	--ki-superficie: #121821;
	--ki-rilievo:    #19212c;
	--ki-bordo:      rgba(255, 255, 255, 0.08);
	--ki-bordo-vivo: rgba(65, 160, 250, 0.38);

	/* Accento: il blu del marchio, non toccato */
	--ki-blu:        #41a0fa;
	--ki-blu-chiaro: #9ccaff;
	--ki-blu-cupo:   #1b6fc4;
	--ki-blu-velo:   rgba(65, 160, 250, 0.12);

	/* Testo */
	--ki-avorio:     #f2f5f9;
	--ki-fumo:       #94a3b8;

	/* Caratteri */
	--ki-titolo: "Righteous", "Roboto Slab", Georgia, serif;
	--ki-testo:  "Poppins", "Open Sans", system-ui, -apple-system, sans-serif;

	/* Ritmo verticale generoso: le sezioni devono respirare */
	--ki-passo:   clamp(4rem, 9vw, 8.5rem);
	--ki-sfalso:  3.5rem;

	/* Curve: partenza decisa, arrivo morbido, come un passo di ballo */
	--ki-curva:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--ki-curva-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   1. Fondali e testo
   -------------------------------------------------------------------------- */

body#s5_body {
	background-color: var(--ki-fondo);
	color: var(--ki-avorio);
	font-family: var(--ki-testo);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body#s5_body p,
body#s5_body li,
body#s5_body td,
body#s5_body label,
body#s5_body div {
	font-family: var(--ki-testo);
}

body#s5_body p,
body#s5_body li {
	color: var(--ki-avorio);
	font-size: 1.0625rem;
	line-height: 1.72;
}

/* Oltre i 70 caratteri l'occhio perde la riga tornando a capo */
#s5_center_column_wrap_inner p,
.custom p,
.ki-tappa__testo {
	max-width: 68ch;
}

body#s5_body a {
	color: var(--ki-blu-chiaro);
	text-decoration-color: var(--ki-blu-velo);
	text-underline-offset: 0.2em;
	transition: color 0.18s var(--ki-curva);
}

body#s5_body a:hover,
body#s5_body a:focus-visible {
	color: var(--ki-blu);
}

body#s5_body :focus-visible {
	outline: 2px solid var(--ki-blu);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Tutto cio' su cui si clicca deve dirlo */
body#s5_body button,
body#s5_body .readon,
body#s5_body .btn,
body#s5_body [role="button"],
#s5_logo_wrap img {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   2. Tipografia
   -------------------------------------------------------------------------- */

body#s5_body h1,
body#s5_body h2,
body#s5_body h3,
body#s5_body h4,
body#s5_body .s5_mod_h3,
body#s5_body .ki-tappa__titolo,
body#s5_body .jsn-l-title a {
	font-family: var(--ki-titolo);
	color: var(--ki-avorio);
	font-weight: 400;          /* Righteous ha un solo peso, ed e' gia' grasso */
	letter-spacing: 0.005em;
	line-height: 1.08;
	text-transform: none;      /* il template metteva tutto in maiuscolo */
	text-wrap: balance;
}

body#s5_body h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
body#s5_body h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
body#s5_body h3 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); }
body#s5_body h4 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); }

/* Il titolo di sezione si appoggia su una riga blu: e' la battuta d'inizio */
body#s5_body .s5_mod_h3 {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	position: relative;
	padding-block-start: 1.5rem;
	margin-block-end: 1.75rem;
}

body#s5_body .s5_mod_h3::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 3.5rem;
	block-size: 3px;
	background: var(--ki-blu);
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Testata
   -------------------------------------------------------------------------- */

#s5_menu_wrap {
	background: rgba(10, 14, 20, 0.72);
	backdrop-filter: saturate(160%) blur(18px);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	border-bottom: 1px solid var(--ki-bordo);
}

body#s5_body #s5_menu_wrap a,
body#s5_body .mainMenuParentBtn a {
	font-family: var(--ki-testo);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   4. Inclinazioni tridimensionali
   --------------------------------------------------------------------------
   Le variabili --ki-rx, --ki-ry, --ki-tz le scrive ki-3d.js seguendo il
   puntatore. Qui si decide solo come comporle.
   -------------------------------------------------------------------------- */

#s5_logo_wrap {
	perspective: 800px;
}

#s5_logo_wrap img {
	display: block;
	transform:
		rotateX(var(--ki-rx, 0deg))
		rotateY(var(--ki-ry, 0deg))
		translateZ(var(--ki-tz, 0px));
	transform-style: preserve-3d;
	transition:
		transform 0.55s var(--ki-curva-out),
		filter 0.45s var(--ki-curva);
	will-change: transform;
}

/* Mentre il puntatore e' dentro il movimento deve essere immediato,
   altrimenti insegue la mano con mezzo secondo di ritardo */
#s5_logo_wrap.ki-logo--attivo img {
	transition: filter 0.45s var(--ki-curva);
	filter:
		drop-shadow(0 16px 30px rgba(0, 0, 0, 0.6))
		drop-shadow(0 0 26px rgba(65, 160, 250, 0.32));
}

/* Schede inclinabili: maestri, appuntamenti */
.ki-3d {
	position: relative;
	transform-style: preserve-3d;
	transform:
		perspective(900px)
		rotateX(var(--ki-rx, 0deg))
		rotateY(var(--ki-ry, 0deg))
		translateZ(var(--ki-tz, 0px));
	transition:
		transform 0.5s var(--ki-curva-out),
		box-shadow 0.35s var(--ki-curva),
		border-color 0.35s var(--ki-curva);
}

.ki-3d--attiva {
	transition:
		box-shadow 0.35s var(--ki-curva),
		border-color 0.35s var(--ki-curva);
	z-index: 2;
}

/* Il riflesso che scorre sulla superficie, come su una cosa lucida
   guardata di sbieco. Intensita' e posizione arrivano dal JavaScript. */
.ki-3d::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(
		38rem circle at var(--ki-riflesso-x, 50%) var(--ki-riflesso-y, 50%),
		rgba(65, 160, 250, 0.16),
		transparent 42%
	);
	opacity: var(--ki-riflesso-forza, 0);
	transition: opacity 0.35s var(--ki-curva);
}

/* --------------------------------------------------------------------------
   5. Il marchio come fondo della pagina
   --------------------------------------------------------------------------
   Qui c'erano due orbite ellittiche disegnate su tela 2D. Sono state tolte: al
   loro posto sta il marchio a particelle di js/ki-logo3d.js, che e' il soggetto
   giusto per il fondo di questo sito. Due fondi animati insieme si disturbavano,
   e le ellissi non dicevano nulla.

   La tela del marchio e' fissa e occupa la finestra: resta ferma mentre la
   pagina scorre, e il marchio dentro si sposta piu' lentamente del contenuto e
   arretra. E' il parallasse: due piani che si muovono a velocita' diverse danno
   la profondita' che una figura ferma non da'.

   Nel template solo il body ha un fondo, tutti i contenitori di sezione sono
   trasparenti: una tela fissa dietro il contenuto si vede per tutta la pagina.
   -------------------------------------------------------------------------- */

/* Questo e' il contesto di impilatura in cui vive la tela del marchio, ed e'
   quello che le impedisce di scendere sotto il fondo opaco del body: la tela ha
   indice -1, e senza un contesto qui finirebbe dietro il nero della pagina,
   invisibile. Il fondo di questo contenitore e' trasparente, quindi il marchio
   si vede; tutto il contenuto, che dipinge dopo, lo copre. */
.ki-ha-marchio #s5_body_padding,
.ki-ha-marchio #s5_responsive_mobile_sidebar,
.ki-ha-marchio #s5_scrolltotop {
	position: relative;
	z-index: 1;
}

/* Un alone al centro della finestra stacca il marchio dal nero pieno e
   impedisce che le particelle lontane si confondano col fondo. */
.ki-ha-marchio body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		68% 52% at 50% 40%,
		rgba(27, 111, 196, 0.16) 0%,
		transparent 70%
	);
}

/* --------------------------------------------------------------------------
   6. Comparsa delle sezioni
   -------------------------------------------------------------------------- */

.ki-js .ki-compare {
	opacity: 0;
	transform: translate3d(0, 2.2rem, -4rem);
	transition:
		opacity 0.7s var(--ki-curva-out),
		transform 0.9s var(--ki-curva-out);
}

.ki-js .ki-compare--visibile {
	opacity: 1;
	transform: none;
}

/* Senza JavaScript, o con meno movimento richiesto, il contenuto resta
   visibile: la comparsa e' un di piu', non una condizione per leggere. */
.ki-senza-movimento .ki-compare {
	opacity: 1 !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
   7. Ritmo delle sezioni
   -------------------------------------------------------------------------- */

#s5_top_row1_area2,
#s5_top_row2_area2,
#s5_center_area2,
#s5_bottom_row1_area2,
#s5_bottom_row2_area2 {
	padding-block: var(--ki-passo);
}

/* Via bordi e sfondi dal riquadro del modulo: la gerarchia la fa lo spazio */
body#s5_body .module_round_box,
body#s5_body .module_round_box_outer,
body#s5_body .moduletable {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Le coppie affiancate non si allineano in cima: la seconda scende di un passo,
   come il piede che segue. Solo dove c'e' spazio. */
@media (min-width: 900px) {
	#s5_top_row1 .s5_module_box_2,
	#s5_bottom_row1 .s5_module_box_2 {
		margin-block-start: var(--ki-sfalso);
	}
}

/* --------------------------------------------------------------------------
   8. Schede dei maestri
   --------------------------------------------------------------------------
   La struttura di Easy Profile e': .jsn-list > .jsn-l-row > .jsn-l (un profilo).
   La riga esiste solo per impaginare a quattro colonne con i float. Qui la si
   annulla con display:contents e si lascia che sia una griglia a decidere le
   colonne: cosi' le schede si riallineano da sole e ogni profilo diventa un
   oggetto a se', che puo' inclinarsi.
   -------------------------------------------------------------------------- */

.jsn-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem;
	perspective: 1200px;
}

.jsn-list .jsn-l-row {
	display: contents;
}

.jsn-list .jsn-l {
	/* Le larghezze a percentuale del template non servono piu': le colonne
	   le decide la griglia. */
	inline-size: auto;
	float: none;
	margin: 0;
	padding: 1.6rem 1.5rem;
	background: linear-gradient(180deg, var(--ki-superficie), var(--ki-fondo));
	border: 1px solid var(--ki-bordo);
	border-radius: 12px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 10px 28px rgba(0, 0, 0, 0.35);
}

.jsn-list .jsn-l.ki-3d--attiva {
	border-color: var(--ki-bordo-vivo);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.07) inset,
		0 28px 60px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(65, 160, 250, 0.14);
}

.jsn-l-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.9rem;
}

.jsn-l-avatar {
	float: none;
	margin: 0;
}

.jsn-l-avatar img {
	inline-size: 88px;
	block-size: 88px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid rgba(65, 160, 250, 0.28);
	/* L'avatar galleggia sopra il piano della scheda: e' cio' che rende
	   leggibile l'inclinazione. */
	transform: translateZ(34px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

.jsn-l-title {
	float: none;
	margin: 0;
}

.jsn-l-title a {
	font-size: 1.18rem;
	line-height: 1.2;
	display: inline-block;
	transform: translateZ(18px);
}

.jsn-l-fields {
	float: none;
	margin: 0;
	inline-size: 100%;
	display: grid;
	gap: 0.35rem;
	font-size: 0.86rem;
}

.jsn-l-field-title {
	color: var(--ki-fumo);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	display: block;
}

.jsn-l-field-value {
	color: var(--ki-avorio);
	overflow-wrap: anywhere;
}

/* Sotto i 520px una colonna sola: due schede affiancate a quella larghezza
   spezzano gli indirizzi di posta su troppe righe. */
@media (max-width: 520px) {
	.jsn-list {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   8b. Riquadri chiari ereditati
   --------------------------------------------------------------------------
   Il template imposta background:#FFFFFF su .top_box_inner e .profile_image_item:
   erano pensati per la versione chiara dimostrativa di Shape5. Su un sito scuro
   restano tre lastre bianche in mezzo alla pagina, ed erano la cosa che piu'
   faceva sembrare il sito vecchio. Qui diventano superfici scure come le altre.

   Il contenuto non si tocca: cambiano solo fondo, bordo e colore del testo.
   -------------------------------------------------------------------------- */

body#s5_body .top_box_inner,
body#s5_body .profile_image_item {
	background: linear-gradient(180deg, var(--ki-superficie), var(--ki-fondo));
	border: 1px solid var(--ki-bordo);
	border-radius: 14px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 14px 34px rgba(0, 0, 0, 0.4);
	/* Il template dava 60px di riempimento e 9% ai lati: su schermi stretti
	   lascia una colonna di testo di poche parole. */
	padding: clamp(1.8rem, 3.2vw, 2.8rem);
}

body#s5_body .top_box_inner:hover,
body#s5_body .profile_image_item:hover {
	background: linear-gradient(180deg, var(--ki-rilievo), var(--ki-superficie));
	border-color: var(--ki-bordo-vivo);
}

/* Il template scrive .top_box h3 { color:#000000 !important }. Su fondo scuro
   il titolo sparisce. L'unico modo per scavalcare un !important e' un altro
   !important: non e' eleganza, e' l'unica strada che il CSS lascia aperta. */
body#s5_body .top_box h3,
body#s5_body .top_box_inner h3,
body#s5_body .profile_image_item h3 {
	color: var(--ki-avorio) !important;
}

body#s5_body .top_box_inner p,
body#s5_body .top_box_inner,
body#s5_body .profile_image_item p {
	color: var(--ki-avorio);
}

/* Il sottotitolo colorato del template resta l'accento, ma nella tinta del sito */
body#s5_body .top_box_inner span,
body#s5_body .profile_image_item span {
	color: var(--ki-blu);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Le illustrazioni erano disegnate per un fondo bianco: su scuro l'alone
   chiaro attorno stona. Un filo di luminosita' in meno le integra. */
body#s5_body .top_box_inner img {
	filter: saturate(1.05) brightness(0.96);
}

/* --------------------------------------------------------------------------
   8c. Contrasto del testo ereditato
   --------------------------------------------------------------------------
   Trovati con scripts/check_contrast.js, che misura il rapporto di contrasto
   fra testo e primo fondo opaco risalendo gli antenati. Sette punti sotto la
   soglia WCAG AA, tutti dovuti al fatto che il template era nato chiaro.
   -------------------------------------------------------------------------- */

/* "KIZMI": nero su fondo scuro, rapporto 1,09. Praticamente invisibile. */
body#s5_body .image-title {
	color: var(--ki-avorio);
}

/* Le fasce blu piene con testo bianco stanno a 2,75: sotto la soglia di 4,5.
   Invece di girare il testo al nero, che ne cambierebbe il carattere, si cupa
   il fondo: cosi' il bianco resta bianco e il rapporto sale sopra 5. */
body#s5_body #s5_pos_custom_3,
body#s5_body #s5_pos_custom_4 {
	background-color: var(--ki-blu-cupo) !important;
}

/* I pulsanti pieni portano inchiostro scuro, che sul blu del marchio da' un
   rapporto ampiamente sopra la soglia. Il template li impone bianchi con
   !important in template.css: serve rispondere alla pari. */
body#s5_body a.readon,
body#s5_body a.readon:hover,
body#s5_body .readon,
body#s5_body .button,
body#s5_body .btn-primary,
body#s5_body button.btn-primary {
	color: #04121f !important;
}

/* Sottotitolo in un blu troppo cupo per il fondo: 4,29 contro 4,5 richiesti.
   Si porta al blu del marchio, che sul nero sta oltre 6. Il colore e' scritto
   inline nel contenuto del modulo, e uno stile inline si scavalca solo con
   !important. La alternativa sarebbe modificare il testo del committente. */
body#s5_body .text_with_sub_centered span,
body#s5_body .text_with_sub span,
body#s5_body .top_text_above_boxes span {
	color: var(--ki-blu) !important;
}

/* Il pulsante della newsletter ha fondo nero imposto dal modulo Shape5:
   con l'inchiostro scuro dei pulsanti dava 1,11 di contrasto, cioe' invisibile.
   Gli si da' lo stesso fondo blu degli altri pulsanti. */
body#s5_body .button.mailchimp_signup {
	background: var(--ki-blu) !important;
	border-color: var(--ki-blu) !important;
}

body#s5_body .button.mailchimp_signup:hover {
	background: var(--ki-blu-chiaro) !important;
	border-color: var(--ki-blu-chiaro) !important;
}

/* --------------------------------------------------------------------------
   8d. Blocchi a titolo grande
   --------------------------------------------------------------------------
   Il template fissa l'interlinea in pixel assoluti (27,2px) su elementi che
   poi porta a 51 e 67 pixel di corpo. Il testo esce dalla propria riga e va a
   sbattere su quello che segue: nel blocco "Impara la vera Kizomba con noi" il
   titolo finiva sopra il pulsante.

   L'interlinea torna proporzionale al corpo, che e' l'unico modo perche' regga
   a qualunque misura di carattere.
   -------------------------------------------------------------------------- */

body#s5_body .large_title_with_sub,
body#s5_body .title_with_sub_title,
body#s5_body .customsplit_title_large {
	display: grid;
	gap: 0.7rem;
	justify-items: start;
}

body#s5_body .large_title_with_sub h1,
body#s5_body .large_title_with_sub h2,
body#s5_body .large_title_with_sub h3,
body#s5_body .large_title_with_sub span,
body#s5_body .title_with_sub_title h3,
body#s5_body .title_with_sub_title span {
	line-height: 1.06;
	margin: 0;
	display: block;
}

/* Il contenitore dei pulsanti torna a essere un blocco a se': da
   inline-block si appoggiava alla riga di testo sopra. */
body#s5_body .transform_buttons {
	display: block;
	margin-block-start: 0.6rem;
}

/* --------------------------------------------------------------------------
   8f. Tabelle degli elenchi profili
   --------------------------------------------------------------------------
   Easy Profile ha due impaginazioni per gli elenchi: a schede e a tabella. Le
   liste "TRAINER" e "JUNIOR MASTER" usano la tabella, che arriva dal Bootstrap
   del template con fondo bianco. Il testo chiaro del sito ci spariva sopra:
   erano 85 rilievi di contrasto su una sola pagina, nomi compresi.

   La tabella passa al tema scuro come tutto il resto, invece di lasciare una
   lastra bianca in mezzo alla pagina.
   -------------------------------------------------------------------------- */

body#s5_body table.listusers,
body#s5_body table.listusers.table-striped {
	background: transparent;
	border-collapse: separate;
	border-spacing: 0 0.55rem;
	inline-size: 100%;
}

body#s5_body table.listusers th {
	background: transparent;
	color: var(--ki-fumo);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	border: 0;
	border-block-end: 1px solid var(--ki-bordo);
	padding: 0.6rem 0.9rem;
}

body#s5_body table.listusers td {
	background: var(--ki-superficie);
	color: var(--ki-avorio);
	border: 0;
	border-block: 1px solid var(--ki-bordo);
	padding: 0.85rem 0.9rem;
	vertical-align: middle;
}

/* Angoli arrotondati sulla riga: vanno messi sulle celle esterne, perche' la
   riga stessa non li accetta con border-collapse separate. */
body#s5_body table.listusers td:first-child {
	border-inline-start: 1px solid var(--ki-bordo);
	border-start-start-radius: 8px;
	border-end-start-radius: 8px;
}

body#s5_body table.listusers td:last-child {
	border-inline-end: 1px solid var(--ki-bordo);
	border-start-end-radius: 8px;
	border-end-end-radius: 8px;
}

/* Bootstrap alterna un grigio chiarissimo sulle righe dispari: su scuro
   diventa una banda bianca. */
body#s5_body table.listusers.table-striped tbody tr:nth-child(odd) td {
	background: var(--ki-rilievo);
}

body#s5_body table.listusers tbody tr:hover td {
	background: #202a37;
}

body#s5_body table.listusers a {
	color: var(--ki-blu-chiaro);
	font-weight: 600;
}

body#s5_body table.listusers img {
	border-radius: 50%;
	border: 2px solid rgba(65, 160, 250, 0.25);
}

/* Il contatore sopra l'elenco */
body#s5_body .jsn-list-count,
body#s5_body .listusers + p,
body#s5_body .pagination-counter {
	color: var(--ki-fumo);
}

/* Etichetta di stato: bianco su questo rosso da' 3,96, sotto la soglia.
   Inchiostro scuro sullo stesso rosso supera 7. */
body#s5_body .status.label-important,
body#s5_body .status.label-danger {
	background: #e06c68;
	color: #2a0b0a;
	font-weight: 700;
	border-radius: 4px;
	padding: 0.2em 0.55em;
	/* Il template la lasciava a zero pixel: era un'etichetta invisibile ma
	   letta dagli screen reader. */
	font-size: 0.72rem;
}

body#s5_body .status.label-success {
	background: #4ea96b;
	color: #06180d;
	font-weight: 700;
	border-radius: 4px;
	padding: 0.2em 0.55em;
	font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   8g. Pannelli chiari ereditati e testo sul blu
   --------------------------------------------------------------------------
   Terzo gruppo di rilievi, trovato pagina per pagina con la scansione del
   contrasto. Tre famiglie:

   1. pannelli che il template lascia a #f5f5f5 o bianco (i riquadri .well dei
      moduli di ricerca, le schede dei piani di Membership Pro): il testo chiaro
      del sito ci spariva sopra, rapporto 1,00;
   2. testo bianco sul blu del marchio: 2,52-2,75, sotto la soglia di 4,5;
   3. un'etichetta bianca su arancio: 2,28.

   I pannelli passano al tema scuro; dove il fondo resta blu o arancio, il testo
   passa all'inchiostro scuro, che su quei colori supera ampiamente la soglia.
   -------------------------------------------------------------------------- */

/* 1. Pannelli chiari -> superficie scura */
body#s5_body .well,
body#s5_body .osm-plan,
body#s5_body .osm-plan-short-description,
body#s5_body .osm-signup-container {
	background: var(--ki-superficie) !important;
	border: 1px solid var(--ki-bordo);
	border-radius: 12px;
	color: var(--ki-avorio);
}

body#s5_body .well label,
body#s5_body .well .control-label,
body#s5_body .control-group > .control-label > label,
body#s5_body .form-check-label,
body#s5_body .osm-plan-short-description,
body#s5_body .osm-plan-short-description p,
body#s5_body .osm-plan-short-description li,
body#s5_body .osm-plan-short-description strong {
	color: var(--ki-avorio);
}

/* 2. Testo sul blu del marchio -> inchiostro scuro.
   Su #41a0fa il bianco da' 2,75; questo inchiostro supera 8. */
body#s5_body .osm-plan-header,
body#s5_body .osm-plan-header * {
	color: #04121f !important;
}

body#s5_body .osm-plan-title,
body#s5_body .osm-plan-price .price,
body#s5_body .osm-plan-price .price sub {
	color: #04121f !important;
}

body#s5_body button.facebook_button,
body#s5_body .socialconnect button {
	color: #04121f !important;
	font-weight: 700;
}

/* La linguetta attiva del filtro a mattoncini: il template le mette sotto il
   blu del marchio e le lascia il testo bianco, 2,75. */
body#s5_body li.s5_masonry_active,
body#s5_body li.s5_masonry_active a {
	color: #04121f !important;
	font-weight: 700;
}

/* 3. Contatore dei profili: bianco su arancio da' 2,28 */
body#s5_body .jsn-total .label,
body#s5_body .jsn-total span.label {
	background: #f0a02a;
	color: #241300;
	font-weight: 700;
	border-radius: 4px;
	padding: 0.25em 0.6em;
}

/* I campi dentro i pannelli scuriti devono restare distinguibili dal pannello */
body#s5_body .well input[type="text"],
body#s5_body .well select {
	background: var(--ki-fondo);
}

/* 4. La scheda del singolo piano
   L'elenco dei piani era gia' passato al tema scuro; la pagina del piano
   singolo no, e restava bianca con sopra l'inchiostro chiaro del sito: la
   descrizione dell'abbonamento e la tabella prezzo/scadenza davano 1,04.
   Stesso trattamento dell'elenco, cosi' le due pagine si somigliano. */
body#s5_body .osm-item-description,
body#s5_body .osm-item-heading-box {
	background: var(--ki-superficie) !important;
	border: 1px solid var(--ki-bordo);
	border-radius: 12px;
	color: var(--ki-avorio);
}

/* Le righe alternate della tabella portano il proprio bianco: si spengono,
   lasciando che il pannello faccia da fondo. */
body#s5_body .osm-item-description table,
body#s5_body .osm-item-description tbody,
body#s5_body .osm-item-description tr,
body#s5_body .osm-item-description td,
body#s5_body .osm-item-description th {
	background: transparent !important;
	border-color: var(--ki-bordo) !important;
	color: var(--ki-avorio);
}

body#s5_body .osm-item-description a {
	color: var(--ki-blu-chiaro);
}

/* --------------------------------------------------------------------------
   8h. Testo per i soli lettori di schermo
   --------------------------------------------------------------------------
   Joomla 5 marca con .visually-hidden le etichette destinate a chi usa uno
   screen reader: "Mostra password", "Cerca", le didascalie dei pulsanti a sola
   icona. Quella classe appartiene a Bootstrap 5; il template porta Bootstrap 2,
   dove si chiamava .sr-only, e non la definisce affatto.

   Risultato: quelle etichette erano tutte visibili in pagina, sparse fra i
   moduli come testo fuori posto. Qui si definisce con la regola canonica.
   -------------------------------------------------------------------------- */

body#s5_body .visually-hidden,
body#s5_body .visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   8i. Corpi di testo troppo piccoli
   --------------------------------------------------------------------------
   La scansione ha trovato 67 testi sotto i 12px: le voci dei sottomenu a
   10,7px, le etichette dei campi nelle schede dei maestri a 11,5px, il
   contatore dei profili a 11,8px.

   Dodici pixel e' il minimo sotto il quale il testo smette di essere comodo da
   leggere per chiunque non abbia vista perfetta. Nessuno di questi elementi ha
   un motivo per stare sotto: c'e' spazio.
   -------------------------------------------------------------------------- */

body#s5_body .S5_submenu_item,
body#s5_body .S5_submenu_item a,
body#s5_body .S5_submenu_item span,
body#s5_body .S5_parent_subtext,
body#s5_body .S5_subtext {
	font-size: 0.82rem;   /* 13,1px */
	line-height: 1.45;
}

/* I sottomenu di mod_menu arrivano con la classe .small di Bootstrap, che
   riduce di un altro ottavo un corpo gia' piccolo: usciva 10,7px. */
body#s5_body .mod-menu__sub,
body#s5_body .mod-menu__sub a,
body#s5_body .nav-child,
body#s5_body .nav-child a {
	font-size: 0.82rem;
	line-height: 1.5;
}

body#s5_body .jsn-l-field-title,
body#s5_body .jsn-l-field-value {
	font-size: 0.79rem;   /* 12,6px */
}

body#s5_body .jsn-total,
body#s5_body .jsn-total span,
body#s5_body .status.label-important,
body#s5_body .status.label-danger,
body#s5_body .status.label-success {
	font-size: 0.8rem;    /* 12,8px */
}

/* --------------------------------------------------------------------------
   8e. Il foglio degli articoli
   --------------------------------------------------------------------------
   Gli articoli sono stati scritti quando l'area contenuti era chiara: il corpo
   del testo porta color:#000000 scritto a mano nell'editor, in 129 punti su
   sette pagine. Su fondo scuro spariscono, con rapporto di contrasto 1,09.

   Due strade. Forzare tutto all'avorio con !important appiattirebbe anche i
   colori scelti apposta da chi ha scritto, e andrebbe rifatto a ogni articolo
   nuovo. Oppure dare al testo lungo il foglio chiaro che presuppone.

   Si e' scelta la seconda: e' quello che il contenuto si aspetta, la lettura
   prolungata su chiaro e' piu' riposante, e il foglio chiaro dentro il sito
   scuro separa la lettura dal resto invece di confonderla.

   Riguarda solo il corpo dell'articolo. Moduli, menu e tutto il resto restano
   scuri.
   -------------------------------------------------------------------------- */

body#s5_body .com-content-article.item-page,
body#s5_body .com-content-category-blog,
body#s5_body .blog-featured .com-content-article {
	background: #f7f9fc;
	color: #16202c;
	border-radius: 14px;
	padding: clamp(1.6rem, 4vw, 3.4rem);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
	/* Il foglio ha il proprio contesto: nessuna regola scura filtra dentro */
	isolation: isolate;
}

body#s5_body .com-content-article.item-page p,
body#s5_body .com-content-article.item-page li,
body#s5_body .com-content-article.item-page td,
body#s5_body .com-content-article.item-page span,
body#s5_body .com-content-article.item-page div {
	color: inherit;
}

body#s5_body .com-content-article.item-page h1,
body#s5_body .com-content-article.item-page h2,
body#s5_body .com-content-article.item-page h3,
body#s5_body .com-content-article.item-page h4,
body#s5_body .com-content-article.item-page .page-header h2 {
	color: #0b1622;
}

/* --------------------------------------------------------------------------
   Colori scritti a mano che presuppongono il fondo scuro
   --------------------------------------------------------------------------
   Il foglio chiaro risolve il testo nero, ma nello stesso contenuto convivono
   colori dell'epoca opposta: azzurri di marchio e bianchi, scelti quando
   l'articolo stava su fondo scuro. Sul foglio chiaro danno 2,4 e 1,1 di
   contrasto — illeggibili, 179 punti nel solo statuto.

   Sono colori dichiarati nell'attributo style, quindi vincono su qualsiasi
   regola senza !important: la regola "color: inherit" qui sopra non li tocca.

   Si rimappano per valore, non si spengono tutti: chi ha scritto ha usato
   l'azzurro come accento e l'accento resta, portato a un blu che sul chiaro si
   legge (6,2 di contrasto). I colori gia' cupi — #000000, #1473cd, #1978d2,
   #060b4d — vanno bene sul foglio e non si toccano.

   L'elenco e' quello dei valori davvero presenti nel contenuto. Se un giorno
   un articolo nuovo ne introduce un altro, lo trova scripts/check_contrast.js.
   -------------------------------------------------------------------------- */

body#s5_body .com-content-article.item-page [style*="#3aaaf8"],
body#s5_body .com-content-article.item-page [style*="#41a0fa"],
body#s5_body .com-content-article.item-page [style*="#37a4fc"],
body#s5_body .com-content-article.item-page [style*="#00ccff"],
body#s5_body .com-content-article.item-page [style*="#0adafa"] {
	color: #0b5fa5 !important;
}

body#s5_body .com-content-article.item-page [style*="#ffffff"],
body#s5_body .com-content-article.item-page [style*="#FFFFFF"] {
	color: #16202c !important;
}

/* I link dentro il foglio hanno bisogno di un blu piu' cupo: quello del
   marchio, nato per il fondo scuro, su bianco da' 2,4 di contrasto. */
body#s5_body .com-content-article.item-page a {
	color: #14539e;
	text-decoration-color: rgba(20, 83, 158, 0.35);
}

body#s5_body .com-content-article.item-page a:hover,
body#s5_body .com-content-article.item-page a:focus-visible {
	color: #0d3c76;
}

/* Le immagini dentro l'articolo non devono toccare i bordi del foglio */
body#s5_body .com-content-article.item-page img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   9. Pulsanti
   -------------------------------------------------------------------------- */

body#s5_body .readon,
body#s5_body .btn-signup,
body#s5_body .button,
body#s5_body button.btn-primary,
body#s5_body .btn-primary {
	background: var(--ki-blu);
	border: 1px solid var(--ki-blu);
	color: #04121f;
	font-family: var(--ki-testo);
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 6px;
	padding: 0.85em 1.8em;
	box-shadow: 0 8px 22px rgba(65, 160, 250, 0.22);
	transition:
		background-color 0.2s var(--ki-curva),
		transform 0.2s var(--ki-curva),
		box-shadow 0.25s var(--ki-curva);
}

body#s5_body .readon:hover,
body#s5_body .btn-signup:hover,
body#s5_body .button:hover,
body#s5_body button.btn-primary:hover,
body#s5_body .btn-primary:hover {
	background: var(--ki-blu-chiaro);
	border-color: var(--ki-blu-chiaro);
	color: #04121f;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(65, 160, 250, 0.32);
}

body#s5_body .readon:active,
body#s5_body .button:active,
body#s5_body .btn-primary:active {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   10. Campi dei moduli
   -------------------------------------------------------------------------- */

body#s5_body input[type="text"],
body#s5_body input[type="email"],
body#s5_body input[type="password"],
body#s5_body textarea,
body#s5_body select {
	background: var(--ki-superficie);
	border: 1px solid var(--ki-bordo);
	border-radius: 6px;
	color: var(--ki-avorio);
	font-family: var(--ki-testo);
	padding: 0.7em 0.9em;
	/* 44px minimi: sotto questa misura il dito manca il bersaglio */
	min-block-size: 44px;
	transition: border-color 0.2s var(--ki-curva), background-color 0.2s var(--ki-curva);
}

body#s5_body input[type="text"]:focus,
body#s5_body input[type="email"]:focus,
body#s5_body input[type="password"]:focus,
body#s5_body textarea:focus,
body#s5_body select:focus {
	border-color: var(--ki-blu);
	background: var(--ki-rilievo);
}

/* --------------------------------------------------------------------------
   11. Chi preferisce meno movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body#s5_body *,
	body#s5_body *::before,
	body#s5_body *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	#s5_logo_wrap img,
	.ki-3d {
		transform: none !important;
	}

	.ki-compare {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   12. La stagione — sequenza degli appuntamenti
   --------------------------------------------------------------------------
   Qui la forma a elenco cronologico e' giustificata: gli appuntamenti sono
   davvero una sequenza nel tempo, non un insieme di voci equivalenti. Il filo
   blu che li collega e' lo stesso segno usato per la connessione fra i profili.
   -------------------------------------------------------------------------- */

/* Superficie piena sul contenitore, non sulla singola tappa: era l'ultimo punto
   in cui il marchio di fondo restava scoperto e passava fra le righe del testo.
   Farne tante schede separate avrebbe spezzato il filo che tiene insieme la
   sequenza — che e' il senso di questa sezione — quindi il pannello e' uno solo
   e la cronologia dentro resta intatta. */
.ki-stagione {
	margin: 0;
	padding: 1.75rem 1.5rem;
	list-style: none;
	position: relative;
	max-width: 62rem;
	background: linear-gradient(180deg, var(--ki-superficie), var(--ki-fondo));
	border: 1px solid var(--ki-bordo);
	border-radius: 14px;
}

/* Il filo verticale che tiene insieme la sequenza.
   L'offset comprende il fianco del pannello: il filo e' posizionato rispetto al
   riquadro di riempimento, le tappe cominciano dopo il riempimento, e senza la
   somma i nodi non cadrebbero piu' sul filo. */
.ki-stagione::before {
	content: "";
	position: absolute;
	inset-block: 2.5rem 3.25rem;
	inset-inline-start: calc(5.75rem + 1.5rem);
	inline-size: 1px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--ki-bordo) 12%,
		var(--ki-bordo) 88%,
		transparent
	);
}

.ki-tappa {
	display: grid;
	grid-template-columns: 5.75rem 1fr;
	gap: 0 2.25rem;
	padding-block: 1.6rem;
	position: relative;
}

/* Il nodo sul filo */
.ki-tappa::before {
	content: "";
	position: absolute;
	inset-block-start: 2.05rem;
	inset-inline-start: 5.75rem;
	inline-size: 9px;
	block-size: 9px;
	margin-inline-start: -4px;
	border-radius: 50%;
	background: var(--ki-fondo);
	border: 2px solid var(--ki-bordo);
}

/* Il prossimo appuntamento e' l'unico acceso */
.ki-tappa--prossima::before {
	background: var(--ki-blu);
	border-color: var(--ki-blu);
	box-shadow: 0 0 0 5px var(--ki-blu-velo);
}

.ki-tappa__quando {
	font-family: "Roboto Slab", Georgia, serif;
	text-align: end;
	line-height: 1.2;
	padding-block-start: 0.15rem;
}

.ki-tappa__giorno {
	display: block;
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--ki-avorio);
}

.ki-tappa--prossima .ki-tappa__giorno {
	color: var(--ki-blu);
}

.ki-tappa__mese {
	display: block;
	font-size: 0.82rem;
	color: var(--ki-fumo);
	margin-block-start: 0.15rem;
}

.ki-tappa__titolo {
	font-family: "Roboto Slab", Georgia, serif;
	/* Il template mette in maiuscolo tutti i titoli. Qui i nomi degli eventi
	   sono lunghi e contengono accenti: in maiuscolo si leggono peggio e
	   perdono le maiuscole proprie. */
	text-transform: none;
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.3rem;
	color: var(--ki-avorio);
}

.ki-tappa__dove {
	color: var(--ki-fumo);
	font-size: 0.92rem;
	margin: 0 0 0.6rem;
}

.ki-tappa__testo {
	margin: 0;
	max-width: 58ch;
}

.ki-stagione__nota {
	color: var(--ki-fumo);
	font-size: 0.86rem;
	margin-block-start: 1.5rem;
	padding-inline-start: 8rem;
	max-width: 62rem;
}

@media (max-width: 720px) {
	.ki-stagione::before,
	.ki-tappa::before {
		display: none;
	}

	.ki-tappa {
		grid-template-columns: 1fr;
		gap: 0.4rem;
		border-inline-start: 2px solid var(--ki-bordo);
		padding-inline-start: 1.1rem;
	}

	.ki-tappa--prossima {
		border-inline-start-color: var(--ki-blu);
	}

	.ki-tappa__quando {
		text-align: start;
	}

	.ki-tappa__giorno {
		display: inline;
		font-size: 1.05rem;
	}

	.ki-tappa__mese {
		display: inline;
		margin-inline-start: 0.4rem;
	}

	.ki-stagione__nota {
		padding-inline-start: 1.1rem;
	}
}

/* --------------------------------------------------------------------------
   13. Il palco del logo tridimensionale
   --------------------------------------------------------------------------
   Prima schermata del sito. Il marchio si compone nello spazio da una nuvola di
   particelle campionate dal PNG ad alta risoluzione: sono i pixel veri del logo,
   con i loro colori.

   Il PNG resta nel markup come contenuto di ripiego. Non e' un segnaposto: se
   WebGL manca, se l'utente ha chiesto meno movimento o se il modulo non si
   carica, quello e' il logo, ed e' corretto. La classe .ki-palco--vivo la mette
   il JavaScript solo quando la scena disegna davvero.
   -------------------------------------------------------------------------- */

.ki-palco {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 100%;
	/* Alta abbastanza da contare, non tanto da nascondere cio' che segue: si
	   deve capire che sotto c'e' altro. */
	/* Alta abbastanza da far respirare il marchio sopra il testo */
	block-size: clamp(32rem, 82vh, 52rem);
	/* Nessun fondo pieno: la tela del marchio e' fissa dietro la pagina e un
	   gradiente opaco qui la coprirebbe proprio dove il marchio si compone.
	   Resta il solo alone, che e' trasparente e si somma al nero del body. */
	background: radial-gradient(76% 62% at 50% 42%, rgba(27, 111, 196, 0.18) 0%, transparent 72%);
}

/* La tela e' fissa alla finestra, non all'apertura: il marchio resta il fondo
   della pagina anche scorrendo. E' quel che rende possibile il parallasse. */
.ki-palco__tela {
	position: fixed;
	inset: 0;
	/* Percentuali e non 100vw/100vh: vw e vh comprendono la barra di
	   scorrimento e la tela sporgerebbe, aprendo uno scorrimento orizzontale.
	   Il riquadro di contenimento di un elemento fisso e' il riquadro visibile,
	   che la barra la esclude. Le misure vanno dichiarate: <canvas> e' un
	   elemento sostituito e con width:auto tornerebbe ai suoi 300x150 propri,
	   ignorando inset. */
	inline-size: 100%;
	block-size: 100%;
	display: block;
	pointer-events: none;
	/* Indice negativo, non zero.
	   Dentro un contesto di impilatura l'ordine di dipintura mette i discendenti
	   posizionati a indice zero DOPO il contenuto in flusso: con z-index:0 la
	   tela finiva sopra il testo delle sezioni e sopra le schede, che non sono
	   posizionate e quindi dipingono prima. Il marchio passava davanti alla
	   pagina invece di starle dietro.
	   A -1 dipinge subito dopo il fondo del contesto e prima di tutto il resto:
	   qualunque cosa opaca — schede, riquadri, fasce — lo copre. */
	z-index: -1;
}

/* Il ripiego: il logo in PNG, centrato. Sparisce quando la scena e' viva. */
.ki-palco__ripiego {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 6vw, 5rem);
	z-index: 0;
	transition: opacity 0.6s var(--ki-curva);
}

.ki-palco__ripiego img {
	max-inline-size: min(56rem, 82%);
	block-size: auto;
	filter: drop-shadow(0 0 40px rgba(65, 160, 250, 0.28));
}

.ki-palco--vivo .ki-palco__ripiego {
	opacity: 0;
	pointer-events: none;
}

/* Testo e richiamo, sotto il marchio */
.ki-palco__testo {
	position: relative;
	z-index: 1;
	align-self: end;
	text-align: center;
	padding-block-end: clamp(2rem, 6vh, 4rem);
	padding-inline: 1.5rem;
	display: grid;
	justify-items: center;
	gap: 0.85rem;
}

.ki-palco__occhiello {
	margin: 0;
	color: var(--ki-fumo);
	font-size: 0.9rem;
	letter-spacing: 0.12em;
}

body#s5_body .ki-palco__claim {
	margin: 0;
	font-family: var(--ki-titolo);
	font-size: clamp(1.6rem, 3.6vw, 2.9rem);
	line-height: 1.1;
	color: var(--ki-avorio);
	max-inline-size: 22ch;
	text-wrap: balance;
}

body#s5_body .ki-palco__azione {
	display: inline-block;
	margin-block-start: 0.5rem;
	background: var(--ki-blu);
	color: #04121f !important;
	font-weight: 700;
	text-decoration: none;
	border-radius: 6px;
	padding: 0.85em 1.9em;
	box-shadow: 0 10px 28px rgba(65, 160, 250, 0.26);
	transition:
		background-color 0.2s var(--ki-curva),
		transform 0.2s var(--ki-curva),
		box-shadow 0.25s var(--ki-curva);
}

body#s5_body .ki-palco__azione:hover,
body#s5_body .ki-palco__azione:focus-visible {
	background: var(--ki-blu-chiaro);
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(65, 160, 250, 0.34);
}

/* Il marchio a particelle resta acceso anche sul telefono.
   La prima versione lo spegneva sotto i 600px perche' il tratto si impastava,
   ma la causa non era lo schermo piccolo: era la densita'. Su schermo stretto
   js/ki-logo3d.js campiona ora a passo 4 invece che 2, cioe' meno particelle e
   piu' grandi, e il tratto torna pulito.
   Sotto i 360px si torna al PNG: li' il marchio occupa meno di 300 pixel e
   nessuna densita' lo salva. */
@media (max-width: 359px) {
	.ki-palco--vivo .ki-palco__tela {
		display: none;
	}

	.ki-palco--vivo .ki-palco__ripiego {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body#s5_body .ki-palco__azione {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   14. La testata resta in alto
   --------------------------------------------------------------------------
   Il menu scorreva via con la pagina: su pagine lunghe come la directory dei
   maestri bisognava tornare in cima per cambiare sezione.

   Si fissa `#s5_header` e non `#s5_menu_wrap`: un elemento appiccicato si
   muove solo dentro il riquadro del proprio genitore, e il genitore di
   `#s5_menu_wrap` e' `#s5_header`, alto esattamente quanto lui — resterebbe
   fermo un istante e poi scorrerebbe via. Il genitore di `#s5_header` e'
   invece il contenitore di tutta la pagina.

   `sticky` e non `fixed`: l'elemento resta nel flusso, quindi non serve un
   distanziatore a occuparne il posto e non c'e' lo scatto del contenuto che
   sale di colpo quando la testata si stacca.
   -------------------------------------------------------------------------- */

#s5_header {
	position: sticky;
	inset-block-start: 0;
	/* Sopra il contenuto (che sta a 1) e sopra il marchio di fondo (a -1) */
	z-index: 30;
}

/* La sfocatura del fondo e' gia' nella sezione 3 e resta li': qui si aggiunge
   solo il passaggio fra lo stato in cima e quello staccato. */
#s5_menu_wrap {
	transition:
		background-color 0.25s var(--ki-curva),
		box-shadow 0.25s var(--ki-curva);
}

/* Staccata dalla cima: si chiude sul contenuto con un filo e un'ombra, cosi'
   si capisce che e' un piano sopra e non parte della pagina. */
.ki-testata-fissata #s5_menu_wrap {
	background-color: rgba(10, 14, 20, 0.88);
	box-shadow:
		0 1px 0 var(--ki-bordo),
		0 14px 34px rgba(0, 0, 0, 0.45);
}

/* Non si stringe il marchio quando la barra si stacca: l'altezza della barra
   la detta la riga di navigazione del template, non il marchio, quindi il
   marchio piccolo lascerebbe solo un vuoto sopra e sotto. Si tiene la testata
   com'e', che e' anche quello che il committente ha chiesto: fissarla. */

/* Le tendine del menu sono figlie del body, fuori dal contenitore dei
   contenuti, che sta a z-index 1: senza questo finirebbero sotto la pagina
   appena la testata si sovrappone al contenuto. */
#subMenusContainer {
	z-index: 40;
}

/* Le ancore interne non devono finire sotto la barra */
html {
	scroll-padding-block-start: 7rem;
}

@media (prefers-reduced-motion: reduce) {
	#s5_menu_wrap {
		transition: none;
	}
}