/* Burger button, fixed bottom-right on small screens (and only when JavaScript runs). */
.navtoggle {
	display: none;
}

@media (max-width: 47.99rem) {
	.js .navtoggle {
		position: fixed;
		right: var(--margin-mobile);
		bottom: calc(var(--margin-mobile) + env(safe-area-inset-bottom, 0px));
		z-index: 70;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--navtoggle-size);
		height: var(--navtoggle-size);
		background-color: var(--color-primary-strong);
		border-radius: var(--radius-lg);
		box-shadow: 0 8px 24px -6px rgb(245 158 11 / 0.45);
		color: var(--color-on-primary);
	}
}

.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	transition: transform var(--transition), background-color var(--transition);
}

.navtoggle__bars {
	position: relative;
}

.navtoggle__bars::before,
.navtoggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
}

.navtoggle__bars::before {
	top: -0.4rem;
}

.navtoggle__bars::after {
	top: 0.4rem;
}

.navtoggle[aria-expanded='true'] .navtoggle__bars {
	background-color: transparent;
}

.navtoggle[aria-expanded='true'] .navtoggle__bars::before {
	transform: translateY(0.4rem) rotate(45deg);
}

.navtoggle[aria-expanded='true'] .navtoggle__bars::after {
	transform: translateY(-0.4rem) rotate(-45deg);
}