/* ==========================================================================
   UI enhancements — mobile compatibility, menu, animazioni uniformi
   Caricato DOPO main.css per override mirati.
   ========================================================================== */

:root {
	--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--reveal-dur: 700ms;
	--reveal-dist: 24px;
}

/* ==========================================================================
   1. ANIMAZIONI UNIFORMI — raffinano le classi esistenti .animate-*
   ========================================================================== */

.animate-style {
	opacity: 0;
	transition:
		opacity var(--reveal-dur) var(--ease-smooth),
		transform var(--reveal-dur) var(--ease-smooth),
		filter var(--reveal-dur) var(--ease-smooth);
	will-change: opacity, transform;
	filter: blur(4px);
}

.animate-style.is-visible {
	opacity: 1;
	transform: none !important;
	filter: blur(0);
}

.animate-fade-up {
	transform: translate3d(0, var(--reveal-dist), 0);
}

.animate-fade-left {
	transform: translate3d(var(--reveal-dist), 0, 0);
}

.animate-fade-right {
	transform: translate3d(calc(var(--reveal-dist) * -1), 0, 0);
}

/* Scale variant (aggiuntivo, usabile da markup futuri) */
.animate-fade-scale {
	transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
	.animate-style {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   2. HEADER / MENU MOBILE — icone, spacing, touch target, cascade
   ========================================================================== */

.site-header__toggle {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.site-header__toggle-icon {
	width: 28px;
	height: 28px;
}

/* Active link: indicatore arancione sotto il testo (desktop) + pill (mobile) */
.site-nav__link {
	position: relative;
	transition: color 200ms var(--ease-soft);
}

.site-nav__link:hover {
	color: var(--orange);
}

.site-nav__link.is-active {
	color: var(--orange);
	font-weight: var(--semibold);
}

@media (min-width: 992px) {
	.site-nav__link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 2px;
		background: var(--orange);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 280ms var(--ease-smooth);
	}

	.site-nav__link.is-active::after,
	.site-nav__link:hover::after {
		transform: scaleX(1);
	}

	/* Voci più vicine + separatore verticale arancione tra una e l'altra */
	.site-nav__list {
		gap: 0 !important;
	}

	.site-nav__item {
		display: flex;
		align-items: center;
		padding: 0 14px;
	}

	.site-nav__item:not(.site-nav__item--cta):not(:last-child)::after {
		content: "";
		display: block;
		width: 1px;
		height: 16px;
		background: var(--orange);
		margin-left: 14px;
		opacity: 0.8;
	}

	.site-nav__item--cta {
		padding-left: 18px;
	}
}

/* Icona dentro il link: nascosta su desktop, visibile su mobile */
.site-nav__icon {
	display: none;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--orange);
}

@media (max-width: 991px) {

	/* Link come righe con icona + label */
	.site-nav__link,
	.site-nav__cta {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 44px;
		padding: 12px 4px;
		font-size: 18px;
		line-height: 1.2;
		width: 100%;
	}

	.site-nav__icon {
		display: inline-flex;
	}

	.site-nav__link.is-active {
		background: rgba(220, 117, 24, 0.08);
		padding-left: 12px;
		border-radius: 8px;
	}

	.site-nav__item {
		border-bottom: 1px solid #eee;
	}

	/* CTA finale: si distacca dalla lista normale */
	.site-nav__item--cta {
		border-bottom: 0 !important;
		margin-top: 16px;
		padding-top: 16px !important;
		border-top: 1px solid #eee;
		width: 100%;
	}

	.site-nav__item--cta .site-nav__cta {
		justify-content: center;
		background: var(--black);
		color: var(--white);
		border-radius: 6px;
		border: 2px solid var(--black);
		padding: 12px 16px;
		width: 100%;
	}

	.site-nav__item--cta .site-nav__cta .site-nav__icon {
		color: var(--white);
	}

	/* Transizione apertura più elegante */
	.site-nav {
		transition: transform 420ms var(--ease-smooth) !important;
	}

	/* Cascade delle voci all'apertura */
	.site-nav__item {
		opacity: 0;
		transform: translateY(-8px);
		transition:
			opacity 360ms var(--ease-smooth),
			transform 360ms var(--ease-smooth);
	}

	.site-nav.is-open .site-nav__item {
		opacity: 1;
		transform: none;
	}

	.site-nav.is-open .site-nav__item:nth-child(1) {
		transition-delay: 120ms;
	}

	.site-nav.is-open .site-nav__item:nth-child(2) {
		transition-delay: 180ms;
	}

	.site-nav.is-open .site-nav__item:nth-child(3) {
		transition-delay: 240ms;
	}

	.site-nav.is-open .site-nav__item:nth-child(4) {
		transition-delay: 300ms;
	}

	.site-nav.is-open .site-nav__item:nth-child(5) {
		transition-delay: 360ms;
	}

	.site-nav.is-open .site-nav__item:nth-child(6) {
		transition-delay: 420ms;
	}

	/* Backdrop sul body quando aperto */
	body.is-nav-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {

	.site-nav,
	.site-nav__item {
		transition: none !important;
	}
}

/* ==========================================================================
   3. MOBILE — fix trasversali compatibilità
   ========================================================================== */

/* Evita zoom iOS su input/select/textarea (serve font-size >=16px) */
@media (max-width: 767px) {

	input,
	select,
	textarea,
	.form-control {
		font-size: 16px !important;
	}
}

/* Touch target minimo su bottoni/link-bottone */
@media (max-width: 991px) {

	.btn,
	.styleButton1,
	.styleButton2 {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Scaling heading più aggressivo sotto 576px (già .style3/4 a 767px) */
@media (max-width: 575px) {
	.style3 {
		font-size: 30px;
		line-height: 1.2;
	}

	.style5 {
		font-size: 26px;
		line-height: 1.25;
	}

	.style7 {
		font-size: 20px;
		line-height: 1.3;
	}

	.style10 {
		font-size: 22px;
		line-height: 1.3;
	}

	.style9 {
		font-size: 16px;
		line-height: 1.4;
	}
}

/* Prevenzione overflow orizzontale */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

/* Footer: allinea correttamente su mobile */
@media (max-width: 575px) {
	.site-footer__col {
		text-align: left;
	}

	.padding-footer {
		padding: var(--spaceM) var(--spaceS) var(--spaceS) var(--spaceS) !important;
	}
}

/* Form contatti: padding più generoso su mobile */
@media (max-width: 575px) {
	.section5__form {
		padding: 20px 0 !important;
	}

	.section5__form input,
	.section5__form textarea,
	.section5__form select {
		padding: 12px 14px;
	}
}

/* ==========================================================================
   4. GALLERY DETTAGLIO LAVORI — scroll-snap mobile
   ========================================================================== */

.project-gallery-section__track {
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

@media (max-width: 991px) {
	.project-gallery-section__track {
		scroll-snap-type: x mandatory;
		padding: 0 var(--spaceS);
	}

	.project-gallery-section__item {
		scroll-snap-align: center;
	}

	.project-gallery-section__image {
		width: 260px !important;
		height: 300px !important;
	}

	.project-gallery-section__item .skeleton-img {
		width: 260px !important;
		height: 300px !important;
	}

	.project-gallery-section__nav {
		display: none !important;
	}
}

/* ==========================================================================
   5. CARDS / LAVORI — responsive su mobile
   ========================================================================== */

@media (max-width: 767px) {

	.article-lavori-section__img-container,
	.article-lavori-section__img {
		max-width: 100% !important;
	}
}

/* ==========================================================================
   PROJECT-CARD — card cliccabile moderna usata per lavori e servizi
   ========================================================================== */
.project-card {
	--card-radius: 0;
	--card-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--card-dur: 520ms;

	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	background: #ffffff;
	border-radius: var(--card-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow:
		0 1px 2px rgba(16, 16, 16, 0.04),
		0 6px 20px rgba(16, 16, 16, 0.06);
	transition:
		transform var(--card-dur) var(--card-ease),
		box-shadow var(--card-dur) var(--card-ease);
	position: relative;
	/* Safari: isola il contesto di stacking per box-shadow + transform sincroni */
	isolation: isolate;
}

.project-card:hover,
.project-card:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(16, 16, 16, 0.05),
		0 14px 28px rgba(220, 117, 24, 0.14);
	outline: none;
}

/* Media */
.project-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0 !important; /* override skeleton-img */
}

.project-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Zoom delicato e continuo: scala minima, durata lunga, easing lineare-soft */
	transition: transform 1400ms cubic-bezier(0.4, 0, 0.2, 1);
	transform: scale(1);
	transform-origin: center center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.project-card:hover .project-card__image,
.project-card:focus-visible .project-card__image {
	transform: scale(1.03);
}

/* Overlay hover con icona expand */
.project-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 16, 16, 0) 55%, rgba(220, 117, 24, 0.55) 100%);
	opacity: 0;
	transition: opacity var(--card-dur) var(--card-ease);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 14px;
	pointer-events: none;
}

.project-card__overlay-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ffffff;
	color: #dc7518;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(6px);
	transition: transform var(--card-dur) var(--card-ease);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.project-card:hover .project-card__overlay { opacity: 1; }
.project-card:hover .project-card__overlay-icon { transform: translateY(0); }

/* Body */
.project-card__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}

/* Tag superiore (es. servizio) con puntino arancione */
.project-card__service {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #dc7518;
}
.project-card__service-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #dc7518;
}

.project-card__title {
	margin: 0;
	color: #101010;
	line-height: 1.25;
}

/* Descrizione con line-clamp 3 righe */
.project-card__desc {
	margin: 0;
	color: #5c5c5c;
	font-size: 14px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA con freccia che scorre */
.project-card__cta {
	margin-top: auto;
	padding-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: #101010;
	border-top: 1px solid #eeeeee;
	transition: color var(--card-dur) var(--card-ease);
}
.project-card__cta svg {
	transition: transform var(--card-dur) var(--card-ease);
}
.project-card:hover .project-card__cta { color: #dc7518; }
.project-card:hover .project-card__cta svg { transform: translateX(4px); }

@media (max-width: 575px) {
	.project-card__body { padding: 18px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.project-card,
	.project-card__image,
	.project-card__overlay,
	.project-card__overlay-icon,
	.project-card__cta,
	.project-card__cta svg {
		transition: none !important;
	}
}

/* ==========================================================================
   BACK-TO-TOP — pulsante flottante bottom-right
   ========================================================================== */
.back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: #dc7518;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 9996;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 280ms,
		background 220ms ease;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0s,
		background 220ms ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background: #b85f0f;
	outline: none;
	transform: translateY(-2px);
}

.back-to-top svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 575px) {
	.back-to-top {
		right: 14px;
		bottom: 14px;
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top { transition: none !important; }
}

/* ==========================================================================
   IUBENDA — riposiziona il badge "preferenze cookie" a metà altezza
   ========================================================================== */
.iubenda-tp-btn,
.iubenda-cs-preferences-link,
#iubenda-pp-btn,
.iub-btn-floating-preferences,
.iubenda-cs-rationale,
iframe[src*="iubenda"][id*="pref"] {
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
}

/* Evita che finisca dietro al pulsante del widget accessibilità (bottom-left) */
@media (max-width: 575px) {

	.iubenda-tp-btn,
	.iubenda-cs-preferences-link {
		top: 40% !important;
	}
}

/* ==========================================================================
   MAIL OBFUSCATE — rendering via CSS, JS solo per l'href
   Gli span .js-mail__user e .js-mail__domain hanno data-u / data-d e
   il testo dell'email è composto dal browser tramite attr(). In questo
   modo la mail è sempre visibile anche senza JS.
   ========================================================================== */
.js-mail__user::after {
	content: attr(data-u);
}

.js-mail__domain::after {
	content: attr(data-d);
}

.js-mail__sep {
	display: inline;
}

/* Evita che eventuali word-wrap spezzino in modo strano la stringa email */
.js-mail {
	word-break: break-word;
}

/* ==========================================================================
   6. PAGE ENTRANCE — micro-fade-in globale al caricamento
   ========================================================================== */

@keyframes page-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

main {
	animation: page-fade-in 500ms var(--ease-smooth) both;
}

@media (prefers-reduced-motion: reduce) {
	main {
		animation: none;
	}
}