/*
 * Sticky TOC presentation layer.
 *
 * The real Elementor widget remains the only runtime-owned TOC. The portal
 * carries only the wrapper class needed for generated Elementor CSS and never
 * carries a widget class, data-id, or data-element_type attribute.
 */
.webbo-mobile-toc-style-scope,
.webbo-mobile-toc-style-scope-layer {
	display: contents !important;
}

.webbo-mobile-toc-portal {
	position: static !important;
	display: block !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
	pointer-events: none !important;
}

.webbo-mobile-toc-portal > .elementor-widget-container,
.webbo-mobile-toc-portal .webbo-mobile-toc-portal-surface {
	position: static !important;
	display: block !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/*
 * Keep Elementor's source TOC alive so its own heading scanner can populate
 * and maintain the list. Only its visual footprint is collapsed.
 */
.webbo-toc-source-mobile-active,
.webbo-toc-hide-native-breakpoint {
	position: relative !important;
	min-height: 0 !important;
}

.webbo-toc-source-mobile-active > .elementor-widget-container,
.webbo-toc-hide-native-breakpoint > .elementor-widget-container {
	min-height: 0 !important;
	overflow: visible !important;
}

.webbo-toc-source-mobile-active > .elementor-widget-container > .elementor-toc,
.webbo-toc-hide-native-breakpoint > .elementor-widget-container > .elementor-toc,
.webbo-toc-hide-native-breakpoint .elementor-widget-container .elementor-toc {
	position: absolute !important;
	display: block !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 1px !important;
	max-height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
}

.webbo-mobile-toc-bar {
	position: fixed !important;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: var(--webbo-mobile-toc-fixed-width, 100%) !important;
	max-width: none !important;
	min-height: 0;
	margin: 0 !important;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	border-style: solid;
	border-width: 0;
	border-color: transparent;
	border-radius: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: start;
	cursor: pointer;
	overflow: hidden;
	pointer-events: auto !important;
	z-index: calc(var(--webbo-mobile-toc-z-index, 100) + 2) !important;
}

.webbo-mobile-toc-bar::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Keep live theme and global button rules from shifting the Sticky Header. */
.webbo-mobile-toc-portal .webbo-mobile-toc-bar,
.webbo-mobile-toc-portal .webbo-mobile-toc-bar:hover,
.webbo-mobile-toc-portal .webbo-mobile-toc-bar:focus,
.webbo-mobile-toc-portal .webbo-mobile-toc-bar:active {
	padding:
		var(--webbo-mobile-toc-bar-padding-top, 12px)
		var(--webbo-mobile-toc-bar-padding-right, 20px)
		var(--webbo-mobile-toc-bar-padding-bottom, 12px)
		var(--webbo-mobile-toc-bar-padding-left, 20px) !important;
}

.webbo-mobile-toc-in-scope .webbo-mobile-toc-bar,
.webbo-mobile-toc-leaving .webbo-mobile-toc-bar {
	display: flex;
}

.webbo-mobile-toc-portal[data-webbo-mobile-position="top"] .webbo-mobile-toc-bar {
	top: var(--webbo-mobile-toc-current-top, var(--webbo-mobile-toc-top-offset, 0px)) !important;
	bottom: auto !important;
	left: var(--webbo-mobile-toc-fixed-left, 0px) !important;
	right: auto !important;
}

.webbo-mobile-toc-portal[data-webbo-mobile-position="bottom"] .webbo-mobile-toc-bar {
	top: auto !important;
	bottom: var(--webbo-mobile-toc-current-bottom, var(--webbo-mobile-toc-bottom-offset, 0px)) !important;
	left: var(--webbo-mobile-toc-fixed-left, 0px) !important;
	right: auto !important;
}

.webbo-mobile-toc-current-label {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.webbo-mobile-toc-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--webbo-mobile-toc-header-text-color, inherit) !important;
	transition: transform var(--webbo-mobile-toc-dropdown-duration, 220ms) ease;
}

.webbo-mobile-toc-chevron[hidden] {
	display: none !important;
}

.webbo-mobile-toc-chevron svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.webbo-mobile-toc-open .webbo-mobile-toc-chevron {
	transform: rotate(180deg);
}

.webbo-mobile-toc-bar:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/*
 * The dropdown remains mounted while the active breakpoint is selected. This
 * gives open and close transitions one stable element without moving the real
 * Elementor widget.
 */
.webbo-mobile-toc-dropdown {
	position: fixed !important;
	display: block !important;
	width: var(--webbo-mobile-toc-fixed-width, 100%) !important;
	max-width: none !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-right: var(--webbo-mobile-toc-dropdown-padding-right, var(--webbo-mobile-toc-inherited-dropdown-padding-right, 0px)) !important;
	padding-bottom: 0 !important;
	padding-left: var(--webbo-mobile-toc-dropdown-padding-left, var(--webbo-mobile-toc-inherited-dropdown-padding-left, 0px)) !important;
	box-sizing: border-box;
	overflow: hidden !important;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	pointer-events: none !important;
	transform: translateY(-8px);
	transition:
		max-height var(--webbo-mobile-toc-dropdown-duration, 220ms) ease,
		padding-top var(--webbo-mobile-toc-dropdown-duration, 220ms) ease,
		padding-bottom var(--webbo-mobile-toc-dropdown-duration, 220ms) ease,
		opacity var(--webbo-mobile-toc-dropdown-duration, 220ms) ease,
		transform var(--webbo-mobile-toc-dropdown-duration, 220ms) ease,
		visibility 0s linear var(--webbo-mobile-toc-dropdown-duration, 220ms);
	z-index: calc(var(--webbo-mobile-toc-z-index, 100) + 1) !important;
}

.webbo-mobile-toc-portal[data-webbo-mobile-position="top"] .webbo-mobile-toc-dropdown {
	top: var(--webbo-mobile-toc-dropdown-top, 0px) !important;
	bottom: auto !important;
	left: var(--webbo-mobile-toc-fixed-left, 0px) !important;
	right: auto !important;
}

.webbo-mobile-toc-portal[data-webbo-mobile-position="bottom"] .webbo-mobile-toc-dropdown {
	top: auto !important;
	bottom: var(--webbo-mobile-toc-dropdown-bottom, 0px) !important;
	left: var(--webbo-mobile-toc-fixed-left, 0px) !important;
	right: auto !important;
	transform: translateY(8px);
}

.webbo-mobile-toc-open .webbo-mobile-toc-dropdown {
	max-height: var(--webbo-mobile-toc-dropdown-max-height, 60vh) !important;
	padding-top: var(--webbo-mobile-toc-dropdown-padding-top, var(--webbo-mobile-toc-inherited-dropdown-padding-top, 0px)) !important;
	padding-bottom: var(--webbo-mobile-toc-dropdown-padding-bottom, var(--webbo-mobile-toc-inherited-dropdown-padding-bottom, 0px)) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	opacity: 1;
	visibility: visible;
	pointer-events: auto !important;
	transform: translateY(0) !important;
	transition-delay: 0s;
}

/* Elementor preview navigation must cover the Sticky TOC as it does live. */
body.webbo-toc-editor-menu-open .webbo-mobile-toc-editor-preview .webbo-mobile-toc-bar,
body.webbo-toc-editor-menu-open .webbo-mobile-toc-editor-preview .webbo-mobile-toc-dropdown {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Keep the editor-only control above Elementor selection overlays. */
.webbo-mobile-toc-editor-preview .webbo-mobile-toc-bar {
	z-index: 2147483000 !important;
}

.webbo-mobile-toc-editor-preview .webbo-mobile-toc-dropdown {
	z-index: 2147482999 !important;
}

/* Native TOC widget selectors do not target the presentation-only proxy. */
.webbo-mobile-toc-portal .elementor-toc__list-wrapper {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Elementor can retain a real SVG marker at zero width and keep its 8px
 * margin. Webbo's marker-free state removes every native marker form and its
 * layout slot while leaving nested-list indentation under Elementor control.
 */
.webbo-toc-marker-none .elementor-toc__list-item-text-wrapper::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	margin: 0 !important;
	margin-inline-end: 0 !important;
}

.webbo-toc-marker-none .elementor-toc__list-item-text-wrapper > i,
.webbo-toc-marker-none .elementor-toc__list-item-text-wrapper > svg,
.webbo-toc-marker-none .elementor-toc__list-item-text-wrapper > .elementor-icon {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	margin-inline-end: 0 !important;
	flex: 0 0 0 !important;
}

/*
 * Elementor has no native marker-free TOC mode. Sticky List keeps its own
 * marker choice so hiding a marker also removes the column reserved for it.
 */
.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-wrapper {
	list-style: none !important;
	list-style-type: none !important;
	padding-inline-start: 0 !important;
	padding-left: 0 !important;
	margin-inline-start: 0 !important;
}

.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item {
	list-style: none !important;
	list-style-type: none !important;
}

.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item::marker {
	content: "" !important;
	font-size: 0 !important;
}

.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item::before,
.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item-text-wrapper::before,
.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item-text::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	margin: 0 !important;
}

.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item-text-wrapper > i,
.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item-text-wrapper > svg,
.webbo-mobile-toc-portal:not([data-webbo-mobile-markers="follow_list"]) .elementor-toc__list-item-text-wrapper > .elementor-icon {
	display: none !important;
}

.webbo-mobile-toc-portal .elementor-toc__list-item-text-wrapper {
	display: flex;
	align-items: center;
}

.webbo-mobile-toc-portal .elementor-toc__list-item-text {
	min-width: 0;
	flex: 1 1 auto;
	text-decoration: none;
}

/*
 * Elementor makes the current TOC link bold independently of its List
 * typography. The sticky proxy resolves the non-active list weight once and
 * keeps that same weight when a link becomes active.
 */
.webbo-mobile-toc-portal .elementor-toc__list-item-text.elementor-item-active {
	font-weight: var(--webbo-mobile-toc-list-font-weight, inherit) !important;
}

.webbo-mobile-toc-portal[data-webbo-mobile-dropdown-smooth="no"] .webbo-mobile-toc-dropdown,
.webbo-mobile-toc-portal[data-webbo-mobile-dropdown-smooth="no"] .webbo-mobile-toc-chevron {
	transition: none !important;
}

/* Current heading title transitions. */
.webbo-mobile-toc-portal[data-webbo-mobile-title-animation="fade"].webbo-mobile-toc-title-animating .webbo-mobile-toc-current-label {
	animation: webbo-mobile-toc-title-fade var(--webbo-mobile-toc-title-duration, 180ms) ease both;
}

.webbo-mobile-toc-portal[data-webbo-mobile-title-animation="slide_up"].webbo-mobile-toc-title-animating .webbo-mobile-toc-current-label {
	animation: webbo-mobile-toc-title-slide-up var(--webbo-mobile-toc-title-duration, 180ms) cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes webbo-mobile-toc-title-fade {
	0% { opacity: 1; }
	45% { opacity: 0; }
	55% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes webbo-mobile-toc-title-slide-up {
	0% { opacity: 1; transform: translateY(0); }
	44% { opacity: 0; transform: translateY(-115%); }
	50% { opacity: 0; transform: translateY(115%); }
	56% { opacity: 0; transform: translateY(115%); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Visibility transitions. */
.webbo-mobile-toc-entering[data-webbo-mobile-entrance-animation="fade"] .webbo-mobile-toc-bar {
	animation: webbo-mobile-toc-fade-in var(--webbo-mobile-toc-visibility-duration, 220ms) ease both;
}

.webbo-mobile-toc-entering[data-webbo-mobile-entrance-animation="slide_down"] .webbo-mobile-toc-bar {
	animation: webbo-mobile-toc-slide-down var(--webbo-mobile-toc-visibility-duration, 220ms) ease both;
}

.webbo-mobile-toc-leaving[data-webbo-mobile-exit-animation="fade"] .webbo-mobile-toc-bar {
	animation: webbo-mobile-toc-fade-out var(--webbo-mobile-toc-visibility-duration, 220ms) ease both;
}

.webbo-mobile-toc-leaving[data-webbo-mobile-exit-animation="slide_up"] .webbo-mobile-toc-bar {
	animation: webbo-mobile-toc-slide-up var(--webbo-mobile-toc-visibility-duration, 220ms) ease both;
}

@keyframes webbo-mobile-toc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes webbo-mobile-toc-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes webbo-mobile-toc-slide-down {
	from { opacity: 0; transform: translateY(-100%); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes webbo-mobile-toc-slide-up {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.webbo-mobile-toc-chevron,
	.webbo-mobile-toc-dropdown,
	.webbo-mobile-toc-bar,
	.webbo-mobile-toc-current-label {
		transition: none !important;
		animation: none !important;
	}
}