/* --- FINAL DEFINITIVE CSS FOR WORDPRESS MULTI-LEVEL DROPDOWNS (Right Space Fix) --- */
/* 1. Base Setup and Relative Positioning */
#site-navigation #menu-main-1 li {
	position: relative;
}

/* 2. Initial State & Styling for ALL Submenus (.sub-menu) */
#site-navigation #menu-main-1 .sub-menu {
	display: none;
/* Positioning */
	position: absolute;
	top: 100%;
	left: 0;
/* Width Fixes */
	width: max-content;
/* CRITICAL: Forces box width to fit the content */
/* *** min-width HAS BEEN REMOVED TO FIX EXCESS RIGHT SPACE *** */
/* Indentation/Spacing Fixes */
	padding: 0 !important;
	margin: 0 !important;
/* Appearance */
	list-style: none;
	list-style-position: inside !important;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 9999;
}

/* 3. Multi-Level Dropdown (Level 2+) Positioning */
#site-navigation #menu-main-1 .sub-menu .sub-menu {
	left: 100% !important;
	top: 0 !important;
	z-index: 9999;
}

/* 4. Individual List Item (LI) Spacing Fix */
#site-navigation #menu-main-1 .sub-menu li {
	padding: 0 !important;
	margin: 0 !important;
	border-top: none !important;
	border-bottom: none !important;
}

/* 5. Hover States to Show Dropdowns */
#site-navigation #menu-main-1 li:hover > .sub-menu {
	display: block;
}

#site-navigation #menu-main-1 .sub-menu li:hover > .sub-menu {
	display: block;
}

/* 6. Submenu Item Styling (Controls text spacing within the final box) */
#site-navigation #menu-main-1 .sub-menu li a {
	display: block;
/* This padding controls the space around the text, 15px is on the left and right. */
	padding: 8px 15px;
	white-space: nowrap;
	border-bottom: 1px solid #eee;
	color: #333;
}

#site-navigation #menu-main-1 .sub-menu li a:hover {
	background-color: #f5f5f5;
}

/* --- ULTIMATE JS OVERRIDE: FORCE NESTED MENUS LEFT USING VISUAL TRANSFORM --- */
/* Targets the nested .sub-menu (Level 2) only under 'Our Team' (menu-item-3653) */
#site-navigation .menu-item-3653 .sub-menu .sub-menu {
/* 1. Allows the JavaScript to set left: 100% (open right) */
/* 2. CRITICAL: Use transform to visually shift the entire box LEFT by its own width. */
/* This counteracts the JS's right-positioning and forces the box to the left. */
	transform: translateX(-155%) !important;
/* 3. Adjust the Level 2 menu's top alignment (if needed) */
	top: 0 !important;
/* 4. Ensure stacking order is high */
	z-index: 99999;
/* 5. Set the position again (just in case the JS resets it) */
	right: 100% !important;
/* Forces the box to acknowledge the left edge */
}

/* --- REVISED CSS FOR MOBILE: SHIFTING NESTED (LEVEL 2+) DROPDOWNS RIGHT --- */
/* Targets screens up to 768px */
@media (max-width: 768px) {
	/* 1. Multi-Level Dropdown (Level 2+) Positioning */
	#site-navigation #menu-main-1 .sub-menu .sub-menu {
	/* CRITICAL: Clears the 'right: 0' from the previous attempt */
		right: auto !important;
	/* Clears the original 'left: 100%' for desktop */
		left: auto !important;
	/* Sets the new position: Shifting it right by a fixed amount (e.g., 100px) */
	/* Adjust the '100px' value below until it looks right on your device. */
	/* This pushes the dropdown off the left edge of its parent li. */
		margin-left: 100px !important;
	/* Ensures vertical alignment is correct */
		top: 0 !important;
	}
	
	/* 2. Reverses the Ultimate JS Override for Mobile for the specific menu item */
	#site-navigation .menu-item-3653 .sub-menu .sub-menu {
	/* Removes the visual shift that was forcing it left */
		transform: none !important;
	/* Clears the right position */
		right: auto !important;
	/* Applies the same shift to the specific item */
		margin-left: 100px !important;
	}
}