/**
 * "On This Page" sticky sidebar TOC — Fortinet-docs-style vertical
 * timeline: a continuous line through numbered section dots, sub-item
 * dots nested underneath, a live read-progress percentage, and a
 * collapse toggle. Lives as the first widget in the existing post
 * sidebar (see inc/table-of-contents.php for the markup this styles).
 */

:root {
	--toc-blue: #216be9;
	--toc-blue-soft: rgba(33, 107, 233, 0.14);
	--toc-ink: #0f172a;
	--toc-muted: #64748b;
	--toc-line: #dbe3ee;
	--toc-dot-passed: #8fb2f2;
	--toc-card-bg: #ffffff;
	--toc-card-border: #e6eaf1;
}

/* Under the old Blogsy theme this widget deliberately wasn't sticky
   itself -- Blogsy's own .sidebar-container-inner wrapper was already
   sticky and stuck the whole widget stack as one unit. GeneratePress
   core has no equivalent built-in sticky-sidebar behavior (confirmed --
   that's a Premium-only add-on, not present here), so without its own
   position:sticky the TOC just scrolled away with the rest of the page.
   Made sticky directly on the widget itself instead; the internal list
   still scrolls on its own via max-height + overflow, so a long TOC
   doesn't grow taller than the viewport. */

/* Real bug found via a live scroll test: position:sticky only stays
   pinned within its CONTAINING BLOCK -- here that's .inside-right-
   sidebar, GeneratePress's own sidebar-content wrapper. #right-sidebar
   (its parent) gets stretched to the full article height by #content's
   flex layout, but .inside-right-sidebar itself is a plain block that
   only takes its own natural content height (just the widget stack,
   ~1600px) -- nowhere near the length of a long article (~9000px+).
   So the TOC would run out of "room to roam" and unstick after barely
   a screen's worth of scrolling, then just drag away with the rest of
   the page for the remaining length of the article (confirmed live:
   at scrollY 1500 the TOC had already scrolled -421px off-screen).
   Stretching this wrapper to the full sidebar height via flex gives the
   sticky TOC the whole article's length to stay pinned in. */
#right-sidebar {
	display: flex;
	flex-direction: column;
}

.inside-right-sidebar {
	flex: 1;
}

.nc-toc-widget {
	position: sticky;
	top: 20px;
	background: var(--toc-card-bg) !important;
	border: 1px solid var(--toc-card-border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.nc-toc__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	cursor: pointer;
	user-select: none;
	border-bottom: 1px solid var(--toc-card-border);
	flex: 0 0 auto;
}

.nc-toc__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--toc-muted);
	flex: 1 1 auto;
}

.nc-toc__progress {
	font-size: 12px;
	font-weight: 700;
	color: var(--toc-blue);
	background: var(--toc-blue-soft);
	border-radius: 999px;
	padding: 2px 9px;
	min-width: 38px;
	text-align: center;
}

.nc-toc__toggle {
	display: flex;
	color: var(--toc-muted);
	transition: transform 0.25s ease;
	flex: 0 0 auto;
}

.nc-toc-widget.is-collapsed .nc-toc__toggle {
	transform: rotate(-90deg);
}

.nc-toc__body {
	padding: 10px 16px 14px 18px;
	max-height: min(72vh, 620px);
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.nc-toc-widget.is-collapsed .nc-toc__body {
	max-height: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
}

.nc-toc__list,
.nc-toc__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nc-toc__item {
	position: relative;
	border-left: 2px solid var(--toc-line);
	padding-left: 18px;
}

.nc-toc__item:last-child {
	border-left-color: transparent;
}

.nc-toc__sublist .nc-toc__item:last-child {
	border-left-color: var(--toc-line);
}

.nc-toc__link {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-decoration: none;
	padding: 4px 0;
	line-height: 1.3;
}

.nc-toc__dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--toc-card-bg);
	border: 2px solid var(--toc-line);
	margin-left: -23px;
	margin-top: 3px;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.nc-toc__dot--sub {
	width: 6px;
	height: 6px;
	margin-left: -21.5px;
	margin-top: 5px;
}

.nc-toc__item--top .nc-toc__dot {
	border-color: var(--toc-blue);
}

.nc-toc__label {
	font-size: 12px;
	color: var(--toc-ink);
	font-weight: 600;
}

.nc-toc__item--h3 .nc-toc__link {
	padding-left: 12px;
}

.nc-toc__item--h3 .nc-toc__label {
	font-size: 11px;
	font-weight: 500;
	color: var(--toc-muted);
}

.nc-toc__num {
	color: var(--toc-blue);
}

.nc-toc__item--top .nc-toc__label {
	font-weight: 500;
	color: var(--toc-muted);
}

/* Passed = scrolled by already (filled, muted). */
.nc-toc__item.is-passed > .nc-toc__link .nc-toc__dot {
	background: var(--toc-dot-passed);
	border-color: var(--toc-dot-passed);
}

.nc-toc__item.is-passed > .nc-toc__link .nc-toc__label {
	color: var(--toc-ink);
}

/* Active = current section in view. */
.nc-toc__item.is-active > .nc-toc__link .nc-toc__dot {
	background: var(--toc-blue);
	border-color: var(--toc-blue);
	box-shadow: 0 0 0 4px var(--toc-blue-soft);
	transform: scale(1.15);
}

.nc-toc__item.is-active > .nc-toc__link .nc-toc__label {
	color: var(--toc-blue);
	font-weight: 700;
}

.nc-toc__link:hover .nc-toc__label {
	color: var(--toc-blue);
}

/* Slim scrollbar for tall TOCs. */
.nc-toc__body::-webkit-scrollbar {
	width: 5px;
}

.nc-toc__body::-webkit-scrollbar-thumb {
	background: var(--toc-line);
	border-radius: 3px;
}

/* Deliberately no @media(prefers-color-scheme:dark) block -- the site
   made an explicit, sitewide "drop dark mode, light-only" decision
   earlier in this build. A dark variant here that only ever triggered
   off the visitor's OS setting (with no in-page toggle to reach it)
   silently broke that decision -- confirmed live via a screenshot: the
   widget rendered dark/near-black while the rest of the page stayed
   light. Always light now, regardless of OS preference. */

@media (max-width: 991px) {
	.nc-toc__body {
		max-height: 380px;
	}
}

/* Phone-sized screens only — tablet and up keep the TOC. A long floating
   sidebar card doesn't earn its space on a narrow phone screen the way
   it does once there's room beside the article. */
@media (max-width: 767px) {
	.nc-toc-widget {
		display: none;
	}
}