/* =========================================================
   Monopage — Impresa di Pulizie
   Token di design (colori, font, radius) ripresi da Figma Make
   ========================================================= */

:root {
	--background: #F5F5FA;
	--foreground: #1A1B4B;
	--card: #FFFFFF;
	--card-foreground: #1A1B4B;
	--primary: #2B2E83;
	--primary-foreground: #ffffff;
	--secondary: #EEEEF6;
	--secondary-foreground: #2B2E83;
	--muted: #E6E6F0;
	--muted-foreground: #6B6C96;
	--accent: #A51926;
	--accent-foreground: #ffffff;
	--border: rgba(43, 46, 131, 0.12);
	--radius: 0.625rem;

	--font-display: 'Plus Jakarta Sans', sans-serif;
	--font-body: 'Plus Jakarta Sans', sans-serif;

	--blue: #2B2E83;
	--red: #A51926;
	--periwinkle: #7678BE;
}

/* Evita lo scroll orizzontale (dovuto al bleed dell'immagine hero) usando
   "clip" invece di "hidden": clip non crea un contenitore di scroll, quindi
   non rompe il position: sticky dell'header (hidden invece lo romperebbe,
   perché forza un overflow-y implicito e cambia il contesto di scroll). */
html {
	overflow-x: clip;
}

.monopage {
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-body);
	position: relative;
}

.monopage * {
	border-color: var(--border);
}

/* Fade-up reveal (sostituisce le animazioni framer-motion) */
.reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal-group .reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal-group .reveal:nth-child(8) { transition-delay: 0.56s; }

/* Cursor spotlight */
#cursor-spotlight {
	position: fixed;
	pointer-events: none;
	z-index: 0;
	left: -9999px;
	top: -9999px;
	width: 500px;
	height: 500px;
	border-radius: 9999px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(118, 120, 190, 0.09) 0%, transparent 65%);
	transition: left 0.14s ease, top 0.14s ease;
}

@media (max-width: 1023px) {
	#cursor-spotlight { display: none; }
}

/* Nav underline hover */
.nav-link {
	position: relative;
}
.nav-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--periwinkle);
	transition: width 0.3s;
}
.nav-link:hover::after {
	width: 100%;
}

/* Ticker */
.ticker-track {
	display: flex;
	white-space: nowrap;
	animation: ticker 18s linear infinite;
}
@keyframes ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Ghost numbers on service category cards */
.ghost-number {
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
	color: transparent;
}

/* ─── Form contatti (Contact Form 7) ───
   CF7 genera solo <form>/<input>/<select>/<textarea> con la classe "form-field"
   che passiamo via class:form-field nei tag del modulo: tutto il resto dello
   stile (larghezza, spaziatura, colori) va quindi scritto qui in CSS invece
   che come classi Tailwind sul singolo campo. */
#contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem; /* gap-5 */
}

.form-field {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	padding: 0 0 0.75rem; /* pb-3 */
	font-family: var(--font-body);
	font-size: 0.875rem; /* text-sm */
	line-height: 1.5;
	color: var(--foreground);
	transition: border-color 0.2s;
}
.form-field::placeholder {
	color: var(--muted-foreground);
	opacity: 0.4;
}
.form-field:focus {
	outline: none;
	border-color: var(--blue);
}
select.form-field {
	appearance: none;
	cursor: pointer;
}
textarea.form-field {
	resize: none;
}

/* Validazione CF7 */
.form-field.wpcf7-not-valid {
	border-color: var(--red);
}
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	color: var(--red);
}

/* Messaggio di risposta generico di CF7 (errori, spam, invio fallito).
   Il messaggio di successo non lo mostriamo qui: lo gestisce il pannello
   #contact-success, attivato via JS sull'evento wpcf7:mailsent. */
#contact-form .wpcf7-response-output {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	font-size: 0.8rem;
	border: 1px solid var(--border);
}
#contact-form form.sent .wpcf7-response-output {
	display: none;
}
#contact-form form.invalid .wpcf7-response-output,
#contact-form form.failed .wpcf7-response-output,
#contact-form form.spam .wpcf7-response-output {
	border-color: var(--red);
	color: var(--red);
}

/* Bottoni con hover glow, come nel design originale */
.btn-glow-red:hover {
	box-shadow: 0 0 40px rgba(165, 25, 38, 0.27);
}

#contact-success:not(.hidden) {
	display: flex;
}

/* Count-up numeri statistiche */
.stat-number {
	font-variant-numeric: tabular-nums;
}

/* Header sticky: trasparente in cima, sfondo sfocato dopo lo scroll */
#site-header {
	background: transparent;
	border-bottom: 1px solid transparent;
}
#site-header.is-scrolled {
	background: rgba(245, 245, 250, 0.9);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--border);
}

/* Scroll indicator hero */
@keyframes scrollDown {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}
.scroll-indicator {
	animation: scrollDown 1.6s ease-in-out infinite;
}