/* Sub Navigation — sticky dark strip of section links below the hero.
   Values measured from the reference compiled CSS; rules written fresh. */

.sub-navigation {
	background-color: var(--color-soft-black);
	border-top: 1px solid var(--color-gray-900);
	min-width: 0;
	padding: 15px;
	position: sticky;
	top: calc(var(--header-height) + var(--wp-admin-bar-height, 0px));
	z-index: 22;
}
@media screen and (min-width: 768px) {
	.sub-navigation { padding: 13px 15px; }
}

.sub-navigation__grid {
	display: flex;
	margin: 0 -15px;
	-ms-overflow-style: none;
	overflow: auto;
	position: relative;
	scrollbar-width: none;
	white-space: nowrap;
}
.sub-navigation__grid::-webkit-scrollbar { display: none; }
.sub-navigation__grid a:first-of-type {
	margin: 0;
	padding-left: 15px;
}
.sub-navigation__grid a:last-of-type { padding-right: 15px; }
.sub-navigation__grid a + a { margin-left: 40px; }
@media screen and (min-width: 768px) {
	.sub-navigation__grid {
		align-items: center;
		justify-content: center;
		margin-right: 0;
	}
}

.sub-navigation__link {
	color: var(--color-soft-white);
	text-decoration: none;
	text-transform: uppercase;
	transition-duration: var(--transition-time);
	transition-property: color;
	transition-timing-function: var(--transition-easing);
}
.sub-navigation__link--active,
.sub-navigation__link:hover { color: var(--color-gray-600); }
.sub-navigation__link--active:hover { color: var(--color-soft-white); }

/* Admin bar offset when logged in locally */
body.admin-bar .sub-navigation {
	top: calc(var(--header-height) + 32px);
}