.navbar-brand {
	font-size: 1.6rem; /* Adjust size as needed */
	text-decoration: underline;
	transition: text-decoration 0.3s ease;
}

	.navbar-brand:hover,
	.navbar-brand:focus {
		text-decoration: none;
	}

/* Custom CSS for Multi-level Dropdowns */
.dropdown-submenu {
	position: relative;
}

/* General style for all links that will act as toggles (to make space for caret) */
/* Targets both Level 1 (.nav-link.menu-toggle) and nested submenus (.dropdown-item.menu-toggle) */
/* Top-level menu toggle */
.dropdown > .nav-link.menu-toggle {
	position: relative;
	padding-right: 0.5rem;
	display: flex; /* Kept flex for desktop and now explicitly for mobile too */
	align-items: center;
	justify-content: space-between;
}

/* Submenu toggle (less padding) */
.dropdown-submenu > .dropdown-item.menu-toggle {
	position: relative;
	padding-right: 1.2rem;
	display: flex; /* Kept flex for desktop and now explicitly for mobile too */
	align-items: center;
	justify-content: space-between;
}

	/* Make sure the text content inside the flex container takes space */
	.dropdown > .nav-link.menu-toggle span,
	.dropdown-submenu > .dropdown-item.menu-toggle span {
		flex-grow: 1; /* Allows text to take available space */
		white-space: normal; /* Ensures text wraps by default */
		word-break: break-word; /* Allows long words to break */
	}
	/* Ensure the caret doesn't shrink */
	.dropdown > .nav-link.menu-toggle::after,
	.dropdown-submenu > .dropdown-item.menu-toggle::after {
		flex-shrink: 0;
		margin-left: 0.3rem; /* Space between text and caret */
	}

/* --- DESKTOP STYLES (min-width: 769px) --- */
@media (min-width: 769px) {
	/* Level 1 Dropdown Menu Positioning (absolute for proper stacking) */
	.navbar-nav .dropdown-menu {
		margin-top: 0; /* Align directly under the nav-link */
		display: none; /* Hidden by default */
		position: absolute;
		left: 0;
		top: 100%;
		background-color: #009933 !important; /* Menu Green background 1st level  for dropdown */
		color: #ffffff !important;
	}

	/* Submenu Positioning (to the right) */
	.dropdown-submenu > .dropdown-menu {
		top: 0;
		left: 99%; /* Adjusted for closer proximity to parent */
		margin-top: -6px; /* Adjust as needed for vertical alignment */
		display: none; /* Hidden by default */
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Subtle shadow */
		background-color: #009933 !important; /* green for 2nd, 3rd etc  for submenu */
	}

		/* NEW: Show dropdown menus when they have the 'show-on-hover' class on desktop */
		.navbar-nav .dropdown-menu.show-on-hover,
		.dropdown-submenu > .dropdown-menu.show-on-hover {
			display: block !important; /* Ensure it overrides Bootstrap's default or other rules */
		}

	/* Ensure main dropdown item stays highlighted on submenu hover */
	.dropdown-menu .dropdown-submenu:hover > .dropdown-item {
		background-color: #009933 !important;
		color: black !important;
	}

	/* When submenu item loses focus to a lower-level submenu, keep solid background */
	.dropdown-menu .dropdown-submenu > .dropdown-item:focus,
	.dropdown-menu .dropdown-submenu > .dropdown-item:focus-visible {
		background-color: #009933 !important;
		color: #009933 !important;
	}

	/* Desktop Caret for Level 1 (Down arrow) */
	.dropdown > .nav-link.menu-toggle::after {
		content: "▼";
		font-size: 0.7em;
		color: #ffffff !important;
	}

	/* Desktop Caret for Submenus (Right arrow) */
	.dropdown-submenu > .dropdown-item.menu-toggle::after {
		content: "►";
		font-size: 0.7em;
		color: #ffffff !important;
	}
	/* Change caret color to black on hover */
	.dropdown > .nav-link.menu-toggle:hover::after,
	.dropdown-submenu > .dropdown-item.menu-toggle:hover::after {
		color: black !important;
	}
	/* ********************************ADD THIS NEW RULE HERE: Keep caret black when the parent dropdown container is hovered */
	.navbar-nav .dropdown:hover > .nav-link.menu-toggle::after,
	.dropdown-submenu:hover > .dropdown-item.menu-toggle::after {
		color: black !important;
	}
	/* Ensure Bootstrap's default caret is hidden for any element that might still have .dropdown-toggle */
	.dropdown > .nav-link.dropdown-toggle::after,
	.dropdown-submenu > .dropdown-item.dropdown-toggle::after {
		border: none;
		vertical-align: inherit;
	}

	/* Override Bootstrap's default .show for dropdown-menus on desktop */
	/* This ensures our JS (which adds/removes .show-on-hover) takes precedence */
	/* Keep this rule to ensure Bootstrap's click behavior is suppressed on desktop */
	.dropdown-menu.show {
		display: none !important;
	}

	/* --- ADDED FOR WRAPPING --- */
	.navbar-collapse {
		flex-wrap: wrap;
	}

	.navbar-nav {
		flex-wrap: wrap;
	}
}

/* --- MOBILE STYLES (max-width: 768px) --- */
@media (max-width: 768px) {
	/* Bootstrap's .collapse handles display: none/block for .navbar-collapse */
	/* Add scrolling for long menus on mobile */
	.navbar-collapse {
		max-height: calc(100vh - 56px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: #009933 !important;
	}

	/* All Dropdown menus (Level 1 & Nested) positioning on mobile */
	.navbar-nav .dropdown-menu,
	.dropdown-menu .dropdown-menu {
		position: static; /* Stacks vertically */
		width: 100%;
		margin-top: 0;
		border: none;
		box-shadow: none;
		background-color: #009933 !important;
		color: red !important;
		display: none; /* Hidden by default, toggled by JS using .show */
	}

		.navbar-nav .dropdown-menu.show,
		.dropdown-menu .dropdown-menu.show {
			display: block; /* Show when toggled by JS using .show */
		}

	/* Nested Dropdown Menu Indentation on mobile */
	.dropdown-menu .dropdown-menu {
		padding-left: 1.5rem;
	}

	/* Mobile Indicator for ALL expandable items (Level 1 & Submenus) */
	.dropdown > .nav-link.menu-toggle::after,
	.dropdown-submenu > .dropdown-item.menu-toggle::after {
		content: "+";
		vertical-align: middle;
		font-size: 1em;
		color: #ffffff !important;
		border: none;
		vertical-align: inherit;
		margin-left: auto; /* Push to the right within flex container */
		flex-shrink: 0; /* Prevent caret from shrinking */
	}
	/* Change indicator to minus sign when active on mobile */
	.dropdown > .nav-link.menu-toggle.active-menu-toggle::after,
	.dropdown-submenu > .dropdown-item.menu-toggle.active-menu-toggle::after {
		content: "-";
	}

	/* *** CRITICAL CHANGES FOR WRAPPING START HERE *** */

	/* Make all dropdown-items flex containers to manage their content (text + caret if present) */
	/* This applies to both .menu-toggle and regular .dropdown-item links */
	.navbar-nav .dropdown-item,
	.dropdown-menu .dropdown-item {
		display: flex; /* Make it a flex container */
		align-items: center; /* Vertically center content */
		justify-content: flex-start; /* Default alignment for content */
		/* `flex-wrap: wrap;` is not directly needed here as we use word-break/white-space on span.
           If you had multiple direct children besides text that needed to wrap, then add it. */
		word-break: break-word; /* Crucial: Allows long words like "Non-Employee/Non-Student" to break */
		white-space: normal; /* Ensures text wraps naturally within the flex item */
	}

		/* Ensure the text content (inside the span) can grow and wrap */
		/* This targets the <span> within both .menu-toggle links and regular .dropdown-item links */
		.navbar-nav .dropdown-item span,
		.dropdown-menu .dropdown-item span {
			flex-grow: 1; /* Allows text to take all available horizontal space */
			white-space: normal; /* Explicitly ensure text wrapping */
			word-break: break-word; /* Allows breaking very long words */
			margin-right: 0.5rem; /* Space between text and caret (if caret is present) */
		}

	/* Specific adjustments for .menu-toggle if its styling conflicts with general .dropdown-item flex */
	.dropdown > .nav-link.menu-toggle,
	.dropdown-submenu > .dropdown-item.menu-toggle {
		justify-content: space-between; /* Override to push caret to end */
		flex-wrap: nowrap; /* Keep the entire link on one line (caret pushes text onto new line if needed) */
		/* Padding adjustments are already handled elsewhere */
	}


	/* Override the caret for only that top‑level toggle */
	/* Ensure it behaves as a flex item and uses margins correctly */
	.navbar-collapse .navbar-nav > .dropdown > .nav-link.menu-toggle::after {
		position: static; /* Let it be part of the flex flow */
		top: unset;
		right: unset;
		transform: none;
		float: none; /* Ensure no float */
		margin-left: 0; /* Reset previous margin */
		margin-right: .75rem; /* Add consistent right margin for top-level caret */
		flex-shrink: 0; /* Prevent caret from shrinking */
	}

	/* --- END CRITICAL CHANGES FOR WRAPPING --- */


	/* 1) Squeeze the links (these are already fine) */
	.navbar-nav .nav-link,
	.navbar-nav .dropdown-item,
	.dropdown-menu .dropdown-item {
		padding-top: 0.10rem;
		padding-bottom: 0.10rem;
	}

	/* 2) Eliminate extra gaps in submenu containers (these are already fine) */
	.navbar-nav .dropdown-menu,
	.dropdown-menu .dropdown-menu {
		margin: 0;
		padding: 0; /* optional */
	}

		.navbar-nav .dropdown-menu li,
		.dropdown-menu .dropdown-menu li {
			margin: 0;
		}

	/* shift sublevels slight to the right*/
	/* Level 1 */
	.dropdown-menu .dropdown-item {
		padding-left: .75rem;
	}

	/* Level 2 */
	.dropdown-menu .dropdown-menu .dropdown-item {
		padding-left: 1.5rem;
	}

	/* Level 3 */
	.dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
		padding-left: 2.25rem;
	}

	/* Level 4 */
	.dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
		padding-left: 3rem;
	}

	/* Level 5 */
	.dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
		padding-left: 3.75rem;
	}

	/* Level 6 */
	.dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
		padding-left: 4.5rem;
	}
}


/* ANHO.edu Navbar Color Overrides */
.navbar.fixed-top,
.navbar {
	background-color: #009933 !important; /* green background */
}

	.navbar .navbar-brand,
	.navbar .nav-link,
	.navbar .dropdown-item {
		color: #ffffff !important; /* White text */
	}

		.navbar .nav-link:hover,
		.navbar .nav-link:focus,
		.navbar .dropdown-item:hover,
		.navbar .dropdown-item:focus,
		.navbar .nav-item.active > .nav-link {
			color: black !important; /* black highlight hover over link */
			background-color: transparent !important;
		}

	.navbar .nav-item.active > .nav-link {
		color: #ffffff !important;
		background-color: transparent !important;
	}

		.navbar .nav-item.active > .nav-link:hover {
			color: black !important;
			background-color: transparent !important;
		}
/* Fix toggler focus outline */
.navbar-toggler:focus {
	outline: none;
	box-shadow: none;
}

/* Fix layering and spacing */
.navbar-toggler {
	position: relative;
	z-index: 1051;
}

/* Add margin-top only on mobile to prevent overlap */
@media (max-width: 768px) {
	.navbar-collapse {
		z-index: 1050;
		margin-top: 0.5rem;
	}
}

/* On desktop, reset margin-top so menu stays vertically centered */
@media (min-width: 769px) {
	.navbar-collapse {
		margin-top: 0;
	}
}

.navbar,
.navbar .nav-link,
.navbar .dropdown-item {
	font-family: 'Poppins', sans-serif !important;
	font-size: 16px;
}