/**
 * Smart Table of Contents — Front-end styles.
 *
 * Design goals
 * ------------
 * - Full-width block (no arbitrary max-width cap).
 * - Hard reset of inherited theme styles on links (bold, color, etc.).
 * - Clear visual hierarchy: H2 > H3 > H4 via size, weight and indent.
 * - Modern chevron toggle (CSS border, no emoji/unicode hack).
 * - Smooth expand/collapse animation via CSS grid trick.
 * - Three themes: minimal, card, outline.
 * - Multiple list styles: none, decimal, roman, bullet, arrow.
 * - Active section highlighting via JS + CSS.
 * - prefers-reduced-motion safe.
 *
 * @package SmartTOC
 */

/* ============================================================
   Design tokens
   ============================================================ */

.stoc {
	/* Layout */
	--stoc-max-width:        100%;
	--stoc-radius:           10px;
	--stoc-border-color:     #e4e7eb;
	--stoc-border-width:     1px;

	/* Spacing */
	--stoc-header-py:        .875rem;
	--stoc-header-px:        1.25rem;
	--stoc-body-py:          .875rem;
	--stoc-body-px:          1.25rem;
	--stoc-row-gap:          .2rem;
	--stoc-indent:           1.25rem;

	/* Typography */
	--stoc-font:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--stoc-font-size-base:   .875rem;    /* 14px */
	--stoc-line-height:      1.5;

	/* Title */
	--stoc-title-color:      #111827;
	--stoc-title-size:       .8125rem;   /* 13px */
	--stoc-title-weight:     600;
	--stoc-title-ls:         .05em;

	/* Read time */
	--stoc-read-time-color:  #9ca3af;

	/* Links — H2 (root level) */
	--stoc-h2-color:         #1f2937;
	--stoc-h2-size:          .875rem;    /* 14px */
	--stoc-h2-weight:        500;

	/* Links — H3 (level 2) */
	--stoc-h3-color:         #374151;
	--stoc-h3-size:          .8125rem;   /* 13px */
	--stoc-h3-weight:        400;

	/* Links — H4+ (level 3+) */
	--stoc-h4-color:         #6b7280;
	--stoc-h4-size:          .75rem;     /* 12px */
	--stoc-h4-weight:        400;

	/* Link hover */
	--stoc-hover-color:      #2563eb;
	--stoc-bg:               #f9fafb;

	/* Active highlight */
	--stoc-active-color:     var(--stoc-hover-color);
	--stoc-active-bg:        rgba(37, 99, 235, .07);

	/* Chevron icon */
	--stoc-chevron-size:     9px;
	--stoc-chevron-color:    #6b7280;

	/* Counter / list marker */
	--stoc-counter-color:    #9ca3af;
	--stoc-marker-color:     #9ca3af;
}

/* ============================================================
   Base block — full content width, clean box
   ============================================================ */

.stoc {
	display:        block;
	max-width:      var(--stoc-max-width);
	width:          100%;
	margin:         1.75em 0;
	padding:        0;
	background:     var(--stoc-bg);
	border:         var(--stoc-border-width) solid var(--stoc-border-color);
	border-radius:  var(--stoc-radius);
	box-sizing:     border-box;
	font-family:    var(--stoc-font);
	font-size:      var(--stoc-font-size-base);
	line-height:    var(--stoc-line-height);
	color:          var(--stoc-h2-color);

	/* Isolation from theme */
	-webkit-font-smoothing: antialiased;
}

/* ============================================================
   Header
   ============================================================ */

.stoc__header {
	padding:       var(--stoc-header-py) var(--stoc-header-px);
	border-bottom: 1px solid var(--stoc-border-color);
}

/* Toggle button (collapsible mode) */
.stoc__toggle {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         0;
	margin:          0;
	background:      none;
	border:          none;
	cursor:          pointer;
	font-family:     var(--stoc-font);
	font-size:       var(--stoc-title-size);
	font-weight:     var(--stoc-title-weight);
	letter-spacing:  var(--stoc-title-ls);
	text-transform:  uppercase;
	color:           var(--stoc-title-color);
	text-align:      left;
	line-height:     1;
	gap:             .5rem;
}

.stoc__toggle:focus-visible {
	outline:        2px solid var(--stoc-hover-color);
	outline-offset: 3px;
	border-radius:  4px;
}

/* Left side of the toggle (title + optional read time) */
.stoc__toggle-content {
	display:     flex;
	align-items: center;
	gap:         .625rem;
}

/* Non-collapsible title */
.stoc__header > .stoc__title {
	display:        block;
	font-size:      var(--stoc-title-size);
	font-weight:    var(--stoc-title-weight);
	letter-spacing: var(--stoc-title-ls);
	text-transform: uppercase;
	color:          var(--stoc-title-color);
	line-height:    1;
	margin:         0;
	padding:        0;
}

/* Read time badge */
.stoc__read-time {
	font-size:      .6875rem;
	font-weight:    400;
	letter-spacing: 0;
	text-transform: none;
	color:          var(--stoc-read-time-color);
	opacity:        .85;
}

/* ============================================================
   Chevron icon — CSS only, no emoji
   ============================================================ */

.stoc__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           20px;
	height:          20px;
}

.stoc__icon::after {
	content:      "";
	display:      block;
	width:        var(--stoc-chevron-size);
	height:       var(--stoc-chevron-size);
	border-right: 2px solid var(--stoc-chevron-color);
	border-bottom: 2px solid var(--stoc-chevron-color);
	transform:    rotate(45deg) translate(-2px, -2px);
	transition:   transform .2s ease;
	border-radius: 1px;
}

/* Collapsed state: chevron points right */
.stoc__toggle[aria-expanded="false"] .stoc__icon::after {
	transform: rotate(-45deg) translate(-2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
	.stoc__icon::after {
		transition: none;
	}
}

/* ============================================================
   Body — smooth expand/collapse via CSS grid trick
   ============================================================ */

.stoc__body {
	display:            grid;
	grid-template-rows: 1fr;
	overflow:           hidden;
	transition:         grid-template-rows .22s ease;
}

.stoc__body.is-collapsed {
	grid-template-rows: 0fr;
}

/* Inner wrapper: holds actual padding; clipped to 0 when parent collapses */
.stoc__body-inner {
	overflow:   hidden;
	min-height: 0;
	padding:    var(--stoc-body-py) var(--stoc-body-px);
}

/* No-JS fallback: hidden attribute hides the element entirely */
.stoc__body[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.stoc__body {
		transition: none;
	}
}

/* ============================================================
   List — reset everything, then build hierarchy
   ============================================================ */

.stoc__body-inner ul,
.stoc__body-inner li {
	margin:     0;
	padding:    0;
	list-style: none;
	border:     none;
	background: none;
}

/* Row spacing */
.stoc__body-inner li {
	margin-top: var(--stoc-row-gap);
}

.stoc__body-inner li:first-child {
	margin-top: 0;
}

/* Nested indent */
.stoc__body-inner ul ul {
	padding-left:  var(--stoc-indent);
	margin-top:    .1rem;
	margin-bottom: .1rem;
}

/* ---- Link reset — fight theme specificity ---- */
.stoc__body-inner a,
.stoc__body-inner a:link,
.stoc__body-inner a:visited,
.stoc__body-inner a:hover,
.stoc__body-inner a:active {
	font-family:     var(--stoc-font) !important;
	text-decoration: none !important;
	box-shadow:      none !important;
	border:          none !important;
	background:      none !important;
	outline:         none;
}

/* ---- H2 — root level links ---- */
.stoc__body-inner > ul > li > a {
	color:       var(--stoc-h2-color) !important;
	font-size:   var(--stoc-h2-size) !important;
	font-weight: var(--stoc-h2-weight) !important;
	display:     inline-block;
	padding:     .2rem 0;
}

/* ---- H3 — level 2 links ---- */
.stoc__body-inner > ul > li > ul > li > a {
	color:       var(--stoc-h3-color) !important;
	font-size:   var(--stoc-h3-size) !important;
	font-weight: var(--stoc-h3-weight) !important;
	display:     inline-block;
	padding:     .15rem 0;
}

/* ---- H4+ — level 3+ links ---- */
.stoc__body-inner > ul > li > ul > li > ul li a {
	color:       var(--stoc-h4-color) !important;
	font-size:   var(--stoc-h4-size) !important;
	font-weight: var(--stoc-h4-weight) !important;
	display:     inline-block;
	padding:     .1rem 0;
}

/* ---- Hover state ---- */
.stoc__body-inner a:hover {
	color: var(--stoc-hover-color) !important;
}

/* ---- Focus ---- */
.stoc__body-inner a:focus-visible {
	outline:        2px solid var(--stoc-hover-color);
	outline-offset: 2px;
	border-radius:  3px;
}

/* ============================================================
   Active section highlight
   ============================================================ */

.stoc__body-inner a.stoc__link--active {
	color:         var(--stoc-active-color) !important;
	font-weight:   600 !important;
	background:    var(--stoc-active-bg) !important;
	border-radius: 3px;
	padding-left:  .3rem;
	padding-right: .3rem;
	margin-left:   -.3rem;
}

/* ============================================================
   Visual separator between H2 groups
   ============================================================ */

.stoc__body-inner > ul > li + li {
	margin-top:  .5rem;
	padding-top: .5rem;
	border-top:  1px solid var(--stoc-border-color);
}

/* ============================================================
   LIST STYLE: decimal (hierarchical numbering)
   ============================================================ */

.stoc--list-decimal .stoc__body-inner > ul { counter-reset: stoc-1; }
.stoc--list-decimal .stoc__body-inner > ul > li { counter-increment: stoc-1; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul { counter-reset: stoc-2; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul > li { counter-increment: stoc-2; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > ul { counter-reset: stoc-3; }
.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > ul > li { counter-increment: stoc-3; }

.stoc--list-decimal .stoc__body-inner > ul > li > a::before {
	content:              counter(stoc-1) ". ";
	color:                var(--stoc-counter-color);
	font-variant-numeric: tabular-nums;
	font-weight:          400;
}

.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) ". ";
	color:   var(--stoc-counter-color);
}

.stoc--list-decimal .stoc__body-inner > ul > li > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) "." counter(stoc-3) ". ";
	color:   var(--stoc-counter-color);
}

/* Legacy alias — keep old class working */
.stoc--numbered .stoc__body-inner > ul { counter-reset: stoc-1; }
.stoc--numbered .stoc__body-inner > ul > li { counter-increment: stoc-1; }
.stoc--numbered .stoc__body-inner > ul > li > ul { counter-reset: stoc-2; }
.stoc--numbered .stoc__body-inner > ul > li > ul > li { counter-increment: stoc-2; }
.stoc--numbered .stoc__body-inner > ul > li > ul > li > ul { counter-reset: stoc-3; }
.stoc--numbered .stoc__body-inner > ul > li > ul > li > ul > li { counter-increment: stoc-3; }

.stoc--numbered .stoc__body-inner > ul > li > a::before {
	content:              counter(stoc-1) ". ";
	color:                var(--stoc-counter-color);
	font-variant-numeric: tabular-nums;
	font-weight:          400;
}

.stoc--numbered .stoc__body-inner > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) ". ";
	color:   var(--stoc-counter-color);
}

.stoc--numbered .stoc__body-inner > ul > li > ul > li > ul > li > a::before {
	content: counter(stoc-1) "." counter(stoc-2) "." counter(stoc-3) ". ";
	color:   var(--stoc-counter-color);
}

/* ============================================================
   LIST STYLE: roman numerals
   ============================================================ */

.stoc--list-roman .stoc__body-inner > ul { counter-reset: stoc-r1; }
.stoc--list-roman .stoc__body-inner > ul > li { counter-increment: stoc-r1; }
.stoc--list-roman .stoc__body-inner > ul > li > ul { counter-reset: stoc-r2; }
.stoc--list-roman .stoc__body-inner > ul > li > ul > li { counter-increment: stoc-r2; }

.stoc--list-roman .stoc__body-inner > ul > li > a::before {
	content:     counter(stoc-r1, upper-roman) ". ";
	color:       var(--stoc-counter-color);
	font-weight: 400;
}

.stoc--list-roman .stoc__body-inner > ul > li > ul > li > a::before {
	content: counter(stoc-r2, lower-roman) ". ";
	color:   var(--stoc-counter-color);
}

/* ============================================================
   LIST STYLE: bullet
   ============================================================ */

.stoc--list-bullet .stoc__body-inner > ul > li > a::before {
	content:       "• ";
	color:         var(--stoc-marker-color);
	font-weight:   400;
}

.stoc--list-bullet .stoc__body-inner > ul > li > ul > li > a::before {
	content: "◦ ";
	color:   var(--stoc-marker-color);
}

.stoc--list-bullet .stoc__body-inner > ul > li > ul > li > ul > li > a::before {
	content: "▸ ";
	color:   var(--stoc-marker-color);
	font-size: .7em;
}

/* ============================================================
   LIST STYLE: arrow
   ============================================================ */

.stoc--list-arrow .stoc__body-inner li > a::before {
	content:      "→ ";
	color:        var(--stoc-marker-color);
	font-weight:  400;
}

/* ============================================================
   Centered layout
   ============================================================ */

.stoc--centered {
	margin-left:  auto;
	margin-right: auto;
}

/* ============================================================
   THEME: minimal (default)
   ============================================================ */

.stoc--minimal {
	--stoc-bg:           #f9fafb;
	--stoc-border-color: #e4e7eb;
}

/* ============================================================
   THEME: card
   ============================================================ */

.stoc--card {
	--stoc-bg:           #ffffff;
	--stoc-border-color: #e4e7eb;
	--stoc-radius:       12px;

	box-shadow:
		0 1px 3px rgba(0, 0, 0, .06),
		0 4px 16px rgba(0, 0, 0, .04);
}

.stoc--card .stoc__header {
	background:    #f9fafb;
	border-radius: 12px 12px 0 0;
}

/* ============================================================
   THEME: outline
   ============================================================ */

.stoc--outline {
	--stoc-bg: transparent;

	border:        none;
	border-left:   3px solid var(--stoc-hover-color);
	border-radius: 0;
}

.stoc--outline .stoc__header {
	border-bottom: 1px solid var(--stoc-border-color);
	padding-left:  1rem;
}

.stoc--outline .stoc__body-inner {
	padding-left: 1rem;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 600px) {
	.stoc {
		--stoc-header-px: 1rem;
		--stoc-body-px:   1rem;
	}
}

/* ============================================================
   Print
   ============================================================ */

@media print {
	.stoc__icon { display: none; }

	/* Show body even when collapsed or hidden */
	.stoc__body[hidden],
	.stoc__body.is-collapsed {
		display:            block !important;
		grid-template-rows: 1fr !important;
		overflow:           visible !important;
	}

	.stoc__body[hidden] .stoc__body-inner,
	.stoc__body.is-collapsed .stoc__body-inner {
		overflow: visible !important;
	}
}