/**
 * PowerX Vertical Menu & Dynamic Mega List
 *
 * TABLE OF CONTENTS:
 * -----------------------------------------------------------------------------
 * 1.0 - Container & Scope
 * 2.0 - Header / Title Wrap & Links
 * 3.0 - Navigation Grid & Responsive Columns
 * 4.0 - Menu Link Items & Typography
 * 5.0 - Bullet & Vector Icons
 * 6.0 - Interactive Hover Effects & Animations
 * 7.0 - Active Menu Items & Sub-Menus
 * =============================================================================
 *
 * @package PowerX_Core
 * @version 0.0.1
 */

/* =============================================================================
   1.0 - CONTAINER & SCOPE
   ============================================================================= */
.elementor-widget-px-vertical-menu,
.px-vmenu-container {
	display: block;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	position: relative;
	margin: 0;
	padding: 0;
}

/* =============================================================================
   2.0 - HEADER / TITLE WRAP & LINKS
   ============================================================================= */
.px-vmenu-container .px-vmenu-title-wrap {
	margin: 0 0 var(--px-vmenu-title-gap, 12px) 0;
	padding: 0;
}

.px-vmenu-container .px-vmenu-title-link,
.px-vmenu-container .px-vmenu-title-text {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: var(--px-vmenu-title-size, 16px);
	font-weight: var(--px-vmenu-title-weight, 700);
	color: var(--px-vmenu-title-color, var(--powerx-primary-color, #0088cc));
	text-decoration: none;
	line-height: 1.35;
	transition: color 0.25s ease;
}

.px-vmenu-container .px-vmenu-title-link:hover {
	color: var(--px-vmenu-title-hover, #005580);
}

/* =============================================================================
   3.0 - NAVIGATION GRID & RESPONSIVE COLUMNS
   ============================================================================= */
.px-vmenu-container .px-vmenu-nav {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.px-vmenu-container .px-vmenu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--px-vmenu-cols, 1), minmax(0, 1fr));
	gap: var(--px-vmenu-gap-y, 10px) var(--px-vmenu-gap-x, 20px);
	width: 100%;
}



.px-vmenu-container .px-vmenu-list li {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* =============================================================================
   3.5 - ITEM DIVIDERS
   ============================================================================= */
.px-vmenu-container.has-dividers .px-vmenu-list,
.px-vmenu-divider-yes .px-vmenu-list {
	row-gap: 0;
}

.px-vmenu-container.has-dividers .px-vmenu-list > li,
.px-vmenu-divider-yes .px-vmenu-list > li {
	padding-top: calc(var(--px-vmenu-divider-spacing, var(--px-vmenu-gap-y, 10px)) / 2);
	padding-bottom: calc(var(--px-vmenu-divider-spacing, var(--px-vmenu-gap-y, 10px)) / 2);
}

.px-vmenu-container.has-dividers .px-vmenu-list > li:first-child,
.px-vmenu-divider-yes .px-vmenu-list > li:first-child {
	padding-top: 0;
}

.px-vmenu-container.has-dividers .px-vmenu-list > li:last-child,
.px-vmenu-divider-yes .px-vmenu-list > li:last-child {
	padding-bottom: 0;
}

.px-vmenu-container.has-dividers .px-vmenu-list > li:not(:last-child),
.px-vmenu-divider-yes .px-vmenu-list > li:not(:last-child) {
	border-bottom: var(--px-vmenu-divider-weight, 1px) var(--px-vmenu-divider-style, solid) var(--px-vmenu-divider-color, var(--powerx-neutral-150, #eaeaef));
}

/* =============================================================================
   4.0 - MENU LINK ITEMS & TYPOGRAPHY
   ============================================================================= */
.px-vmenu-container .px-vmenu-list li a {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--px-vmenu-icon-gap, 8px);
	margin: 0;
	padding: 0;
	color: var(--px-vmenu-color, var(--powerx-neutral-800, #32324d));
	text-decoration: none;
	font-size: var(--px-vmenu-font-size, 14px);
	font-weight: var(--px-vmenu-font-weight, 400);
	line-height: 1.4;
	transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   5.0 - BULLET & VECTOR ICONS
   ============================================================================= */
.px-vmenu-container .px-vmenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--px-vmenu-icon-size, 12px);
	height: var(--px-vmenu-icon-size, 12px);
	margin: 0;
	padding: 0;
	line-height: 1;
	color: var(--px-vmenu-icon-color, currentColor);
	transition: color 0.25s ease;
}

.px-vmenu-container .px-vmenu-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
	padding: 0;
	flex-shrink: 0;
	fill: currentColor;
	stroke: currentColor;
}

.px-vmenu-container .px-vmenu-text {
	margin: 0;
	padding: 0;
	transition: color 0.25s ease;
}

/* =============================================================================
   6.0 - INTERACTIVE HOVER EFFECTS & ANIMATIONS
   ============================================================================= */
.px-vmenu-container .px-vmenu-list li a:hover {
	color: var(--px-vmenu-hover, var(--powerx-primary-500, #4945ff));
}

.px-vmenu-container .px-vmenu-list li a:hover .px-vmenu-icon,
.px-vmenu-container .px-vmenu-list li.current-menu-item > a:hover .px-vmenu-icon,
.px-vmenu-container .px-vmenu-list li.current-menu-parent > a:hover .px-vmenu-icon {
	color: var(--px-vmenu-icon-hover, var(--px-vmenu-hover, currentColor));
}

.px-vmenu-container.px-anim-slide .px-vmenu-list li a:hover {
	transform: translateX(5px);
}

.px-vmenu-container.px-anim-glow .px-vmenu-list li a:hover {
	text-shadow: 0 0 10px rgba(73, 69, 255, 0.25);
}

/* =============================================================================
   7.0 - ACTIVE MENU ITEMS & SUB-MENUS
   ============================================================================= */
.px-vmenu-container .px-vmenu-list li.current-menu-item > a,
.px-vmenu-container .px-vmenu-list li.current_page_item > a,
.px-vmenu-container .px-vmenu-list li.current-menu-parent > a,
.px-vmenu-container .px-vmenu-list li.current-menu-ancestor > a,
.px-vmenu-container .px-vmenu-list li.current_page_parent > a,
.px-vmenu-container .px-vmenu-list li.current_page_ancestor > a {
	color: var(--px-vmenu-current-color, var(--powerx-primary-500, #4945ff));
	font-weight: var(--px-vmenu-current-weight, var(--px-vmenu-font-weight, 500));
}

.px-vmenu-container .px-vmenu-list li.current-menu-item > a .px-vmenu-text,
.px-vmenu-container .px-vmenu-list li.current_page_item > a .px-vmenu-text,
.px-vmenu-container .px-vmenu-list li.current-menu-parent > a .px-vmenu-text,
.px-vmenu-container .px-vmenu-list li.current-menu-ancestor > a .px-vmenu-text,
.px-vmenu-container .px-vmenu-list li.current_page_parent > a .px-vmenu-text,
.px-vmenu-container .px-vmenu-list li.current_page_ancestor > a .px-vmenu-text {
	color: inherit;
}

.px-vmenu-container .px-vmenu-list li.current-menu-item > a .px-vmenu-icon,
.px-vmenu-container .px-vmenu-list li.current_page_item > a .px-vmenu-icon,
.px-vmenu-container .px-vmenu-list li.current-menu-parent > a .px-vmenu-icon,
.px-vmenu-container .px-vmenu-list li.current-menu-ancestor > a .px-vmenu-icon,
.px-vmenu-container .px-vmenu-list li.current_page_parent > a .px-vmenu-icon,
.px-vmenu-container .px-vmenu-list li.current_page_ancestor > a .px-vmenu-icon {
	color: var(--px-vmenu-current-icon, var(--px-vmenu-icon-color, currentColor));
}

/* Sub-menus & Nested Tree Hierarchy (Reusing Universal Primitives) */
.px-vmenu-container .px-vmenu-list .sub-menu {
	list-style: none;
	margin: 6px 0 6px var(--px-menu-tree-indent, 16px);
	padding-left: 10px;
	border-left: var(--px-menu-tree-line-width, 1px) solid var(--px-menu-tree-line-color, var(--powerx-neutral-200, #e2e8f0));
	display: flex;
	flex-direction: column;
	gap: var(--px-vmenu-submenu-gap, 6px);
}

.px-vmenu-container .px-vmenu-list .sub-menu li a {
	font-size: 14px;
	opacity: 0.88;
}