/* ===== CSS VARIABLES FOR RE-SKINNING ===== */
:root {
	/* Color Palette - Easy to change for different themes */
	--nav-bg-color: rgba(245, 245, 247, 0.86);
	--nav-bg-solid: rgba(245, 245, 247, 1);
	--nav-primary-color: #131313;
	--nav-primary-dark: #131313;
	--nav-text-color: #1A1A1A;
	--nav-text-light: #FFFFFF;
	--nav-border-color: rgba(86, 65, 243, 0.2);
	--nav-hover-bg: rgba(221, 217, 253, 1);
	--nav-dropdown-bg: rgba(255, 255, 255, 0.86);
	--nav-mobile-bg: rgba(245, 245, 247, 0.72);
	
	/* Typography */
	--nav-font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
	--nav-font-family-secondary: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
	
	/* Spacing */
	--nav-container-width: 1360px;
	--nav-padding: 16px 20px;
	--nav-item-spacing: 14px;
	--nav-dropdown-radius: 18px;
	--nav-dropdown-spacing: 24px;
	
	/* Transitions */
	--nav-transition-speed: 300ms;
	--nav-transition-timing: ease;
}

/* ===== BASE & RESET ===== */
/** {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}*/

		/* ===== NAVIGATION STRUCTURE ===== */
		.navbar-wrapper {
			position: sticky;
			top: 0;
			background-color: var(--nav-bg-color);
			z-index: 1000;
			width: 100%;
			transition: transform 0.3s ease-in-out;
			backdrop-filter: blur(10px);
		}

		.navbar-container {
			width: 100%;
			background-color: var(--nav-bg-color);
			position: relative;
			z-index: 2;
		}

		.navbar-inner {
			width: 100%;
			max-width: var(--nav-container-width);
			margin: 0 auto;
			padding: var(--nav-padding);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		/* ===== LOGO ===== */
		.nav-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			flex-shrink: 0;
			margin-right: 63px;
		}

		.nav-logo svg {
			width: 44px;
			/*height: 24px;*/
		}

		/* ===== DESKTOP NAVIGATION ===== */
		.nav-desktop {
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: space-between;
			min-width: 0;
		}

		.nav-menu {
			list-style: none;
			display: flex;
			gap: var(--nav-item-spacing);
			align-items: center;
			margin: 0;
			padding: 0;
			flex: 1;
			min-width: 0;
		}

		.nav-item {
			position: relative;
			flex-shrink: 0;
		}

		.nav-link {
			font-family: var(--nav-font-family);
			font-size: 14px;
			font-weight: 400;
			color: var(--nav-text-color);
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: 4px;
			padding: 10px;
			transition: color var(--nav-transition-speed) var(--nav-transition-timing);
			cursor: pointer;
			white-space: nowrap;
		}

		.nav-link:hover {
			color: #74ae43;
			text-decoration: none;
		}

		.nav-link.has-dropdown::after {
			content: '';
			width: 12px;
			height: 12px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.16634 4.67995L2.20176 3.64453L6.99967 8.44245L11.7976 3.64453L12.833 4.67995L6.99967 10.5133L1.16634 4.67995Z' fill='currentColor'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
			transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
		}

		/* ===== DROPDOWNS ===== */
		.nav-dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			width: auto;
			height: 0;
			overflow: hidden;
			transition: height 0.4s ease-in-out;
			z-index: 100;
			margin-top: 10px;
		}

		.dropdown-content {
			background-color: var(--nav-dropdown-bg);
			border-radius: var(--nav-dropdown-radius);
			backdrop-filter: blur(15px);
			padding: var(--nav-dropdown-spacing);
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 8px 18px;
			min-width: 674px;
		}

		.dropdown-item {
			display: flex;
			align-items: flex-start;
			gap: 25px;
			padding: 16px;
			border-radius: 16px;
			text-decoration: none;
			color: var(--nav-primary-color);
			font-family: var(--nav-font-family);
			font-weight: 600;
			font-size: 16px;
			line-height: 1.4;
			transition: background-color var(--nav-transition-speed) var(--nav-transition-timing);
		}

		.dropdown-item:hover {
			background-color: var(--nav-bg-solid);
		}

		.dropdown-icon {
			width: 24px;
			height: 24px;
			flex-shrink: 0;
		}

		.dropdown-text {
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		.dropdown-description {
			font-family: var(--nav-font-family-secondary);
			font-size: 12px;
			color: #131313;
			opacity: 0.72;
			font-weight: 400;
			margin: 0;
		}

		/* ===== RIGHT-ALIGNED DROPDOWN (for login/user menu) ===== */
		.nav-dropdown.right-aligned {
			left: auto;
			right: 0;
			transform: none;
		}

		.dropdown-content.single-column {
			grid-template-columns: 1fr;
			min-width: 300px;
		}

		/* Ensure the dropdown stays on screen */
		.nav-dropdown.right-aligned .dropdown-content {
			right: 0;
			left: auto;
		}

		/* Mobile: Right-aligned dropdowns become normal full-width */
		@media (max-width: 991px) {
			.nav-dropdown.right-aligned {
				left: auto;
				right: auto;
				width: 100% !important;
			}

			.dropdown-content.single-column {
				min-width: auto;
			}
		}

		.nav-actions {
			display: flex;
			align-items: center;
			gap: 18px;
			flex-shrink: 0;
			margin-left: 20px;
		}

		/* ===== MOBILE NAVIGATION ===== */
		.mobile-toggle {
			display: none;
			position: relative;
			z-index: 9;
			cursor: pointer;
			width: 40px;
			height: 38px;
			flex-direction: column;
			row-gap: 4px;
			align-items: center;
			justify-content: center;
			overflow: visible;
		}

		.mobile-toggle span {
			width: 18px;
			height: 2px;
			background-color: var(--nav-primary-color);
			border-radius: 10px;
			transition: all 0.4s ease;
			transform-origin: center;
		}

		.nav-mobile {
			position: fixed;
			top: 70px;
			left: 0;
			width: 100%;
			height: 0;
			background-color: var(--nav-mobile-bg);
			backdrop-filter: blur(72px);
			overflow: auto;
			transition: height 0.5s ease-in-out;
			z-index: 999;
		}

		.nav-mobile.active {
			height: calc(100vh - 70px);
		}

		.mobile-menu {
			padding: 48px 0 0 0;
			height: 100%;
			overflow: auto;
		}

		/* ===== RESPONSIVE BREAKPOINTS ===== */
		@media (max-width: 1200px) {
			.nav-logo {
				margin-right: 50px;
				margin-left: 15px;
			}

			.nav-menu {
				gap: 10px;
			}

			.dropdown-content {
				min-width: 600px;
			}
		}

		@media (max-width: 1100px) {
			.nav-logo {
				margin-right: 30px;
			}

			.nav-menu {
				gap: 8px;
			}

			.nav-link {
				padding: 10px 8px;
				font-size: 13px;
			}

			.dropdown-content {
				min-width: 550px;
			}
		}

		@media (max-width: 991px) {
			.navbar-wrapper {
				position: fixed;
				background-color: transparent;
			}

			.navbar-container {
				background-color: var(--nav-mobile-bg);
				min-height: 70px;
				backdrop-filter: blur(72px);
			}

			.nav-logo {
				margin-right: 0;
			}

			.nav-desktop {
				display: none;
			}

			.nav-mobile {
				display: block;
			}

			.mobile-toggle {
				display: flex !important;
			}

			.nav-menu {
				flex-direction: column;
				align-items: stretch;
				padding: 0 20px;
				gap: 0;
				flex: none;
			}

			.nav-item {
				border-bottom: 1px solid var(--nav-border-color);
			}

			.nav-link {
				font-size: 18px;
				padding: 16px 0;
				justify-content: space-between;
				width: 100%;
			}

			.nav-link.has-dropdown::after {
				transform: rotate(0deg);
			}

			.nav-link.has-dropdown.active::after {
				transform: rotate(180deg);
			}

			.nav-dropdown {
				position: static;
				width: 100% !important;
				margin-top: 16px;
				padding: 0;
				left: auto;
			}

			.dropdown-content {
				background-color: transparent;
				backdrop-filter: none;
				grid-template-columns: 1fr;
				min-width: auto;
				padding: 0;
				gap: 4px;
			}

			.dropdown-item {
				width: 100%;
				gap: 18px;
				font-size: 14px;
				text-decoration: none !important;
			}

			.dropdown-icon {
				width: 18px;
				height: 18px;
			}

			.dropdown-description {
				display: none;
			}

			.nav-actions {
				display: none;
			}

			.mobile-actions {
				display: flex;
				flex-direction: column;
				padding: 20px;
				gap: 20px;
			}

			/* Fixed X animation - won't get clipped */
			.mobile-toggle.active span:nth-child(1) {
				transform: translateY(5px) rotate(45deg);
				width: 22px;
			}

			.mobile-toggle.active span:nth-child(2) {
				opacity: 0;
				transform: scaleX(0);
			}

			.mobile-toggle.active span:nth-child(3) {
				transform: translateY(-7px) rotate(-45deg);
				width: 22px;
			}
		}

		@media (max-width: 767px) {
			.navbar-inner {
				max-width: 640px;
			}
		}

		@media (max-width: 575px) {
			.navbar-inner {
				max-width: 480px;
				padding: 16px;
			}

			.mobile-menu {
				padding: 24px 0 0 0;
			}
		}

		/* ===== UTILITY CLASSES ===== */
		.hidden-on-desktop {
			display: none;
		}

		@media (max-width: 991px) {
			.hidden-on-desktop {
				display: block;
			}

			.hidden-on-mobile {
				display: none;
			}
		}

		.text-primary {
			color: var(--nav-primary-color);
		}

		.badge-new {
			display: inline-flex;
			height: 20px;
			padding: 0 6px;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			border: 0.5px solid var(--nav-border-color);
			color: var(--nav-primary-color);
			font-size: 12px;
			font-weight: 500;
			line-height: 140%;
		}

		.scroll-space {
			height: 1500px;
		}

        a.dropdown-item:hover { text-decoration: none !important; }
        a.dropdown-item:hover * { text-decoration: none !important; }
a.nav-link:focus { text-decoration: none !important; color: #74ae43; }
.dropdown-text:focus { text-decoration: none !important; color: #74ae43; }