.menu-toggle {
	display: none;
	width: 48px;
	height: 48px;
	padding: 9px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	margin: 5px 0;
	border-radius: 999px;
	background: var(--teal);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 760px) {
	body header {
		padding: 18px 20px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 14px;
	}

	header .logo img {
		width: min(245px, 72vw);
	}

	.menu-toggle {
		display: block;
		justify-self: end;
	}

	#primary-navigation {
		grid-column: 1 / -1;
		width: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding-top: 8px;
	}

	#primary-navigation.open {
		display: flex;
	}

	#primary-navigation a:not(.nav-button) {
		padding: 10px 12px;
		font-size: 0.95rem;
		text-align: center;
		border-radius: 10px;
	}

	#primary-navigation a.active {
		color: var(--teal);
		background: var(--teal-light);
	}

	#primary-navigation .nav-button {
		width: 100%;
		margin-top: 6px;
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}