/**
 * Siyora Mega Menu Frontend Stylesheet
 *
 * @package SiyoraMegaMenu
 */

/* ==========================================================================
   1. Desktop Layout (Globally scoped but applied specifically via classes)
   ========================================================================== */

/* Allow absolute positioning relative to navigation bar container */
.site-navigation {
	position: relative !important;
}

.site-navigation > .container {
	position: relative !important;
}

/* Disable bootstrap relative anchors for parent menu elements */
.navbar-nav {
	position: static !important;
}

.siyora-mega-menu-parent {
	position: relative !important;
}

/* Decorative disclosure arrow on whichever menu item is configured. */
.siyora-mega-menu-arrow {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.siyora-mega-menu-parent:hover .siyora-mega-menu-arrow,
.siyora-mega-menu-parent:focus-within .siyora-mega-menu-arrow,
.siyora-mega-menu-parent.siyora-mm-open .siyora-mega-menu-arrow {
	transform: translateY(2px) rotate(-135deg);
}

/* Hover dropdown container (width 250px, aligned left) */
.siyora-mega-menu-dropdown-wrapper {
	position: absolute !important;
	left: 0 !important;
	top: 100% !important;
	width: 250px !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
	border-radius: 8px !important;
	z-index: 9999 !important;
	margin-top: 0 !important;
	padding: 10px 0 !important;
	box-sizing: border-box !important;
	
	/* Hidden state for transition */
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(10px) !important;
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
				visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
				transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Show Menu on Hover/Focus */
.siyora-mega-menu-parent:hover .siyora-mega-menu-dropdown-wrapper,
.siyora-mega-menu-parent:focus-within .siyora-mega-menu-dropdown-wrapper,
.siyora-mega-menu-dropdown-wrapper.active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

/* Desktop panel styles */
.siyora-mm-desktop-panel {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Categories List (Full width inside dropdown) */
.siyora-mm-categories-list {
	width: 100% !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

.siyora-mm-category-item {
	position: relative !important; /* Relative context for the popup sub-menu! */
	margin: 0 !important;
	padding: 0 !important;
}

/* Category Link Items */
.siyora-mm-cat-link-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 20px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #333333 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	text-decoration: none !important;
	border-left: 3px solid transparent !important;
	transition: all 0.2s ease !important;
}

.siyora-mm-cat-link-item:hover,
.siyora-mm-category-item:hover > .siyora-mm-cat-link-item {
	color: #5c2f8c !important;
	background: rgba(92, 47, 140, 0.04) !important;
	border-left-color: #5c2f8c !important;
}

.siyora-mm-cat-icon {
	font-size: 16px !important;
	line-height: 1 !important;
	opacity: 0.5 !important;
	transition: transform 0.2s ease !important;
}

.siyora-mm-category-item:hover .siyora-mm-cat-icon {
	transform: translateX(3px) !important;
	opacity: 1 !important;
}

/* Ranges Panel (Side Sub-submenu Popout) */
.siyora-mm-ranges-panel {
	position: absolute !important;
	left: 100% !important;
	top: -10px !important;
	width: 250px !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
	border-radius: 8px !important;
	padding: 10px 0 !important;
	box-sizing: border-box !important;
	margin-left: 5px !important;
	z-index: 10000 !important;
	
	/* Hidden states by default */
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateX(10px) !important;
	transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
				visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1),
				transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Ranges List */
.siyora-mm-range-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

.siyora-mm-range-item {
	margin: 0 !important;
	padding: 0 !important;
}

.siyora-mm-range-link {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 10px 20px !important;
	font-size: 13px !important;
	color: #555555 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-left: 3px solid transparent !important;
	transition: all 0.2s ease !important;
}

.siyora-mm-range-link:hover {
	background: rgba(92, 47, 140, 0.04) !important;
	color: #5c2f8c !important;
	border-left-color: #5c2f8c !important;
}

/* --- CSS Hover Logic --- */

/* Show sub-submenu ranges panel on category hover */
.siyora-mm-category-item:hover .siyora-mm-ranges-panel {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(0) !important;
}

/* Keyboard focus support */
.siyora-mm-category-item:focus-within .siyora-mm-ranges-panel {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(0) !important;
}
.siyora-mm-category-item:focus-within > .siyora-mm-cat-link-item {
	color: #5c2f8c !important;
	background: rgba(92, 47, 140, 0.04) !important;
	border-left-color: #5c2f8c !important;
}


/* ==========================================================================
   2. Responsive Visibility Media Queries
   ========================================================================== */

/* Desktop viewports */
@media (min-width: 992px) {
	.siyora-mm-mobile-panel {
		display: none !important;
	}
}

/* Mobile viewports */
@media (max-width: 991.98px) {
	/* Hide Desktop Panel */
	.siyora-mm-desktop-panel {
		display: none !important;
	}

	.siyora-mega-menu-dropdown-wrapper {
		width: 100% !important;
		display: none !important;
		position: static !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: none !important;
		box-shadow: none !important;
		border: none !important;
		background: transparent !important;
	}

	.siyora-mega-menu-parent.siyora-mm-open > .siyora-mega-menu-dropdown-wrapper {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.siyora-mm-mobile-panel {
		display: block !important;
		padding: 10px 0 !important;
	}

	.siyora-mm-mobile-accordion {
		border-top: 1px solid #eee !important;
		margin-top: 5px !important;
	}

	.siyora-mm-mobile-item {
		border-bottom: 1px solid #f7f7f7 !important;
	}

	/* Header with link and chevron trigger */
	.siyora-mm-mobile-header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	.siyora-mm-mobile-cat-link {
		flex-grow: 1 !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		color: #222222 !important;
		text-decoration: none !important;
		padding: 12px 10px !important;
		display: block !important;
		transition: color 0.25s !important;
	}

	.siyora-mm-mobile-cat-link:hover,
	.siyora-mm-mobile-cat-link:active {
		color: #5c2f8c !important;
	}

	/* Custom Accordion Chevron */
	.siyora-mm-mobile-trigger {
		background: none !important;
		border: none !important;
		padding: 10px 20px !important;
		color: #888888 !important;
		cursor: pointer !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		transition: all 0.25s !important;
	}

	.siyora-mm-mobile-trigger:hover,
	.siyora-mm-mobile-trigger:focus {
		color: #5c2f8c !important;
		outline: none !important;
	}

	.siyora-mm-icon-chevron {
		display: inline-block !important;
		width: 8px !important;
		height: 8px !important;
		border-right: 2.2px solid currentColor !important;
		border-bottom: 2.2px solid currentColor !important;
		transform: rotate(45deg) !important;
		transition: transform 0.3s ease !important;
		transform-origin: center center !important;
		margin-top: -3px !important;
	}

	.siyora-mm-mobile-trigger[aria-expanded="true"] .siyora-mm-icon-chevron {
		transform: rotate(-135deg) !important;
		margin-top: 3px !important;
	}

	/* Accordion Collapsible Content */
	.siyora-mm-mobile-body {
		padding: 5px 15px 15px 25px !important;
		background: #fdfdfd !important;
	}

	.siyora-mm-mobile-range-list {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.siyora-mm-mobile-range-list li {
		margin-bottom: 8px !important;
		padding: 0 !important;
	}

	.siyora-mm-mobile-range-link {
		display: block !important;
		font-size: 13px !important;
		color: #555555 !important;
		text-decoration: none !important;
		padding: 6px 12px !important;
		border-left: 2px solid #e5e5e5 !important;
		transition: all 0.25s ease !important;
	}

	.siyora-mm-mobile-range-link:hover,
	.siyora-mm-mobile-range-link:active {
		color: #5c2f8c !important;
		border-left-color: #5c2f8c !important;
		background: rgba(92, 47, 140, 0.03) !important;
	}
}

/* Accessibility / Keyboard Focus States */
.siyora-mega-menu-parent > a:focus + .siyora-mega-menu-dropdown-wrapper,
.siyora-mega-menu-dropdown-wrapper:focus-within {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}
.siyora-mm-range-link:focus,
.siyora-mm-mobile-range-link:focus {
	outline: 2px solid #5c2f8c !important;
	outline-offset: 2px !important;
}