/**
 * P-13 — STICKY SUB-NAVIGATION SYSTEM
 *
 * Faithful port of the EIASM `.custom-sticky-nav` pattern (transfer register T-1).
 * Transforms an Elementor Icon List into a swipeable, auto-highlighting sticky
 * sub-nav with gradient fades and a smart arrow button.
 *
 * ---------------------------------------------------------------------------
 * MECHANISM CONTRACT — read before editing (track v2.0 §1.2)
 * ---------------------------------------------------------------------------
 * Pinning is done by **Elementor's native Sticky setting** on the section.
 * It is NOT done here.
 *
 *   - Do NOT add `position: sticky` / `position: fixed` to `.esls-subnav`.
 *   - Do NOT add `position: relative` to `.esls-subnav`, otherwise Elementor's
 *     native Sticky setting will break. (Same warning as the EIASM original.)
 *   - Do NOT introduce `overflow` on any ancestor section/container.
 *
 * Session D reimplemented this as hand-rolled `position: sticky; top: 80px` in
 * section custom_css and added a runtime `measure()` of the header. That is
 * defect X-1. The offset is a fixed constant in esls-subnav.js — never measured.
 *
 * Root class: `.esls-subnav`. Legacy alias `.esls-subnav-bba` is also bound so
 * pre-v0.1.9 markup keeps working; new markup should use `.esls-subnav`.
 *
 * @package esls-institutional-content
 * @version 0.1.9
 */

/* =====================================================================
   1. MAIN CONTAINER
   ===================================================================== */

.esls-subnav,
.esls-subnav-bba {
	/* Glassmorphism. NOTE: no `position` property here by design — see the
	   mechanism contract above. Elementor's native Sticky owns positioning. */
	z-index: var(--z-subnav, 40);
	background-color: rgba(251, 248, 241, 0.85); /* cream-primary @ 85% */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--esls-border-warm, #D4C9A8);
}

/* =====================================================================
   2. THE SCROLLABLE LIST
   Forces the Elementor Icon List into a horizontal, swipeable row.
   ===================================================================== */

.esls-subnav .elementor-widget-icon-list,
.esls-subnav-bba .elementor-widget-icon-list {
	position: relative;
	z-index: 1 !important; /* Base layer */
	width: 100%;
}

.esls-subnav .elementor-icon-list-items,
.esls-subnav-bba .elementor-icon-list-items {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	height: 3.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */

	/* Padding keeps the first/last items off the screen edge; the extra room on
	   the right stops text sliding under the arrow button. */
	padding-left: 20px !important;
	padding-right: 100px !important;
	margin: 0 !important;
}

/* Chrome / Safari / Edge */
.esls-subnav .elementor-icon-list-items::-webkit-scrollbar,
.esls-subnav-bba .elementor-icon-list-items::-webkit-scrollbar {
	display: none;
}

/* =====================================================================
   3. LIST ITEMS & ACTIVE STATE
   ===================================================================== */

.esls-subnav li.elementor-icon-list-item,
.esls-subnav-bba li.elementor-icon-list-item {
	margin: 0 32px 0 0 !important; /* 32px gap between links */
	height: 100%;
	display: flex;
	align-items: center;
	border-bottom: 2px solid transparent;
	transition: all var(--duration-slow, 300ms) var(--ease-out, ease);
	flex: 0 0 auto;
	cursor: pointer;
}

.esls-subnav li.elementor-icon-list-item:hover,
.esls-subnav-bba li.elementor-icon-list-item:hover {
	border-bottom: 2px solid rgba(21, 138, 178, 0.3); /* blue-400 @ 30% */
}

/* Active state — driven by the ScrollSpy in esls-subnav.js */
.esls-subnav li.elementor-icon-list-item.active-nav-link,
.esls-subnav-bba li.elementor-icon-list-item.active-nav-link {
	border-bottom: 2px solid var(--esls-blue-400, #158AB2) !important;
}

.esls-subnav li.elementor-icon-list-item.active-nav-link .elementor-icon-list-text,
.esls-subnav-bba li.elementor-icon-list-item.active-nav-link .elementor-icon-list-text {
	color: var(--esls-blue-400, #158AB2) !important;
	font-weight: 700 !important;
}

.esls-subnav .elementor-icon-list-text,
.esls-subnav-bba .elementor-icon-list-text {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 15px;
	color: var(--esls-text-secondary, #555555);
	white-space: nowrap; /* never wrap to two lines */
}

/* =====================================================================
   4. INJECTED ELEMENTS — gradient fades
   Injected by JS so they sit at the top DOM level inside the container,
   bypassing Elementor's z-index stacking.
   ===================================================================== */

.js-nav-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	pointer-events: none; /* CRITICAL: links stay clickable through the fade */
	z-index: 50 !important; /* Middle layer */
	transition: opacity var(--duration-slow, 300ms) var(--ease-out, ease);
}

.js-nav-fade-left {
	left: 0;
	width: 60px;
	background: linear-gradient(90deg, #FBF8F1 20%, rgba(251, 248, 241, 0) 100%);
	opacity: 0; /* hidden on load */
}

.js-nav-fade-right {
	right: 0;
	width: 180px;
	/* 50px of solid cream fully hides text sliding under the arrow */
	background: linear-gradient(-90deg, #FBF8F1 50px, rgba(251, 248, 241, 0) 100%);
	opacity: 1; /* visible on load */
}

.esls-subnav.show-left .js-nav-fade-left,
.esls-subnav-bba.show-left .js-nav-fade-left { opacity: 1; }

.esls-subnav.hide-right .js-nav-fade-right,
.esls-subnav-bba.hide-right .js-nav-fade-right { opacity: 0; }

/* =====================================================================
   5. INJECTED ELEMENTS — arrow button
   ===================================================================== */

.js-nav-btn {
	position: absolute !important;
	top: 50% !important;
	right: 12px !important;
	z-index: 100 !important; /* Top layer */

	width: 40px !important;
	height: 40px !important;
	background-color: var(--esls-cream-primary, #FBF8F1) !important;
	border-radius: 50% !important;

	box-shadow: 0 4px 12px rgba(26, 26, 46, 0.15), 0 0 0 1px rgba(26, 26, 46, 0.05) !important;
	border: none !important;
	cursor: pointer !important;

	display: none; /* JS toggles to flex when the list overflows */
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;

	animation: eslsNavWiggleRight 2s infinite ease-in-out;
	transform: translateY(-50%);
}

.js-nav-btn.is-visible { display: flex !important; }

.js-nav-btn:hover {
	animation-play-state: paused;
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 8px 20px rgba(26, 26, 46, 0.2) !important;
}

.js-nav-btn:focus-visible {
	outline: 2px solid var(--esls-orange-400, #E87722) !important;
	outline-offset: 2px !important;
}

.js-nav-btn svg {
	width: 20px !important;
	height: 20px !important;
	stroke: var(--esls-blue-400, #158AB2) !important;
	stroke-width: 2.5px !important;
	fill: none !important;
	transition: transform 400ms var(--ease-out, ease);
}

/* End of list reached — flips to a "back to start" button */
.js-nav-btn.is-flipped {
	background-color: var(--esls-blue-400, #158AB2) !important;
	box-shadow: 0 4px 12px rgba(21, 138, 178, 0.4) !important;
	animation: eslsNavWiggleLeft 2s infinite ease-in-out;
}

.js-nav-btn.is-flipped svg {
	transform: rotate(180deg);
	stroke: #FFFFFF !important;
}

/* =====================================================================
   6. ANIMATIONS
   ===================================================================== */

@keyframes eslsNavWiggleRight {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(5px); }
}

@keyframes eslsNavWiggleLeft {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(-5px); }
}

@media (prefers-reduced-motion: reduce) {
	.js-nav-btn { animation: none !important; }
	.js-nav-btn svg { transition: none !important; }
	.esls-subnav li.elementor-icon-list-item,
	.esls-subnav-bba li.elementor-icon-list-item { transition: none !important; }
}