/* Divi Mobile Menu Master — frontend styles.
   All values come from CSS custom properties set by the plugin. */

/* ------------------------------------------------------------------
   1. Animated hamburger icon
------------------------------------------------------------------ */
.dmmm-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	width: var(--dmmm-icon-w, 26px);
	cursor: pointer;
	vertical-align: middle;
}

.dmmm-burger span {
	display: block;
	height: var(--dmmm-icon-t, 3px);
	background: var(--dmmm-icon-color, #333);
	border-radius: var(--dmmm-icon-r, 2px);
	transition:
		transform var(--dmmm-icon-speed, 300ms) var(--dmmm-ease, ease),
		opacity var(--dmmm-icon-speed, 300ms) var(--dmmm-ease, ease),
		background var(--dmmm-icon-speed, 300ms) var(--dmmm-ease, ease);
}

.dmmm-burger span + span {
	margin-top: var(--dmmm-icon-gap, 6px);
}

/* Open state: Divi's dropdown sets .opened on .mobile_nav;
   our custom modes set .dmmm-open on the menu bar itself. */
.mobile_nav.opened .dmmm-burger span,
.dmmm-open .dmmm-burger span {
	background: var(--dmmm-icon-color-open, #333);
}

.mobile_nav.opened .dmmm-burger span:nth-child(1),
.dmmm-open .dmmm-burger span:nth-child(1) {
	transform: translateY(calc(var(--dmmm-icon-gap, 6px) + var(--dmmm-icon-t, 3px))) rotate(45deg);
}

.mobile_nav.opened .dmmm-burger span:nth-child(2),
.dmmm-open .dmmm-burger span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.mobile_nav.opened .dmmm-burger span:nth-child(3),
.dmmm-open .dmmm-burger span:nth-child(3) {
	transform: translateY(calc(-1 * (var(--dmmm-icon-gap, 6px) + var(--dmmm-icon-t, 3px)))) rotate(-45deg);
}

/* ------------------------------------------------------------------
   2. Restyled default dropdown (menu_style = dropdown)
------------------------------------------------------------------ */
body.dmmm-style-dropdown ul.et_mobile_menu {
	background: var(--dmmm-bg, #fff) !important;
	border-top: none !important;
	border-radius: var(--dmmm-radius, 0);
	overflow: hidden;
	padding: 4px 0 !important;
	-webkit-backdrop-filter: blur(var(--dmmm-blur, 0));
	backdrop-filter: blur(var(--dmmm-blur, 0));
	box-shadow: none;
}

body.dmmm-style-dropdown.dmmm-shadow ul.et_mobile_menu {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

body.dmmm-style-dropdown ul.et_mobile_menu li a {
	color: var(--dmmm-text, #333) !important;
	font-size: var(--dmmm-fs, 16px) !important;
	text-align: var(--dmmm-align, left);
	padding: var(--dmmm-pad-v, 12px) var(--dmmm-pad-h, 20px) !important;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, background 0.2s ease;
}

body.dmmm-style-dropdown.dmmm-separators ul.et_mobile_menu > li:not(:last-child) > a {
	border-bottom-color: var(--dmmm-sep, #eee);
}

body.dmmm-style-dropdown ul.et_mobile_menu li a:hover {
	color: var(--dmmm-hover, #2ea3f2) !important;
	opacity: 1 !important;
	background: transparent !important;
}

/* ------------------------------------------------------------------
   3. Shared panel (overlay + slide-in)
------------------------------------------------------------------ */
.dmmm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dmmm-dur, 350ms) var(--dmmm-ease, ease), visibility 0s linear var(--dmmm-dur, 350ms);
	z-index: 999990;
}

body.dmmm-panel-open .dmmm-backdrop {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.dmmm-panel {
	position: fixed;
	z-index: 999991;
	background: var(--dmmm-bg, #fff);
	-webkit-backdrop-filter: blur(var(--dmmm-blur, 0));
	backdrop-filter: blur(var(--dmmm-blur, 0));
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Close button (two bars forming an X). */
.dmmm-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 2;
}

.dmmm-close span {
	position: absolute;
	top: 50%;
	left: 20%;
	width: 60%;
	height: var(--dmmm-icon-t, 3px);
	background: var(--dmmm-icon-color-open, #333);
	border-radius: var(--dmmm-icon-r, 2px);
}

.dmmm-close span:nth-child(1) { transform: rotate(45deg); }
.dmmm-close span:nth-child(2) { transform: rotate(-45deg); }

/* Menu list inside the panel. */
.dmmm-menu {
	list-style: none !important;
	margin: 0;
	padding: 0;
	width: 100%;
}

.dmmm-menu li {
	list-style: none !important;
}

.dmmm-menu li a {
	display: block;
	color: var(--dmmm-text, #333);
	font-size: var(--dmmm-fs, 16px);
	text-align: var(--dmmm-align, left);
	text-decoration: none;
	padding: var(--dmmm-pad-v, 12px) var(--dmmm-pad-h, 20px);
	transition: color 0.2s ease;
}

.dmmm-menu li a:hover {
	color: var(--dmmm-hover, #2ea3f2);
}

body.dmmm-separators .dmmm-menu > li:not(:last-child) > a {
	border-bottom: 1px solid var(--dmmm-sep, #eee);
}

/* ------------------------------------------------------------------
   4. Fullscreen overlay (menu_style = overlay)
------------------------------------------------------------------ */
body.dmmm-style-overlay .dmmm-panel {
	inset: 0;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.04);
	transition:
		opacity var(--dmmm-dur, 350ms) var(--dmmm-ease, ease),
		transform var(--dmmm-dur, 350ms) var(--dmmm-ease, ease),
		visibility 0s linear var(--dmmm-dur, 350ms);
}

body.dmmm-style-overlay.dmmm-panel-open .dmmm-panel {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition-delay: 0s;
}

body.dmmm-style-overlay .dmmm-menu {
	max-width: 640px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 20px;
}

body.dmmm-style-overlay .dmmm-menu > li > a {
	text-align: var(--dmmm-align, center);
}

body.dmmm-style-overlay .dmmm-backdrop {
	display: none;
}

/* ------------------------------------------------------------------
   5. Slide-in panel (menu_style = slide)
------------------------------------------------------------------ */
body.dmmm-style-slide .dmmm-panel {
	top: 0;
	bottom: 0;
	width: min(var(--dmmm-panel-w, 320px), 88vw);
	padding-top: 70px;
	visibility: hidden;
	transition:
		transform var(--dmmm-dur, 350ms) var(--dmmm-ease, ease),
		visibility 0s linear var(--dmmm-dur, 350ms);
}

body.dmmm-style-slide.dmmm-shadow .dmmm-panel {
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
}

body.dmmm-style-slide.dmmm-side-right .dmmm-panel {
	right: 0;
	transform: translateX(102%);
}

body.dmmm-style-slide.dmmm-side-left .dmmm-panel {
	left: 0;
	transform: translateX(-102%);
}

body.dmmm-style-slide.dmmm-side-left .dmmm-close {
	right: 18px;
}

body.dmmm-style-slide.dmmm-panel-open .dmmm-panel {
	transform: translateX(0);
	visibility: visible;
	transition-delay: 0s;
}

/* ------------------------------------------------------------------
   6. Staggered link entrance (overlay + slide)
------------------------------------------------------------------ */
body.dmmm-stagger .dmmm-menu > li {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--dmmm-dur, 350ms) var(--dmmm-ease, ease),
		transform var(--dmmm-dur, 350ms) var(--dmmm-ease, ease);
}

body.dmmm-stagger.dmmm-panel-open .dmmm-menu > li {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(60ms + var(--dmmm-i, 0) * 45ms);
}

/* ------------------------------------------------------------------
   7. Accordion submenus
------------------------------------------------------------------ */
body.dmmm-accordion .dmmm-menu li.menu-item-has-children > a,
body.dmmm-accordion.dmmm-style-dropdown ul.et_mobile_menu li.menu-item-has-children > a {
	position: relative;
	padding-right: calc(var(--dmmm-pad-h, 20px) + 30px) !important;
	background: transparent !important;
}

.dmmm-sub-toggle {
	position: absolute;
	top: 0;
	right: 6px;
	bottom: 0;
	width: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

.dmmm-sub-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--dmmm-text, #333);
	border-bottom: 2px solid var(--dmmm-text, #333);
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform 0.25s ease;
}

li.dmmm-sub-open > .dmmm-sub-toggle-wrap > .dmmm-sub-toggle::after,
li.dmmm-sub-open > a .dmmm-sub-toggle::after {
	transform: translate(-50%, -30%) rotate(225deg);
}

body.dmmm-accordion .dmmm-menu li.menu-item-has-children > ul.sub-menu,
body.dmmm-accordion.dmmm-style-dropdown ul.et_mobile_menu li.menu-item-has-children > ul.sub-menu {
	display: none !important;
	margin: 0 !important;
	padding-left: 14px !important;
	border-left: 2px solid var(--dmmm-sep, #eee);
}

body.dmmm-accordion .dmmm-menu li.dmmm-sub-open > ul.sub-menu,
body.dmmm-accordion.dmmm-style-dropdown ul.et_mobile_menu li.dmmm-sub-open > ul.sub-menu {
	display: block !important;
}

/* ------------------------------------------------------------------
   8. Utilities
------------------------------------------------------------------ */
body.dmmm-lock {
	overflow: hidden !important;
}

.dmmm-panel:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.dmmm-burger span,
	.dmmm-panel,
	.dmmm-backdrop,
	body.dmmm-stagger .dmmm-menu > li {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}