/**
 * Frosted Glass Backgrounds - Multiple Blur Levels
 *
 * @package Serenity_CTA_Elements
 */

/* ===============================================
   LIGHT FROSTED GLASS
   =============================================== */

/* Light blur - 10px */
.glass-light {
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Medium blur - 20px */
.glass-medium {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Strong blur - 30px */
.glass-strong {
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Extreme blur - 50px */
.glass-extreme {
    backdrop-filter: blur(50px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ===============================================
   DARK FROSTED GLASS
   =============================================== */

/* Light blur - 10px */
.glass-light-dark {
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Medium blur - 20px */
.glass-medium-dark {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Strong blur - 30px */
.glass-strong-dark {
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Extreme blur - 50px */
.glass-extreme-dark {
    backdrop-filter: blur(50px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ===============================================
   OPACITY VARIATIONS (More/Less Transparent)
   =============================================== */

/* Very transparent - 10% opacity */
.glass-transparent {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Balanced - 30% opacity */
.glass-balanced {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Solid - 60% opacity */
.glass-solid {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ===============================================
   BROWSER FALLBACK
   =============================================== */

@supports not (backdrop-filter: blur(10px)) {
    .glass-light,
    .glass-medium,
    .glass-strong,
    .glass-extreme,
    .glass-transparent,
    .glass-balanced,
    .glass-solid {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .glass-light-dark,
    .glass-medium-dark,
    .glass-strong-dark,
    .glass-extreme-dark {
        background: rgba(0, 0, 0, 0.9) !important;
    }
}

/* ===============================================
   HAMBURGER MENU - MOBILE CENTER FIX
   =============================================== */

@media (max-width: 768px) {
	.ham-nav__content {
		padding: 80px 40px 100px 40px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
	}
	
	.ham-nav__list {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
	}
	
	.ham-nav__item {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
	}
	
	.ham-nav__link {
		margin: 0 auto !important;
		text-align: center !important;
		justify-items: center !important;
		place-items: center !important;
	}
	
	.ham-nav__link--text {
		text-align: center !important;
		justify-self: center !important;
		align-self: center !important;
		margin: 0 auto !important;
	}
}

/* ===============================================
   HAMBURGER MENU - GLASS + BOXED SECTION FIX
   =============================================== */

/* Neutralize stacking context created by backdrop-filter on ALL glass classes */
.glass-extreme,
.glass-strong,
.glass-medium,
.glass-light,
.glass-extreme-dark,
.glass-strong-dark,
.glass-medium-dark,
.glass-light-dark,
.glass-transparent,
.glass-balanced,
.glass-solid {
	transform: none !important;
	will-change: auto !important;
	isolation: auto !important;
	contain: none !important;
}

/* Also neutralize Elementor's inner wrappers inside glass sections
   These can independently create stacking contexts that trap fixed children */
[class*="glass-"] > .elementor-container,
[class*="glass-"] > .e-con-inner,
[class*="glass-"] > .elementor-section-wrap,
[class*="glass-"] .elementor-container,
[class*="glass-"] .e-con-inner {
	transform: none !important;
	will-change: auto !important;
	contain: none !important;
	isolation: auto !important;
	overflow: visible !important;
}

/* Nav panel - CSS must target BOTH locations:
   1. Inside wrapper (before JS teleports it)
   2. Directly in body (after JS teleports it)
   After teleport, .serenity-hamburger-menu-wrapper nav no longer matches! */
.serenity-hamburger-menu-wrapper nav,
body > nav.serenity-nav-panel {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 350px !important;
	height: 100vh !important;
	transform: translateX(-100%) !important;
	transition: all 800ms cubic-bezier(.8, 0, .33, 1) !important;
	z-index: 999998 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: rgba(255, 255, 255, 0.98) !important;
	box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2) !important;
	contain: none !important;
	margin: 0 !important;
	border-radius: 0% 50% 50% 0% !important;
	overflow-y: auto !important;
}

/* Nav open state - both locations */
.serenity-hamburger-menu-wrapper nav.nav-open,
body > nav.serenity-nav-panel.nav-open {
	transform: translateX(0) !important;
	border-radius: 0 !important;
}

/* Overlay - both before and after teleport */
.serenity-hamburger-menu-wrapper .menu-overlay,
body > .serenity-menu-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999997 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: rgba(0, 0, 0, 0.5) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: all 500ms ease !important;
}

.serenity-hamburger-menu-wrapper .menu-overlay.active,
body > .serenity-menu-overlay.active {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hamburger button - stays above everything */
.serenity-hamburger-menu-wrapper .menu-btn {
	position: relative !important;
	z-index: 999999 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}