/**
 * DX Mobile Menu — side drawer replacement for Divi.
 *
 * The toggle button gets injected into Divi's existing #et_mobile_nav_menu
 * container by JS, replacing .mobile_menu_bar_toggle. That means our toggle
 * inherits Divi's responsive visibility, sticky behavior, and vertical
 * placement — we just need to style its appearance.
 *
 * The drawer + backdrop are position: fixed and rendered at body level.
 */

:root {
	--dx-width: 360px;
	--dx-bg: #ffffff;
	--dx-text: #1a1a1a;
	--dx-text-muted: #5a5a5a;
	--dx-divider: rgba(0, 0, 0, 0.08);
	--dx-row-hover: rgba(0, 0, 0, 0.035);
	--dx-submenu-bg: rgba(0, 0, 0, 0.02);
	--dx-accent: #0a3973;
	--dx-backdrop: rgba(0, 0, 0, 0.5);
	--dx-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
	--dx-anim: 280ms cubic-bezier(0.4, 0, 0.2, 1);
	--dx-row-h: 56px;
	--dx-row-pad-x: 22px;
	--dx-font-size: 16px;
}

@media (max-width: 980px) {

	/* ─── Suppress Divi's mobile menu dropdown ──────────────────
	   Keep #et_mobile_nav_menu visible — it's where our toggle lives now.
	   Only hide the inner artifacts that conflict with our drawer.
	*/
	#et_mobile_nav_menu .et_mobile_menu,
	#et_mobile_nav_menu .select_page {
		display: none !important;
	}

	/* Belt-and-suspenders: kill the slide-in container if a header style
	   change ever produces it. */
	.et_pb_menu .mobile_nav,
	.et_pb_fullwidth_menu .mobile_nav {
		display: none;
	}

	/* Vertically center our hamburger with the logo. Divi's .mobile_nav
	   container shrinks to its content by default; flex + align-items
	   centers our toggle within whatever vertical space Divi gives the
	   nav container. */
	#et_mobile_nav_menu,
	#et_mobile_nav_menu .mobile_nav {
		display: flex;
		align-items: center;
		height: 100%;
	}

	/* ─── Our toggle, slotted into Divi's .mobile_nav ──────────
	   No position:fixed. The parent (.mobile_nav) handles positioning.
	   To fine-tune vertical alignment, override `.dx-toggle { margin-top: ... }`
	   in Divi → Theme Options → Custom CSS.
	*/
	.dx-toggle {
		display: inline-block;
		width: 32px;
		height: 32px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		appearance: none;
		vertical-align: middle;
		position: relative;
	}

	.dx-toggle:focus-visible {
		outline: 2px solid var(--dx-accent);
		outline-offset: 2px;
		border-radius: 4px;
	}

	.dx-toggle-bars {
		position: relative;
		display: block;
		width: 24px;
		height: 18px;
		margin: 0 auto;
	}

	.dx-toggle-bars span {
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		background: var(--dx-accent);
		border-radius: 2px;
		transition: transform var(--dx-anim), opacity var(--dx-anim), top var(--dx-anim);
	}

	.dx-toggle-bars span:nth-child(1) { top: 0; }
	.dx-toggle-bars span:nth-child(2) { top: 8px; }
	.dx-toggle-bars span:nth-child(3) { top: 16px; }

	/* Animate to X when drawer is open */
	html.dx-open .dx-toggle-bars span:nth-child(1) {
		top: 8px;
		transform: rotate(45deg);
	}
	html.dx-open .dx-toggle-bars span:nth-child(2) {
		opacity: 0;
	}
	html.dx-open .dx-toggle-bars span:nth-child(3) {
		top: 8px;
		transform: rotate(-45deg);
	}

	/* ─── Backdrop ──────────────────────────────────────────────── */
	.dx-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: var(--dx-backdrop);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dx-anim), visibility var(--dx-anim);
	}

	html.dx-open .dx-backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* ─── Drawer ────────────────────────────────────────────────── */
	.dx-drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100001;
		width: min(85vw, var(--dx-width));
		max-width: 100vw;
		background: var(--dx-bg);
		box-shadow: var(--dx-shadow);
		transform: translateX(100%);
		transition: transform var(--dx-anim);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	html.dx-open .dx-drawer {
		transform: translateX(0);
	}

	.dx-drawer-inner {
		padding: 56px 0 24px;
	}

	/* ─── Close button inside the drawer ────────────────────────
	   Always visible while drawer is open — the header hamburger
	   gets covered by the drawer panel itself, so we need a close
	   affordance that lives on top of the drawer.
	   X is drawn with two rotated pseudo-element bars for crisp,
	   font-independent rendering at any size.
	*/
	.dx-close {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 48px;
		height: 48px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		appearance: none;
		z-index: 1;
	}

	.dx-close::before,
	.dx-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30px;
		height: 3px;
		background: #000;
		border-radius: 1px;
	}

	.dx-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.dx-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.dx-close:focus-visible {
		outline: 2px solid var(--dx-accent);
		outline-offset: -2px;
		border-radius: 4px;
	}

	/* Lock body scroll when drawer is open */
	html.dx-open,
	html.dx-open body {
		overflow: hidden;
	}

	/* ─── Menu lists ────────────────────────────────────────────── */
	.dx-drawer .dx-menu,
	.dx-drawer .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.dx-drawer .dx-menu > li {
		position: relative;
		border-top: 1px solid var(--dx-divider);
	}

	.dx-drawer .dx-menu > li:last-child {
		border-bottom: 1px solid var(--dx-divider);
	}

	/* If both primary + secondary are rendered, drop the seam between them */
	.dx-drawer .dx-menu + .dx-menu > li:first-child {
		border-top: 0;
	}

	.dx-drawer .dx-menu > li > a {
		display: block;
		min-height: var(--dx-row-h);
		padding: 18px var(--dx-row-pad-x);
		color: var(--dx-text);
		font-size: var(--dx-font-size);
		font-weight: 500;
		text-decoration: none;
		line-height: 1.4;
		transition: background var(--dx-anim);
	}

	.dx-drawer .dx-menu > li > a:hover,
	.dx-drawer .dx-menu > li > a:focus {
		background: var(--dx-row-hover);
	}

	.dx-drawer .dx-menu > li.menu-item-has-children > a {
		padding-right: 64px;
	}

	/* ─── Submenu toggle (+/−), injected by JS ──────────────────── */
	.dx-sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: var(--dx-row-h);
		padding: 0;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--dx-divider);
		color: var(--dx-text-muted);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		appearance: none;
	}

	.dx-sub-toggle:focus-visible {
		outline: 2px solid var(--dx-accent);
		outline-offset: -2px;
	}

	.dx-sub-toggle::before,
	.dx-sub-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		background: currentColor;
		border-radius: 2px;
		transition: transform var(--dx-anim);
	}

	.dx-sub-toggle::before {
		width: 14px;
		height: 2px;
		transform: translate(-50%, -50%);
	}

	.dx-sub-toggle::after {
		width: 2px;
		height: 14px;
		transform: translate(-50%, -50%);
	}

	.menu-item-has-children.dx-sub-open > .dx-sub-toggle::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	/* ─── Submenu (accordion) ───────────────────────────────────── */
	.dx-drawer .sub-menu {
		display: none;
		background: var(--dx-submenu-bg);
	}

	.menu-item-has-children.dx-sub-open > .sub-menu {
		display: block;
	}

	.dx-drawer .sub-menu li {
		border-top: 1px solid var(--dx-divider);
	}

	.dx-drawer .sub-menu a {
		display: block;
		padding: 14px var(--dx-row-pad-x) 14px 40px;
		color: var(--dx-text);
		font-size: 15px;
		text-decoration: none;
		line-height: 1.4;
		transition: background var(--dx-anim);
	}

	.dx-drawer .sub-menu a:hover,
	.dx-drawer .sub-menu a:focus {
		background: var(--dx-row-hover);
	}

	.dx-drawer .sub-menu .sub-menu a {
		padding-left: 58px;
	}

	.dx-drawer .current-menu-item > a,
	.dx-drawer .current_page_item > a {
		color: var(--dx-accent);
		font-weight: 600;
	}

	@media (prefers-reduced-motion: reduce) {
		.dx-drawer,
		.dx-backdrop,
		.dx-toggle-bars span,
		.dx-sub-toggle::before,
		.dx-sub-toggle::after,
		.dx-drawer .dx-menu > li > a,
		.dx-drawer .sub-menu a {
			transition: none;
		}
	}
}