/*
 * Anchor links.
 *
 * A rule-thin bar of jump links, normally directly under the page header.
 */

/*
 * Both of these exist for the bar and are set on the root because that is the
 * scrolling element. The offset is written by the JS once it knows how tall the
 * pinned bar is; until then it is zero, so a page without one is unaffected.
 */

html {
	scroll-padding-top: var(--sk-anchor-offset, 0);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.anchor-nav {
	position: relative;
	z-index: 9;
	border-bottom: 1px solid color-mix(in srgb, var(--sk-gray) 28%, transparent);
	background: var(--sk-white);

	/* Narrower than this the admin bar scrolls away with the page instead of
	   staying put, so there is nothing to clear. */

}

.anchor-nav--sticky {
	position: sticky;
	top: 0;
}

.admin-bar .anchor-nav--sticky {
	/* WordPress core's own property, so it keeps core's naming. */
	/* stylelint-disable-next-line custom-property-pattern */
	top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 600px) {
	.admin-bar .anchor-nav--sticky {
		top: 0;
	}
}

/*
	 * The bar scrolls sideways rather than wrapping. A second row would double
	 * the height of something that can be pinned to the top of the window, and
	 * on a narrow screen the labels are already the widest thing on the page.
	 */

.anchor-nav__inner {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.anchor-nav__list {
	display: flex;
	gap: clamp(1.25rem, 2.7vw, 1.75rem);

	/*
		 * A scroll container does not count its own end padding as scrollable
		 * overflow, so once the row is long enough to scroll the last label ends
		 * up flush against the edge of the screen. This puts the gutter back as
		 * something the scroller can actually reach.
		 */

	&::after {
		flex: none;
		inline-size: var(--sk-gutter);
		content: "";
	}
}

.anchor-nav__link {
	display: block;

	/* Transparent to begin with so marking a link current does not shift the
		   row by the height of the rule. */

	border-bottom: 2px solid transparent;
	padding-block: 0.8125rem 0.875rem;
	color: var(--sk-gray);
	font-family: var(--sk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
			color var(--sk-transition),
			border-color var(--sk-transition);

	&:hover,
	&:focus-visible {
		color: var(--sk-black);
		text-decoration: none;
	}

	&[aria-current] {
		border-bottom-color: var(--sk-accent);
		color: var(--sk-black);
	}
}