/* =========================================================================
   Marion County PHD — Mega Menu
   -------------------------------------------------------------------------
   This is THE dedicated Mega Menu stylesheet for the marioncounty2023 theme.
   It styles the site's main navigation (rendered via WordPress's standard
   walker in header.php into <nav id="mh-megamenu">) into a branded, mega-
   style dropdown that shows correctly on every page.

   Why this file (and not the mega_main_menu plugin's CSS):
   The licensed mega_main_menu v2.0.2 plugin's PHP-8 renderer flattens the
   menu hierarchy and never emits its skin wrapper, so its own frontend CSS
   targets DOM that no longer exists on the page. The theme renders the real
   "Main Menu" via the standard walker and this file is the authoritative
   styling for that markup.

   Enqueued on every page from functions.php (handle: "mega-menu"). The base
   theme stylesheet (styles.css) provides everything else — this file's
   selectors are intentionally namespaced to #mh-megamenu so they layer on
   top of the original theme CSS without overriding non-nav styles.

   Brand palette: green #7cbe32, navy #073e81.
   ========================================================================= */

#mh-megamenu {
	display: block;
	width: 100%;
	font-family: inherit;
}

#mh-megamenu .mh-megamenu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;   /* logo is left (col-md-2); nav sits right */
	align-items: stretch;
}

/* ---- Top-level items ---- */
#mh-megamenu .mh-megamenu-list > li {
	position: relative;          /* dropdown anchor */
	list-style: none;
	margin: 0;
}

#mh-megamenu .mh-megamenu-list > li > a {
	display: block;
	padding: 18px 16px;
	color: #073e81;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	line-height: 1;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

#mh-megamenu .mh-megamenu-list > li > a:hover,
#mh-megamenu .mh-megamenu-list > li > a:focus,
#mh-megamenu .mh-megamenu-list > li.focus > a,
#mh-megamenu .mh-megamenu-list > li:hover > a {
	color: #7cbe32;
	border-bottom-color: #7cbe32;
	background: #f6faf0;
}

/* Current page / ancestor */
#mh-megamenu .mh-megamenu-list > li.current-menu-item > a,
#mh-megamenu .mh-megamenu-list > li.current-menu-ancestor > a,
#mh-megamenu .mh-megamenu-list > li.current_page_item > a {
	color: #fff;
	background: #7cbe32;
	border-bottom-color: #5e9626;
}

/* ---- Dropdown (sub-menu) ----
   .sub-menu is WordPress's standard class for nested <ul>s from the
   default walker, so we don't rename it — we just style it. */
#mh-megamenu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border-top: 3px solid #7cbe32;
	box-shadow: 0 8px 24px rgba(7, 62, 129, .18);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

#mh-megamenu .mh-megamenu-list > li:hover > .sub-menu,
#mh-megamenu .mh-megamenu-list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#mh-megamenu .sub-menu li {
	list-style: none;
	margin: 0;
}

#mh-megamenu .sub-menu a {
	display: block;
	padding: 10px 18px;
	color: #073e81;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color .12s ease, background-color .12s ease;
}

#mh-megamenu .sub-menu a:hover,
#mh-megamenu .sub-menu a:focus {
	color: #fff;
	background: #7cbe32;
}

/* "Has children" affordance */
#mh-megamenu .mh-megamenu-list > li.menu-item-has-children > a::after {
	content: "\25BE";              /* ▾ */
	font-size: 10px;
	margin-left: 7px;
	vertical-align: middle;
	opacity: .65;
}

/* ---- Responsive: stack below the Bootstrap md breakpoint (992px) ---- */
@media (max-width: 991px) {
	#mh-megamenu .mh-megamenu-list {
		flex-direction: column;
		justify-content: flex-start;
	}
	#mh-megamenu .mh-megamenu-list > li { position: static; }
	#mh-megamenu .mh-megamenu-list > li > a {
		padding: 14px 12px;
		border-bottom: 1px solid #e3e8ef;
	}
	#mh-megamenu .mh-megamenu-list > li > a:hover,
	#mh-megamenu .mh-megamenu-list > li:hover > a {
		border-bottom-color: #e3e8ef;
	}
	/* Dropdowns become inline, always-visible sub-sections on small screens */
	#mh-megamenu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: 0;
		min-width: 0;
		padding: 0;
		background: #f6faf0;
	}
	#mh-megamenu .sub-menu a { padding-left: 32px; }
	#mh-megamenu .mh-megamenu-list > li.menu-item-has-children > a::after { display: none; }
}