/*
 * Service Areas dropdown. Scoped to `.has-area-menu` (on the parent menu item).
 * The scope class is doubled (`.has-area-menu.has-area-menu`) to beat Elementor
 * Pro's nav stylesheet, which would otherwise zero the panel/row padding —
 * don't collapse it.
 */

/* ---- Dropdown panel ---- */
/* Hidden at rest; shown on hover (the desktop dropdown). The mobile menu hides it
   too and reveals it via the sub-arrow toggle (see mobile-menu.css). */
.has-area-menu.has-area-menu > .sub-menu {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 230px;
	padding: 11px;
	background: #f3f8ff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
}

.has-area-menu.has-area-menu:hover > .sub-menu {
	display: flex;
}

/* reset Elementor/WP default item spacing (margins only — per-role padding is
   set on the links below, so no blanket `a { padding: 0 }` that would override them) */
.has-area-menu.has-area-menu > .sub-menu > li {
	width: 100%;
	margin: 0;
}

/* ---- Group header (KANSAS / MISSOURI) ---- */
.has-area-menu.has-area-menu .sub-menu .area-group > a {
	padding: 3px 10px;
	font-family: "azo-sans-web", sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #8fa6cf;
	pointer-events: none;
}

/* divider above the second group */
.has-area-menu.has-area-menu .area-group--divided {
	margin-top: 5px;
	padding-top: 6px;
	border-top: 1px solid #e2e8f0;
}

/* ---- City row ---- */
.has-area-menu.has-area-menu .sub-menu .area-city > a {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 7px 10px;
	border-radius: 6px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 21px;
	color: #333;
	transition: background 0.15s ease;
}

/*
 * Uniform hover for every interactive row (city, suggested, footer) — the
 * area-city hover is the default for all item links. Specificity (0,4,2) beats
 * Elementor's `.elementor-sub-item:hover` (dark bg). Group headers don't react
 * because they have `pointer-events: none`. Active items (`.current-menu-item`)
 * get the same treatment so the current page reads as highlighted at rest.
 */
.has-area-menu.has-area-menu > .sub-menu > li > a:hover,
.has-area-menu.has-area-menu > .sub-menu > li.current-menu-item > a {
	background: #e8f4ff;
	color: #333;
}

/* pin icon before the city name */
.has-area-menu.has-area-menu .area-city > a::before {
	content: "";
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	background: url(/wp-content/mu-plugins/allstar/assets/icons/pin.svg) no-repeat center / contain;
}

/* state code after the city name, pinned right */
.has-area-menu.has-area-menu .area-city > a::after {
	margin-left: auto;
	font-family: "Open Sans", sans-serif;
	font-size: 10px;
	line-height: 15px;
	color: #999;
}

.has-area-menu.has-area-menu .state-ks > a::after {
	content: "KS";
}

.has-area-menu.has-area-menu .state-mo > a::after {
	content: "MO";
}

/* ---- Suggested card ---- */
.has-area-menu.has-area-menu .area-suggested {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid #e2e8f0;
}

.has-area-menu.has-area-menu .sub-menu .area-suggested > a {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 6px 10px;
	border-radius: 6px;
	background: #e8f4ff;
	font-family: "Open Sans", sans-serif;
	font-size: 11px;
	line-height: 16.5px;
	color: #0067af;
}

.has-area-menu.has-area-menu .area-suggested > a::before {
	content: "";
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	background: url(/wp-content/mu-plugins/allstar/assets/icons/pin-blue.svg) no-repeat center / contain;
}

/* dynamic location text injected by the ServiceAreas filter; styling + JS hook */
.has-area-menu.has-area-menu .area-suggested .your-location {
	color: #0067af;
}

/* ---- Footer ---- */
.has-area-menu.has-area-menu .area-footer {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid #e2e8f0;
}

.has-area-menu.has-area-menu .sub-menu .area-footer > a {
	display: block;
	padding: 0 4px;
	font-family: "Open Sans", sans-serif;
	font-size: 11px;
	line-height: 16.5px;
	text-align: center;
	color: #777; /* prompt text */
}

/* "Contact us" CTA, wrapped in a span by the ServiceAreas filter */
.has-area-menu.has-area-menu .area-footer__link {
	display: block;
	color: #0067af;
}

/* Main nav links (top-level items and desktop dropdown sub-items): use the same
   light hover as Service Areas instead of Elementor's dark default, and give the
   current page the same highlight at rest (Elementor flags the active link with
   `.elementor-item-active`; WP flags the `<li>` with `.current-menu-item`). */
header .elementor-nav-menu--main .elementor-item:hover,
header .elementor-nav-menu--main .elementor-item:focus,
header .elementor-nav-menu--main .elementor-item-active,
header .elementor-nav-menu--main .current-menu-item > .elementor-item,
header .elementor-nav-menu--main .elementor-sub-item:hover,
header .elementor-nav-menu--main .elementor-sub-item:focus,
header .elementor-nav-menu--main .elementor-sub-item-active,
header .elementor-nav-menu--main .current-menu-item > .elementor-sub-item {
	background-color: #e8f4ff;
	color: #333;
}