/* =============================================================================
   Article table of contents — the ONE sidebar component.

   Replaces two implementations that already shared their engine but not their
   skin: template-asana-vs.php's `#rsVsAside`/`.nav__aside` card plus a separate
   mobile-only box, and template-blog-single.php's `.rs-bsp-toc` list. Both
   already called rs_article_headings() and rs_article_toc_js(); only the markup
   and CSS differed. rs_article_toc() in functions.php now emits both.

   MEASUREMENTS ARE FIGMA "TOC-menu", node 33446-21461 — not estimates:
     container  fill #F9F9F9, radius 4, padding 20, column gap 15
     row        gap 8, icon frame 20x20, arrow 14px
     type       Hind Madurai 400 14/1.5, #5D636A
     hover      text + arrow #D9514B, arrow previewed at .4
     active     text + arrow #F35B54, arrow opacity 1

   The mobile strategy is blog-single's: ONE component at every width, reordering
   above the article below `lg`, rather than asana-vs's old approach of hiding the
   sidebar and rendering a second, non-scrollspy list. One component cannot fall
   out of sync with itself.

   The `<i>` is a real element rather than asana-vs's `::before` with an explicit
   `font-family:"Font Awesome 7 Pro"` — the kit's family name is a moving part,
   and letting Font Awesome resolve its own glyph cannot get it wrong.

   NOT IN THE SCSS BUILD — deliberately. html-remotesensei's compiled
   main.min.css has hand-added rules its SCSS source does not (css-equal.mjs
   reports the drift), so `gulp buildWpCss` would delete live styling. Fold this
   into config/_article.scss once that drift is reconciled.
   ========================================================================== */

.rs-toc-col{
	margin-bottom: 2rem;
}

@media (min-width: 992px){
	.rs-toc-col{ margin-bottom: 0; }
	.rs-toc{
		position: sticky;
		top: var(--rs-toc-top, 100px);
	}
}

.rs-toc{
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px;
	border-radius: var(--rs-radius-xs, 4px);
	background: var(--rs-grey-light-50, #F9F9F9);
}

/* Not in the Figma component, which is the list alone. Kept because asana-vs's
   mobile box carried it and it orients the reader; sized to sit quietly above
   the list rather than compete with it. */
.rs-toc__title{
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--rs-black-prime, #34383C);
}

.rs-toc__list{
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-toc__item{ margin: 0; }

.rs-toc__link{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: "Hind Madurai", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rs-black-second, #5D636A);
	text-decoration: none;
	transition: color .15s ease;
}

/* 20px frame from the mock, but 21px tall so it centres on the first 14/1.5 line
   instead of floating above it.

   The arrow slides as it fades rather than just blinking on. The mock's own
   prototype layer carries SMART_ANIMATE at 150ms on both ON_HOVER and ON_CLICK,
   so the movement is part of the spec, not an embellishment on top of it — the
   static frames simply cannot show it. Width is reserved at all times, so the
   label never reflows when the arrow appears. */
.rs-toc__icon{
	flex: 0 0 20px;
	width: 20px;
	height: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .15s ease-in, transform .15s ease-in, color .15s ease;
}

/* Hover is the dark red #D9514B, and previews the arrow at partial opacity;
   active commits it in coral.

   Which mock frame is "hover" is genuinely ambiguous: the instance whose prop
   reads `state: hover` uses the placeholder label at #34383C, while the one
   whose prop reads `state: click` carries the literal text "1. on hover title of
   the blog section" at #D9514B. The layer text is the more deliberate signal, so
   #D9514B is hover here. */
.rs-toc__link:hover{ color: #D9514B; }
.rs-toc__link:hover .rs-toc__icon{
	opacity: .4;
	transform: translateX(-3px);
	color: #D9514B;
}

.rs-toc__item.rs-active > .rs-toc__link{ color: var(--rs-coral, #F35B54); }
.rs-toc__item.rs-active > .rs-toc__link .rs-toc__icon{
	opacity: 1;
	transform: translateX(0);
	color: var(--rs-coral, #F35B54);
	transition-timing-function: ease-out;
}

.rs-toc__link:active{ color: var(--rs-coral, #F35B54); }

.rs-toc__link:focus-visible{
	outline: 2px solid var(--rs-coral, #F35B54);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce){
	.rs-toc__link,
	.rs-toc__icon{ transition: none; }
}