nav.beige-strip {
	background-color: var(--brand-beige);
	padding-block: 0;
	justify-content: center;
	display: flex;
	margin-bottom: 3em;
}

nav ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
}

nav.beige-strip ul {
	max-width: var(--body-width);
	column-gap: 2em;
}

nav ul li {
	list-style-type: none;
}

nav.beige-strip ul li {
	margin-block: 0;
	padding-block: 0.4em;
	padding-inline: 0.75em;
}

nav.beige-strip ul li a {
	color: var(--brand-blue);
	text-underline-offset: 0.25em;
	text-decoration-color: transparent;
}

nav.beige-strip ul li a:not(.is-active):hover {
	text-decoration: underline;
}

nav.beige-strip li:has(a.is-active) {
	background-color: #e3dbb2;
}

nav.beige-strip ul li a.is-active {
	color: var(--dark);
	cursor: default;
}

nav.blue-tabs {
	margin-left: calc((100vw - var(--body-width)) / 2);
}

nav.blue-tabs ul li {
	background-color: var(--brand-blue-light);
	padding-inline: 0.85em;
	border-radius: 100px;
	padding-block: 0.25em;
	border: 1px solid var(--brand-blue);
	transition: background-color 0.3s;
}

nav.blue-tabs ul li a {
	color: var(--brand-blue);
	text-decoration: none;
	transition: 0.3s;
}

nav.blue-tabs ul {
	column-gap: 0.85em;
}

nav.blue-tabs ul li:has(a.is-active) {
	background-color: var(--brand-blue);
}

nav.blue-tabs ul li a.is-active {
	color: white;
}

nav.blue-tabs ul li:hover {
	background-color: var(--brand-blue-light-hover);
	transition: background-color 0.3s;
}