html {
	scroll-padding-top: var(--anchor-navigation-height, 0px);
}

.panel--anchor-navigation {
	--anchor-navigation-blue: #002467;
	--anchor-navigation-orange: #f68b1f;
	--anchor-navigation-border: #1788e8;
	position: sticky;
	top: 0;
	z-index: 90;
	border-bottom: 2px solid var(--anchor-navigation-border);
	background-color: #fff;
	background-image: url("../../images/background-tile-light.png");
	background-repeat: repeat;

	.anchor-navigation__inner {
		display: grid;
		grid-template-columns: minmax(15rem, 1fr) minmax(0, 3fr);
		align-items: end;
		gap: clamp(2rem, 6vw, 7rem);
		padding-top: clamp(2rem, 4vw, 3.5rem);
	}

	.anchor-navigation__nav {
		display: flex;
		justify-content: end;
	}

	.anchor-navigation__title {
		align-self: center;
		margin: 0 0 clamp(1.5rem, 3vw, 2.75rem);
		color: var(--anchor-navigation-orange);
		font-family: var(--research-font-aleo);
		font-size: 30px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-wrap-mode: nowrap;
	}

	.anchor-navigation__tabs {
		display: flex;
		align-items: stretch;
		gap: clamp(0.75rem, 1.5vw, 1.75rem);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.anchor-navigation__item {
		display: flex;
	}

	.anchor-navigation__link {
		--anchor-tab-hover: var(--anchor-navigation-orange);
		display: flex;
		width: 100%;
		min-height: 3.75rem;
		align-items: center;
		justify-content: center;
		padding: 0.85rem 1rem;
		background: #f0f0f0;
		color: var(--anchor-navigation-blue);
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color 180ms ease, color 180ms ease;

		&:hover,
		&:focus-visible {
			background: var(--anchor-tab-hover);
			color: #fff;
		}
	}
}

@media (max-width: 56rem) {
	.panel--anchor-navigation {
		.anchor-navigation__inner {
			display: block;
			padding-inline: 0;
		}

		.anchor-navigation__title {
			width: min(100% - (2 * var(--research-gutter)), var(--research-wide-width));
			margin-inline: auto;
		}

		.anchor-navigation__nav {
			overflow-x: auto;
			scrollbar-width: thin;
		}

		.anchor-navigation__tabs {
			width: max-content;
			min-width: 100%;
			padding-inline: var(--research-gutter);
		}

		.anchor-navigation__item {
			flex-basis: 11rem;
		}
	}
}

@media (max-width: 36rem) {
	.panel--anchor-navigation {
		.anchor-navigation__title {
			font-size: 1.25rem;
		}

		.anchor-navigation__link {
			min-height: 3.25rem;
			font-size: 0.875rem;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.panel--anchor-navigation .anchor-navigation__link {
		transition: none;
	}
}