/* =========================================================
   Smart Table of Contents — Stylesheet v1.1.0
   ========================================================= */

/* -----------------------------------------------------------
   CSS Custom Properties (defaults; overridden per-theme or via JS)

   --stoc-accent:     primary colour  (default: deep purple #4b1d66)
   --stoc-secondary:  secondary colour (default: teal #006085)
   Both are overridable via the admin colour pickers.
   ----------------------------------------------------------- */
.smart-toc {
	--stoc-accent:        #4b1d66;
	--stoc-accent-light:  #7a3d96;
	--stoc-secondary:     #006085;
	--stoc-secondary-light: #0090c5;
	--stoc-bg:            #faf7fd;
	--stoc-border:        #ddd0e8;
	--stoc-header-bg:     #f2ecf8;
	--stoc-text:          #1e1a2e;
	--stoc-muted:         #6b5f7a;
	--stoc-link:          #3d2f4e;
	--stoc-link-hover:    var(--stoc-secondary);
	--stoc-link-active:   var(--stoc-accent);
	--stoc-radius:        8px;

	/*
	 * Font sizing: relative to body text so it scales with your theme's
	 * clamp() body-font declaration. The JS only overrides this when the
	 * admin has set an explicit px value (font_size != 0).
	 *
	 * Body text:  clamp(1rem, 0.98rem + 0.1vw, 1.063rem)
	 * TOC target: ~85% of body — slightly smaller, never tiny.
	 */
	--stoc-font-size:     clamp(0.8125rem, 0.795rem + 0.075vw, 0.875rem);

	--stoc-width:         auto;
	--stoc-transition:    0.2s ease;
}

/* -----------------------------------------------------------
   Hard reset for list styles — override any theme that adds
   bullets/numbers via ul li::before or ol li::before rules.
   ----------------------------------------------------------- */
.smart-toc ul,
.smart-toc ol,
.smart-toc li,
.smart-toc .smart-toc-list,
.smart-toc .smart-toc-sublist {
	list-style:        none !important;
	list-style-type:   none !important;
	padding-left:      0 !important;
	margin-left:       0 !important;
	/* Remove any theme marker */
	-webkit-padding-start: 0 !important;
	padding-inline-start:  0 !important;
}

/* Kill theme pseudo-element bullets (common in many WP themes) */
.smart-toc ul li::before,
.smart-toc ol li::before,
.smart-toc ul li::after,
.smart-toc ol li::after,
.smart-toc .smart-toc-list li::before,
.smart-toc .smart-toc-sublist li::before,
.smart-toc .smart-toc-list > li::marker,
.smart-toc .smart-toc-sublist > li::marker {
	content:    none !important;
	display:    none !important;
}

/* -----------------------------------------------------------
   Base Wrapper
   ----------------------------------------------------------- */
.smart-toc {
	display:       inline-block;
	width:         var(--stoc-width);
	max-width:     100%;
	background:    var(--stoc-bg);
	border:        1px solid var(--stoc-border);
	border-radius: var(--stoc-radius);
	margin:        1.5em 0;
	font-size:     var(--stoc-font-size);
	line-height:   1.6;
	box-shadow:    0 2px 12px rgba(75, 29, 102, 0.08);
	overflow:      hidden;
	transition:    box-shadow var(--stoc-transition);
}

.smart-toc:hover {
	box-shadow: 0 4px 20px rgba(75, 29, 102, 0.14);
}

.smart-toc.smart-toc-full-width {
	display: block;
	width:   100%;
}

/* -----------------------------------------------------------
   Header
   ----------------------------------------------------------- */
.smart-toc-header {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       12px 16px;
	background:    var(--stoc-header-bg);
	border-bottom: 1px solid var(--stoc-border);
	cursor:        default;
}

.smart-toc-collapsible .smart-toc-header {
	cursor:      pointer;
	user-select: none;
}

.smart-toc-icon {
	display:     flex;
	align-items: center;
	color:       var(--stoc-accent);
	flex-shrink: 0;
}

.smart-toc-title {
	font-weight:    600;
	color:          var(--stoc-text);
	flex:           1;
	font-size:      0.95em;
	letter-spacing: 0.01em;
}

.smart-toc-toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      none;
	border:          none;
	cursor:          pointer;
	padding:         2px;
	color:           var(--stoc-muted);
	border-radius:   4px;
	transition:      color var(--stoc-transition), background var(--stoc-transition);
	flex-shrink:     0;
}

.smart-toc-toggle:hover {
	color:      var(--stoc-accent);
	background: rgba(75, 29, 102, 0.08);
}

.smart-toc-chevron {
	transition: transform 0.25s ease;
}

.smart-toc-collapsed .smart-toc-chevron {
	transform: rotate(-90deg);
}

/* -----------------------------------------------------------
   Body / Content
   ----------------------------------------------------------- */
.smart-toc-body {
	padding:    12px 16px;
	overflow:   hidden;
	transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
	max-height: 2000px;
	opacity:    1;
}

.smart-toc-collapsed .smart-toc-body {
	max-height:     0;
	padding-top:    0;
	padding-bottom: 0;
	opacity:        0;
}

/* -----------------------------------------------------------
   Lists — no bullets, clean spacing
   ----------------------------------------------------------- */
.smart-toc-list {
	margin:       0;
	padding:      0;
	list-style:   none;
}

.smart-toc-sublist {
	margin:      4px 0 4px 0;
	padding:     0 0 0 14px;
	list-style:  none;
	border-left: 2px solid var(--stoc-border);
}

.smart-toc-item {
	margin: 2px 0;
}

.smart-toc-nested-wrapper {
	margin: 0;
}

/* -----------------------------------------------------------
   Links
   ----------------------------------------------------------- */
.smart-toc-link {
	display:       block;
	padding:       4px 8px;
	border-radius: 5px;
	color:         var(--stoc-link) !important;
	text-decoration: none !important;
	transition:    color var(--stoc-transition), background var(--stoc-transition), padding-left var(--stoc-transition);
	font-size:     1em;
	word-break:    break-word;
	/* Ensure no inherited list styles bleed in */
	background-image: none !important;
}

.smart-toc-link:hover {
	color:        var(--stoc-secondary) !important;
	background:   rgba(0, 96, 133, 0.07);
	padding-left: 12px;
}

.smart-toc-link.is-active {
	color:       var(--stoc-accent) !important;
	background:  rgba(75, 29, 102, 0.1);
	font-weight: 600;
}

.smart-toc-num {
	color:               var(--stoc-muted);
	font-size:           0.85em;
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------
   Depth styling
   ----------------------------------------------------------- */
.smart-toc-depth-0 > .smart-toc-link { font-weight: 500; }
.smart-toc-depth-1 > .smart-toc-link { font-size: 0.95em; }
.smart-toc-depth-2 > .smart-toc-link { font-size: 0.9em; }
.smart-toc-depth-3 > .smart-toc-link,
.smart-toc-depth-4 > .smart-toc-link { font-size: 0.875em; color: var(--stoc-muted); }

/* -----------------------------------------------------------
   Sticky mode
   ----------------------------------------------------------- */
.smart-toc-sticky {
	position:   sticky;
	top:        80px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

.smart-toc-sticky::-webkit-scrollbar        { width: 4px; }
.smart-toc-sticky::-webkit-scrollbar-track  { background: transparent; }
.smart-toc-sticky::-webkit-scrollbar-thumb  { background: var(--stoc-border); border-radius: 4px; }

/* -----------------------------------------------------------
   THEME: Dark (purple-shifted dark mode)
   ----------------------------------------------------------- */
.smart-toc.theme-dark {
	--stoc-accent:          #c084e8;
	--stoc-secondary:       #38bdf8;
	--stoc-bg:              #1a1525;
	--stoc-border:          #2e2040;
	--stoc-header-bg:       #211830;
	--stoc-text:            #e9e4f0;
	--stoc-muted:           #a090b8;
	--stoc-link:            #d4c8e8;
	--stoc-link-hover:      var(--stoc-secondary);
	--stoc-link-active:     var(--stoc-accent);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.smart-toc.theme-dark .smart-toc-sublist {
	border-left-color: #2e2040;
}

.smart-toc.theme-dark .smart-toc-toggle:hover {
	background: rgba(192, 132, 232, 0.12);
}

/* -----------------------------------------------------------
   THEME: Minimal
   ----------------------------------------------------------- */
.smart-toc.theme-minimal {
	--stoc-bg:         transparent;
	--stoc-border:     #ddd0e8;
	--stoc-header-bg:  transparent;
	--stoc-text:       #1e1a2e;
	--stoc-muted:      #6b5f7a;
	--stoc-link:       #3d2f4e;
	box-shadow: none;
}

.smart-toc.theme-minimal .smart-toc-header {
	border-bottom: 2px solid var(--stoc-accent);
	padding-left:  0;
}

.smart-toc.theme-minimal .smart-toc-body {
	padding-left: 0;
}

/* -----------------------------------------------------------
   Progress indicator on scroll
   ----------------------------------------------------------- */
.smart-toc::before {
	content:          '';
	display:          block;
	height:           3px;
	background:       linear-gradient(90deg, var(--stoc-accent), var(--stoc-secondary));
	transform-origin: left;
	transform:        scaleX(0);
	transition:       transform 0.1s linear;
}

.smart-toc[data-progress]::before {
	transform: scaleX(var(--stoc-progress, 0));
}

/* -----------------------------------------------------------
   Heading anchor (injected by JS)
   ----------------------------------------------------------- */
.smart-toc-anchor-link {
	opacity:         0;
	margin-left:     6px;
	text-decoration: none !important;
	color:           var(--stoc-secondary) !important;
	font-size:       0.75em;
	vertical-align:  middle;
	transition:      opacity 0.15s;
}

h1:hover .smart-toc-anchor-link,
h2:hover .smart-toc-anchor-link,
h3:hover .smart-toc-anchor-link,
h4:hover .smart-toc-anchor-link,
h5:hover .smart-toc-anchor-link,
h6:hover .smart-toc-anchor-link { opacity: 1; }

/* -----------------------------------------------------------
   Back to top button
   ----------------------------------------------------------- */
.smart-toc-back-to-top {
	display:      none;
	position:     fixed;
	bottom:       28px;
	right:        24px;
	background:   var(--stoc-accent, #4b1d66);
	color:        #fff !important;
	border:       none;
	border-radius: 50%;
	width:        44px;
	height:       44px;
	font-size:    20px;
	cursor:       pointer;
	box-shadow:   0 4px 14px rgba(75, 29, 102, 0.35);
	z-index:      9999;
	transition:   opacity 0.2s, transform 0.2s;
	align-items:  center;
	justify-content: center;
}

.smart-toc-back-to-top.visible { display: flex; }

.smart-toc-back-to-top:hover {
	transform:  translateY(-3px);
	box-shadow: 0 6px 20px rgba(75, 29, 102, 0.45);
}

/* -----------------------------------------------------------
   Loading state (pending Divi 5 TOC)
   ----------------------------------------------------------- */
.smart-toc.smart-toc-pending .smart-toc-body {
	min-height: 2.5em;
}

.smart-toc-loading {
	color:     var(--stoc-muted) !important;
	font-size: 0.875em;
}

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 640px) {
	.smart-toc {
		display: block !important;
		width:   100% !important;
	}
	.smart-toc-sticky {
		position:   static;
		max-height: none;
	}
}

/* -----------------------------------------------------------
   Print
   ----------------------------------------------------------- */
@media print {
	.smart-toc {
		box-shadow: none;
		border:     1px solid #ccc;
	}
	.smart-toc-body {
		max-height: none !important;
		opacity:    1 !important;
	}
	.smart-toc-back-to-top { display: none !important; }
}