/* ==========================================================================
   Footer e bottone "torna su"
   ==========================================================================
   Stesso impianto del footer di hestia-child: fondo scuro, titoli bianchi con
   una linea d'accento, menu e social in grigio chiaro che si accendono al
   passaggio, copyright centrato. Al posto del vecchio riquadro col logo a
   puntini c'e' il marchio HB con lo slogan in testo vero (spec D11).
   ========================================================================== */

.htmb-footer {
	position: relative;
	margin-top: 100px;
	padding: 72px 0 0;
	background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
	color: var(--htmb-ink-sfumato);
	font-family: var(--htmb-font-ui);
}

/* L'onda che chiude la pagina, ferma: nel vecchio footer oscillava in
   continuazione, un movimento che nessuno guarda e che costa a ogni frame. */
.htmb-footer::before {
	content: "";
	position: absolute;
	top: -60px;
	right: 0;
	left: 0;
	height: 61px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path fill="%231a1a1a" d="M0,48L80,56C160,64,320,80,480,80C640,80,800,64,960,56C1120,48,1280,48,1360,48L1440,48L1440,120L0,120Z"/></svg>') no-repeat bottom / 100% 100%;
	pointer-events: none;
}

.htmb-footer-griglia {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
}

/* --- Marchio ---------------------------------------------------------------
   La stessa composizione del logo con slogan (docs/brand, linea B): marchio,
   una linea sottile sfumata alle due estremita', lo slogan sotto. Qui lo
   slogan e' testo vero e non parte dell'SVG: a questa misura, dentro l'SVG,
   sarebbe alto 7px.
   Il blocco e' largo quanto il logo: lo slogan ha larghezza 0 e min-width
   100%, cosi' va a capo sulla misura del logo invece di allargare il blocco. */

.htmb-footer-marchio {
	display: grid;
	justify-self: start;
	align-self: start;
	width: max-content;
}

.htmb-footer-logo {
	display: inline-block;
	color: #fff;
}

.htmb-footer .htmb-logo {
	display: block;
	width: auto;
	height: 44px;
}

.htmb-footer-linea {
	display: block;
	width: 100%;
	height: 1px;
	margin: 16px 0 12px;
	background: linear-gradient(90deg, transparent, var(--htmb-marchio-ciano) 15%, var(--htmb-accento) 85%, transparent);
}

.htmb-footer-slogan {
	width: 0;
	min-width: 100%;
	margin: 0;
	color: var(--htmb-ink-sfumato);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.8;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

.htmb-footer-pixel {
	color: var(--htmb-marchio-ciano);
	font-weight: 700;
}

/* Slogan e linea solo su desktop (sopra i 1200px, breakpoint del progetto):
   su tablet e mobile resta il marchio. Decisione di Daniele, 2026-09-25. */
@media (max-width: 1199.98px) {
	.htmb-footer-linea,
	.htmb-footer-slogan {
		display: none;
	}
}

/* --- Colonne ----------------------------------------------------------------- */

.htmb-footer-titolo {
	display: inline-block;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--htmb-accento);
	color: #fff;
	font-family: var(--htmb-font-ui);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.htmb-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.htmb-footer-menu li + li {
	margin-top: 14px;
}

.htmb-footer-menu a {
	color: var(--htmb-ink-sfumato);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease;
}

.htmb-footer-menu a:hover,
.htmb-footer-menu a:focus-visible {
	color: #fff;
}

.htmb-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.htmb-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--htmb-ink-sfumato);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.htmb-footer-social a:hover,
.htmb-footer-social a:focus-visible {
	color: var(--htmb-firma);
	border-color: var(--htmb-firma);
	transform: translateY(-3px);
}

.htmb-footer-social .htmb-icona {
	width: 20px;
	height: 20px;
}

/* --- Copyright ------------------------------------------------------------ */

.htmb-footer-copyright {
	margin: 0 auto;
	padding: 24px 0 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	text-align: center;
}

@media (max-width: 768.98px) {
	.htmb-footer {
		margin-top: 60px;
		padding-top: 48px;
	}

	.htmb-footer::before {
		top: -36px;
		height: 37px;
	}

	.htmb-footer-griglia {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* --- Torna su -------------------------------------------------------------- */

.htmb-torna-su {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	background-color: var(--htmb-firma);
	color: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 5px 20px rgba(15, 23, 42, 0.25);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 300ms ease, visibility 300ms, transform 300ms ease, box-shadow 300ms ease;
}

.htmb-torna-su--visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.htmb-torna-su:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}

@media (max-width: 768.98px) {
	.htmb-torna-su {
		right: 20px;
		bottom: 20px;
		width: 46px;
		height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.htmb-torna-su,
	.htmb-footer-social a {
		transition: none;
	}
}

/* Il plugin WPFront Scroll Top stampa un secondo bottone, sopra il nostro.
   Va disattivato al passaggio (piano 4); fino ad allora si nasconde. Il suo
   script lo mostra con uno stile inline: contro l'inline serve !important. */
#wpfront-scroll-top-container {
	display: none !important;
}