header .logo-link path {
	transition: fill 0.4s ease-in-out;
}
body.show-menu .logo-link path {
	fill: white !important;
}
body.show-menu .logo-link path.initial {
	fill: var(--accent) !important;
}
.menu-toggle-button {
	padding: 0;
	display: flex;
	flex-direction: column;
	border: 0;
	gap: 6px;
}
.menu-toggle-button div {
	transition: background 0.4s ease-in-out;
}
@media screen and (min-width: 1026px) {
	.menu-toggle-button {
		display: none;
	}
}
.bar-1,
.bar-2,
.bar-3 {
	width: 25px !important;
	height: 1px !important;
	background: var(--primary-dark);
	transform-origin: center center;
	will-change: transform;
}

/* Default closed state */
.bar-1 {
	--transformY: 7px;
	--transformR: 45deg;
	animation: barClose 0.7s ease-out 0s both;
}

.bar-3 {
	--transformY: -7px;
	--transformR: -45deg;
	animation: barClose 0.7s ease-out 0s both;
}

/* Opened state - change delay to force animation restart */
body.show-menu .bar-1 {
	animation: barOpen 0.7s ease-out 0.001s both;
}

body.show-menu .bar-3 {
	animation: barOpen 0.7s ease-out 0.001s both;
}

/* Opening: translate 0-50%, rotate 50-100% */
@keyframes barOpen {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(var(--transformY)) rotate(0);
	}
	100% {
		transform: translateY(var(--transformY)) rotate(var(--transformR));
	}
}

/* Closing: rotate 0-50%, translate back 50-100% */
@keyframes barClose {
	0% {
		transform: translateY(var(--transformY)) rotate(var(--transformR));
	}
	50% {
		transform: translateY(var(--transformY)) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}

.bar-2 {
	transition: opacity 0.01s ease-out 0.3s!important;
}
body.show-menu .bar-2 {
	opacity: 0;
}

.menu-toggle-button path {
	transition: 0.2s ease-out;
}
body.show-menu header button.menu-toggle-button div {
	background: white;
}