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


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

#prdsm-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	transition:
	opacity var(
		--prdsm-animation-speed,
		300ms
	) ease,
	visibility var(
		--prdsm-animation-speed,
		300ms
	) ease;
	z-index: 99999;
}

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


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

/* ==========================================================================
   Slide Menu Container
========================================================================== */

#prdsm-slide-menu {
	position: fixed;
	top: 0;
	width: 300px;
	max-width: 90%;
	height: 100vh;

	background: #333;

	z-index: 99999;
	overflow-y: auto;

	transition:
	transform var(
		--prdsm-animation-speed,
		300ms
	) ease;
}

/* ==========================================================================
   Right Direction
   Menu slides from right side
========================================================================== */

#prdsm-slide-menu.prdsm-direction-right {
	right: 0;
	left: auto;

	transform: translate3d(100%, 0, 0);
}

/* ==========================================================================
   Active Menu State
========================================================================== */

#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
   ====================================================== */


#prdsm-hamburger {
    position: fixed;
    top: 20px;
	right: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    z-index: 100002;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    text-align: center;
}


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

#prdsm-hamburger span:last-child {
    margin-bottom: 0;
}

/* 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);
}

/* ==========================================================
   Hamburger Icon Styles
========================================================== */

/* ------------------------------------------
   Split Style
------------------------------------------ */

.prdsm-hamburger-style-split span:nth-child(2) {
	width: 60%;
	margin-left: auto;
}

/* ------------------------------------------
   Split Style Hover
------------------------------------------ */

.prdsm-hamburger-style-split:hover span {
	transform: scaleX(1.04);
}


/* ======================================================
   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 .prdsm-menu-list {
	padding-top: 100px;
	padding-left: 24px;
	padding-right: 24px;
	margin: 0;
}

#prdsm-slide-menu #menu-main-menu {
	margin: 0;
}


/* ======================================================
   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);
}



/* ==========================================================
   Hamburger Icon Styles
========================================================== */

/* Classic */
.prdsm-hamburger-style-classic span {
	border-radius: 2px;
}