/**
 * Esempio industriale "Valmora" (solo template page-industria).
 * Tutto il resto viene da theme.json, dai blocchi core e da WARE Toolkit.
 */

/* Palette dell'esempio: grafite e arancio sicurezza, al posto della palette di WARE Open.
   Le classi dei colori di WordPress usano queste variabili, quindi cambia tutto in un punto solo. */
body.page-template-page-industria {
	--wp--preset--color--base: #F3F2EF;
	--wp--preset--color--base-alt: #E7E5E0;
	--wp--preset--color--contrast: #15181B;
	--wp--preset--color--contrast-soft: #4B5158;
	--wp--preset--color--primary: #C2410C;
	--wp--preset--color--primary-contrast: #FFFFFF;
	--wp--preset--color--secondary: #1E2227;
	--wp--preset--color--accent: #FF8A3D;
	--wp--preset--color--highlight: #FFC24B;
	--wp--preset--color--border: #D3D0C9;
}

body.page-template-page-industria .is-style-section-dark {
	background-color: var(--wp--preset--color--secondary) !important;
}

body.page-template-page-industria .ware-hover-zoom,
body.page-template-page-industria .wp-block-cover {
	border-radius: 0;
}

/* Header: link "Torna a WARE Open" discreto */
.valmora-header .ware-header__cta .wp-block-button__link {
	padding: 0.55em 1.2em;
	font-size: 0.9rem;
	color: inherit;
	border-color: currentColor;
	background: transparent;
}

.valmora-header .ware-header__cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* Processo: numero, testo e "cosa ricevi" in righe separate da filetti */
.valmora-process > .wp-block-columns {
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.valmora-process > .wp-block-columns:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.valmora-process .wp-block-heading {
	margin-top: 0;
}

.valmora-process-n {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.valmora-process-result {
	display: inline-block;
	margin-top: 0.4rem !important;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	color: #9A330A;
	font-weight: 600;
}

/* Testimonianza: l'immagine riempie l'altezza del testo, senza vuoti */
@media (min-width: 782px) {
	.valmora-testimonial {
		align-items: stretch !important;
	}

	.valmora-testimonial .valmora-fill {
		height: 100%;
		margin: 0;
	}

	.valmora-testimonial .valmora-fill img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	.valmora-quote-col {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}
}

/* Logo testuale */
.valmora-logo {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.18em;
	line-height: 1;
}

.valmora-logo a {
	color: inherit;
	text-decoration: none;
}

.valmora-logo span {
	display: block;
	margin-top: 0.3em;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.55em;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Header scuro quando si scorre */
.valmora-header .wp-block-navigation {
	font-weight: 500;
}

/* Hero con video: la foto del primo fotogramma si vede subito e resta per chi preferisce meno movimento. */
.valmora-hero {
	background: #15181b url("../images/valmora-hero-poster.jpg") center / cover no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.valmora-hero .wp-block-cover__video-background {
		display: none;
	}
}

/* Hero */
.valmora-hero .valmora-display {
	letter-spacing: -0.03em;
}

/* Numeri */
.valmora-stat {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

/* Fascia che scorre */
.valmora-band {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.valmora-marquee p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 2.2rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.valmora-marquee p span {
	color: var(--wp--preset--color--accent);
	margin-left: var(--wp--preset--spacing--40);
}

/* Sezioni scure */
.valmora-dark .valmora-muted,
.valmora-muted {
	opacity: 0.72;
}

.valmora-giant {
	margin: 0 0 calc(var(--wp--preset--spacing--40) * -1);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(4rem, 15vw, 14rem);
	line-height: 0.85;
	letter-spacing: -0.03em;
	white-space: nowrap;
	opacity: 0.45;
	--ware-stroke: var(--wp--preset--color--accent);
}

/* Bento dei settori: su telefono una colonna */
.valmora-tile h3 {
	margin-top: 0.2em;
}

@media (max-width: 781px) {
	.valmora-bento {
		grid-template-columns: 1fr !important;
	}

	.valmora-bento > * {
		grid-column: auto !important;
		grid-row: auto !important;
		min-height: 300px !important;
	}

	.valmora-giant {
		white-space: normal;
	}
}

/* Processo: numeri contornati e linea che li collega */
.valmora-steps {
	position: relative;
}

.valmora-step-n {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(3.5rem, 6vw, 5.5rem);
	line-height: 1;
	--ware-stroke: var(--wp--preset--color--primary);
}

@media (min-width: 782px) {
	.valmora-steps::before {
		content: "";
		position: absolute;
		top: 2.8rem;
		left: 0;
		right: 0;
		border-top: 1px dashed var(--wp--preset--color--border);
		z-index: 0;
	}

	.valmora-steps > .wp-block-column {
		position: relative;
		z-index: 1;
	}
}

/* Tabelle del parco macchine */
.valmora-table table {
	border-collapse: collapse;
}

.valmora-table th,
.valmora-table td {
	padding: 0.8em 0.9em;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.valmora-table th {
	font-family: var(--wp--preset--font-family--heading);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.valmora-table td:last-child,
.valmora-table th:last-child {
	text-align: right;
}

/* Citazione grande */
.valmora-dark .wp-block-quote {
	border: 0;
	padding: 0;
	margin: var(--wp--preset--spacing--30) 0;
}

.valmora-dark .wp-block-quote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.6rem, 2.8vw, 2.5rem);
	line-height: 1.2;
}

.valmora-dark .wp-block-quote cite {
	display: block;
	margin-top: 1em;
	font-style: normal;
	color: var(--wp--preset--color--accent);
}

/* Pannelli del mega menu */
.valmora-mega .valmora-mega-title {
	margin: 0;
}

.valmora-mega .valmora-mega-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.valmora-mega .valmora-mega-title a:hover {
	color: var(--wp--preset--color--primary);
}

.valmora-mega .wp-block-cover {
	border-radius: 14px;
}

.valmora-mega-feature {
	height: 100%;
}

/* ------------------------------------------------------------------
 * Barra degli esempi e "Mostra i blocchi"
 * ---------------------------------------------------------------- */
.ware-demo-toolbar {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 200;
	gap: 0.6rem 1rem !important;
	width: max-content;
	max-width: calc(100vw - 24px);
	padding: 0.6rem 0.8rem 0.6rem 1.2rem;
	border-radius: 999px;
	background: rgba(22, 25, 34, 0.92);
	color: #fff;
	backdrop-filter: blur(8px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	margin: 0 !important;
}

.ware-demo-toolbar p {
	margin: 0;
}

.ware-demo-toolbar .wp-block-button__link {
	padding: 0.5em 1.1em;
	font-size: 0.85rem;
}

.ware-demo-toolbar .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 781px) {
	.ware-demo-toolbar {
		border-radius: 18px;
		bottom: 10px;
	}

	.ware-demo-toolbar p {
		width: 100%;
		text-align: center;
	}
}

.ware-show-blocks [data-ware-block] {
	outline: 2px dashed rgba(70, 36, 244, 0.85);
	outline-offset: -2px;
	position: relative;
}

.ware-show-blocks [data-ware-block]::before {
	content: attr(data-ware-block);
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 60;
	padding: 2px 8px;
	border-radius: 4px;
	background: #4624f4;
	color: #fff;
	font: 600 11px/1.6 var(--wp--preset--font-family--body), sans-serif;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	text-transform: none;
	-webkit-text-stroke: 0;
	-webkit-text-fill-color: #fff;
}

.ware-show-blocks .wp-block-cover[data-ware-block]::before {
	z-index: 61;
}

/* ------------------------------------------------------------------
 * Telefono: header essenziale e mega menu compatto dentro il menu a scomparsa
 * ---------------------------------------------------------------- */
@media (max-width: 781px) {
	.valmora-header .ware-header__cta {
		display: none;
	}

	.valmora-header .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--contrast) !important;
	}

	.is-menu-open .valmora-mega {
		padding-top: 0 !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
	}

	.is-menu-open .valmora-mega .wp-block-columns {
		gap: 0 !important;
	}

	.is-menu-open .valmora-mega .is-layout-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 0.8rem !important;
	}

	.is-menu-open .valmora-mega-feature,
	.is-menu-open .valmora-mega p,
	.is-menu-open .valmora-mega .wp-block-ware-icon {
		display: none !important;
	}

	.is-menu-open .valmora-mega .valmora-mega-title {
		font-size: 1rem !important;
	}

	.is-menu-open .valmora-mega .wp-block-cover {
		min-height: 96px !important;
		padding: 0.8rem !important;
	}

	.is-menu-open .valmora-mega .wp-block-cover h3 {
		font-size: 1rem !important;
	}
}

/* Processo: più spazio tra le due colonne, numero vicino al suo testo */
@media (min-width: 782px) {
	.valmora-process-cols {
		column-gap: clamp(3rem, 7vw, 7rem) !important;
	}
}

.valmora-process .valmora-process-row {
	column-gap: 1.25rem !important;
	flex-wrap: nowrap !important;
}

/* Anche su telefono: numero stretto a sinistra, testo nello spazio restante
   (la regola di WordPress che impila le colonne darebbe al numero tutta la riga) */
.valmora-process .valmora-process-row > .wp-block-column.valmora-process-num {
	flex: 0 0 3.2rem !important;
}

.valmora-process .valmora-process-row > .wp-block-column:not(.valmora-process-num) {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* Footer: la riga finale è una fascia a sé, più scura e staccata */
.valmora-footer-bar {
	margin-top: 0 !important;
	background: #0f1113;
	color: rgba(255, 255, 255, 0.72);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.valmora-footer-bar p {
	margin: 0;
}

.valmora-footer-bar a {
	color: var(--wp--preset--color--accent);
}