/* RAJ Table of Contents — Google Docs style outline */

/* Offset anchor jumps so headings don't hide under a sticky header/admin bar. */
html {
	scroll-padding-top: 90px;
}

.raj-toc {
	--raj-toc-line: #e4e7eb;
	--raj-toc-text: #4b5563;
	--raj-toc-text-hover: #111827;
	--raj-toc-accent: #2563eb;
	--raj-toc-title: #6b7280;

	margin: 1.6em 0;
	padding: 1.1em 1.4em;
	background: #fbfcfd;
	border: 1px solid var(--raj-toc-line);
	border-radius: 10px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.raj-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 0.4em;
}

.raj-toc__title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--raj-toc-title);
}

.raj-toc__toggle {
	background: none;
	border: 0;
	padding: 0.1em 0.3em;
	cursor: pointer;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--raj-toc-accent);
	line-height: 1;
}

.raj-toc__toggle:hover,
.raj-toc__toggle:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* Collapsed state */
.raj-toc.is-collapsed .raj-toc__body {
	display: none;
}

/* Lists — reset hard against theme rules (e.g. .entry-content ul) that may
   apply grid/flex/columns, padding, or bullets. These selectors are scoped
   under .raj-toc so they outrank the theme's .entry-content ul rules. */
.raj-toc ul.raj-toc__list,
.raj-toc ul.raj-toc__sublist {
	display: block !important;
	grid-template-columns: none !important;
	columns: auto !important;
	list-style: none !important;
}

.raj-toc ul.raj-toc__list {
	margin: 0 !important;
	padding: 0 !important;
}

/* Nested levels MUST keep their indent + vertical guide line so the
   parent/child hierarchy is visible. High specificity beats .entry-content ul. */
.raj-toc ul.raj-toc__sublist {
	margin: 0.15em 0 0.2em 0.45em !important;
	padding: 0 0 0 0.95em !important;
	border-left: 1px solid var(--raj-toc-line);
}

.raj-toc li.raj-toc__item {
	display: list-item !important;
	margin: 0.12em 0;
	padding: 0;
	list-style: none !important;
}

/* Link colors/weights — scoped to beat the theme's .entry-content a rule. */
.raj-toc a.raj-toc__link {
	color: var(--raj-toc-text);
	font-weight: 400;
	text-decoration: none;
}

.raj-toc a.raj-toc__link:hover,
.raj-toc a.raj-toc__link:focus-visible {
	color: var(--raj-toc-text-hover);
	text-decoration: none;
}

/* Per-heading-level type scale — each level reads at a different size/weight
   so the parent/child hierarchy is obvious even at a glance. Scoped high so
   the theme's .entry-content a rule can't override it. */
.raj-toc a.raj-toc__link--h2 {
	font-size: 1.02rem;
	font-weight: 600;
	color: #1f2937;
}

.raj-toc a.raj-toc__link--h3 {
	font-size: 0.95rem;
	font-weight: 500;
	color: #374151;
}

.raj-toc a.raj-toc__link--h4 {
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--raj-toc-text);
}

.raj-toc a.raj-toc__link--h5 {
	font-size: 0.83rem;
	font-weight: 400;
	color: var(--raj-toc-title);
}

.raj-toc a.raj-toc__link--h6 {
	font-size: 0.79rem;
	font-weight: 400;
	color: var(--raj-toc-title);
}

/* Hierarchical numbering (1, 1.1, 1.1.1) via nested CSS counters. Each list
   level opens its own "rajtoc" scope; counters() joins the chain with dots. */
.raj-toc ul.raj-toc__list,
.raj-toc ul.raj-toc__sublist {
	counter-reset: rajtoc;
}

.raj-toc li.raj-toc__item {
	counter-increment: rajtoc;
}

.raj-toc a.raj-toc__link::before {
	content: counters(rajtoc, '.') '.\00a0\00a0';
	color: var(--raj-toc-title);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.raj-toc a.raj-toc__link.is-active {
	color: var(--raj-toc-accent);
	font-weight: 600;
}

.raj-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Nested levels: indent + a soft vertical guide line, like a Docs outline. */
.raj-toc__sublist {
	margin: 0.15em 0 0.15em 0.25em;
	padding-left: 0.85em;
	border-left: 1px solid var(--raj-toc-line);
	list-style: none;
}

.raj-toc__item {
	margin: 0.12em 0;
	padding: 0;
}

.raj-toc__link {
	display: block;
	padding: 0.18em 0.4em;
	border-radius: 6px;
	color: var(--raj-toc-text);
	text-decoration: none;
	transition: color 0.12s ease, background-color 0.12s ease;
}

.raj-toc__link:hover,
.raj-toc__link:focus-visible {
	color: var(--raj-toc-text-hover);
	background: #eef2f7;
	outline: none;
}

/* Active section (set by toc.js while scrolling) */
.raj-toc__link.is-active {
	color: var(--raj-toc-accent);
	font-weight: 600;
	background: #eaf1fe;
}

/* -------------------------------------------------------------------------
   Sticky side (vertical) layout.
   toc.js measures .post-content-wrap and pins the panel into its left/right
   gutter, following the scroll and staying within that section. It sets
   top / left / right / max-height inline. When the gutter is too narrow the
   script leaves the panel inline (the default box above).
   ------------------------------------------------------------------------- */
.raj-toc--side.is-pinned {
	position: fixed;
	width: 320px;
	margin: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 50;
	/* top / left / right / max-height applied by toc.js */
}

.raj-toc--side.is-pinned::-webkit-scrollbar {
	width: 8px;
}

.raj-toc--side.is-pinned::-webkit-scrollbar-thumb {
	background: var(--raj-toc-line);
	border-radius: 8px;
}

/* When it can't be pinned (narrow gutter) it falls back to the inline box.
   Allow hiding it there per the "Narrow screens" setting. */
.raj-toc--side.is-unpinned.raj-toc--mobile-hide {
	display: none;
}

/* -------------------------------------------------------------------------
   Reserved two-column layout (theme integration).
   When the theme renders the TOC in its own column (raj_toc_render), the
   content takes the remaining width and the TOC sits in a sticky column on
   the configured side. No JS pinning involved.
   ------------------------------------------------------------------------- */
.post-content-wrap.has-toc .raj-toc-grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.post-content-wrap.has-toc .raj-toc-grid--right {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.post-content-wrap.has-toc .raj-toc-grid--left {
	grid-template-columns: 320px minmax(0, 1fr);
}

/* DOM order is aside-then-content; place each visually per side. */
.raj-toc-grid--right .raj-toc-col   { order: 2; }
.raj-toc-grid--right .entry-content { order: 1; }
.raj-toc-grid--left  .raj-toc-col   { order: 1; }
.raj-toc-grid--left  .entry-content { order: 2; }

.raj-toc-col {
	position: sticky;
	top: 100px;
	align-self: start;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Let the content column shrink instead of overflowing the grid track. */
.raj-toc-grid .entry-content {
	min-width: 0;
}

/* The TOC fills its reserved column (not a floating margin box). */
.raj-toc--in-aside {
	width: auto;
	margin: 0;
}

/* Collapse to one column when there isn't room for a sidebar. */
@media (max-width: 1024px) {
	.post-content-wrap.has-toc .raj-toc-grid {
		display: block;
		max-width: 900px;
	}
	.raj-toc-col {
		position: static;
		max-height: none;
		overflow: visible;
		margin-bottom: 1.5rem;
	}
	.raj-toc--in-aside.raj-toc--mobile-hide {
		display: none;
	}
}

@media (prefers-color-scheme: dark) {
	.raj-toc {
		--raj-toc-line: #2b3340;
		--raj-toc-text: #aeb6c2;
		--raj-toc-text-hover: #f3f4f6;
		--raj-toc-title: #8b95a3;
		background: #161b22;
	}
	.raj-toc__link:hover,
	.raj-toc__link:focus-visible {
		background: #1f2733;
	}
	.raj-toc__link.is-active {
		background: #1d2a45;
	}
	.raj-toc__list > .raj-toc__item > .raj-toc__link {
		color: #cbd3df;
	}
}