/* Keep nested links tidy inside the mobile navigation drawer. */
.mainNav__subList {
	max-height: 0;
	margin: 0;
	padding: 0 0 0 1.5rem;
	overflow: hidden;
	list-style: none;
	opacity: 0;
	transition: max-height 220ms ease, margin 220ms ease, opacity 160ms ease;
}

.mainNav__subList > .mainNav__listItem > a {
	color: #fff;
}

.mainNav__list > .menu-item-has-children > a {
	position: relative;
	display: inline-block;
	padding-right: 2rem;
}

.mainNav__list > .menu-item-has-children > a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.2rem;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 180ms ease;
}

.mainNav__list > .menu-item-has-children.submenu-open > a::after {
	transform: translateY(-20%) rotate(225deg);
}

.mainNav__list > .menu-item-has-children.submenu-open > .mainNav__subList {
	max-height: 20rem;
	margin-top: 0.5rem;
	opacity: 1;
}

/* Present nested navigation as a traditional dropdown on larger screens. */
@media only screen and (min-width: 768px) {
	.mainNav__list > .menu-item-has-children {
		position: relative;
	}

	.mainNav__list > .menu-item-has-children > .mainNav__subList {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 10;
		min-width: 190px;
		max-height: none;
		margin: 0;
		padding: 0;
		overflow: visible;
		background: #fff;
		box-shadow: 0 8px 20px rgba(30, 48, 81, 0.18);
		list-style: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate(-50%, -0.5rem);
		transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
	}

	.mainNav__list > .menu-item-has-children > a {
		display: inline-block;
		padding-right: 1.6rem;
	}

	.mainNav__list > .menu-item-has-children > a::after {
		right: 0.1rem;
	}

	.mainNav__list > .menu-item-has-children:hover > a::after,
	.mainNav__list > .menu-item-has-children:focus-within > a::after {
		transform: translateY(-20%) rotate(225deg);
	}

	.mainNav__list > .menu-item-has-children:hover > .mainNav__subList,
	.mainNav__list > .menu-item-has-children:focus-within > .mainNav__subList {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}

	.mainNav__subList > .mainNav__listItem {
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 1.5rem;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mainNav__subList > .mainNav__listItem::after {
		display: none;
	}

	.mainNav__subList > .mainNav__listItem > a {
		display: block;
		padding: 1.2rem 1.6rem;
		border-bottom: 1px solid rgba(30, 48, 81, 0.2);
		color: #1e3051;
		white-space: nowrap;
		transition: color 160ms ease, background-color 160ms ease;
	}

	.mainNav__subList > .mainNav__listItem:last-child > a {
		border-bottom: 0;
	}

	.mainNav__subList > .mainNav__listItem > a:hover,
	.mainNav__subList > .mainNav__listItem > a:focus {
		background: #f2ebe2;
		color: #e66439;
		outline: none;
	}

	.mainNav__subList > .mainNav__listItem > a:focus-visible {
		outline: 2px solid #e66439;
		outline-offset: -2px;
	}
}

.mainNav__subList > .current-menu-item > a,
.mainNav__subList > .current_page_item > a {
	color: #e66439;
}