/* Expereo Post Templates — section nav built from the post's headings. */

/* The widget's own wrappers must never clip the sticky nav; a clipping ancestor
   makes position: sticky pin to that box instead of travelling its column. This
   only reaches the widget's wrappers — an overflow:hidden or transform on the
   Elementor column holding it still has to be cleared in the editor. */
.elementor-widget-ept_post_nav,
.elementor-widget-ept_post_nav > .elementor-widget-container {
	overflow: visible;
}

.ept-nav {
	--ept-nav-indent: 0px;
	--ept-nav-offset: 120px;
	/* Space the in-view marker sits in, reserved on every row so the text does
	   not shift sideways as the marker appears and disappears. At 0 the links sit
	   hard against the left edge and the marker collapses with it — the in-view
	   entry is then shown by its weight alone. */
	--ept-nav-gutter: 0px;
	position: relative;
	/* As a flex child the nav can be crushed to its longest word when a sibling
	   (an overflowing tab panel, say) refuses to shrink. This floor raises the
	   column's automatic minimum so it cannot collapse that far; lifted on narrow
	   screens below. Override --ept-nav-min-width to suit a deliberately slim
	   column. */
	min-width: var(--ept-nav-min-width, 180px);
	/* Fade back in once a reposition has settled, so the one-frame hop a tab
	   switch causes is not seen. */
	transition: opacity 0.2s ease;
}

/* Held on while the nav is being repositioned after a tab switch: hidden
   instantly (no transition), then revealed with the fade above once settled.
   The same pair applies to a sibling heading in the column, tagged .ept-fade so
   it carries the fade transition and moves with the nav. */
.ept-fade {
	transition: opacity 0.2s ease;
}

.ept-nav.is-settling,
.ept-fade.is-settling {
	opacity: 0;
	transition: none;
}

.ept-nav--sticky {
	position: sticky;
	/* `top` is set by the widget's control. */
}

/* Neutralises an Elementor container Sticky (including its "effects" variant)
   wrapping the nav, for the mobile live-resize case Elementor does not tear down
   itself. !important is required: Elementor rewrites the element's inline
   position:fixed and offsets on every scroll frame, and only an important author
   rule outranks inline styles. JS adds this class only in mobile mode. */
.ept-unstick.ept-unstick {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	inset-inline-start: auto !important;
	inset-inline-end: auto !important;
	inset: auto !important;
	width: auto !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transform: none !important;
}

/* With the container forced back into flow above, Elementor's sticky spacer (which
   reserves the container's height while it is fixed) becomes dead space that pushes
   the content down. Hiding it in CSS keeps it gone even when Elementor re-inserts or
   resizes it on scroll. The host class is set by JS on the spacer's parent. */
.ept-unstick-host > .elementor-sticky__spacer {
	display: none !important;
}

.ept-nav__title {
	margin: 0 0 12px;
	font-weight: 600;
}

.ept-nav__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ept-nav;
}

/* Insertion point for headings found in the browser. Carries the hidden
   attribute too, but a display rule on the list could out-specify that. */
.ept-nav__marker {
	display: none !important;
}

.ept-nav__item {
	margin: 0;
	padding-left: calc(var(--ept-nav-depth, 0) * var(--ept-nav-indent));
}

.ept-nav__link {
	position: relative;
	display: block;
	padding-left: var(--ept-nav-gutter);
	text-decoration: none;
	line-height: 1.35;
	transition: color 0.2s ease;
}

/* The marker sits in the link's own padding, so it can appear without moving
   the text — an indent that shifted on scroll would be very distracting. With
   the gutter at 0 there is nowhere to draw it, so it is dropped rather than
   laid over the first character. */
.ept-nav__link::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0;
	/* Never wider than the gutter it lives in, so a gutter of 0 collapses the
	   marker to nothing instead of laying it over the first letter. */
	width: min(3px, var(--ept-nav-gutter));
	height: 0;
	border-radius: 2px;
	background: transparent;
	transition: height 0.25s ease, background 0.25s ease;
}

.ept-nav__item.is-current > .ept-nav__link {
	font-weight: 600;
}

.ept-nav__item.is-current > .ept-nav__link::before {
	height: calc(100% - 0.7em);
}

.ept-nav--numbered .ept-nav__link::after {
	counter-increment: ept-nav;
}

.ept-nav--numbered .ept-nav__link {
	padding-left: 0;
}

.ept-nav--numbered .ept-nav__item::before {
	counter-increment: ept-nav;
	content: counter(ept-nav) ".";
	margin-right: 6px;
	opacity: 0.6;
}

.ept-nav--numbered .ept-nav__item {
	display: flex;
}

/* Fallback only, for when the script has not run. The real offset is applied to
   each heading by post-nav.js: it is the nav that carries --ept-nav-offset, and
   the headings are not inside the nav, so they cannot inherit it. Anything the
   script reaches gets an inline scroll-margin-top that overrides this. */
.ept-post-content :is(h2, h3, h4)[id] {
	scroll-margin-top: 120px;
}

@media (prefers-reduced-motion: reduce) {
	.ept-nav__link,
	.ept-nav__link::before {
		transition: none;
	}
}

/* Narrow screens: drop the collapse floor so a full-width nav can still shrink
   to fit rather than forcing a horizontal scroll. */
@media (max-width: 600px) {
	.ept-nav {
		min-width: 0;
	}
}