/* ======================================================
   PIXELROME – Slide-In Mobile Menu for Divi
   ====================================================== */


/* ======================================================
   1. Overlay
   ====================================================== */

#prdsm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 100000;
}

#prdsm-overlay.active {
	opacity: 1;
	visibility: visible;
}


/* ======================================================
   2. Slide Panel
   ====================================================== */

#prdsm-slide-menu {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	max-width: 80%;
	overflow-y: auto;

	padding: var(--prdsm-inner-padding, 30px);

	transform: translate3d(100%, 0, 0);
	transition: transform 0.75s cubic-bezier(.25, 1, .5, 1);
	will-change: transform;

	z-index: 100001;
}

#prdsm-slide-menu.active {
	transform: translate3d(0, 0, 0);
}


/* ======================================================
   3. Lock Body Scroll
   ====================================================== */

html.prdsm-lock,
body.prdsm-lock {
	overflow: hidden !important;
	height: 100%;
}


/* ======================================================
   4. Hamburger Button
   ====================================================== */

/* Hide Divi default mobile hamburger */
.mobile_menu_bar {
	visibility: hidden !important;
	pointer-events: none !important;
}

#prdsm-hamburger {
	position: fixed;
	top: 20px;
	right: 20px;

	width: 45px;
	height: 18px;

	background: none;
	border: none;
	cursor: pointer;

	display: none;
	z-index: 100002; /* Above slide panel */
}

/* Hamburger bars */
#prdsm-hamburger span {
	display: block;
	height: 3px;
	margin-bottom: 7px;
	transition: transform 0.6s cubic-bezier(.25, 1, .5, 1),
				opacity 0.3s ease;
}

/* Active (X) state */
#prdsm-hamburger.active span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

#prdsm-hamburger.active span:nth-child(2) {
	opacity: 0;
}

#prdsm-hamburger.active span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}


/* ======================================================
   5. Main Menu Typography
   ====================================================== */

#prdsm-slide-menu .prdsm-menu-list a {
	display: block;
	text-decoration: none;

	font-size: var(--prdsm-font-size, 16px);
	font-weight: var(--prdsm-font-weight, 400);
	color: var(--prdsm-text-color, #000);
}

#prdsm-slide-menu .prdsm-menu-list li {
	margin-bottom: var(--prdsm-item-spacing, 12px);
}

#prdsm-slide-menu #menu-main-menu {
	margin-top: 40px;
}


/* ======================================================
   6. Submenu Styling
   ====================================================== */

#prdsm-slide-menu .sub-menu {
	width: 100%;
	padding-left: 15px;

	max-height: 0;
	overflow: hidden;

	transition: max-height 0.35s cubic-bezier(.4, 0, .2, 1);
}

#prdsm-slide-menu .sub-menu a {
	font-size: calc(var(--prdsm-font-size, 16px) - 2px);
}

/* Minor spacing adjustments */
#prdsm-slide-menu ul#menu-main-menu .sub-menu li {
	margin-bottom: 4px;
}

ul.sub-menu li:first-child {
	padding-top: 10px;
}

ul.sub-menu.active li:last-child {
	margin-bottom: 0 !important;
}


/* ======================================================
   7. Dropdown Toggle Layout
   ====================================================== */

.prdsm-parent-row {
	display: flex;
	align-items: center;
}

.prdsm-parent-row a {
	flex: 1;
}

.prdsm-sub-toggle {
	margin-left: 10px;
	background: none;
	border: none;
	cursor: pointer;

	font-size: 18px;
	line-height: 1;
	padding: 0;

	color: var(--prdsm-text-color, #000);

	transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.prdsm-sub-toggle.active {
	transform: rotate(45deg);
}


/* ======================================================
   8. Responsive Behavior
   ====================================================== */

@media (max-width: 980px) {

	#prdsm-hamburger {
		display: block;
	}

	/* Hide Divi default hamburger (again for safety) */
	.mobile_menu_bar {
		visibility: hidden !important;
		pointer-events: none !important;
	}

}