/* Areas We Serve Mega Menu Styling */
/* Target: menu item with class "areas-mega-menu" */

/* ============================================
   BASE STATE: Hide the mega submenu by default
   ============================================ */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu {
	display: none !important;
	position: absolute !important;
	/* Position to the right of the parent item */
	left: 100% !important;
	top: -20px !important;
	z-index: 9999 !important;
	background: #f5f5f7 !important;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.15) !important;
	border-radius: 4px !important;
	padding: 2rem !important;
	width: auto !important;
	min-width: 900px !important;
	max-width: calc(100vw - 350px) !important;
	border: 1px solid #eee !important;
	box-sizing: border-box !important;
}

/* ============================================
   HOVER STATE: Show mega submenu on hover
   ============================================ */
.header-navigation .header-menu-container .menu-item.areas-mega-menu:hover > .sub-menu,
.header-navigation .header-menu-container .menu-item.areas-mega-menu:focus-within > .sub-menu {
	display: grid !important;
	/* Force 4 columns with min-content to respect min-widths */
	grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
	gap: 2.5rem !important;
	align-items: start !important;
}

/* ============================================
   STATE COLUMNS (California, Oklahoma, Texas)
   ============================================ */
/* Default column behavior for items */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children {
	display: flex !important;
	flex-direction: column !important;
	min-width: 140px !important;
	max-width: 100% !important;
	grid-column: span 1 !important;
	overflow: visible !important;
}

/* Force First Item (Los Angeles) to span 2 columns */
/* NOTE: This rule is legacy/fallback. The new :has() rule below takes precedence for complex items */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children:nth-of-type(1) {
	grid-column: span 2 !important;
}

/* ============================================
   3-LEVEL HIERARCHY LAYOUT (State -> County -> City)
   ============================================ */
/* 
   Vertical Stack Layout:
   State (Header)
     County 1 (Sub-header)
       City A
       City B
     County 2 (Sub-header)
       City C
*/

/* Remove any grid/full-width forcing on the State container */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children:has(> .sub-menu > .menu-item-has-children) {
    grid-column: span 2 !important; /* Changed from span 1 to span 2 */
    width: auto !important;
    max-width: 100% !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Revert the sub-menu (Counties wrapper) to default block/flex-col behavior */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children:has(> .sub-menu > .menu-item-has-children) > .sub-menu {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Reset County items to block */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children:has(> .sub-menu > .menu-item-has-children) > .sub-menu > .menu-item {
    grid-column: span 1 !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    /* Add spacing between county groups */
    margin-top: 1.5rem !important; 
}

/* Remove top margin from the very first county */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children:has(> .sub-menu > .menu-item-has-children) > .sub-menu > .menu-item:first-child {
    margin-top: 0.5rem !important;
}

/* Reset indent for the City lists under each County (no indent in mockup) */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > .sub-menu {
    padding-left: 0 !important;
    border-left: none !important;
    margin-left: 0 !important;
}

/* State header link styling */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children > a {
	font-weight: 800 !important;
	font-size: 0.95rem !important;
	color: #222 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	padding-bottom: 0.5rem !important;
	margin-bottom: 1rem !important;
	border-bottom: none !important;
	display: block !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
	line-height: 1.3 !important;
	padding-left: 0 !important;
}

/* Remove white hover color - headings should remain visible */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children > a:hover,
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children:hover > a {
	text-decoration: none !important;
	color: #333 !important;
	background: none !important;
}

/* Hide the dropdown arrow on state items inside mega menu */
.header-navigation .header-menu-container .menu-item.areas-mega-menu .sub-menu .dropdown-nav-toggle,
.header-navigation .header-menu-container .menu-item.areas-mega-menu .sub-menu .dropdown-nav-special-toggle {
	display: none !important;
}

/* ============================================
   CITY LINKS (nested under states)
   ============================================ */
/* Force city submenus to always be visible */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu {
	display: grid !important;
	/* Use auto-fill to handle narrow containers better and avoid overlap */
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
	gap: 0.25rem 1rem !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	width: auto !important;
	min-width: 0 !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
}

/* City link styling */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item {
	display: block !important;
	width: auto !important;
	border: none !important;
}

.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	color: #666 !important;
	padding: 0.15rem 0 !important;
	display: block !important;
	text-decoration: none !important;
	border: none !important;
	background: transparent !important;
	line-height: 1.2 !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > a:hover {
	color: #2e5077 !important;
	text-decoration: underline !important;
  
}

/* ============================================
   COUNTY SUB-HEADERS (Level 2 Items)
   ============================================ */
/* Style Level 2 items (Counties) as sub-headers */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children > a {
    width: 100%;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    color: #888 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: 0 !important;
    margin-bottom: 1.2rem !important;
    padding-bottom: 0.3rem !important;
    border-bottom: 1px solid #aaa !important;
    display: block !important;
}

/* County headers are functional links */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children > a:hover {
    text-decoration: underline !important;
    color: #2e5077 !important;
    cursor: pointer !important;
    background: none !important;
}

/* ============================================
   CITY LINKS (Level 3 Items - under Counties)
   ============================================ */
/* Ensure Level 3 submenus are visible and flow correctly */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > .sub-menu {
    display: grid !important; /* Use grid for two columns */
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    gap: 0.15rem 1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    min-width: 0 !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
}

/* Style Level 3 items same as standard cities */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item {
    display: block !important;
    border: none !important;
    margin-bottom: 0.25rem !important;
}

.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #666 !important;
    padding: 0.25rem 0 !important;
    display: block !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.2 !important;
}

.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item > a:hover {
    color: #2e5077 !important;
    text-decoration: underline !important;
}

/* ============================================
   NON-STATE UTILITY LINKS (See All Areas, etc)
   ============================================ */
/* Items without children like "See All Areas" */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item:not(.menu-item-has-children) {
	grid-column: 1 / -1 !important;
	border-top: none !important;
	margin-top: 2rem !important;
	padding-top: 0 !important;
	text-align: left !important;
}

.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item:not(.menu-item-has-children) > a {
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	color: #2e5077 !important;
	text-decoration: none !important;
	display: inline-block !important;
}

/* Additional utility links spacing */
.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item:not(.menu-item-has-children) ~ .menu-item:not(.menu-item-has-children) {
	margin-top: 0 !important;
	padding-top: 0.25rem !important;
	border-top: none !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
/* Mid-range: switch to a narrower min-width and ensure it fits */
@media (max-width: 1400px) {
	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu {
		min-width: 650px !important;
		max-width: calc(100vw - 320px) !important;
	}
}

@media (max-width: 1250px) {
	/* Wrap county cities to single column earlier */
	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > .sub-menu {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 1250px) and (min-width: 1001px) {
	.header-navigation .header-menu-container .menu-item.areas-mega-menu:hover > .sub-menu,
	.header-navigation .header-menu-container .menu-item.areas-mega-menu:focus-within > .sub-menu {
		gap: 1.5rem !important;
	}

	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children {
		min-width: 120px !important;
	}

	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children > a {
		font-size: 0.9rem !important;
		letter-spacing: 0.6px !important;
	}
}

/* Dropdown/Flyout behavior change for smaller tablets */
@media (max-width: 1000px) {
	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu {
		position: static !important;
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		box-shadow: none !important;
		border: none !important;
		border-top: 1px solid #eee !important;
		padding: 1.5rem 1rem !important;
		overflow-x: hidden !important;
	}

	/* Force 1-column layout on hover/active for mobile */
	.header-navigation .header-menu-container .menu-item.areas-mega-menu:hover > .sub-menu,
	.header-navigation .header-menu-container .menu-item.areas-mega-menu:focus-within > .sub-menu {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}

	/* Neutralize Los Angeles Span for vertical stack */
	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item.menu-item-has-children:nth-of-type(1) {
		grid-column: span 1 !important;
	}
	
	/* Child list adjustment for mobile */
	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.header-navigation .header-menu-container .menu-item.areas-mega-menu > .sub-menu > .menu-item > .sub-menu {
		grid-template-columns: 1fr !important;
	}
}

/* Special override for See All Areas button */
#menu-item-17097 > a {
	background: #1e447b !important;
	color: #ffffff !important;
	padding: 1rem 2.5rem !important;
	border-radius: 0 !important;
	font-weight: 800 !important;
	font-style: normal !important;
	font-size: 0.85rem !important;
	line-height: 1 !important;
	font-family: var(--global-body-font-family) !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: 3px !important;
	box-shadow: none !important;
	transition: background 0.25s ease-in-out !important;
	border: none !important;
	display: inline-block !important;
	margin-top: 1.5rem !important;
}
#menu-item-17097 > a:hover, 
#menu-item-17097 > a:focus {
	background: #15315a !important;
	color: #ffffff !important;
	box-shadow: none !important;
}