/* PMV Neon — il linguaggio visivo del mockup mk01 sopra Blocksy.
 *
 * Si lavora sulle variabili, non sui singoli elementi: Blocksy colora tutto
 * attraverso la sua tavolozza (--theme-palette-color-1…8) e SheetFusion
 * attraverso le sue (--sf-*). «html:root» batte il «:root» che Blocksy scrive
 * nella pagina, senza bisogno di !important.
 */

html:root {
	/* I gettoni del mockup. */
	--pmv-notte: #05070E;
	--pmv-notte-2: #0A0F1C;
	--pmv-blu: #101728;
	--pmv-arancio: #FF5500;
	--pmv-azzurro: #00D4FF;
	--pmv-testo: #DCE3EC;
	--pmv-testo-2: #94A3B8;
	--pmv-bordo: #23304A;
	--pmv-titoli: 'Montserrat', 'Teko', sans-serif;
	--pmv-corpo: 'Inter', 'Roboto', sans-serif;
	--pmv-alone: 0 0 10px rgba(255, 85, 0, .85), 0 0 26px rgba(255, 85, 0, .6);

	/* La tavolozza di Blocksy: 1 azione, 2 passaggio del mouse, 3 testo,
	   4 titoli, 5 bordi, 6 fondo del piè di pagina, 7 fondo, 8 superfici. */
	--theme-palette-color-1: var(--pmv-arancio);
	--theme-palette-color-2: var(--pmv-azzurro);
	--theme-palette-color-3: var(--pmv-testo);
	--theme-palette-color-4: #FFFFFF;
	--theme-palette-color-5: var(--pmv-bordo);
	--theme-palette-color-6: var(--pmv-notte-2);
	--theme-palette-color-7: var(--pmv-notte);
	--theme-palette-color-8: var(--pmv-blu);
	--theme-font-family: var(--pmv-corpo);
}

/* --- Fondo: la notte del mockup, con bagliori, barre neon e luci ---
 * Il markup sta in parts/sfondo.html (generato dal mockup) e la pagina lo
 * stampa subito dopo <body>. Le regole sono quelle del mockup (classe
 * «bg-layer» e figlie), chiuse dentro .pmv-sfondo perché non tocchino altro.
 * Lo strato sta dietro: il contenitore di Blocksy va sopra con z-index 1. */
body {
	position: relative;
	background-color: var(--pmv-notte);
}
#main-container {
	position: relative;
	z-index: 1;
}
.pmv-sfondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.pmv-sfondo .bg-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		radial-gradient(1200px circle at 50% -5%, rgba(12, 26, 60, .9), transparent 68%),
		radial-gradient(900px circle at 50% 105%, rgba(40, 14, 4, .85), transparent 65%),
		linear-gradient(180deg, #070C18 0%, #05070E 52%, #0A0710 100%);
}
.pmv-sfondo .bg-layer.lvl-soft { opacity: .6; }
.pmv-sfondo .bg-layer.lvl-medio { opacity: .88; }
.pmv-sfondo .bg-layer.lvl-intenso { opacity: 1; filter: brightness(1.25) saturate(1.12); }
.pmv-sfondo .led { position: absolute; display: block; border-radius: 2px; }
.pmv-sfondo .mote { position: absolute; display: block; border-radius: 50%; filter: blur(.6px); }
.pmv-sfondo .bloom { position: absolute; border-radius: 50%; filter: blur(90px); }
/* barre neon «spada laser»: nucleo quasi bianco e alone colorato su più livelli */
.pmv-sfondo .saber { position: absolute; border-radius: 99px; background: #EAF4FF; }
.pmv-sfondo .saber-b { box-shadow: 0 0 5px 1px rgba(120, 215, 255, .95), 0 0 16px 4px rgba(0, 170, 255, .75), 0 0 42px 11px rgba(0, 110, 255, .40); }
.pmv-sfondo .saber-o { box-shadow: 0 0 5px 1px rgba(255, 175, 95, .95), 0 0 16px 4px rgba(255, 95, 0, .75), 0 0 42px 11px rgba(255, 60, 0, .40); }

/* --- Titoli --- */
h1, h2, h3, h4, .page-title, .site-title {
	font-family: var(--pmv-titoli);
}
h1, .page-title {
	font-weight: 900;
	text-transform: uppercase;
	text-shadow: var(--pmv-alone);
}
h2, h3 {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	text-shadow: 0 0 6px rgba(255, 85, 0, .7), 0 0 16px rgba(255, 85, 0, .35);
}

/* Le misure del mockup: i titoli dei contenuti sono sezioni, non manifesti.
   Le parole non si spezzano a metà: sul telefono «ORGANIZZAZIONE» andava a capo
   con la E da sola. */
h1, h2, h3, h4 {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}
.entry-content h2 { --theme-font-size: clamp(20px, 2.2vw + 12px, 28px); }
.entry-content h3 { --theme-font-size: clamp(17px, 1.4vw + 11px, 22px); }
h1.page-title { --theme-font-size: clamp(24px, 3vw + 12px, 38px); }

/* --- Pulsanti: blocchi di WordPress ed Elementor ---
 * «html» davanti: lo stile predefinito di Elementor (grigio) arriva dopo
 * questo foglio con la stessa forza. */
.wp-element-button,
.wp-block-button__link,
html .elementor-button {
	font-family: var(--pmv-titoli);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	background: var(--pmv-arancio);
	border: none;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(255, 85, 0, .7), 0 0 28px rgba(255, 85, 0, .5);
	transition: all .25s ease-in-out;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
html .elementor-button:hover {
	color: #fff;
	background: var(--pmv-arancio);
	box-shadow: 0 0 18px rgba(255, 85, 0, .9), 0 0 12px rgba(0, 212, 255, .5);
	transform: translateY(-2px);
}

/* --- Tabelle di SheetFusion: le loro variabili, verso il mockup ---
 * Il plugin le scrive inline su ogni tabella, quindi qui serve la specificità
 * dell'attributo e !important: è il solo punto dove non c'è un altro modo. */
.sf-wrapper[style] {
	--sf-accent: var(--pmv-arancio) !important;
	--sf-head-bg: rgba(255, 85, 0, .14) !important;
	--sf-head-text: #FFFFFF !important;
	/* quasi coprente: dietro passano le barre neon dello sfondo, e a .82 tagliavano i numeri */
	--sf-body-bg: rgba(16, 23, 40, .96) !important;
	--sf-body-text: var(--pmv-testo) !important;
	--sf-border: rgba(255, 85, 0, .28) !important;
	--sf-hover: rgba(0, 212, 255, .10) !important;
}
/* Nelle pagine la tabella prende la larghezza dei blocchi di Blocksy, con i
   margini laterali: il plugin la forza al 100% e sul telefono toccava i bordi. */
.entry-content > .sf-wrapper {
	width: var(--theme-block-width, 100%);
}
.sf-wrapper {
	border: 1.5px solid var(--pmv-arancio);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 14px rgba(255, 85, 0, .45), inset 0 0 20px rgba(255, 85, 0, .06);
}
.sf-wrapper .sf-toolbar:empty,
.sf-wrapper .sf-filters:empty,
.sf-wrapper .sf-pagination:empty,
.sf-wrapper .sf-status:empty {
	display: none;
}
.sf-wrapper .pmv-freccia {
	color: var(--pmv-arancio);
	font-size: .8em;
	text-shadow: 0 0 6px rgba(255, 85, 0, .8);
}
/* Le misure del testo: il plugin, in densità «compatta», scrive a 13 px, più
   piccolo del testo del sito (16 px). Le classifiche sono il dato che i
   giocatori vengono a leggere, e non devono essere il testo più piccolo. */
html .sf-wrapper .sf-table td {
	font-size: 18px;
	padding: 9px 12px;
}
html .sf-wrapper .sf-table th,
html .sf-wrapper .sf-table th .sf-sort {
	font-size: 16px;
}
/* Sul telefono le sei colonne devono stare nello schermo: spazi più stretti,
   e il nome della squadra va a capo invece di spingere fuori i numeri. */
@media (max-width: 689.98px) {
	html .sf-wrapper .sf-table td {
		font-size: 17px;
		padding: 8px 4px;
	}
	html .sf-wrapper .sf-table th {
		padding: 8px 4px;
		font-size: 15px;
	}
	html .sf-wrapper .sf-table th .sf-sort { font-size: 15px; }
	/* in home il riquadro è più stretto: un punto in meno. «body» in più perché
	   la regola della home per il computer sta più avanti nel foglio. */
	html body .pmv-classifiche-compatte .sf-wrapper .sf-table td { font-size: 16px; padding: 7px 4px; }
	html body .pmv-classifiche-compatte .sf-wrapper .sf-table th { font-size: 14px; padding: 7px 4px; }
	html body .pmv-classifiche-compatte .sf-wrapper .sf-table th .sf-sort { font-size: 14px; }
	html body .sf-wrapper .sf-table td:first-child,
	html body .sf-wrapper .sf-table th:first-child { padding-left: 10px; }
	/* «(*Petruzzelli/Fregonese)» non ha spazi e allargava la prima colonna fino
	   a spingere fuori i numeri: pmv.js segna dopo ogni «/» un punto in cui si
	   può andare a capo, così non si spezza a metà parola. */
}
.sf-wrapper th {
	font-family: var(--pmv-titoli);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* --- Tabelle scritte nelle pagine (es. punteggio nel Regolamento) --- */
.wp-block-table table {
	background: rgba(16, 23, 40, .96);
	border-color: rgba(255, 85, 0, .28);
}
.wp-block-table th {
	font-family: var(--pmv-titoli);
	text-transform: uppercase;
	background: rgba(255, 85, 0, .14);
}

/* =====================================================================
 * TESTATA (TT0060) — logo sopra, la fila di pulsanti luminosi sotto.
 * La disposizione è nel costruttore di Blocksy (riga di mezzo: logo;
 * riga di sotto: menu). Qui c'è solo l'aspetto.
 * ===================================================================== */
/* «html [data-header]» davanti: Blocksy colora le righe con un selettore di
   tre parti e lo scrive nella pagina DOPO questo foglio, quindi a pari forza
   vince lui. Un elemento in più basta, senza !important. */
html [data-header] .ct-header [data-row="middle"],
html [data-header] .ct-header [data-row="bottom"] {
	background: transparent;
}
html [data-header] .ct-header [data-row="middle"] {
	--height: 130px;
}
html [data-header] .ct-header [data-row="bottom"] {
	--height: auto;
	padding: 6px 0 22px;
	border-bottom: 1px solid rgba(255, 85, 0, .22);
	box-shadow: 0 1px 16px rgba(255, 85, 0, .18);
}

/* Logo a sinistra e motto accanto, non sotto. L'altezza la diamo qui: quella
   del costruttore di Blocksy si scrive solo salvando dal Personalizza. */
.ct-header .site-branding[data-logo="top"] {
	flex-direction: row;
	align-items: center;
	gap: 18px;
}
.ct-header [data-id="logo"] .site-logo-container {
	--logo-max-height: 104px;
}
.ct-header .site-logo-container img {
	filter: drop-shadow(0 0 18px rgba(255, 85, 0, .55));
}
@media (max-width: 999.98px) {
	html [data-header] .ct-header [data-row="middle"] { --height: 84px; }
	.ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 64px; }
	.ct-header .site-branding[data-logo="top"] { gap: 12px; }
	.ct-header .site-description { font-size: 12px; line-height: 1.3; }
}
.ct-header .site-description {
	font-family: var(--pmv-titoli);
	font-weight: 800;
	font-style: italic;
	font-size: 15px;
	color: var(--pmv-arancio);
	text-shadow: 0 0 8px rgba(255, 85, 0, .9), 0 0 22px rgba(255, 85, 0, .55);
}

/* La fila: tutte le voci in vista, che vanno a capo invece di nascondersi. */
.ct-header [data-id="menu"] > ul {
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 10px;
}
.ct-header [data-id="menu"] > ul > li > a {
	position: relative;
	height: auto;
	padding: 10px 16px;
	font-family: var(--pmv-titoli);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .3px;
	text-transform: none;
	color: #fff;
	border: 2px solid #FFA23A;
	border-radius: 12px;
	background: linear-gradient(180deg, #FF7C21 0%, #F2600F 46%, #C13C06 100%);
	text-shadow: 0 1px 2px rgba(90, 25, 0, .8);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .5),
		inset 0 -7px 14px rgba(120, 30, 0, .45),
		0 0 14px rgba(255, 110, 0, .6),
		0 7px 20px rgba(255, 85, 0, .4);
	transition: all .22s ease-in-out;
}
/* la scia luminosa sotto il pulsante */
.ct-header [data-id="menu"] > ul > li > a::after {
	content: "";
	position: absolute;
	left: 9%;
	right: 9%;
	bottom: -7px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, rgba(255, 155, 45, .95), transparent);
	filter: blur(2.5px);
}
.ct-header [data-id="menu"] > ul > li > a:hover {
	color: #fff;
	transform: translateY(-2px);
	background: linear-gradient(180deg, #FF8C33 0%, #FF6B14 46%, #D14507 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset 0 -7px 14px rgba(120, 30, 0, .4),
		0 0 20px rgba(255, 120, 0, .85),
		0 0 14px rgba(0, 212, 255, .45),
		0 9px 24px rgba(255, 85, 0, .5);
}
.ct-header [data-id="menu"] > ul > li.current-menu-item > a,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a {
	border-color: #FFD9A8;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .65),
		inset 0 -7px 14px rgba(120, 30, 0, .4),
		0 0 0 3px rgba(255, 85, 0, .3),
		0 0 24px rgba(255, 120, 0, .95),
		0 7px 22px rgba(255, 85, 0, .5);
}
/* Area Capitani: il pulsante dorato del «login» nel mockup. */
.ct-header [data-id="menu"] > ul > li > a[href*="/area-capitani/"] {
	border-color: #FFDE95;
	background: linear-gradient(180deg, #F8C63F 0%, #EDA518 46%, #C67C09 100%);
	text-shadow: 0 1px 2px rgba(110, 60, 0, .7);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset 0 -7px 14px rgba(140, 80, 0, .4),
		0 0 16px rgba(255, 190, 60, .65),
		0 7px 22px rgba(240, 170, 30, .45);
}

/* La tendina del 1° campionato. */
.ct-header [data-id="menu"] .sub-menu {
	--dropdown-background-color: rgba(10, 15, 28, .97);
	border: 1.5px solid rgba(255, 85, 0, .55);
	border-radius: 10px;
	box-shadow: 0 0 18px rgba(255, 85, 0, .4);
	margin-top: 12px;
}
.ct-header [data-id="menu"] .sub-menu a {
	color: var(--pmv-testo);
	font-weight: 600;
}
.ct-header [data-id="menu"] .sub-menu a:hover {
	color: var(--pmv-arancio);
	text-shadow: 0 0 8px rgba(255, 85, 0, .85);
}

/* --- Telefono: il pulsante arancio e il menu a schermo intero --- */
/* Blocksy disegna i pulsanti «toggle» con variabili e !important: si passa
   dalle sue variabili, non si combatte con le proprietà. */
html [data-header] .ct-header .ct-header-trigger[data-id="trigger"] {
	--toggle-button-size: 48px;
	--toggle-button-radius: 12px;
	--toggle-button-border-width: 2px;
	--toggle-button-border-color: #FFA23A;
	--toggle-button-background: linear-gradient(180deg, #FF7C21 0%, #F2600F 46%, #C13C06 100%);
	--toggle-button-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 14px rgba(255, 110, 0, .6);
	--theme-icon-color: #fff;
	--theme-icon-hover-color: #fff;
}
#offcanvas .ct-panel-inner {
	background: var(--pmv-notte);
	background-image: radial-gradient(900px circle at 50% -10%, rgba(12, 26, 60, .9), transparent 70%);
}
#offcanvas [data-id="mobile-menu"] > ul > li {
	margin-bottom: 10px;
}
#offcanvas [data-id="mobile-menu"] > ul > li > a,
#offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent > a {
	padding: 14px 18px;
	font-family: var(--pmv-titoli);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	border-radius: 12px;
	background: rgba(16, 23, 40, .78);
	border: 1.5px solid rgba(255, 85, 0, .5);
	box-shadow: 0 0 12px rgba(255, 85, 0, .35);
}
#offcanvas [data-id="mobile-menu"] li.current-menu-item > a {
	border-color: var(--pmv-arancio);
	box-shadow: 0 0 18px rgba(255, 85, 0, .7);
}
#offcanvas [data-id="mobile-menu"] .sub-menu a {
	color: var(--pmv-testo);
}

/* =====================================================================
 * HOME (TT0070) — costruita in Elementor. Le classi le assegna lo script
 * 20_output/20_coding/wordpress/contenuti/home-elementor.php.
 * ===================================================================== */

/* L'apertura: il titolo dorato-arancio del mockup («hero-big»). */
.pmv-apertura-logo img {
	filter: drop-shadow(0 0 22px rgba(255, 85, 0, .6));
}
.pmv-apertura-titolo .elementor-heading-title {
	font-family: var(--pmv-titoli);
	font-weight: 900;
	font-style: italic;
	font-variant-caps: small-caps;
	text-transform: none;
	font-size: clamp(32px, 4.2vw + 10px, 62px);
	line-height: 1.04;
	background: linear-gradient(180deg, #FFC066 0%, #FF8A2B 45%, #FF5500 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 0 12px rgba(255, 110, 0, .75)) drop-shadow(0 2px 2px rgba(50, 12, 0, .95));
}
.pmv-apertura-frase,
.pmv-apertura-frase p {
	font-size: clamp(15px, .6vw + 12px, 19px);
	font-weight: 500;
	color: #E8EEF6;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
	margin: 0;
}

/* Le sezioni: titolo con la riga luminosa sotto, come nel mockup. */
.pmv-sezione {
	max-width: 1240px;
	margin-inline: auto;
}
.pmv-sezione > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
.pmv-sezione > .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(22px, 1.6vw + 14px, 30px);
	padding-bottom: 14px;
	background-image: linear-gradient(90deg, transparent, var(--pmv-arancio) 25%, var(--pmv-arancio) 75%, transparent);
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: bottom;
}

/* Classifiche compatte: stesse tabelle della pagina Classifiche, più strette. */
.pmv-classifiche-compatte .pmv-girone h3 {
	text-align: left;
	font-size: 18px;
	margin: 0 0 6px;
}
html .pmv-classifiche-compatte .sf-wrapper .sf-table td {
	font-size: 17px;
	padding: 7px 9px;
}
html .pmv-classifiche-compatte .sf-wrapper .sf-table th {
	padding: 7px 9px;
}

/* Le locandine: la cornice luminosa delle miniature del mockup. */
.pmv-locandina img {
	border: 1.5px solid var(--pmv-arancio);
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(255, 85, 0, .5);
	transition: all .25s ease-in-out;
}
.pmv-locandina img:hover {
	box-shadow: 0 0 18px rgba(255, 85, 0, .8), 0 0 10px rgba(0, 212, 255, .4);
	transform: translateY(-3px);
}
.pmv-locandina .widget-image-caption {
	font-family: var(--pmv-titoli);
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	margin-top: 8px;
}

/* =====================================================================
 * PAGINE INTERNE E PIÈ DI PAGINA (TT0080)
 * ===================================================================== */

/* La riga «dove sono»: niente testata grande nelle pagine interne. */
.pmv-dove {
	background: rgba(5, 7, 14, .72);
	border-bottom: 1px solid rgba(255, 85, 0, .22);
	box-shadow: 0 1px 16px rgba(255, 85, 0, .18);
}
.pmv-dove-dentro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin: 0 auto;
	padding: 15px var(--theme-content-spacing, 24px);
	width: 100%;
	box-sizing: border-box;
}
.pmv-dove-link {
	font-size: 13px;
	color: var(--pmv-testo-2);
	transition: all .2s ease-in-out;
}
.pmv-dove-link:hover {
	color: var(--pmv-arancio);
	text-shadow: 0 0 8px rgba(255, 85, 0, .85);
}
.pmv-dove-sep {
	color: rgba(255, 85, 0, .6);
	font-size: 15px;
	line-height: 1;
}
h1.pmv-dove-qui {
	margin: 0;
	font-family: var(--pmv-titoli);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 8px rgba(255, 85, 0, .85), 0 0 22px rgba(255, 85, 0, .4);
}
/* Il contenuto si avvicina alla riga, ora che la testata grande non c'è. */
.pmv-dove + .ct-container-full,
.pmv-dove + [class*="ct-container"] {
	padding-top: 40px;
}

/* Piè di pagina: la scia luminosa di separazione e il link a Facebook. */
.ct-footer {
	border-top: 1px solid rgba(255, 85, 0, .25);
	box-shadow: 0 -1px 18px rgba(255, 85, 0, .15);
}
.ct-footer .ct-footer-copyright a {
	color: var(--pmv-arancio);
	font-weight: 600;
}
.ct-footer .ct-footer-copyright a:hover {
	color: var(--pmv-azzurro);
	text-shadow: 0 0 8px rgba(0, 212, 255, .6);
}

/* Il modulo Suggerimenti (Contact Form 7): campi scuri, invio arancio. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	color: #fff;
	background: rgba(8, 12, 22, .96); /* coprente: dietro passano le barre neon */
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 8px;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--pmv-arancio);
	box-shadow: 0 0 10px rgba(255, 85, 0, .45);
	outline: none;
}
.wpcf7 input[type="submit"] {
	font-family: var(--pmv-titoli);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	background: var(--pmv-arancio);
	border: none;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(255, 85, 0, .7), 0 0 28px rgba(255, 85, 0, .5);
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
	box-shadow: 0 0 18px rgba(255, 85, 0, .9), 0 0 12px rgba(0, 212, 255, .5);
}