/* ==========================================
   IWM Mega Menu Hover Overrides
   (loaded after assets/css/main.css)
   ========================================== */

/* ─── Header Layout 2 Slot ─── */
.tp-header-right {
	gap: 24px;
}

.tp-header-right .tp-main-menu {
	margin-right: 8px;
}

/* Entry animation handled by GSAP in main.js */

/* Menu item hover effect - Sliding pill */
.tp-main-menu nav ul {
	position: relative;
}

.tp-main-menu nav ul > li > a {
	position: relative;
	padding: 8px 16px;
	border-radius: 8px;
	transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 2;
}

/* Sliding pill element */
.menu-hover-pill {
	position: absolute;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
	z-index: 1;
	opacity: 0 !important;
	visibility: hidden;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				opacity 0.3s ease,
				visibility 0s 0.3s;
}

.menu-hover-pill.active {
	opacity: 1 !important;
	visibility: visible;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
				opacity 0.3s ease,
				visibility 0s 0s;
}

.tp-main-menu nav ul > li:hover > a,
.tp-main-menu nav ul > li.current-menu-item > a {
	color: var(--cta) !important;
}

@media (min-width: 992px) {
	.tp-header-area,
	.tp-header-area .container,
	.tp-header-area .row,
	.tp-main-menu,
	.tp-main-menu nav {
		overflow: visible !important;
	}

	.tp-main-menu nav ul {
		overflow: visible !important;
	}

	.tp-main-menu nav ul li {
		position: relative;
	}

	.tp-main-menu nav ul li > .submenu {
		position: absolute;
		top: 100%;
		left: 50%;
		width: max-content;
		min-width: 280px;
		max-width: min(420px, 90vw);
		max-height: 70vh;
		overflow-y: auto;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 32px 64px rgba(0, 0, 0, 0.12);
		transform: translate(-50%, -12px) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		display: block !important;
		transition:
			opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0s 0.35s;
		z-index: 1000;
		padding-top: 8px;
		margin-top: 8px;
	}

	/* Aggiungi area invisibile che colma il gap tra voce menu e dropdown */
	.tp-main-menu nav ul li > .submenu::before {
		content: '';
		position: absolute;
		top: -8px;
		left: 0;
		right: 0;
		height: 8px;
		background: transparent;
		pointer-events: auto;
	}

	/* Mantieni il menu aperto quando si hovera sul parent LI o sul submenu stesso */
	.tp-main-menu nav ul li:hover > .submenu {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translate(-50%, 0) !important;
		pointer-events: auto !important;
		transition:
			opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0s 0s;
	}

	.tp-main-menu nav ul li .tp-megamenu {
		width: auto;
		margin: 0;
		padding: 0;
		background: #fff;
		border-radius: 20px;
	}

	/* Mega menu list styling */
	.tp-megamenu-list {
		list-style: none;
		padding: 16px 0;
		margin: 0;
	}

	.tp-megamenu-item {
		position: relative;
		padding: 0;
		margin: 0;
	}

	/* Mega menu title link styling */
	.tp-megamenu-title {
		display: block;
		padding: 12px 24px;
		color: #1a1a1a;
		text-decoration: none;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.4;
		transition:
			color 0.25s ease,
			background-color 0.25s ease,
			padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
		border-radius: 12px;
		margin: 0 8px;
	}

	.tp-megamenu-title:hover {
		color: var(--iwm-cta);
		background-color: rgba(239, 68, 68, 0.06);
		padding-left: 5px;
		transition:
			color 0.25s ease,
			background-color 0.25s ease,
			padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* Mega menu sublist styling */
	.tp-megamenu-sublist {
		list-style: none;
		padding: 8px 0 12px 0;
		margin: 0;
	}

	.tp-megamenu-sublist li {
		margin: 0;
		padding: 0;
	}

	.tp-megamenu-sublist a {
		display: block;
		padding: 8px 24px 8px 40px;
		color: #666;
		text-decoration: none;
		font-size: clamp(13px, 1.1vw, 14px);
		line-height: 1.5;
		transition:
			color 0.25s ease,
			padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.tp-megamenu-sublist a:hover {
		color: var(--cta);
		padding-left: 32px;
	}
}

/* Mobile menu - Same hover feedback for sublist items */
.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu li a {
	transition:
		color 0.25s ease,
		transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu li a:hover {
	color: var(--cta) !important;
	transform: translateX(5px) !important;
}

.tp-megamenu-item a {
	background: none !important;
}

.tp-megamenu-item a:hover {
	color: var(--cta)!important;
	transition: padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

/* ═══════════════════════════════════════════
   OFFCANVAS / FULLSCREEN MENU ANIMATIONS
   ═══════════════════════════════════════════ */

/* Panel opening - smooth reveal */
.tp-offcanvas-2-area .offcanvas-bg {
	transition: clip-path 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.tp-offcanvas-2-area.menu-open .offcanvas-bg {
	transition: clip-path 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.tp-offcanvas-2-area:not(.menu-open) .offcanvas-bg {
	transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transition-delay: 0.15s !important;
}

/* Content wrapper */
.tp-offcanvas-2-left {
	transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.tp-offcanvas-2-area.menu-open .tp-offcanvas-2-left {
	transition-delay: 0.5s !important;
}

.tp-offcanvas-2-area:not(.menu-open) .tp-offcanvas-2-left {
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transition-delay: 0s !important;
}

.tp-offcanvas-2-wrapper .tp-header-logo {
	transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.tp-offcanvas-2-area.menu-open .tp-offcanvas-2-left .tp-offcanvas-menu {
	transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	transition-delay: 0.45s !important;
}

.tp-offcanvas-2-area:not(.menu-open) .tp-offcanvas-2-left .tp-offcanvas-menu {
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transition-delay: 0s !important;
}

/* Menu items - soft staggered reveal */
.tp-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li {
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
				transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
				visibility 0s 0.25s !important;
}

.tp-offcanvas-2-area.menu-open .tp-offcanvas-menu > nav > ul > li {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
				transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
				visibility 0s 0s !important;
	transition-delay: calc(0.55s + var(--item-index, 0) * 0.03s) !important;
}

/* Menu links - coherent hover style */
.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul > li > a {
	position: relative;
	display: inline-block;
	transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
				transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	transform: translateY(0) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Subtle line indicator instead of dot */
.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul > li > a::before {
	content: '';
	position: absolute;
	left: -24px;
	top: 50%;
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: var(--cta);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul > li:hover > a {
	color: var(--cta) !important;
	transform: translateX(6px) !important;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul > li:hover > a::before {
	transform: translateY(-50%) scaleX(1);
}

/* Submenu items - same vibe */
.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu li a {
	transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
				transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu li a:hover {
	color: var(--cta) !important;
	transform: translateX(6px) !important;
}