/**
 * Navigation band: `border-b bg-surface-cool`, the list `flex gap-x-8
 * overflow-x-auto` without a scrollbar, its links centered as the header's
 * navigation is (auto margins on the first and last item, which give way
 * when the list scrolls, so the first link stays reachable), each link the
 * listing page's tab
 * (listing.css, MyListing's profile menu): 48px tall, 14px at weight 500
 * in the light charcoal, dark red on hover and on the current page, with
 * the 2px brand-red line that grows in from the left over 0.3s on hover
 * and stays under the current page. An entry that leaves the site carries
 * arrow-up-right.
 */

.sba-c-page-nav {
	border-bottom: 1px solid var(--sba-border);
	background-color: var(--sba-surface-cool);
}

.sba-c-page-nav ul {
	display: flex;
	gap: 0 32px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.sba-c-page-nav ul::-webkit-scrollbar {
	display: none;
}

.sba-c-page-nav li {
	flex: 0 0 auto;
	margin: 0;
}

.sba-c-page-nav li:first-child {
	margin-left: auto;
}

.sba-c-page-nav li:last-child {
	margin-right: auto;
}

.sba-c-page-nav li a {
	position: relative;
	display: flex;
	align-items: center;
	height: 48px;
	color: var(--sba-charcoal-light);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--sba-duration-hover) ease;
}

.sba-c-page-nav li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--sba-red);
	transition: width 0.3s ease;
}

.sba-c-page-nav li a:hover,
.sba-c-page-nav li a[aria-current="page"] {
	color: var(--sba-red-dark);
	text-decoration: none;
}

.sba-c-page-nav li a:hover::after,
.sba-c-page-nav li a[aria-current="page"]::after {
	width: 100%;
}

.sba-c-page-nav li a .sba-i {
	margin-left: 4px;
	font-size: 14px;
	line-height: 1;
}

.sba-c-page-nav li a:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: -2px;
}

/* On a legacy page the band stands in the old menu widget, whose class
   `subnav` style.css centers and separates with pipes. Neither applies to
   the band, and the band fills the column: the widget reaches over the
   column's 10px of padding, and its container keeps the links on the
   column's content edge. */
.elementor-widget-wrap > .elementor-element.subnav {
	width: calc(100% + 20px);
	margin: 0 -10px;
}

.subnav .sba-c-page-nav .sba-c-container {
	padding-right: 10px;
	padding-left: 10px;
}

.subnav .sba-c-page-nav ul {
	text-align: left;
}

.subnav .sba-c-page-nav li::before {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-page-nav li a::after {
		transition: none;
	}
}