/**
 * Mega Menu Styling
 *
 * Provides structural CSS for the hover megamenu.
 * Uses Tailwind compatible logic where possible.
 */

/* ── Mega Menu (Amazon Style) ──────────────────────────────────────────────── */

/* Force menu item to NOT be relative, so absolute child can span full parent or screen */
.sc-mega-menu-item {
	position: static !important;
}

/* Ensure the nav container or header is relative so the panel aligns there */
/* If the theme has a specific nav class, we might need a meta selector */
nav:has(.sc-mega-menu-item), 
.main-navigation, 
.elementor-nav-menu,
.header-navigation {
	position: relative !important;
}

.sc-mega-menu-panel {
	display: none;
	opacity: 0;
	position: absolute;
	z-index: 99999;
	background: #ffffff;
	box-shadow: 0 40px 80px -10px rgba(0, 0, 0, 0.2), 0 20px 40px -20px rgba(0, 0, 0, 0.1);
	transform: translateY(-8px) scale(0.99);
	transition: 
		opacity 400ms cubic-bezier(0.23, 1, 0.32, 1),
		transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	pointer-events: none;
	width: 100%;
	left: 0;
	top: 100%;
	/* Allow natural height by default, but handle viewport overflow if needed */
	overflow: visible; 
}

/* Hover state to show the panel */
.sc-mega-menu-item:hover > .sc-mega-menu-panel,
.sc-mega-menu-item.sc-mega-open > .sc-mega-menu-panel {
	display: block;
	opacity: 1 !important;
	transform: translateY(0) scale(1) !important;
	pointer-events: auto !important;
}

/* Width Modifier: Full Screen Width */
.sc-mega-menu-panel.sc-full-width {
	left: 50% !important;
	width: 100vw !important;
	transform: translateX(-50%) translateY(-8px) scale(0.99) !important;
	display: none;
}

.sc-mega-menu-item:hover > .sc-mega-menu-panel.sc-full-width,
.sc-mega-menu-item.sc-mega-open > .sc-mega-menu-panel.sc-full-width {
	display: block !important;
	transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Width Modifier: Custom Center Width */
.sc-mega-menu-panel.sc-custom-width {
	left: 50% !important;
	transform: translateX(-50%) translateY(-8px) scale(0.99) !important;
	display: none;
}

.sc-mega-menu-item:hover > .sc-mega-menu-panel.sc-custom-width,
.sc-mega-menu-item.sc-mega-open > .sc-mega-menu-panel.sc-custom-width {
	display: block !important;
	transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Studio Mode Specific Fixes (Avoid double backgrounds/shadows) */
.sc-mega-menu-panel.sc-is-studio {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* Content adjustment for Studio layouts */
.sc-mega-menu-panel.sc-is-studio .sc-mega-content-inner {
	padding: 0; /* Let the Studio Tabs widget handle padding */
}

/* Global Overflow Fix if using 100vw */
html, body {
	overflow-x: hidden;
}

/* Content restriction to look professional */
.sc-mega-content-container {
	margin: 0 auto;
	max-width: 1280px; /* Standard wide container like Amazon */
	width: 95%;
}

.sc-mega-content-inner {
	padding: 30px 0;
}

.sc-mega-menu-item:hover .sc-mega-content-inner {
}

/* RTL Support */
body.rtl .sc-mega-menu-panel {
	right: 0;
	left: auto;
}

/* Responsive Hide Mega on Mobile if no toggle? (Theme specific) */
@media (max-width: 1024px) {
	.sc-mega-menu-panel {
		position: relative !important;
		width: 100% !important;
		box-shadow: none;
		border: none;
		display: none;
	}
	.sc-mega-menu-item.active .sc-mega-menu-panel {
		display: block;
	}
}