/**
 * SnapLap mobile overlay navigation — mockup: black header bar, light gray sheet,
 * EXPLORE / ACCOUNT; viewport-fixed when detached (see js/snaplap-mobile-nav.js).
 */

@media screen and (max-width: 638px) {
	:root {
		--snap-mobile-nav-header-h: 56px;
		--snap-mobile-nav-sheet-bg: #e9e9eb;
		--snap-mobile-nav-sheet-bg-solid: #e9e9eb;
		/* Above WooCommerce (99998), prettyPhoto (10000), and driver filter UI */
		--snap-z-nav-backdrop: 9991000;
		--snap-z-nav-panel: 9991001;
		--snap-z-nav-topbar: 9991002;
		--snap-z-nav-close: 9991003;
	}

	/* Do not use visibility/pointer-events on body children — it breaks all page links if state desyncs. */

	/* Placeholder must not steal flex space (logo looked centered) */
	#snaplap-nav-placeholder.snaplap-nav-placeholder {
		display: block !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border: none !important;
		flex: 0 0 0 !important;
	}

	#snaplap a#triggernav-sec {
		display: none !important;
	}

	/* —— Mockup: black header strip (logo + close) while menu open —— */
	html.snaplap-mobile-nav-open #snaplap #top-nav {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: var(--snap-z-nav-topbar);
		background: #000000 !important;
		border-bottom: none !important;
		box-shadow: none !important;
		padding-top: env(safe-area-inset-top, 0px);
		min-height: calc(var(--snap-mobile-nav-header-h) + env(safe-area-inset-top, 0px));
	}

	/* Ad sits between logo row and burger in DOM — hide so bar is logo + close only */
	html.snaplap-mobile-nav-open #snaplap #header .headad {
		display: none !important;
	}

	html.snaplap-mobile-nav-open #snaplap #top-nav .navContainer {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	html.snaplap-mobile-nav-open #snaplap #header .header_top {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		min-height: var(--snap-mobile-nav-header-h);
		padding: 0.35rem max(0.75rem, env(safe-area-inset-right)) 0.35rem
			max(0.75rem, env(safe-area-inset-left));
		margin: 0;
		float: none;
		width: 100%;
		box-sizing: border-box;
	}

	/* Text wordmark SNAP | LAP (hide raster logo while drawer open) */
	html.snaplap-mobile-nav-open #snaplap #header a.logo img#logo {
		display: none !important;
	}

	html.snaplap-mobile-nav-open #snaplap #header a.logo {
		position: relative;
		display: inline-flex !important;
		align-items: center;
		flex: 0 1 auto;
		min-width: 0;
		font-family: var(--snap-font-sans, system-ui, sans-serif) !important;
		font-size: 1.0625rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.04em !important;
		line-height: 1.2 !important;
		color: #ffffff !important;
		text-decoration: none !important;
	}

	html.snaplap-mobile-nav-open #snaplap #header a.logo::before {
		content: "SNAP";
		color: #ffffff;
	}

	html.snaplap-mobile-nav-open #snaplap #header a.logo::after {
		content: "LAP";
		color: #ffffff;
		border-left: 3px solid var(--snap-color-accent, #c41e3a);
		padding-left: 0.45rem;
		margin-left: 0.45rem;
		line-height: 1;
	}

	/* Dim page behind menu */
	.snaplap-mobile-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: var(--snap-z-nav-backdrop);
		background: rgba(13, 13, 13, 0.55);
		-webkit-tap-highlight-color: transparent;
	}

	/* Detached = moved to body — full-viewport opaque sheet (no CSS var bleed-through) */
	#snaplap #navigation.stopnav.snaplap-mobile-nav--detached {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 100dvh !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		float: none !important;
		z-index: var(--snap-z-nav-panel);
		display: flex !important;
		flex-direction: column;
		box-sizing: border-box;
		padding: calc(var(--snap-mobile-nav-header-h) + env(safe-area-inset-top, 0px)) 0
			max(1rem, env(safe-area-inset-bottom));
		background-color: var(--snap-mobile-nav-sheet-bg-solid) !important;
		background-image: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		isolation: isolate;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
		transition: transform 0.22s ease, visibility 0.22s ease;
	}

	#snaplap #navigation.stopnav.snaplap-mobile-nav--detached::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--snap-mobile-nav-sheet-bg-solid);
		z-index: -1;
		pointer-events: none;
	}

	/* When still inside header (menu closed): keep off-screen transform rules */
	#snaplap #navigation.stopnav:not(.snaplap-mobile-nav--detached) {
		position: fixed;
		top: 56px;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: var(--snap-z-nav-panel);
		background-color: var(--snap-mobile-nav-sheet-bg-solid) !important;
		background-image: none !important;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 0.5rem 0 max(1rem, env(safe-area-inset-bottom));
		margin: 0;
		float: none;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		box-shadow: none;
		transition: transform 0.22s ease, visibility 0.22s ease;
	}

	#snaplap #navigation.hidenav:not(.shownav) {
		transform: translateX(-105%);
		visibility: hidden;
		pointer-events: none;
	}

	#snaplap #navigation.hidenav.shownav,
	#snaplap #navigation.shownav {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	/* Inner content rhythm (mockup: airy labels + list) */
	#snaplap #navigation #main-nav.custom-nav,
	#snaplap #navigation #main-nav.nav {
		width: 100%;
		float: none;
		display: block;
		padding: 0;
		margin: 0;
		flex: 0 0 auto;
	}

	#snaplap #navigation #main-nav::before {
		content: "EXPLORE";
		display: block;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		color: #8a8a8e;
		padding: 0.75rem 1.25rem 0.5rem;
		text-transform: uppercase;
	}

	#snaplap #navigation #main-nav > li {
		float: none;
		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		background: transparent !important;
	}

	#snaplap #navigation #main-nav > li > a {
		display: block;
		padding: 1rem 1.25rem;
		font-family: var(--snap-font-sans, system-ui, sans-serif) !important;
		font-size: 0.9375rem !important;
		font-weight: 600;
		line-height: 1.35 !important;
		color: var(--snap-color-text, #1a1a1a) !important;
		background: transparent !important;
		border: none !important;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	#snaplap #navigation #main-nav > li > a:hover,
	#snaplap #navigation #main-nav > li > a:focus {
		color: var(--snap-color-accent, #c41e3a) !important;
		background: rgba(0, 0, 0, 0.045) !important;
	}

	#snaplap #navigation #main-nav > li.current-menu-item > a,
	#snaplap #navigation #main-nav > li.current-menu-ancestor > a {
		border-left: 3px solid var(--snap-color-accent, #c41e3a);
		padding-left: calc(1.25rem - 3px);
		background: rgba(196, 30, 58, 0.06) !important;
		color: var(--snap-color-text, #1a1a1a) !important;
	}

	#snaplap #navigation .search_nav_box {
		float: none;
		width: 100%;
		padding: 0.75rem 1.25rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		box-sizing: border-box;
		flex: 0 0 auto;
	}

	#snaplap #navigation .search_nav_box a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.35rem 0;
		color: var(--snap-color-text-muted, #5c5c5c);
	}

	/* Account block — isolate stacking so nothing from page leaks over links */
	#snaplap #navigation ul.user-menu-drpdown {
		float: none;
		width: 100%;
		display: block;
		margin: 0;
		padding: 1.5rem 0 0;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		flex: 0 0 auto;
		position: relative;
		z-index: 1;
		isolation: isolate;
	}

	#snaplap #navigation ul.user-menu-drpdown::before {
		content: "ACCOUNT";
		display: block;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		color: #8a8a8e;
		padding: 0 1.25rem 0.5rem;
		text-transform: uppercase;
	}

	#snaplap #navigation ul.user-menu-drpdown > li.drpdown-menu-button {
		float: none;
		width: 100%;
		display: block;
		position: relative;
		z-index: 1;
	}

	#snaplap #navigation ul.user-menu-drpdown .drpdown-menu-button > a:first-of-type {
		display: none !important;
	}

	#snaplap #navigation .drpdown-nav-container {
		display: block !important;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: var(--snap-mobile-nav-sheet-bg-solid) !important;
		border: none !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		z-index: 1;
	}

	#snaplap #navigation .drpdown-nav-container .drpdown-arrow {
		display: none !important;
	}

	#snaplap #navigation ul.drpdown-nav {
		display: block !important;
		width: 100%;
		float: none;
		padding: 0;
		margin: 0;
		position: relative;
		z-index: 1;
	}

	#snaplap #navigation ul.drpdown-nav > li {
		float: none;
		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		background: transparent !important;
		position: relative;
		z-index: 1;
	}

	#snaplap #navigation ul.drpdown-nav > li > span {
		display: none;
	}

	#snaplap #navigation ul.drpdown-nav > li > a {
		display: block;
		padding: 1rem 1.25rem;
		font-family: var(--snap-font-sans, system-ui, sans-serif) !important;
		font-size: 0.9375rem !important;
		font-weight: 600;
		line-height: 1.35 !important;
		color: var(--snap-color-text, #1a1a1a) !important;
		background: transparent !important;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		position: relative;
		z-index: 2;
	}

	#snaplap #navigation ul.drpdown-nav > li > a:hover,
	#snaplap #navigation ul.drpdown-nav > li > a:focus {
		background: rgba(0, 0, 0, 0.045) !important;
		color: var(--snap-color-accent, #c41e3a) !important;
	}

	#snaplap #navigation ul.drpdown-nav > li > a[href*="logout"],
	#snaplap #navigation ul.drpdown-nav > li > a[href*="action=logout"] {
		color: #7a1022 !important;
		font-weight: 600 !important;
	}

	/* Mockup: person icon before Manage Profile */
	#snaplap #navigation ul.drpdown-nav > li > a[href*="your-profile"] {
		display: flex !important;
		align-items: center;
	}

	#snaplap #navigation ul.drpdown-nav > li > a[href*="your-profile"]::before {
		content: "";
		flex-shrink: 0;
		width: 1.35rem;
		height: 1.35rem;
		margin-right: 0.65rem;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")
			center / contain no-repeat;
		opacity: 0.92;
	}

	/* Kill absolute/fixed UI leaking from legacy dropdown styles inside the sheet */
	#snaplap #navigation .drpdown-nav-container * {
		max-width: 100%;
	}

	#snaplap #navigation select,
	#snaplap #navigation input:not([type="hidden"]) {
		position: relative !important;
		z-index: 2;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100%;
		margin: 0.25rem 0;
	}

	/* Close control */
	#snaplap a#triggernav.showtrig {
		position: fixed;
		top: max(0.5rem, env(safe-area-inset-top));
		right: max(0.75rem, env(safe-area-inset-right));
		z-index: var(--snap-z-nav-close);
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0 !important;
		line-height: 0 !important;
		color: var(--snap-color-text, #1a1a1a) !important;
		background: rgba(255, 255, 255, 0.96) !important;
		border: 1px solid var(--snap-color-border, #e0e0e0);
		border-radius: var(--snap-radius-sm, 4px);
		text-indent: -9999px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	#snaplap a#triggernav.showtrig::after {
		content: "";
		position: absolute;
		inset: 0;
		text-indent: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		line-height: 1;
		font-weight: 400;
		color: inherit;
	}

	#snaplap a#triggernav.showtrig.active::after {
		content: "\00d7";
		font-size: 1.75rem;
	}

	#snaplap a#triggernav.showtrig:not(.active)::after {
		content: "\2630";
		font-size: 1.1rem;
	}

	/* Mockup: white X on black — only while drawer open (burger when closed keeps card style below) */
	html.snaplap-mobile-nav-open #snaplap a#triggernav.showtrig {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		color: #ffffff !important;
	}

	html.snaplap-mobile-nav-open #snaplap a#triggernav.showtrig::after {
		color: #ffffff !important;
		font-weight: 300 !important;
	}

	html.snaplap-mobile-nav-open,
	body#snaplap.snaplap-mobile-nav-open,
	body.snaplap-mobile-nav-open {
		overflow: hidden !important;
		height: 100%;
		overscroll-behavior: none;
	}

	/*
	 * Critical: closed off-canvas nav is position:fixed with a huge z-index. If pointer-events:none
	 * fails to apply (missing .hidenav, load order), it blocks every link on the page. Force closed state.
	 */
	#snaplap #navigation.stopnav:not(.shownav) {
		pointer-events: none !important;
		z-index: 100 !important;
	}

	#snaplap #navigation.stopnav.shownav {
		pointer-events: auto !important;
		z-index: var(--snap-z-nav-panel) !important;
	}
}