/* mm-nav-knockout
   Sticky top navigation with a blurred translucent bar and a logo that's
   "knocked out" of the bar via mix-blend-mode: destination-out, so the
   logo shape becomes a transparent hole through the bar instead of a
   white silhouette on top of it.

   The nav uses Bootstrap-style structure (.main-nav, .full-wrapper,
   .nav-logo-wrap, .inner-nav). This component just adds the brand-level
   visual treatment on top. */

.main-nav,
.main-nav.stick-fixed,
.main-nav.small-height,
.main-nav.stick-fixed.small-height {
	height: 90px !important;
}

.main-nav,
.main-nav.stick-fixed {
	background: rgba(10, 10, 10, 0.7) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* The knockout SVG layer. mix-blend-mode: destination-out subtracts
   the painted pixels from what's underneath, leaving a transparent hole.
   Stacking matters: this element must be above the nav bg but below
   the nav links. */
.mm-nav-knockout {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	height: 50px;
	width: auto;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: destination-out;
	display: block;
}

.main-nav .full-wrapper { position: relative; z-index: 1; }

/* Lock nav link heights so they vertically center against the 90px bar */
.inner-nav ul li a,
.main-nav.small-height .inner-nav ul li a,
.main-nav.stick-fixed.small-height .inner-nav ul li a {
	height: 90px !important;
	line-height: 90px !important;
}

/* Lock logo container heights so transitions don't squish the logo */
.nav-logo-wrap .logo,
.nav-logo-wrap .logo.small-height,
.main-nav .nav-logo-wrap .logo,
.main-nav.small-height .nav-logo-wrap .logo,
.main-nav.stick-fixed .nav-logo-wrap .logo,
.main-nav.stick-fixed.small-height .nav-logo-wrap .logo {
	height: 50px !important;
	max-height: 50px !important;
	line-height: 50px !important;
	transition: none !important;
}
.nav-logo-wrap .logo img,
.nav-logo-wrap .logo.small-height img,
.main-nav .nav-logo-wrap .logo img,
.main-nav.small-height .nav-logo-wrap .logo img,
.main-nav.stick-fixed .nav-logo-wrap .logo img,
.main-nav.stick-fixed.small-height .nav-logo-wrap .logo img {
	height: 50px !important;
	max-height: 50px !important;
	width: auto !important;
	transition: none !important;
}
.nav-logo-wrap {
	height: 90px !important;
	display: flex !important;
	align-items: center !important;
}
.nav-logo-wrap .logo img { transform: translateY(-3px); }
.nav-logo-wrap .logo { display: inline-block; width: 120px; }

/* Nav CTA button: vertically centered in the 90px bar */
.inner-nav ul li.mm-nav-cta {
	height: 90px !important;
	line-height: 90px !important;
	margin-left: 14px;
	display: inline-flex;
	align-items: center;
}
.inner-nav ul li.mm-nav-cta > a.btn-mm,
.inner-nav ul li.mm-nav-cta > button.btn-mm,
.main-nav.small-height .inner-nav ul li.mm-nav-cta > a.btn-mm,
.main-nav.small-height .inner-nav ul li.mm-nav-cta > button.btn-mm,
.main-nav.stick-fixed .inner-nav ul li.mm-nav-cta > a.btn-mm,
.main-nav.stick-fixed .inner-nav ul li.mm-nav-cta > button.btn-mm,
.main-nav.stick-fixed.small-height .inner-nav ul li.mm-nav-cta > a.btn-mm,
.main-nav.stick-fixed.small-height .inner-nav ul li.mm-nav-cta > button.btn-mm {
	display: inline-block !important;
	height: 50px !important;
	min-height: 50px !important;
	max-height: 50px !important;
	line-height: 50px !important;
	padding: 0 28px !important;
	font-size: 13px !important;
	letter-spacing: 0.15em;
	vertical-align: middle;
	box-sizing: border-box !important;
	transition: none !important;
	animation-duration: 7s, 11s;
}

/* Progressive nav squeeze between desktop and 768px hamburger breakpoint */

/* Below 1100px: lighter spacing + slightly smaller text */
@media (max-width: 1100px) {
	.full-wrapper { padding-left: 20px !important; padding-right: 20px !important; }
	.inner-nav ul li { margin-left: 18px !important; }
	.inner-nav ul li a { font-size: 12px !important; letter-spacing: 1.2px !important; }
	.inner-nav ul li.mm-nav-cta { margin-left: 18px !important; }
	.inner-nav ul li.mm-nav-cta > a.btn-mm,
	.inner-nav ul li.mm-nav-cta > button.btn-mm {
		padding: 0 20px !important;
		font-size: 11px !important;
		letter-spacing: 0.12em;
	}
}

/* Below 950px: tighter spacing, container padding shrinks */
@media (max-width: 950px) {
	.full-wrapper { padding-left: 14px !important; padding-right: 14px !important; }
	.inner-nav ul li { margin-left: 14px !important; }
	.inner-nav ul li a { font-size: 11px !important; letter-spacing: 1px !important; }
	.inner-nav ul li.mm-nav-cta { margin-left: 14px !important; }
	.inner-nav ul li.mm-nav-cta > a.btn-mm,
	.inner-nav ul li.mm-nav-cta > button.btn-mm {
		padding: 0 16px !important;
		font-size: 10px !important;
		letter-spacing: 0.1em;
	}
}

/* ============================================================
   Mobile menu (hamburger panel open state)
   Beats Nova theme's white .mobile-on styles in /css/style.css. */
.main-nav.mobile-on .desktop-nav { background: rgba(10, 10, 10, 0.97) !important; }
.main-nav.mobile-on .desktop-nav > ul,
.main-nav.mobile-on .desktop-nav ul,
.mobile-on .desktop-nav ul {
	background: rgba(10, 10, 10, 0.97) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.main-nav.mobile-on .desktop-nav ul li,
.mobile-on .desktop-nav ul li {
	background: transparent !important;
	float: none !important;
	margin: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.main-nav.mobile-on .desktop-nav ul li:last-child,
.mobile-on .desktop-nav ul li:last-child { border-bottom: 0 !important; }

.main-nav.mobile-on .desktop-nav ul li a,
.mobile-on .desktop-nav ul li a {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	line-height: 1.4 !important;
	padding: 18px 24px !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px !important;
	letter-spacing: 2px !important;
	text-align: left !important;
	border: 0 !important;
}
.main-nav.mobile-on .desktop-nav ul li a:hover,
.main-nav.mobile-on .desktop-nav ul li a.active,
.mobile-on .desktop-nav ul li a:hover,
.mobile-on .desktop-nav ul li a.active {
	color: var(--mm-accent, #00B4FF) !important;
	background: rgba(0, 180, 255, 0.08) !important;
}

/* Contact Sales in mobile panel: plain text link, same style as other items.
   Strip all .btn styling (background, border, animation) so it matches. */
.main-nav.mobile-on .inner-nav ul li.mm-nav-cta,
.mobile-on .inner-nav ul li.mm-nav-cta {
	height: auto !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: list-item !important;
	border-bottom: 0 !important;
}
.main-nav.mobile-on .inner-nav ul li.mm-nav-cta > a,
.main-nav.mobile-on .inner-nav ul li.mm-nav-cta > button,
.mobile-on .inner-nav ul li.mm-nav-cta > a,
.mobile-on .inner-nav ul li.mm-nav-cta > button {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	line-height: 1.4 !important;
	padding: 18px 24px !important;
	background: transparent !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px !important;
	letter-spacing: 2px !important;
	text-align: left !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	animation: none !important;
	isolation: auto !important;
}
.main-nav.mobile-on .inner-nav ul li.mm-nav-cta > a:hover,
.main-nav.mobile-on .inner-nav ul li.mm-nav-cta > button:hover,
.mobile-on .inner-nav ul li.mm-nav-cta > a:hover,
.mobile-on .inner-nav ul li.mm-nav-cta > button:hover {
	color: var(--mm-accent, #00B4FF) !important;
	background: rgba(0, 180, 255, 0.08) !important;
	border-color: transparent !important;
}
/* Kill the shine pseudo-element when in mobile panel */
.main-nav.mobile-on .inner-nav ul li.mm-nav-cta > a::after,
.main-nav.mobile-on .inner-nav ul li.mm-nav-cta > button::after,
.mobile-on .inner-nav ul li.mm-nav-cta > a::after,
.mobile-on .inner-nav ul li.mm-nav-cta > button::after {
	display: none !important;
	content: none !important;
}

/* Hamburger icon: no border box, no white hover background, brand-accent on hover */
.mobile-nav {
	color: rgba(255, 255, 255, 0.85) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
.mobile-nav:hover,
.mobile-nav.active,
.mobile-nav:focus {
	color: var(--mm-accent, #00B4FF) !important;
	background: transparent !important;
	border: 0 !important;
}
.main-nav.dark .mobile-nav,
.main-nav.dark .mobile-nav:hover,
.main-nav.dark .mobile-nav.active {
	background: transparent !important;
	border: 0 !important;
}