/* ============================================================
   Mobile TOC Sticky Dropdown  –  v2.1.0
   Targets .mtoc-widget injected by mobile-toc-sticky.js.
   Active only at ≤ 768 px — no effect on desktop.
   ============================================================ */

/* ── Desktop safety fallback ──────────────────────────────── */
.mtoc-widget {
	display: none;
}

@media (max-width: 768px) {

	/* Hide the original sticky sidebar container on mobile so the
	   empty Elementor column does not create a gap in the layout. */
	.sticky-inner-container {
		display: none !important;
	}

	/* ── Sticky container ───────────────────────────────────── */
	.mtoc-widget {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		/*
		 * top is driven by the CSS variable --mtoc-top, which JS updates
		 * via MutationObserver whenever the site-header class changes.
		 * The transition matches the header's own slide animation.
		 */
		top: var(--mtoc-top, 0px);
		transition: top 0.4s ease-out, opacity 0.25s ease, transform 0.25s ease;
		z-index: 9998;
		background: #fff;
		border-bottom: 1px solid #eee;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		font-family: var(--body-font, "Jost", sans-serif);
		overflow: visible;
		/* Hidden by default — JS adds .mtoc--visible when in scroll range */
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
	}

	.mtoc-widget.mtoc--visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* ── Header bar ─────────────────────────────────────────── */
	.mtoc-widget .mtoc-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		gap: 10px;
	}

	.mtoc-widget .mtoc-title {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--primary-color, #b99d75);
		line-height: 1;
		flex: 1;
	}

	/* ── Chevron icon ──────────────────────────────────────── */
	.mtoc-widget .mtoc-chevron {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		color: var(--primary-color, #b99d75);
		transition: transform 0.3s ease;
	}

	.mtoc-widget .mtoc-chevron svg {
		display: block;
		width: 14px;
		height: 14px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Rotation when open */
	.mtoc-widget.mtoc--open .mtoc-chevron {
		transform: rotate(180deg);
	}

	/* ── Collapsible body ──────────────────────────────────── */
	.mtoc-widget .mtoc-body {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease;
		background: #fff;
	}

	.mtoc-widget.mtoc--open .mtoc-body {
		max-height: 60vh;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--primary-color, #b99d75) #f5f5f5;
	}

	.mtoc-widget.mtoc--open .mtoc-body::-webkit-scrollbar {
		width: 4px;
	}

	.mtoc-widget.mtoc--open .mtoc-body::-webkit-scrollbar-track {
		background: #f5f5f5;
	}

	.mtoc-widget.mtoc--open .mtoc-body::-webkit-scrollbar-thumb {
		background: var(--primary-color, #b99d75);
		border-radius: 2px;
	}

	/* ── Inner list ────────────────────────────────────────── */
	.mtoc-widget ul.cs-list {
		list-style: none;
		margin: 0;
		padding: 0 0 8px;
	}

	.mtoc-widget ul.cs-list li {
		margin: 0;
		padding: 0;
		position: relative;
		border-top: 1px solid #f0f0f0;
		transition: background 0.2s ease;
	}

	.mtoc-widget ul.cs-list li .list-content {
		display: block;
		padding: 11px 20px;
		font-family: var(--body-font, "Jost", sans-serif);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--content-color, #333632);
		transition: color 0.2s ease;
		pointer-events: none; /* the <a> overlay handles the click */
	}

	/* The list-link is an empty <a> that covers the entire list item */
	.mtoc-widget ul.cs-list li a.list-link {
		position: absolute;
		inset: 0;
		display: block;
		text-decoration: none;
	}

	/* Hover state */
	.mtoc-widget ul.cs-list li:hover .list-content {
		color: var(--primary-color, #b99d75);
	}

	/* Active state set by JS */
	.mtoc-widget ul.cs-list li.mtoc-active {
		background: rgba(185, 157, 117, 0.05);
		border-left: 3px solid var(--primary-color, #b99d75);
	}

	.mtoc-widget ul.cs-list li.mtoc-active .list-content {
		color: var(--primary-color, #b99d75);
		padding-left: 17px; /* 20px - 3px border */
	}

	/* Hide any icon spans from the original widget */
	.mtoc-widget ul.cs-list li .list-icon {
		display: none;
	}

} /* end @media (max-width: 768px) */