/**
 * MN Eletricks - Header Sticky Effects
 * Advanced header switching based on scroll direction with hover support
 * Version: 1.2.2 - Animations disabled for instant show/hide
 */

/* Base styles for sticky headers - No animations */
.headersticky,
.headersticky-active,
.headersticky-hover {
	transition: none;
	transform-origin: center top;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Main header - visible by default, hidden when scrolling down */
.headersticky {
	opacity: 1;
	visibility: visible;
	z-index: 98;
}

.headersticky.mn-sticky-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Alternative header - hidden by default, shown based on scroll trigger */
.headersticky-active {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 99;
}

.headersticky-active.mn-sticky-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Hover header - hidden by default, shown when main header is hovered */
.headersticky-hover {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 100;
	/* Keep hover header in DOM for faster image loading */
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

.headersticky-hover.mn-sticky-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Image optimization for smooth transitions */
.headersticky img,
.headersticky-active img,
.headersticky-hover img {
	/* Force GPU acceleration for images */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* Prevent image flickering */
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	/* Force browser to keep image in memory */
	will-change: opacity;
	/* Disable image transitions */
	transition: none !important;
}

/* Preload images in hover header even when hidden */
.headersticky-hover img {
	/* Force browser to load and cache images */
	content-visibility: auto;
	/* Keep images rendered in GPU */
	transform: translateZ(0) scale(1);
	-webkit-transform: translateZ(0) scale(1);
}

/* Force hover header to always render (even when hidden) for instant image display */
.headersticky-hover {
	/* Keep in rendering tree */
	contain: layout style;
	/* Prevent reflow when showing/hiding */
	will-change: opacity, visibility;
}

/* Optimize all images in sticky headers */
.headersticky img,
.headersticky-active img,
.headersticky-hover img {
	/* Prevent image reflow */
	display: block;
	max-width: 100%;
	height: auto;
	/* Force hardware acceleration */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Specific optimization for Elementor widgets with images */
.headersticky .elementor-widget-image img,
.headersticky-active .elementor-widget-image img,
.headersticky-hover .elementor-widget-image img,
.headersticky .elementor-image img,
.headersticky-active .elementor-image img,
.headersticky-hover .elementor-image img {
	/* Instant rendering */
	transition: none !important;
	animation: none !important;
	/* Keep in GPU memory */
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}

/* Animations disabled - instant show/hide */
/* Keyframes kept for backward compatibility but not used */
@keyframes mnStickySlideDown {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes mnStickySlideUp {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* Animation classes disabled - no longer applying animations */

/* Ensure proper stacking and positioning */
.elementor-sticky--active.headersticky,
.elementor-sticky--active.headersticky-active,
.elementor-sticky--active.headersticky-hover {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	overflow: visible !important;
	contain: none !important;
	isolation: auto !important;
}

/* Override Elementor's sticky containment for all child elements */
.elementor-sticky--active.headersticky *,
.elementor-sticky--active.headersticky-active *,
.elementor-sticky--active.headersticky-hover *,
.elementor-sticky--active .headersticky *,
.elementor-sticky--active .headersticky-active *,
.elementor-sticky--active .headersticky-hover * {
	overflow: visible !important;
	contain: none !important;
	max-height: none !important;
}

/* Fix overflow for containers inside sticky headers */
.headersticky .elementor-container,
.headersticky-active .elementor-container,
.headersticky-hover .elementor-container,
.headersticky .elementor-section,
.headersticky-active .elementor-section,
.headersticky-hover .elementor-section,
.headersticky .elementor-widget,
.headersticky-active .elementor-widget,
.headersticky-hover .elementor-widget {
	overflow: visible !important;
}

/* Advanced fixes for dropdowns, popups, and modals in sticky headers */
.headersticky,
.headersticky-active,
.headersticky-hover {
	overflow: visible !important;
	contain: none !important;
	isolation: auto !important;
}

/* Ensure all nested elements don't clip content */
.headersticky *,
.headersticky-active *,
.headersticky-hover * {
	overflow: visible !important;
	contain: none !important;
}

/* Specific fixes for navigation menus */
.headersticky .elementor-widget-nav-menu,
.headersticky-active .elementor-widget-nav-menu,
.headersticky-hover .elementor-widget-nav-menu,
.headersticky .elementor-widget-wp-widget-nav_menu,
.headersticky-active .elementor-widget-wp-widget-nav_menu,
.headersticky-hover .elementor-widget-wp-widget-nav_menu {
	position: static !important;
	overflow: visible !important;
}

/* Dropdown menu positioning fixes */
.headersticky .elementor-nav-menu--dropdown,
.headersticky-active .elementor-nav-menu--dropdown,
.headersticky-hover .elementor-nav-menu--dropdown,
.headersticky .sub-menu,
.headersticky-active .sub-menu,
.headersticky-hover .sub-menu {
	position: absolute !important;
	z-index: 99999 !important;
	top: 100% !important;
	left: 0 !important;
	min-width: 200px !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Mobile menu fixes */
.headersticky .elementor-nav-menu__toggle,
.headersticky-active .elementor-nav-menu__toggle {
	z-index: 99999 !important;
}

.headersticky .elementor-nav-menu--dropdown.elementor-nav-menu__container,
.headersticky-active .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position: fixed !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 99999 !important;
	max-height: calc(100vh - 100px) !important;
	overflow-y: auto !important;
}

/* Search widget fixes */
.headersticky .elementor-search-form__container,
.headersticky-active .elementor-search-form__container {
	position: relative !important;
	overflow: visible !important;
}

.headersticky .elementor-search-form__input,
.headersticky-active .elementor-search-form__input {
	z-index: 99999 !important;
}

/* WooCommerce cart widget fixes */
.headersticky .widget_shopping_cart_content,
.headersticky-active .widget_shopping_cart_content,
.headersticky .woocommerce-mini-cart,
.headersticky-active .woocommerce-mini-cart {
	position: absolute !important;
	z-index: 99999 !important;
	top: 100% !important;
	right: 0 !important;
	min-width: 300px !important;
	max-height: 400px !important;
	overflow-y: auto !important;
	background: #fff !important;
	border: 1px solid #ddd !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

/* Modal and popup fixes */
.headersticky .elementor-popup-modal,
.headersticky-active .elementor-popup-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 999999 !important;
	overflow: auto !important;
}

/* JetMenu specific fixes */
.headersticky .jet-menu,
.headersticky-active .jet-menu,
.headersticky-hover .jet-menu {
	position: static !important;
	overflow: visible !important;
}

.headersticky .jet-sub-menu,
.headersticky-active .jet-sub-menu,
.headersticky-hover .jet-sub-menu {
	position: absolute !important;
	z-index: 99999 !important;
	top: 100% !important;
	left: 0 !important;
	overflow: visible !important;
	max-height: none !important;
}

/* JetMenu Mobile Modal - Critical Fix for z-index conflict */
.jet-mobile-menu-cover {
	z-index: 9997 !important;
}

.jet-mobile-menu__instance {
	z-index: 9998 !important;
}

.jet-mobile-menu__container {
	z-index: 9998 !important;
}

.jet-mobile-menu__toggle {
	z-index: 9999 !important;
}

/* Hide sticky headers when JetMenu mobile is active */
body.jet-mobile-menu-active .headersticky,
body.jet-mobile-menu-active .headersticky-active,
body.jet-mobile-menu-active .headersticky-hover {
	z-index: 97 !important;
	opacity: 0.3 !important;
	pointer-events: none !important;
}

/* Alternative: Completely hide sticky headers when mobile menu is open */
body.jet-mobile-menu-open .headersticky,
body.jet-mobile-menu-open .headersticky-active,
body.jet-mobile-menu-open .headersticky-hover {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Performance optimizations - removed translateZ(0) to prevent widget layout issues */

/* Mobile optimizations */
@media (max-width: 768px) {
	.headersticky,
	.headersticky-active {
		transition: none;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.headersticky,
	.headersticky-active {
		transition: none !important;
		animation: none !important;
	}
}

/* Debug mode styles (can be enabled via JS) */
.mn-sticky-debug .headersticky {
	border: 2px solid #ff4444 !important;
}

.mn-sticky-debug .headersticky-active {
	border: 2px solid #44ff44 !important;
}