/* Primary nav dropdown — desktop hover, mobile accordion */

.px-nav__list > .menu-item-has-children {
	position: relative;
}

.px-nav__list > .menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.px-nav__list > .menu-item-has-children > a::after {
	content: "";
	width: 0.42rem;
	height: 0.42rem;
	border-inline-end: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -0.12rem;
	opacity: 0.75;
	transition: transform 0.2s ease, margin 0.2s ease;
}

.px-nav__list > .menu-item-has-children.is-open > a::after,
.px-nav__list > .menu-item-has-children:hover > a::after,
.px-nav__list > .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg);
	margin-top: 0.18rem;
}

.px-nav__list > .menu-item-has-children > .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.45rem;
	min-width: 13.75rem;
	background: var(--px-olive-deep);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.px-nav__list > .menu-item-has-children > .sub-menu a {
	white-space: nowrap;
}

@media (min-width: 821px) {
	.px-nav__list > .menu-item-has-children > .sub-menu {
		position: absolute;
		top: calc(100% + 6px);
		inset-inline-start: 0;
		z-index: 30;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}

	.px-nav__list > .menu-item-has-children:hover > .sub-menu,
	.px-nav__list > .menu-item-has-children:focus-within > .sub-menu,
	.px-nav__list > .menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}
}

@media (max-width: 820px) {
	.px-nav__list > .menu-item-has-children > .sub-menu {
		display: none;
		margin: 0.2rem 0 0.4rem;
		padding: 0.2rem 0.2rem 0.2rem 0.55rem;
		background: rgba(255, 255, 255, 0.06);
		border: 0;
		box-shadow: none;
	}

	.px-nav__list > .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.px-nav__list > .menu-item-has-children > .sub-menu a {
		white-space: normal;
		font-size: 0.95rem;
		padding-inline-start: 1rem;
	}
}