/**
 * Sparkplug TOC - Table of Contents Styles
 *
 * Dots-based navigation design for Knowledge Base articles and blog posts.
 * Positioned outside content container on right edge, sticky to bottom.
 *
 * @package Sparkplug
 * @since 1.0.0
 */

/* =============================================================================
   BASE STYLES
   ========================================================================== */

.spark-toc {
	position: sticky;
	bottom: 0;
	right: 72px;
	margin-left: auto; /* Push to right side */
	margin-top: -200px; /* Fallback - dynamically adjusted by JS to match TOC height precisely */
	width: max-content;
	z-index: var(--sprk-toc-z, 100);
	max-height: 40vh; /* Below 50% threshold */
	overflow-y: auto;
	padding: var(--sprk-space-2, 16px) 0;
	opacity: 0; /* Hidden by default - prevents flicker before JS runs */
	/* Fade gradient at top/bottom edges - fixed while content scrolls */
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
}

/* Hide scrollbar but keep functionality */
.spark-toc::-webkit-scrollbar {
	width: 0;
	background: transparent;
}

.spark-toc {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Extra padding for gradient fade zones */
.spark-toc__dots {
	padding: var(--sprk-space-3, 24px) 0;
}

/* =============================================================================
   DOT NAVIGATION LIST
   ========================================================================== */

.spark-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sprk-space-1, 8px); /* Equal spacing between all items */
}

.spark-toc__item {
	margin: 0;
	padding: 0;
	position: relative;
}

/* Nested lists - no indenting, no extra margin, dots align vertically */
.spark-toc__list--depth-1,
.spark-toc__list--depth-2,
.spark-toc__list--depth-3 {
	margin: 0;
	padding-top: var(--sprk-space-1, 8px); /* Match gap for first nested item */
}

/* =============================================================================
   DOT LINKS
   ========================================================================== */

.spark-toc__link {
	display: flex;
	flex-direction: row-reverse; /* Dots on right, text on left */
	align-items: center;
	justify-content: flex-start;
	gap: var(--sprk-space-2, 16px);
	text-decoration: none;
	color: inherit;
	transition: var(--sprk-transition-base, all 0.2s ease);
}

.spark-toc__link:hover,
.spark-toc__link:focus {
	text-decoration: none;
	outline: none;
}

/* =============================================================================
   DOTS - Fixed container with centered dot for vertical alignment
   ========================================================================== */

.spark-toc__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;  /* Fixed container size - accounts for hover scale */
	height: 12px;
	flex-shrink: 0;
	position: relative;
}

/* Actual visible dot via pseudo-element */
.spark-toc__dot::before {
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sprk-color-border-light, #ccc);
	transition: var(--sprk-transition-base, all 0.2s ease);
}

/* Hover state - slightly larger, darker (inactive dots only) */
.spark-toc__link:hover .spark-toc__dot::before {
	background-color: var(--sprk-color-text-secondary, #666);
	transform: scale(1.2);
}

/* No hover scale on active dot - already in selected state */
.spark-toc__item.is-active > .spark-toc__link:hover > .spark-toc__dot::before {
	transform: none;
}

/* Active state - enlarged dot, dark color (direct child only) */
.spark-toc__item.is-active > .spark-toc__link > .spark-toc__dot::before {
	background-color: var(--sprk-color-text-primary, #333);
	width: 10px;
	height: 10px;
}

/* =============================================================================
   HEADING TEXT
   ========================================================================== */

.spark-toc__text {
	font-size: var(--sprk-font-size-sm, 14px);
	line-height: 1.4;
	color: var(--sprk-color-text-primary, #333);
	text-align: right;
	white-space: nowrap;
	text-overflow: ellipsis;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	max-width: 200px;
	overflow: hidden;
}

/* Active item - always show text, bold (direct child only) */
.spark-toc__item.is-active > .spark-toc__link > .spark-toc__text {
	opacity: 1;
	visibility: visible;
	font-weight: bold;
}

/* Heading level text sizes - smaller for lower priority */
.spark-toc__item--h2 > .spark-toc__link > .spark-toc__text,
.spark-toc__item--h3 > .spark-toc__link > .spark-toc__text {
	font-size: var(--sprk-font-size-sm); /* 14-15px */
}

.spark-toc__item--h4 > .spark-toc__link > .spark-toc__text,
.spark-toc__item--h5 > .spark-toc__link > .spark-toc__text,
.spark-toc__item--h6 > .spark-toc__link > .spark-toc__text {
	font-size: var(--sprk-font-size-xs); /* 12-14px */
}

/* =============================================================================
   SUB-HEADING HIGHLIGHTING (Optional - off by default)

   When .spark-toc--highlight-subheadings is present, sub-headings within
   the active section get a darkened dot (but not enlarged, not bold).
   ========================================================================== */

/* Sub-headings in active section - darkened dot only (when feature enabled) */
.spark-toc--highlight-subheadings .spark-toc__item.is-in-active-section > .spark-toc__link > .spark-toc__dot::before {
	background-color: var(--sprk-color-text-secondary, #666);
}

/* Ensure truly active item still gets full treatment even with highlight-subheadings */
.spark-toc--highlight-subheadings .spark-toc__item.is-active > .spark-toc__link > .spark-toc__dot::before {
	background-color: var(--sprk-color-text-primary, #333);
	width: 10px;
	height: 10px;
}

/* =============================================================================
   VISIBILITY MODES
   ========================================================================== */

/* Mode 1: Always Show Titles (KB Articles / Docs) */
.spark-toc--always-show-titles .spark-toc__text {
	opacity: 1;
	visibility: visible;
	font-weight: normal; /* Default to normal weight */
}

/* Bold only active item in always-show mode (direct child only) */
.spark-toc--always-show-titles .spark-toc__item.is-active > .spark-toc__link > .spark-toc__text {
	font-weight: bold;
}

/* Mode 2: Show on Scroll/Hover (Blog Posts - Default) */
.spark-toc--show-on-scroll {
	max-height: 25vh; /* Shorter height for dots-mostly mode */
}

.spark-toc--show-on-scroll .spark-toc__list {
	gap: 4px; /* Tighter spacing for dots-only view */
}

.spark-toc--show-on-scroll .spark-toc__list--depth-1,
.spark-toc--show-on-scroll .spark-toc__list--depth-2,
.spark-toc--show-on-scroll .spark-toc__list--depth-3 {
	padding-top: 4px; /* Match tighter gap */
}

.spark-toc--show-on-scroll .spark-toc__link:hover > .spark-toc__text,
.spark-toc--show-on-scroll .spark-toc__item.is-active > .spark-toc__link > .spark-toc__text {
	opacity: 1;
	visibility: visible;
}

/* Mode 3: Dots Only (Never Show Titles) */
.spark-toc--dots-only .spark-toc__text {
	display: none;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Base state: hidden below final position with quick fade-out timing */
.spark-toc.spark-toc--ready {
	opacity: 0;
	transform: translateY(40px); /* Start 40px below final position */
	transition: opacity 0.25s ease, transform 0.25s ease; /* Quick fade out + slide down */
}

/* Scrolled state: visible at final position with gradual fade-in timing */
.spark-toc.spark-toc--ready.spark-toc--scrolled {
	opacity: 1;
	transform: translateY(0); /* Slide up to final position */
	transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Gradual fade in + slide up with smooth deceleration */
}

/* Tablet and below - hide TOC */
@media (max-width: 1024px) {
	.spark-toc {
		display: none;
	}
}

/* =============================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus styles */
.spark-toc__link:focus {
	outline: 2px solid var(--sprk-color-text-primary, #333);
	outline-offset: 4px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.spark-toc,
	.spark-toc__dot::before,
	.spark-toc__text,
	.spark-toc__link {
		transition: none;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.spark-toc__dot::before {
		border: 2px solid currentColor;
	}

	.spark-toc__item.is-active > .spark-toc__link > .spark-toc__dot::before {
		background-color: currentColor;
	}
}