/* ==========================================================================
   tpl_webportaly - DJ Mega Menu Styling
   Overrides for DJ Mega Menu to match template design
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Main Navigation Bar
   -------------------------------------------------------------------------- */
.wp-megamenu .dj-megamenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.wp-megamenu .dj-megamenu > li.dj-up {
	position: relative;
}

.wp-megamenu .dj-megamenu > li.dj-up > a,
.wp-megamenu .dj-megamenu > li.dj-up > span {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--transition-fast), background var(--transition-fast);
	border-radius: var(--radius-md);
}

.wp-megamenu .dj-megamenu > li.dj-up > a:hover,
.wp-megamenu .dj-megamenu > li.dj-up:hover > a,
.wp-megamenu .dj-megamenu > li.dj-up.active > a,
.wp-megamenu .dj-megamenu > li.dj-up.current > a {
	color: var(--color-primary);
	background: var(--color-primary-light);
	text-decoration: none;
}

/* Parent indicator arrow */
.wp-megamenu .dj-megamenu > li.dj-up.parent > a::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	margin-left: 0.25rem;
}

/* --------------------------------------------------------------------------
   2. Dropdown / Submenu
   -------------------------------------------------------------------------- */
.wp-megamenu .dj-subwrap {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--z-dropdown);
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.wp-megamenu .dj-megamenu > li.dj-up:hover > .dj-subwrap,
.wp-megamenu .dj-megamenu > li.dj-up:focus-within > .dj-subwrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wp-megamenu .dj-subwrap.open-right {
	left: 0;
	right: auto;
}

.wp-megamenu .dj-subwrap.open-left {
	left: auto;
	right: 0;
}

/* Full width submenu */
.wp-megamenu .dj-megamenu > li.fullsub > .dj-subwrap {
	left: 0;
	right: 0;
}

.wp-megamenu .dj-subwrap-in {
	display: flex;
	gap: var(--space-sm);
}

.wp-megamenu .dj-subcol {
	flex: 1;
	min-width: 0;
}

/* Submenu items */
.wp-megamenu .dj-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-megamenu .dj-submenu > li > a {
	display: block;
	padding: 0.375rem 0.75rem;
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--font-size-sm);
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background var(--transition-fast);
}

.wp-megamenu .dj-submenu > li > a:hover,
.wp-megamenu .dj-submenu > li.active > a,
.wp-megamenu .dj-submenu > li.current > a {
	color: var(--color-primary);
	background: var(--color-primary-light);
	text-decoration: none;
}

/* Submenu heading / subtitle */
.wp-megamenu .dj-submenu > li > a .dj-subtitle {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	margin-top: 0.125rem;
}

/* Separator */
.wp-megamenu .dj-megamenu > li.separator > span {
	height: 1.5rem;
	width: 1px;
	background: var(--color-border);
	margin: 0 0.25rem;
}

/* --------------------------------------------------------------------------
   3. Subtree (nested submenu)
   -------------------------------------------------------------------------- */
.wp-megamenu .dj-subtree {
	list-style: none;
	margin: 0;
	padding-left: var(--space-md);
}

.wp-megamenu .dj-subtree > li > a {
	display: block;
	padding: 0.25rem 0.75rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: var(--font-size-sm);
}

.wp-megamenu .dj-subtree > li > a:hover {
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   4. Module inside menu
   -------------------------------------------------------------------------- */
.wp-megamenu .modules-wrap {
	padding: var(--space-sm);
}

/* --------------------------------------------------------------------------
   5. Sticky menu
   -------------------------------------------------------------------------- */
.wp-megamenu .dj-megamenu-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-sticky);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
	padding: 0 var(--container-padding);
}

/* --------------------------------------------------------------------------
   6. Mobile-specific: hide desktop menu on small screens
   The offcanvas menu in template handles mobile navigation.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.wp-megamenu .dj-megamenu,
	.wp-megamenu .dj-megamenu-sticky {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   7. DJ Mega Menu icon fix
   -------------------------------------------------------------------------- */
.wp-megamenu .dj-megamenu .dj-icon {
	display: inline-flex;
	margin-right: 0.25rem;
}

.wp-megamenu .dj-megamenu .dj-icon img {
	width: 1.25em;
	height: 1.25em;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   8. Category separator in submenu
   -------------------------------------------------------------------------- */
.wp-megamenu .djsubrow_separator {
	width: 100%;
	height: 1px;
	background: var(--color-border-light);
	margin: var(--space-sm) 0;
}

/* --------------------------------------------------------------------------
   9. Logo inside menu
   -------------------------------------------------------------------------- */
.wp-megamenu .dj-megamenu > li.logo > a {
	padding: 0.25rem 0.5rem;
}

.wp-megamenu .dj-megamenu > li.logo img {
	height: 2rem;
	width: auto;
}

.wp-megamenu .dj-stickylogo img {
	height: 2rem;
	width: auto;
}