/**
 * COSTAR mega menu: [costar_mega_menu] and [costar_mega_menu layout="accordion"].
 *
 * Built from the mega menu wireframe, in the site's own style: Elementor global colours,
 * Montserrat with tight tracking, a white 20px panel, light-teal tiles, orange line
 * icons in light-teal circles, orange pill buttons and orange uppercase text links.
 *
 * Every selector is scoped under nav.cmm and includes the element type, so it outranks
 * Elementor kit rules such as `.elementor-kit-5 button` or `.elementor-kit-5 a`.
 */

nav.cmm {
	/* Elementor globals, with the site's values as fallbacks */
	--cmm-teal: var(--e-global-color-secondary, #00607c);
	--cmm-orange: var(--e-global-color-primary, #f74902);
	--cmm-tint: var(--e-global-color-fc9f3ad, #e6f0f2);
	--cmm-white: var(--e-global-color-93f146f, #fff);
	--cmm-text: var(--e-global-color-text, #000);

	--cmm-tracking: -0.05em;
	--cmm-radius-panel: 20px;
	--cmm-radius-tile: 14px;
	--cmm-radius-pill: 100px;
	--cmm-speed: 0.16s;

	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--cmm-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: var(--cmm-tracking);
}

nav.cmm,
nav.cmm *,
nav.cmm *::before,
nav.cmm *::after {
	box-sizing: border-box;
}

nav.cmm ul,
nav.cmm ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav.cmm li {
	margin: 0;
	padding: 0;
}

nav.cmm p {
	margin: 0;
	padding: 0;
}

nav.cmm a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

nav.cmm svg {
	display: block;
	flex: 0 0 auto;
}

nav.cmm .cmm__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

nav.cmm a:focus-visible,
nav.cmm button:focus-visible {
	outline: 2px solid var(--cmm-teal);
	outline-offset: 2px;
}

/* Top-level items */

nav.cmm ul.cmm__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 2px;
}

/* Spread across whatever width the header gives the menu (the Elementor nav container is set to Grow). */
nav.cmm--mega ul.cmm__bar {
	justify-content: space-evenly;
}

nav.cmm button.cmm__toggle,
nav.cmm a.cmm__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--cmm-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--cmm-tracking);
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: color var(--cmm-speed) ease;
}

nav.cmm button.cmm__toggle:hover,
nav.cmm a.cmm__toggle:hover,
nav.cmm button.cmm__toggle[aria-expanded="true"],
nav.cmm .cmm__item.is-current > .cmm__toggle,
nav.cmm a.cmm__toggle[aria-current="page"] {
	background: transparent;
	color: var(--cmm-teal);
}

/* The wireframe's "+" that turns into "×" when open */
nav.cmm .cmm__toggle-icon {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cmm-tint);
	color: var(--cmm-orange);
	transition: background-color var(--cmm-speed) ease, color var(--cmm-speed) ease, transform var(--cmm-speed) ease;
}

nav.cmm .cmm__toggle-icon::before,
nav.cmm .cmm__toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	margin: -1px 0 0 -5px;
	border-radius: 2px;
	background: currentColor;
}

nav.cmm .cmm__toggle-icon::after {
	transform: rotate(90deg);
}

nav.cmm button.cmm__toggle[aria-expanded="true"] .cmm__toggle-icon {
	background: var(--cmm-orange);
	color: var(--cmm-white);
	transform: rotate(45deg);
}

/* Narrower desktops: the header bar shares its width with the logo and two buttons,
   so the six top-level items shrink to stay on one row (checked on staging down to 1100px;
   between 1025px and 1099px they wrap onto two rows). */
@media (max-width: 1439px) {
	nav.cmm--mega button.cmm__toggle,
	nav.cmm--mega a.cmm__toggle {
		font-size: 14px;
	}

	nav.cmm--mega .cmm__toggle-icon {
		width: 18px;
		height: 18px;
	}

	nav.cmm--mega .cmm__toggle-icon::before,
	nav.cmm--mega .cmm__toggle-icon::after {
		width: 8px;
		margin-left: -4px;
	}
}

@media (max-width: 1365px) {
	nav.cmm--mega button.cmm__toggle,
	nav.cmm--mega a.cmm__toggle {
		padding: 8px 6px;
	}

	nav.cmm--mega .cmm__toggle-icon {
		display: none;
	}
}

@media (max-width: 1199px) {
	nav.cmm--mega button.cmm__toggle,
	nav.cmm--mega a.cmm__toggle {
		padding: 8px 4px;
		font-size: 13px;
	}
}

/* Panels (mega layout) */

nav.cmm--mega .cmm__panel {
	display: none;
	position: absolute;
	z-index: 1000;
	/* Lined up under the header bar by the JS; these are the no-JS fallbacks. */
	top: var(--cmm-top, 100%);
	left: var(--cmm-left, 0);
	width: var(--cmm-width, min(1360px, calc(100vw - 32px)));
	max-width: calc(100vw - 16px);
}

nav.cmm--mega .cmm__item.is-open > .cmm__panel,
nav.cmm--mega:not(.is-ready) .cmm__item:hover > .cmm__panel,
nav.cmm--mega:not(.is-ready) .cmm__item:focus-within > .cmm__panel {
	display: block;
	animation: cmm-drop var(--cmm-speed) ease-out;
}

@keyframes cmm-drop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

nav.cmm--mega .cmm__panel-inner {
	display: flex;
	flex-wrap: wrap;
	max-height: calc(100vh - var(--cmm-top-viewport, 120px) - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px;
	border-radius: var(--cmm-radius-panel);
	background: var(--cmm-white);
	box-shadow: 0 16px 40px rgba(0, 40, 52, 0.14);
	text-align: left;
}

nav.cmm--mega .cmm__col {
	display: flex;
	flex-direction: column;
	flex: 1 1 240px;
	min-width: 0;
	padding: 12px;
}

nav.cmm--mega .cmm__col + .cmm__col {
	border-left: 1px solid var(--cmm-tint);
}

nav.cmm--mega .cmm__col--before {
	flex: 1.15 1 300px;
}

nav.cmm--mega .cmm__col--after {
	flex: 1.25 1 320px;
}

/* Link groups */

nav.cmm .cmm__group + .cmm__group {
	margin-top: 18px;
}

nav.cmm p.cmm__group-title {
	margin: 0 0 6px;
	padding: 8px 16px;
	border-radius: 10px;
	background: var(--cmm-tint);
	color: var(--cmm-teal);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

nav.cmm p.cmm__group-title a:hover {
	color: var(--cmm-orange);
}

nav.cmm ul.cmm__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

nav.cmm a.cmm__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 6px 10px 6px 6px;
	border-radius: 12px;
	color: var(--cmm-text);
	transition: background-color var(--cmm-speed) ease;
}

nav.cmm .cmm__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cmm-tint);
	color: var(--cmm-orange);
	transition: background-color var(--cmm-speed) ease;
}

nav.cmm a.cmm__link:hover,
nav.cmm a.cmm__link[aria-current="page"] {
	background: var(--cmm-tint);
	color: var(--cmm-text);
}

nav.cmm a.cmm__link:hover .cmm__icon,
nav.cmm a.cmm__link[aria-current="page"] .cmm__icon {
	background: var(--cmm-white);
}

nav.cmm .cmm__link-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

nav.cmm .cmm__link-label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

nav.cmm a.cmm__link[aria-current="page"] .cmm__link-label {
	color: var(--cmm-teal);
}

nav.cmm .cmm__link-description {
	margin-top: 2px;
	color: var(--cmm-text);
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: normal;
}

/* Side content */

nav.cmm p.cmm__aside-title,
nav.cmm p.cmm__eyebrow {
	margin: 0 0 10px;
	padding: 6px 4px 0;
	color: var(--cmm-teal);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

nav.cmm a.cmm__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-end;
	margin: auto 0 0;
	padding: 16px 4px 4px;
	color: var(--cmm-orange);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: uppercase;
	transition: color var(--cmm-speed) ease;
}

nav.cmm a.cmm__more:hover {
	color: var(--cmm-teal);
}

nav.cmm a.cmm__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 15px 30px;
	border-radius: var(--cmm-radius-pill);
	background: var(--cmm-orange);
	color: var(--cmm-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: uppercase;
	transition: background-color var(--cmm-speed) ease, color var(--cmm-speed) ease;
}

nav.cmm a.cmm__button:hover {
	background: var(--cmm-white);
	color: var(--cmm-teal);
}

nav.cmm .cmm__promo a.cmm__button:focus-visible,
nav.cmm .cmm__quote a:focus-visible {
	outline-color: var(--cmm-white);
}

/* Promo card (teal) and the featured post */

nav.cmm .cmm__promo {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 340px;
	overflow: hidden;
	border-radius: var(--cmm-radius-tile);
	background: var(--cmm-teal);
	color: var(--cmm-white);
}

nav.cmm .cmm__promo-media {
	aspect-ratio: 16 / 9;
	background: var(--cmm-tint);
}

nav.cmm .cmm__promo-media video,
nav.cmm .cmm__promo-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

nav.cmm .cmm__promo-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	gap: 24px;
	padding: 28px;
}

nav.cmm .cmm__promo.has-media .cmm__promo-body {
	justify-content: flex-start;
	gap: 18px;
	padding: 22px 24px 24px;
}

nav.cmm p.cmm__promo-title {
	color: var(--cmm-white);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--cmm-tracking);
}

nav.cmm .cmm__promo.has-media p.cmm__promo-title {
	font-size: 20px;
}

nav.cmm .cmm__promo p.cmm__eyebrow {
	margin: 0 0 -10px;
	padding: 0;
	color: var(--cmm-white);
}

/* Testimonial */

nav.cmm figure.cmm__quote {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 16px;
	min-height: 340px;
	margin: 0;
	padding: 28px;
	border-radius: var(--cmm-radius-tile);
	background: var(--cmm-teal);
	color: var(--cmm-white);
}

nav.cmm .cmm__quote-mark {
	color: var(--cmm-orange);
}

nav.cmm blockquote.cmm__quote-text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cmm-white);
	font-size: 22px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: var(--cmm-tracking);
}

nav.cmm blockquote.cmm__quote-text p {
	color: inherit;
	font: inherit;
}

nav.cmm figcaption.cmm__quote-cite {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	color: var(--cmm-white);
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: normal;
}

/* Packages */

nav.cmm ol.cmm__packages {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

nav.cmm li.cmm__package {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px 12px 18px;
	border-radius: var(--cmm-radius-tile);
	background: var(--cmm-tint);
}

nav.cmm .cmm__package-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

nav.cmm .cmm__package-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

nav.cmm .cmm__package-for {
	color: var(--cmm-teal);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

nav.cmm .cmm__package-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cmm-teal);
	color: var(--cmm-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: normal;
}

/* Stat tiles */

/* The tiles stretch to fill the column, so the panel has no empty corner. */
nav.cmm ul.cmm__stats {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(140px, 1fr);
	gap: 8px;
}

/* An odd number of tiles: the last one spans the full width.
   Exactly two tiles: stack them top to bottom rather than as two tall, narrow columns. */
nav.cmm li.cmm__stat:last-child:nth-child(odd),
nav.cmm li.cmm__stat:first-child:nth-last-child(2),
nav.cmm li.cmm__stat:first-child:nth-last-child(2) ~ li.cmm__stat {
	grid-column: 1 / -1;
}

nav.cmm li.cmm__stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
	border-radius: var(--cmm-radius-tile);
	background: var(--cmm-tint);
}

/* Orange on the light-teal tile is ~3:1, enough for this large bold text (WCAG AA large) but not for small text. */
nav.cmm .cmm__stat-value {
	color: var(--cmm-orange);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--cmm-tracking);
	overflow-wrap: anywhere;
}

nav.cmm a.cmm__stat-value {
	align-self: flex-start;
	color: var(--cmm-orange);
	font-size: 24px;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: var(--cmm-teal);
}

nav.cmm a.cmm__stat-value:hover {
	color: var(--cmm-text);
}

nav.cmm .cmm__stat-label {
	font-size: 15px;
	line-height: 1.35;
}

/* Partner logos */

nav.cmm ul.cmm__logos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

nav.cmm li.cmm__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	padding: 14px 18px;
	border-radius: var(--cmm-radius-tile);
	background: var(--cmm-tint);
}

nav.cmm li.cmm__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 52px;
	margin: 0;
	object-fit: contain;
}

/* Latest posts */

nav.cmm ul.cmm__posts {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

nav.cmm a.cmm__post {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	border-radius: var(--cmm-radius-tile);
	transition: background-color var(--cmm-speed) ease;
}

nav.cmm a.cmm__post:hover {
	background: var(--cmm-tint);
}

nav.cmm .cmm__post-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--cmm-tint);
	color: var(--cmm-orange);
}

nav.cmm .cmm__post-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

nav.cmm .cmm__post-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

nav.cmm .cmm__post-category {
	color: var(--cmm-teal);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

nav.cmm .cmm__post-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

/* Accordion layout (mobile off-canvas) */

nav.cmm--accordion ul.cmm__bar {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

nav.cmm--accordion .cmm__item {
	border-bottom: 1px solid var(--cmm-tint);
}

nav.cmm--accordion button.cmm__toggle,
nav.cmm--accordion a.cmm__toggle {
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 12px 2px;
	border-radius: 0;
	font-size: 17px;
	text-align: left;
	white-space: normal;
}

nav.cmm--accordion .cmm__panel {
	display: none;
}

nav.cmm--accordion .cmm__item.is-open > .cmm__panel,
nav.cmm--accordion:not(.is-ready) .cmm__panel {
	display: block;
}

nav.cmm--accordion .cmm__panel-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 0 16px;
}

nav.cmm--accordion a.cmm__overview {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--cmm-orange);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: uppercase;
}

nav.cmm--accordion .cmm__col + .cmm__col {
	margin-top: 4px;
}

nav.cmm--accordion p.cmm__group-title {
	padding: 6px 12px;
}

/* The header's mobile off-canvas (Elementor) opens at the very top of the screen, under the WordPress
   admin bar for logged-in users, which hid its "Menu" heading and close button. Start below the bar. */
body.admin-bar .e-off-canvas .e-off-canvas__content {
	padding-top: var(--wp-admin--admin-bar--height, 0px);
}

@media (prefers-reduced-motion: reduce) {
	nav.cmm,
	nav.cmm *,
	nav.cmm *::before,
	nav.cmm *::after {
		animation: none !important;
		transition: none !important;
	}
}