/**
 * MN Eletricks - Header Sticky Effects
 * Advanced header switching based on scroll direction
 * Version: 1.0.3
 */

/* Base styles for sticky headers */
.headersticky,
.headersticky-active {
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform-origin: center top;
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

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

.headersticky.mn-sticky-hidden {
	opacity: 0;
	transform: translateY(-100%);
	visibility: hidden;
	pointer-events: none;
}

/* Alternative header - hidden by default, shown when scrolling up */
.headersticky-active {
	opacity: 0;
	transform: translateY(-100%);
	visibility: hidden;
	pointer-events: none;
	z-index: 99;
}

.headersticky-active.mn-sticky-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

/* Enhanced animations for smooth transitions */
@keyframes mnStickySlideDown {
	from {
		opacity: 0;
		transform: translateY(-100%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mnStickySlideUp {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-100%);
	}
}

/* Apply animations when classes are toggled */
.headersticky-active.mn-sticky-animate-in {
	animation: mnStickySlideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.headersticky.mn-sticky-animate-out {
	animation: mnStickySlideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ensure proper stacking and positioning */
.elementor-sticky--active.headersticky,
.elementor-sticky--active.headersticky-active {
	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 *,
.elementor-sticky--active .headersticky-active * {
	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 .elementor-section,
.headersticky-active .elementor-section,
.headersticky .elementor-widget,
.headersticky-active .elementor-widget {
	overflow: visible !important;
}

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

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

/* Specific fixes for navigation menus */
.headersticky .elementor-widget-nav-menu,
.headersticky-active .elementor-widget-nav-menu,
.headersticky .elementor-widget-wp-widget-nav_menu,
.headersticky-active .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 .sub-menu,
.headersticky-active .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 {
	position: static !important;
	overflow: visible !important;
}

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

.headersticky .jet-mobile-menu,
.headersticky-active .jet-mobile-menu {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 999999 !important;
	overflow: auto !important;
}

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

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

/* 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;
}

/* Gradient fade effect for seamless integration */
.headersticky-active.mn-sticky-visible {
	position: relative;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0) 100%);
}


/* Dark theme support for gradient fade */
@media (prefers-color-scheme: dark) {
	.headersticky-active.mn-sticky-visible {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%);
	}
}