/* Vigonovo Calcio – stili principali.
   I colori della società si cambiano qui, nelle variabili. */
:root {
	/* Colori dello stemma del Vigonovo Calcio */
	--vg-ink: #0b1438;
	--vg-primary: #000f4f;       /* blu notte del leone */
	--vg-primary-dark: #000936;
	--vg-sky: #23aeed;           /* azzurro delle strisce */
	--vg-sky-ink: #0a78b5;       /* azzurro scuro, leggibile su bianco */
	--vg-accent: #f1aa29;        /* oro della cornice */
	--vg-accent-ink: #1a1000;
	--vg-pitch: var(--vg-sky-ink);
	--vg-bg: #ffffff;
	--vg-soft: #eef7fd;
	--vg-line: #d6e4ef;
	--vg-muted: #4b5a6e;
	--vg-radius: 14px;
	--vg-shadow: 0 10px 30px rgba(0, 15, 79, .10);
	--vg-max: 1140px;
	--vg-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vg-font-display: "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--vg-font);
	font-size: 18px;
	line-height: 1.6;
	color: var(--vg-ink);
	background: var(--vg-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--vg-primary); }
h1, h2, h3 {
	font-family: var(--vg-font-display);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.vg-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 100; }
.vg-skip:focus { left: 1rem; }

.vg-container { width: min(100% - 2.5rem, var(--vg-max)); margin-inline: auto; }

/* Pulsanti */
.vg-btn,
.wpcf7-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95rem 1.6rem;
	border: 0; border-radius: 999px;
	background: var(--vg-accent); color: var(--vg-accent-ink);
	font: 700 1.05rem/1 var(--vg-font);
	text-decoration: none; cursor: pointer;
	box-shadow: 0 6px 18px rgba(241, 170, 41, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.vg-btn:hover, .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(241, 170, 41, .45); }
.vg-btn:focus-visible, .wpcf7-submit:focus-visible { outline: 3px solid var(--vg-sky); outline-offset: 3px; }
.vg-btn--small { padding: .65rem 1.1rem; font-size: .95rem; }
.vg-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.vg-btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; }

/* Header */
.vg-header {
	position: sticky; top: 0; z-index: 50;
	box-shadow: inset 0 -3px 0 var(--vg-sky);
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--vg-line);
}
.vg-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.vg-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--vg-ink); margin-right: auto; }
.vg-brand__logo { width: auto; height: 54px; display: block; }
.vg-brand__badge {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--vg-primary); color: var(--vg-accent);
	font: 900 1.4rem/1 var(--vg-font-display);
}
.vg-brand__name { font: 800 1.25rem/1 var(--vg-font-display); text-transform: uppercase; letter-spacing: .02em; }
.vg-nav { display: flex; align-items: center; gap: 1.5rem; }
.vg-nav__list { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.vg-nav__list a { color: var(--vg-ink); text-decoration: none; font-weight: 600; font-size: .98rem; }
.vg-nav__list a:hover, .vg-nav__list .current-menu-item > a { color: var(--vg-primary); text-decoration: underline; text-underline-offset: 6px; }
.vg-nav__list .sub-menu {
	display: none; position: absolute; list-style: none; margin: 0; padding: .6rem 0;
	background: #fff; border: 1px solid var(--vg-line); border-radius: 10px; box-shadow: var(--vg-shadow); min-width: 210px;
}
.vg-nav__list li { position: relative; }
.vg-nav__list li:hover > .sub-menu, .vg-nav__list li:focus-within > .sub-menu { display: block; }
.vg-nav__list .sub-menu a { display: block; padding: .45rem 1rem; }
.vg-nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.vg-nav-toggle__bar, .vg-nav-toggle__bar::before, .vg-nav-toggle__bar::after {
	display: block; width: 24px; height: 2px; background: var(--vg-ink); position: relative; margin: auto; content: "";
}
.vg-nav-toggle__bar::before { position: absolute; top: -7px; }
.vg-nav-toggle__bar::after { position: absolute; top: 7px; }

@media (max-width: 900px) {
	.vg-nav-toggle { display: block; }
	.vg-nav {
		display: none; position: absolute; top: 72px; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; border-bottom: 1px solid var(--vg-line); padding: 1rem 1.25rem 1.5rem;
	}
	.vg-nav.is-open { display: flex; }
	.vg-nav__list { flex-direction: column; gap: 0; }
	.vg-nav__list a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--vg-soft); }
	.vg-nav__list .sub-menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 1rem; }
	.vg-header__cta { margin-top: 1rem; }
}

/* Hero */
.vg-hero {
	position: relative; overflow: hidden;
	background:
		linear-gradient(105deg, transparent 58%, rgba(35,174,237,.22) 58%, rgba(35,174,237,.22) 66%, rgba(255,255,255,.07) 66%, rgba(255,255,255,.07) 72%, rgba(35,174,237,.22) 72%, rgba(35,174,237,.22) 80%, transparent 80%),
		radial-gradient(900px 420px at 90% -10%, rgba(35,174,237,.35), transparent 60%),
		linear-gradient(135deg, var(--vg-primary) 0%, var(--vg-primary-dark) 100%);
	color: #fff;
	padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.vg-hero::after {
	/* righe del campo */
	content: ""; position: absolute; inset: auto -10% -60% auto; width: 620px; height: 620px;
	border: 2px solid rgba(241,170,41,.25); border-radius: 50%; pointer-events: none;
}
.vg-hero__kicker {
	display: inline-block; margin-bottom: 1rem; padding: .35rem .8rem; border-radius: 999px;
	background: rgba(255,255,255,.12); color: var(--vg-accent);
	font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
}
.vg-hero h1 { color: #fff; max-width: 15ch; }
.vg-hero__lead { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 58ch; color: rgba(255,255,255,.88); }
.vg-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.vg-hero__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 2rem 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.9); font-weight: 600; }
.vg-hero__facts li::before { content: "✓"; color: var(--vg-accent); margin-right: .45rem; font-weight: 900; }

/* Sezioni */
.vg-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.vg-section--soft { background: var(--vg-soft); }
.vg-section--dark {
	background:
		radial-gradient(800px 400px at 0% 100%, rgba(35,174,237,.22), transparent 60%),
		var(--vg-primary);
	color: #fff;
}
.vg-section--dark h2 { color: #fff; }
.vg-section__head { max-width: 720px; margin-bottom: 2.2rem; }
.vg-section__head p { color: var(--vg-muted); font-size: 1.1rem; }
.vg-section--dark .vg-section__head p { color: rgba(255,255,255,.8); }
.vg-eyebrow { color: var(--vg-pitch); font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .6rem; }

/* Pilastri */
.vg-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }
.vg-pillar {
	background: #fff; border: 1px solid var(--vg-line); border-top: 4px solid var(--vg-sky); border-radius: var(--vg-radius);
	padding: 1.7rem; box-shadow: var(--vg-shadow);
}
.vg-pillar__num {
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1rem;
	background: var(--vg-primary); color: var(--vg-accent); box-shadow: inset 0 -4px 0 var(--vg-sky); font: 900 1.3rem/1 var(--vg-font-display);
}
.vg-pillar p { color: var(--vg-muted); margin: 0; }

/* Trova la categoria */
.vg-finder {
	background: #fff; color: var(--vg-ink); border-radius: var(--vg-radius);
	padding: 1.5rem; box-shadow: var(--vg-shadow); max-width: 560px;
}
.vg-finder label { display: block; font-weight: 800; font-size: 1.15rem; margin-bottom: .7rem; }
.vg-finder__row { display: flex; gap: .7rem; flex-wrap: wrap; }
.vg-finder select { flex: 1 1 180px; }
.vg-finder__result { margin: .7rem 0 0; color: var(--vg-muted); font-size: .95rem; }

/* Griglia categorie */
.vg-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.vg-cat {
	position: relative; display: flex; flex-direction: column; gap: .2rem;
	padding: 1.4rem 1.4rem 1.3rem; border-radius: var(--vg-radius);
	background: #fff; border: 1px solid var(--vg-line); text-decoration: none; color: var(--vg-ink);
	transition: border-color .15s ease, transform .15s ease;
}
.vg-cat:hover { border-color: var(--vg-primary); transform: translateY(-3px); }
.vg-cat__label { color: var(--vg-pitch); font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.vg-cat__title { font: 800 1.45rem/1.15 var(--vg-font-display); }
.vg-cat__years { color: var(--vg-muted); }
.vg-cat__go { position: absolute; right: 1.2rem; bottom: 1.1rem; font-size: 1.3rem; color: var(--vg-primary); }

/* Due colonne */
.vg-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .vg-split { grid-template-columns: 1fr; } }

/* Lista con spunte */
.vg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.vg-checks li { position: relative; padding-left: 2.1rem; }
.vg-checks li::before {
	content: "✓"; position: absolute; left: 0; top: .1rem;
	display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
	background: var(--vg-sky); color: #fff; font-size: .8rem; font-weight: 900;
}

/* Scheda info / posti */
.vg-card {
	background: #fff; border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
	padding: 1.6rem; box-shadow: var(--vg-shadow);
}
.vg-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; }
.vg-card dt { font-weight: 700; color: var(--vg-muted); }
.vg-card dd { margin: 0; }
.vg-seats { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; }
.vg-seats__num { font: 900 2.6rem/1 var(--vg-font-display); color: var(--vg-primary); }
.vg-seats__label { color: var(--vg-muted); font-weight: 600; }

/* Passi */
.vg-steps { counter-reset: vgstep; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.vg-steps li { counter-increment: vgstep; padding: 1.4rem; border-radius: var(--vg-radius); background: rgba(35,174,237,.10); border: 1px solid rgba(35,174,237,.30); }
.vg-steps li::before { content: counter(vgstep); display: block; font: 900 2rem/1 var(--vg-font-display); color: var(--vg-accent); margin-bottom: .5rem; }
.vg-steps strong { display: block; font-size: 1.1rem; margin-bottom: .3rem; }

/* FAQ */
.vg-faq { display: grid; gap: .7rem; max-width: 820px; }
.vg-faq details { background: #fff; border: 1px solid var(--vg-line); border-radius: 12px; padding: 1rem 1.2rem; }
.vg-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.vg-faq summary::-webkit-details-marker { display: none; }
.vg-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--vg-primary); }
.vg-faq details[open] summary::after { content: "–"; }
.vg-faq details p { margin: .8rem 0 0; color: var(--vg-muted); }

/* Testimonianza */
.vg-quote { margin: 0; padding: 1.8rem; border-left: 5px solid var(--vg-accent); background: #fff; border-radius: 0 var(--vg-radius) var(--vg-radius) 0; }
.vg-quote p { font-size: 1.2rem; font-style: italic; }
.vg-quote cite { font-style: normal; font-weight: 700; color: var(--vg-muted); }

/* Contenuti da completare: ben visibili in fase di sviluppo */
.vg-todo {
	display: inline-block; padding: .05rem .45rem; border-radius: 6px;
	background: #fff3c4; color: #6b4e00; border: 1px dashed #d19b00;
	font-size: .9em; font-weight: 700; font-style: normal;
}

/* Modulo */
.vg-form-section { scroll-margin-top: 90px; }
.vg-form-box {
	background: #fff; color: var(--vg-ink); border-radius: calc(var(--vg-radius) + 4px);
	padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.vg-form-box h2 { font-size: 1.8rem; }
.vg-form-box > p { color: var(--vg-muted); }
.vg-form { display: grid; gap: 1rem; }
.vg-form label { display: block; font-weight: 700; font-size: .95rem; }
.vg-form .wpcf7-form-control-wrap { display: block; margin-top: .35rem; }
.vg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .vg-form__row { grid-template-columns: 1fr; } }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
	width: 100%; padding: .85rem 1rem;
	border: 1.5px solid var(--vg-line); border-radius: 10px; background: #fff;
	font: 400 1rem/1.3 var(--vg-font); color: var(--vg-ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vg-sky-ink); box-shadow: 0 0 0 3px rgba(35,174,237,.25); }
.vg-form .wpcf7-acceptance label { font-weight: 400; font-size: .9rem; color: var(--vg-muted); display: flex; gap: .6rem; align-items: flex-start; }
.vg-form .wpcf7-acceptance input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; }
.vg-form .wpcf7-list-item { margin: 0; }
.vg-form .wpcf7-submit { width: 100%; font-size: 1.1rem; padding: 1.1rem; }
.vg-form__note { font-size: .85rem; color: var(--vg-muted); text-align: center; margin: 0; }
.wpcf7-not-valid-tip { color: #b42318; font-size: .85rem; font-weight: 600; margin-top: .3rem; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 10px; font-size: .95rem; }
.wpcf7-spinner { margin: .6rem auto 0; display: block; }

/* Pagine di servizio */
.vg-page { padding: 3.5rem 0 5rem; max-width: 820px; }
.vg-page__title { font-size: clamp(2rem, 4vw, 3rem); }
.vg-content > * + * { margin-top: 1rem; }

/* Footer */
.vg-footer { background: var(--vg-primary-dark); border-top: 4px solid var(--vg-accent); color: rgba(255,255,255,.8); padding: 3.5rem 0 1.5rem; font-size: .95rem; }
.vg-footer a { color: #fff; text-decoration: none; }
.vg-footer a:hover { text-decoration: underline; }
.vg-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .vg-footer__grid { grid-template-columns: 1fr; } }
.vg-footer__name { font: 800 1.4rem/1.1 var(--vg-font-display); color: #fff; text-transform: uppercase; }
.vg-footer__title { color: var(--vg-accent); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.vg-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.vg-footer__legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }

/* CTA fissa su mobile */
.vg-sticky-cta { display: none; }
@media (max-width: 720px) {
	.vg-sticky-cta {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.97); border-top: 1px solid var(--vg-line);
	}
	.vg-sticky-cta .vg-btn { width: 100%; }
	body { padding-bottom: 76px; }
}

/* Correzioni */
.vg-section--dark .vg-form-box h2 { color: var(--vg-ink); }
.vg-seats .vg-todo { font-size: .9rem; }
.vg-split .vg-steps { grid-template-columns: 1fr; }
.vg-split .vg-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; }
.vg-split .vg-steps li::before { grid-row: span 2; margin: 0; }

/* Quota e servizi inclusi */
.vg-price-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; align-items: stretch; }
@media (max-width: 860px) { .vg-price-grid { grid-template-columns: 1fr; } }
.vg-price {
	display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
	padding: 2rem; border-radius: var(--vg-radius);
	background: var(--vg-primary); color: #fff;
	box-shadow: var(--vg-shadow); border-bottom: 5px solid var(--vg-accent);
}
.vg-price__label { color: var(--vg-sky); font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.vg-price__amount { font: 900 clamp(3rem, 7vw, 4.2rem)/1 var(--vg-font-display); color: #fff; }
.vg-price__note { color: rgba(255,255,255,.85); margin-bottom: 1.3rem; }
.vg-price .vg-btn { margin-top: auto; }
.vg-includes {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
}
.vg-includes li {
	position: relative; padding: 1.1rem 1.2rem 1.1rem 3.1rem;
	background: #fff; border: 1px solid var(--vg-line); border-radius: 12px;
	color: var(--vg-muted); font-size: .97rem;
}
.vg-includes li::before {
	content: "✓"; position: absolute; left: 1.1rem; top: 1.15rem;
	display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
	background: var(--vg-sky); color: #fff; font-size: .8rem; font-weight: 900;
}
.vg-includes strong { display: block; color: var(--vg-ink); font-size: 1.02rem; margin-bottom: .15rem; }

/* Centro sportivo */
.vg-facilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.vg-facility { padding: 1.6rem; border-radius: var(--vg-radius); background: var(--vg-soft); border: 1px solid var(--vg-line); }
.vg-facility__badge {
	display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1rem;
	background: var(--vg-primary); color: var(--vg-accent);
	font: 900 1.6rem/1 var(--vg-font-display); box-shadow: 0 0 0 4px rgba(35,174,237,.35);
}
.vg-facility p { color: var(--vg-muted); margin: 0; }

/* Numero chiuso: confronto */
.vg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .vg-compare { grid-template-columns: 1fr; } }
.vg-compare__col { padding: 1.5rem; border-radius: var(--vg-radius); }
.vg-compare__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: .97rem; }
.vg-compare__col li { position: relative; padding-left: 1.7rem; }
.vg-compare__title { font: 800 1.15rem/1.2 var(--vg-font-display); margin-bottom: 1rem; }
.vg-compare__col--no { background: #fff; border: 1px solid var(--vg-line); color: var(--vg-muted); }
.vg-compare__col--no li::before { content: "✕"; position: absolute; left: 0; color: #b42318; font-weight: 900; }
.vg-compare__col--yes { background: var(--vg-primary); color: #fff; border-bottom: 5px solid var(--vg-accent); box-shadow: var(--vg-shadow); }
.vg-compare__col--yes .vg-compare__title { color: var(--vg-accent); }
.vg-compare__col--yes li::before { content: "✓"; position: absolute; left: 0; color: var(--vg-sky); font-weight: 900; }
.vg-closed + .vg-section--soft { border-top: 1px solid var(--vg-line); }

input[type="number"] {
	width: 100%; padding: .85rem 1rem;
	border: 1.5px solid var(--vg-line); border-radius: 10px; background: #fff;
	font: 400 1rem/1.3 var(--vg-font); color: var(--vg-ink);
}