/* =Primary navigation submenus
-------------------------------------------------------------- */

/* Shared: reset the flex/gap/padding the base `.navbar ul` rule applies to every nested list. */
.navbar .menu-item-has-children {
	position: relative;
}

.navbar .sub-menu {
	display: none;
	padding: 0;
	gap: 0;
}

.navbar .sub-menu li {
	margin: 0;
}

.submenu-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	width: 32px;
	margin-left: 4px;
	padding: 0;
	vertical-align: middle;
}

.submenu-toggle span {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: block;
	height: 8px;
	width: 8px;
	margin-top: -4px;
	transform: rotate(45deg);
	transition: transform .3s ease-in-out, margin .3s ease-in-out;
}

.submenu-open > .submenu-toggle span {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.submenu-toggle:focus-visible {
	outline: 2px solid #fa5b6d;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Mobile drawer: submenu expands in place when toggled. */
@media (max-width: 1023px) {
	.navbar .submenu-toggle {
		color: #fff;
	}

	.navbar .submenu-open > .sub-menu {
		display: block;
		font-size: 18px;
		padding-top: 15px;
	}

	.navbar .sub-menu li + li {
		margin-top: 15px;
	}

	.navbar .sub-menu a {
		color: #c6b0ff;
	}
}

/* Desktop: floating dropdown panel on hover, focus or toggle. */
@media (min-width: 1024px) {
	.navbar .submenu-toggle {
		height: 24px;
		width: 24px;
		margin-left: 2px;
	}

	.navbar .sub-menu {
		background: #fff;
		border-top: 3px solid #fa5b6d;
		border-radius: 0 0 6px 6px;
		box-shadow: 0 16px 40px rgba(19, 16, 35, .16);
		display: block;
		font-size: 15px;
		left: 50%;
		letter-spacing: .02em;
		line-height: 1.35;
		min-width: 260px;
		opacity: 0;
		padding: 10px 0;
		position: absolute;
		text-align: left;
		top: 100%;
		margin-top: 22px;
		transform: translate(-50%, 8px);
		transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility .2s ease-in-out;
		visibility: hidden;
		width: max-content;
		max-width: 360px;
		z-index: 100;
	}

	/* Invisible bridge so the pointer can travel from the parent link to the panel. */
	.navbar .sub-menu:before {
		content: "";
		height: 25px;
		left: 0;
		position: absolute;
		right: 0;
		top: -25px;
	}

	.navbar .menu-item-has-children:hover > .sub-menu,
	.navbar .menu-item-has-children:focus-within > .sub-menu,
	.navbar .submenu-open > .sub-menu {
		opacity: 1;
		transform: translate(-50%, 0);
		visibility: visible;
	}

	.navbar .menu-item-has-children.submenu-closed > .sub-menu {
		opacity: 0;
		transform: translate(-50%, 8px);
		visibility: hidden;
	}

	.navbar .menu-item-has-children:hover > .submenu-toggle span {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	.navbar .sub-menu li {
		display: block;
	}

	.navbar .sub-menu a {
		color: #131023;
		display: block;
		padding: 10px 22px;
		transition: background .2s ease-in-out, color .2s ease-in-out;
	}

	.navbar .sub-menu a:after {
		display: none;
	}

	.navbar .sub-menu a:hover,
	.navbar .sub-menu a:focus-visible,
	.navbar .sub-menu li.active > a {
		background: #f5f5f5;
		color: #fa5b6d;
	}
}