/**
 * ZoomDJ Nav Menu — structural stylesheet.
 *
 * Deliberately contains NO colors, fonts or spacing values that a user can
 * already control from the Elementor panel — those are generated by
 * Elementor itself (see class-widget-nav-menu.php `register_style_*`
 * methods) and scoped with {{WRAPPER}}. This file only holds the
 * structural CSS (layout, positioning, transitions) that every instance
 * of the widget needs regardless of how it's styled, so it can be safely
 * cached/minified independently of any per-widget settings.
 */

.zoomdj-nav,
.zoomdj-nav *,
.zoomdj-nav *::before,
.zoomdj-nav *::after {
	box-sizing: border-box;
}

/* Fixes a real mobile bug: the drawer below is `position: fixed` with a
   `transform` even while closed (moved off-screen, not removed from the
   page). Several mobile browsers still count a fixed+transformed
   element's pre-transform box toward the page's scrollable width, so a
   fast horizontal swipe — especially a flicked one that triggers
   momentum/rubber-band scrolling — can scroll the whole page sideways
   and reveal the "hidden" drawer, splitting the visible page in two.
   overflow-x avoids there being anywhere to scroll to; overscroll-behavior-x
   additionally disables the browser's native horizontal swipe/bounce
   gesture that can otherwise still trigger this on a fast swipe. This
   only loads on pages that actually use this widget. */
html,
body {
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

.zoomdj-nav {
	position: relative;
	width: 100%;
	transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s,
		-webkit-backdrop-filter 0.35s, backdrop-filter 0.35s;
}

.zoomdj-nav__inner {
	display: flex;
	align-items: center;
	width: 100%;
}

/* ---------- Brand / Logo ---------- */
.zoomdj-nav__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}
.zoomdj-nav__brand img {
	display: block;
}
.zoomdj-nav__brand-text {
	display: block;
	line-height: 1;
}

/* ---------- Menu ---------- */
.zoomdj-nav__menu-wrap {
	display: flex;
	align-items: center;
	margin-inline-start: auto;
}
.zoomdj-nav__menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.zoomdj-nav__item {
	position: relative;
}
.zoomdj-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s, background-color 0.25s;
}
.zoomdj-nav__arrow {
	display: inline-flex;
	transition: transform 0.25s;
}
.zoomdj-nav__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}
.zoomdj-nav__item--has-children:hover > .zoomdj-nav__link .zoomdj-nav__arrow,
.zoomdj-nav__item--has-children:focus-within > .zoomdj-nav__link .zoomdj-nav__arrow,
.zoomdj-nav__item--has-children.zoomdj-nav__item--open > .zoomdj-nav__link .zoomdj-nav__arrow,
.zoomdj-nav__drawer-item--has-children.zoomdj-nav__drawer-item--open
	> .zoomdj-nav__drawer-link
	.zoomdj-nav__arrow {
	transform: rotate(180deg);
}

/* Desktop dropdown (hover + keyboard focus, with a JS "open" class for touch) */
.zoomdj-nav__menu-wrap .zoomdj-nav__submenu-wrap {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	padding-top: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
	z-index: 20;
}
.zoomdj-nav__menu-wrap .zoomdj-nav__item--has-children:hover > .zoomdj-nav__submenu-wrap,
.zoomdj-nav__menu-wrap .zoomdj-nav__item--has-children:focus-within > .zoomdj-nav__submenu-wrap,
.zoomdj-nav__menu-wrap .zoomdj-nav__item--has-children.zoomdj-nav__item--open > .zoomdj-nav__submenu-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.zoomdj-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 8px;
	display: flex;
	flex-direction: column;
}
/* Nested (3rd level+) submenus inside a desktop dropdown sit inline, not floated again. */
.zoomdj-nav__submenu .zoomdj-nav__submenu-wrap {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	padding: 0 0 0 12px;
}
.zoomdj-nav__submenu .zoomdj-nav__submenu {
	box-shadow: none;
	background: transparent;
}
.zoomdj-nav__sublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 8px;
	transition: color 0.2s, background-color 0.2s;
}

/* ---------- Social icons ---------- */
.zoomdj-nav__social {
	display: flex;
	align-items: center;
}
.zoomdj-nav__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.zoomdj-nav__social-link svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- CTA button ---------- */
.zoomdj-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.25s, color 0.25s;
}

/* ---------- Burger toggle ---------- */
.zoomdj-nav__burger {
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
	/* Pushed to the far right of the header row on its own — this must
	   NOT depend on .zoomdj-nav__menu-wrap's margin (that element is
	   display:none on mobile, so its margin has no effect at all once
	   hidden; relying on a hidden sibling for this was the bug). */
	margin-inline-start: auto;
}
.zoomdj-nav--burger-left .zoomdj-nav__burger {
	order: -1;
	margin-inline-start: 0;
	margin-inline-end: auto;
}
.zoomdj-nav__burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	transition: transform 0.3s, opacity 0.3s, background-color 0.25s;
}
.zoomdj-nav--burger-lines .zoomdj-nav__burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.zoomdj-nav--burger-lines .zoomdj-nav__burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}
.zoomdj-nav--burger-lines .zoomdj-nav__burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Backdrop ---------- */
.zoomdj-nav__backdrop {
	/* display is toggled by JS (see nav-menu.js) — none while closed, so
	   a closed backdrop can never contribute anything to page layout;
	   set to block right before the open transition starts, and only
	   set back to none after the close transition actually finishes, so
	   the fade animation still plays in full either way. */
	display: none;
	position: fixed;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s, visibility 0.35s;
	z-index: 100090;
}
.zoomdj-nav__backdrop.zoomdj-nav__backdrop--open {
	opacity: 1;
	visibility: visible;
}

/* ---------- Mobile drawer ---------- */
.zoomdj-nav__drawer {
	/* display is toggled by JS the same way as the backdrop above. This
	   is the real, root-cause fix for two separate bugs a permanently-
	   rendered-but-transformed-off-screen drawer caused on mobile: a
	   fast horizontal swipe could scroll the page sideways into the
	   "hidden" drawer, and — separately — the drawer could still affect
	   the page's vertical scrollable height even while closed. A
	   display: none element is completely removed from layout, so
	   neither is possible any more, regardless of position/transform. */
	display: none;
	flex-direction: column;
	position: fixed;
	/* Anchored to both edges as the CSS baseline/fallback (also what's
	   used before JS finishes loading, and in browsers without the
	   Visual Viewport API). This is how `position: fixed` has always
	   natively filled the viewport, well before any vh-family unit
	   existed. The real, reliable fix lives in nav-menu.js though: it
	   explicitly measures window.visualViewport.height — a live value
	   built specifically to represent the real currently-visible mobile
	   viewport — and sets this exact height directly, since real-world
	   testing showed this pure-CSS approach alone isn't 100% consistent
	   across mobile browsers once a fixed element is also a flex
	   container whose child (the footer) depends on that height via
	   margin-top: auto. */
	top: 0;
	bottom: 0;
	z-index: 100100;
	transform: translateX(100%);
	transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
	/* No overflow here — the head and foot below are pinned in place
	   (flex-shrink: 0) and only .zoomdj-nav__drawer-links scrolls if the
	   menu is tall. Nesting two scrollable containers (this one and the
	   links list) is what produced a stray scrollbar even when nothing
	   actually needed to scroll. */
}
.zoomdj-nav:not(.zoomdj-nav--drawer-left) .zoomdj-nav__drawer {
	right: 0;
}
.zoomdj-nav--drawer-left .zoomdj-nav__drawer {
	left: 0;
	transform: translateX(-100%);
}
.zoomdj-nav__drawer.zoomdj-nav__drawer--open {
	transform: none;
}
.zoomdj-nav__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 16px 22px;
	flex-shrink: 0;
}
.zoomdj-nav__drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.zoomdj-nav__drawer-close:hover {
	transform: rotate(90deg);
}
.zoomdj-nav__drawer-close svg,
.zoomdj-nav__drawer-close i {
	width: 40%;
	height: 40%;
	display: block;
}
.zoomdj-nav__drawer-links {
	display: flex;
	flex-direction: column;
	padding: 10px 22px;
	overflow-y: auto;
	/* Stops a scroll gesture that reaches the top/bottom of this list from
	   "chaining" up to the page behind the drawer — this is what a swipe
	   down inside the drawer used to do once it ran out of room to scroll,
	   which combined badly with the old JS scroll-lock technique and could
	   leave the drawer visually jumping and briefly unresponsive to touch.
	   contain still allows this list's own bounce/rubber-band effect,
	   it just refuses to hand the gesture off any further. */
	overscroll-behavior-y: contain;
	/* Sized to its own content (not forced to fill all remaining drawer
	   height) — .zoomdj-nav__drawer-foot's margin-top: auto is what pushes
	   the footer to the bottom instead. A flex: 1 container here used to
	   get stretched far taller than the menu actually needs, and that
	   oversized-but-empty scroll area is what produced a visible
	   scrollbar/track even though there was nothing to scroll. min-height:
	   0 is required so this can still shrink and genuinely scroll if the
	   menu ever gets too tall for the screen. */
	flex: 0 1 auto;
	min-height: 0;
}
.zoomdj-nav__drawer-links .zoomdj-nav__menu {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.zoomdj-nav__drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	transition: color 0.2s;
}
.zoomdj-nav__drawer-links .zoomdj-nav__submenu-wrap {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	padding: 0 0 0 16px;
}
.zoomdj-nav__drawer-links .zoomdj-nav__submenu {
	box-shadow: none;
	background: transparent;
	padding: 0;
}
.zoomdj-nav__drawer-cta {
	display: flex;
	width: 100%;
	margin-top: 20px;
}

/* Wraps the email row + social icons row together at the bottom of the
   drawer, matching the reference design (email above social icons,
   both sharing one bordered footer block). */
.zoomdj-nav__drawer-foot {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: auto;
	padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}
.zoomdj-nav__drawer-contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	width: fit-content;
	transition: color 0.2s;
}
.zoomdj-nav__drawer-contact svg,
.zoomdj-nav__drawer-contact i {
	flex-shrink: 0;
	display: block;
}
.zoomdj-nav__drawer-social {
	display: flex;
	gap: 10px;
}

/* Locks background scroll while the drawer is open. Deliberately just
   overflow + overscroll-behavior — no JS `position: fixed` trick. That
   older technique resets/fights the page's own scroll position and is a
   documented cause of touch input becoming unresponsive on real iOS
   Safari when a scrollable area (the menu list) sits inside the locked
   region. overscroll-behavior: none is the modern, purpose-built
   replacement for the "prevent rubber-band scroll-through" half of that
   old trick, and unlike it, never touches scroll position at all — so
   there's nothing to jump when the drawer opens or closes.
   Targets BOTH html and body: which one is the page's actual "scrolling
   element" varies by browser, so locking only one of them can silently
   do nothing on the other — this is what let the page keep scrolling
   underneath the open drawer. */
html.zoomdj-nav-open,
body.zoomdj-nav-open {
	overflow: hidden;
	overscroll-behavior: none;
}

/* An `inert`-ed drawer (closed, set by JS) must never intercept clicks even
   mid-animation on browsers that don't yet support `inert` visually. */
.zoomdj-nav__drawer[inert] {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.zoomdj-nav__drawer,
	.zoomdj-nav__backdrop,
	.zoomdj-nav__burger span,
	.zoomdj-nav__submenu-wrap,
	.zoomdj-nav__cta,
	.zoomdj-nav__link,
	.zoomdj-nav__social-link,
	.zoomdj-nav__drawer-close {
		transition: none !important;
	}
}