/* ==========================================================================
   Szynix Menu Variables
   ========================================================================== */
   :root {
	--szynix-menu-bg: #ffffff;
	--szynix-menu-text: #333333;
	--szynix-menu-accent: #0073aa;
	--szynix-menu-border: #e0e0e0;
	
	--szynix-mega-bg: #ffffff;
	--szynix-mega-text: #555555;
	--szynix-mega-shadow: 0 8px 30px rgba(0,0,0,0.08);
	--szynix-mega-radius: 8px;
	
	--szynix-transition: 0.3s ease;
	--szynix-mobile-bp: 992px;
}

/* ==========================================================================
   Desktop Layout ( > 992px )
   ========================================================================== */
@media screen and (min-width: 992px) {
	.szynix-menu-container {
		position: relative;
	}

	/* Reset List */
	ul.szynix-menu-primary,
	.szynix-menu-primary ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Reset Theme Injected Dropdown Arrows (including Astra Theme) */
	ul.szynix-menu-primary .menu-item-has-children > a::after,
	ul.szynix-menu-primary .menu-item-has-children > span::after,
	ul.szynix-menu-primary svg.dropdown-icon,
	ul.szynix-menu-primary svg.icon-arrow-down,
	ul.szynix-menu-primary .sub-arrow,
	ul.szynix-menu-primary .ast-icon,
	ul.szynix-menu-primary .dropdown-menu-toggle {
		display: none !important;
		content: none !important;
	}

	/* Top Level Items */
	ul.szynix-menu-primary {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: var(--szynix-menu-align, flex-start);
		gap: 20px;
	}

	ul.szynix-menu-primary > li {
		position: relative; /* Not static if we want full width container, but wait, requirements say "Full Width or container width". Default to full width of the closest relative container. */
	}

	ul.szynix-menu-primary > li.szynix-menu-item-has-mega-menu {
		/* For full width mega menu, the parent container (.szynix-menu-container) should be position: relative, and li should be position: static.
		   Let's assume static so it spans the nav wrapper. */
		position: static;
	}

	ul.szynix-menu-primary > li > a {
		display: flex;
		align-items: center;
		padding: 15px 0;
		color: var(--szynix-menu-text);
		text-decoration: none;
		font-weight: 500;
		transition: all var(--szynix-transition);
	}

	ul.szynix-menu-primary > li > a:hover {
		color: var(--szynix-menu-accent);
	}

	/* Mobile Toggle hidden on desktop */
	.szynix-mobile-toggle {
		display: none;
	}

	/* Mega Menu Wrapper */
	.szynix-mega-menu-wrapper {
		position: absolute;
		top: 100%;
		left: 0;
		width: max-content;
		min-width: 100%;
		max-width: 95vw;
		background: var(--szynix-mega-bg);
		box-shadow: var(--szynix-mega-shadow);
		border-radius: 0 0 var(--szynix-mega-radius) var(--szynix-mega-radius);
		padding: 30px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: all var(--szynix-transition);
		z-index: 9999;
		border-top: 2px solid var(--szynix-menu-accent);
	}

	/* Hover interaction */
	ul.szynix-menu-primary > li.szynix-menu-item-has-mega-menu:hover > .szynix-mega-menu-wrapper {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Mega Menu Columns */
	.szynix-mega-menu-columns {
		display: flex !important;
		flex-direction: row !important; /* Force side by side */
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 30px;
		width: 100%;
	}
	
	.szynix-mega-menu-column {
		flex: 1 !important;
		min-width: var(--szynix-col-min-width, 180px) !important;
		width: auto !important;
		max-width: var(--szynix-col-max-width, none) !important;
		display: block !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Level 2: Column Title */
	.szynix-column-title {
		display: block;
		font-weight: 700;
		font-size: var(--szynix-lvl2-font-size, 16px);
		font-family: var(--szynix-lvl2-font-family, inherit);
		color: var(--szynix-menu-accent);
		margin-bottom: 10px;
		padding: var(--szynix-lvl2-padding, 0 0 5px);
		border-bottom: 2px solid var(--szynix-mega-border);
		text-decoration: none;
		pointer-events: none; /* Make clicking it do nothing on desktop */
	}

	a.szynix-column-title:hover {
		color: var(--szynix-menu-accent);
	}

	/* Level 3: Links */
	.szynix-sub-menu-level-3 > li > a {
		display: block;
		padding: var(--szynix-lvl3-padding, 8px 0);
		color: var(--szynix-mega-text);
		text-decoration: none;
		transition: all var(--szynix-transition);
		font-size: var(--szynix-lvl3-font-size, 14px);
		font-family: var(--szynix-lvl3-font-family, inherit);
	}

	.szynix-sub-menu-level-3 > li > a:hover {
		color: var(--szynix-mega-hover, var(--szynix-menu-accent));
		padding-left: 5px;
	}
}

/* ==========================================================================
   Mobile Layout ( < 992px ) - Accordion
   ========================================================================== */
@media screen and (max-width: 991px) {
	/* Reset List */
	ul.szynix-menu-primary,
	.szynix-menu-primary ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Reset Theme Injected Dropdown Arrows for Mobile (including Astra Theme) */
	ul.szynix-menu-primary .menu-item-has-children > a::after,
	ul.szynix-menu-primary .menu-item-has-children > span::after,
	ul.szynix-menu-primary svg.dropdown-icon,
	ul.szynix-menu-primary svg.icon-arrow-down,
	ul.szynix-menu-primary .sub-arrow,
	ul.szynix-menu-primary .ast-icon,
	ul.szynix-menu-primary .dropdown-menu-toggle {
		display: none !important;
		content: none !important;
	}

	ul.szynix-menu-primary {
		display: flex;
		flex-direction: column;
		background: var(--szynix-menu-bg, var(--szynix-menu-bg, transparent)); /* Fallback added */
		border: 1px solid var(--szynix-menu-border);
		justify-content: flex-start;
	}

	/* Level 1 Items */
	ul.szynix-menu-primary > li {
		border-bottom: 1px solid var(--szynix-menu-border);
		position: relative;
	}

	ul.szynix-menu-primary > li:last-child {
		border-bottom: none;
	}

	ul.szynix-menu-primary > li > a {
		display: block;
		padding: var(--szynix-lvl1-padding, 15px 20px);
		color: var(--szynix-menu-text);
		font-weight: 500;
		text-decoration: none;
		transition: all var(--szynix-transition);
		font-family: var(--szynix-lvl1-font-family, inherit);
		font-size: var(--szynix-lvl1-font-size, inherit);
	}

	/* Toggle Button */
	.szynix-mobile-toggle {
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		background: transparent;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* For level 2, it's flow layout */
	.szynix-mega-menu-column {
		position: relative;
	}

	/* Toggle Icon (+) */
	.szynix-toggle-icon {
		position: relative;
		width: 14px;
		height: 2px;
		background: var(--szynix-menu-text);
		transition: all 0.3s ease;
	}

	.szynix-toggle-icon::after {
		content: '';
		position: absolute;
		top: -6px;
		left: 6px;
		width: 2px;
		height: 14px;
		background: var(--szynix-menu-text);
		transition: all 0.3s ease;
	}

	.szynix-mobile-toggle[aria-expanded="true"] .szynix-toggle-icon {
		background: var(--szynix-menu-accent);
	}

	.szynix-mobile-toggle[aria-expanded="true"] .szynix-toggle-icon::after {
		transform: rotate(90deg);
		background: var(--szynix-menu-accent);
	}

	/* Mega Menu Wrapper (Mobile) */
	.szynix-mega-menu-wrapper {
		display: none; /* JS will toggle this */
		padding: 0 20px 20px 20px;
		background: #f9f9f9;
	}

	.szynix-mega-menu-wrapper.is-open {
		display: block;
	}

	/* Mega Menu Columns Wrapper */
	.szynix-mega-menu-columns {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* Level 2 Title */
	.szynix-column-title {
		display: block;
		font-weight: 600;
		padding: 10px 0;
		color: var(--szynix-menu-text);
		text-decoration: none;
	}

	/* Level 3 List Wrapper */
	.szynix-sub-menu-level-3 {
		display: none; /* JS toggle */
		padding-left: 15px !important;
	}

	.szynix-sub-menu-level-3.is-open {
		display: block;
	}

	.szynix-sub-menu-level-3 > li > a {
		display: block;
		padding: 8px 0;
		color: var(--szynix-mega-text);
		text-decoration: none;
		font-size: 14px;
	}
}

/* Icon Alignment */
.szynix-menu-icon {
	margin-right: 8px;
	text-align: center;
	width: 1.2em;
}

/* Custom Image Icons */
img.szynix-menu-icon.szynix-custom-image {
	width: 20px;
	height: 20px;
	object-fit: contain;
	vertical-align: middle;
	display: inline-block;
}