/* Everest Custom Elements: section-nav.css
   everest_section_nav. Pinning is done by section-nav.js (IntersectionObserver), never CSS sticky.
   Mobile (<=767px): horizontal scroll row with fade edges, not pinned. */

.ehf-subnav {
	position: relative;
	z-index: 20;
	font-family: var(--ehf-ff-body);
}

.ehf-subnav[hidden] {
	display: none;
}

.ehf-subnav__sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ehf-subnav__bar {
	box-sizing: border-box;
	min-height: 56px;
	width: 100%;
	background: var(--ehf-c-tint-100);
}

.ehf-subnav--chips .ehf-subnav__bar {
	background: var(--ehf-c-surface);
	border-bottom: 1px solid var(--ehf-c-line);
}

.ehf-subnav__nav {
	position: relative;
	box-sizing: border-box;
	max-width: var(--ehf-container);
	margin-inline: auto;
	padding-inline: var(--ehf-gutter);
}

.ehf-subnav__scroll {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ehf-subnav__scroll::-webkit-scrollbar {
	display: none;
}

.ehf-subnav__list {
	display: flex;
	align-items: stretch;
	gap: var(--ehf-s-1);
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.ehf-subnav__item {
	display: flex;
	margin: 0;
}

.ehf-subnav__link,
.ehf-subnav__link:link,
.ehf-subnav__link:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 56px;
	padding: 0 var(--ehf-s-2);
	font-family: var(--ehf-ff-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ehf-c-ink);
	text-decoration: none;
	transition: color var(--ehf-dur) var(--ehf-ease);
}

.ehf-subnav__link:hover {
	color: var(--ehf-c-primary);
}

.ehf-subnav__link[aria-current="true"],
.ehf-subnav__link.is-active {
	color: var(--ehf-c-primary);
}

/* Tabs: active tab gets a 2px primary underline */
.ehf-subnav--tabs .ehf-subnav__link::after {
	content: "";
	position: absolute;
	left: var(--ehf-s-2);
	right: var(--ehf-s-2);
	bottom: 0;
	height: 2px;
	background: var(--ehf-c-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ehf-dur) var(--ehf-ease);
}

.ehf-subnav--tabs .ehf-subnav__link[aria-current="true"]::after,
.ehf-subnav--tabs .ehf-subnav__link.is-active::after {
	transform: scaleX(1);
}

/* Chips */
.ehf-subnav--chips .ehf-subnav__list {
	align-items: center;
	padding-block: 10px;
}

.ehf-subnav--chips .ehf-subnav__link,
.ehf-subnav--chips .ehf-subnav__link:link,
.ehf-subnav--chips .ehf-subnav__link:visited {
	min-height: 44px;
	padding: 0 var(--ehf-s-2);
	border: 1px solid var(--ehf-c-tint-200);
	border-radius: var(--ehf-r-pill);
	background: var(--ehf-c-surface);
}

.ehf-subnav--chips .ehf-subnav__link:hover {
	border-color: var(--ehf-c-primary);
}

.ehf-subnav--chips .ehf-subnav__link[aria-current="true"],
.ehf-subnav--chips .ehf-subnav__link.is-active {
	background: var(--ehf-c-primary);
	border-color: var(--ehf-c-primary);
	color: #ffffff;
}

/* Spacer replaces the bar in the flow while it is pinned */
.ehf-subnav__spacer {
	display: none;
	height: 56px;
}

/* Pinned state (>=768px only; the script never adds it below that) */
@media (min-width: 768px) {
	.ehf-subnav.is-pinned .ehf-subnav__bar {
		position: fixed;
		top: var(--ehf-header-h);
		left: 0;
		right: 0;
		z-index: 20;
		box-shadow: var(--ehf-shadow-2);
	}

	.ehf-subnav.is-pinned .ehf-subnav__spacer {
		display: block;
		height: var(--ehf-subnav-h-measured, 56px);
	}
}

/* Mobile: horizontal scroll row with fade edges */
@media (max-width: 767px) {
	.ehf-subnav__nav {
		padding-inline: 0;
	}

	.ehf-subnav__list {
		padding-inline: var(--ehf-gutter);
	}

	.ehf-subnav__nav::before,
	.ehf-subnav__nav::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 1;
		width: 28px;
		pointer-events: none;
		opacity: 0;
		transition: opacity var(--ehf-dur) var(--ehf-ease);
	}

	.ehf-subnav__nav::before {
		left: 0;
		background: linear-gradient(90deg, var(--ehf-subnav-fade, var(--ehf-c-tint-100)), transparent);
	}

	.ehf-subnav__nav::after {
		right: 0;
		background: linear-gradient(270deg, var(--ehf-subnav-fade, var(--ehf-c-tint-100)), transparent);
	}

	.ehf-subnav--chips {
		--ehf-subnav-fade: var(--ehf-c-surface);
	}

	.ehf-subnav.has-more-left .ehf-subnav__nav::before,
	.ehf-subnav.has-more-right .ehf-subnav__nav::after {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ehf-subnav__link,
	.ehf-subnav--tabs .ehf-subnav__link::after,
	.ehf-subnav__nav::before,
	.ehf-subnav__nav::after {
		transition: none;
	}
}