/* ==========================================================================
   Smart TOC — front-end styles
   Colour / spacing values that come from the settings screen are injected
   as CSS variables (see the plugin's dynamic_css() method).
   ========================================================================== */

/* ---- Inline table of contents ---- */
.smart-toc {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-left: 4px solid var(--smart-toc-accent, #2c3e50);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
	font-size: var(--smart-toc-font-size, 15px);
	line-height: 1.5;
}

.smart-toc__title {
	margin: 0 0 0.5em;
	font-weight: 700;
	font-size: 1.02em;
}

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

.smart-toc__item {
	margin: 0.15em 0;
	/* Indent deeper headings. depth is set inline per item. */
	padding-inline-start: calc(var(--smart-toc-depth, 0) * 1.1em);
}

.smart-toc__link {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.smart-toc__link:hover,
.smart-toc__link:focus {
	opacity: 1;
	text-decoration: underline;
}

.smart-toc__link.is-active {
	color: var(--smart-toc-accent, #2c3e50);
	font-weight: 600;
	opacity: 1;
}

/* Keep target headings from hiding under sticky admin bars / fixed headers. */
:where(h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: 90px;
}

/* ---- Mobile sticky tab ---- */
.smart-toc-sticky {
	display: none; /* Switched to flex under the configured breakpoint. */
	position: fixed;
	top: var(--smart-toc-tab-offset, 40%);
	z-index: 9990;
	align-items: flex-start;
}

.smart-toc-sticky--right {
	right: 0;
	flex-direction: row-reverse;
}

.smart-toc-sticky--left {
	left: 0;
	flex-direction: row;
}

.smart-toc-sticky__tab {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	cursor: pointer;
	background: var(--smart-toc-tab-bg, #2c3e50);
	color: var(--smart-toc-tab-color, #fff);
	padding: var(--smart-toc-tab-pad-v, 16px) var(--smart-toc-tab-pad-h, 10px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	line-height: 1;
}

.smart-toc-sticky--right .smart-toc-sticky__tab {
	border-radius: 8px 0 0 8px;
}

.smart-toc-sticky--left .smart-toc-sticky__tab {
	border-radius: 0 8px 8px 0;
}

/* Vertical label so it hugs the screen edge. */
.smart-toc-sticky__label {
	display: inline-block;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: var(--smart-toc-tab-font-size, 13px);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* On the left edge, flip so it reads bottom-to-top. */
.smart-toc-sticky--left .smart-toc-sticky__label {
	transform: rotate(180deg);
}

/* The slide-out panel that holds the TOC. */
.smart-toc-sticky__panel {
	width: var(--smart-toc-panel-w, 280px);
	max-width: 78vw;
	max-height: var(--smart-toc-panel-h, 70vh);
	overflow: auto;
	padding: 0.5em;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);

	/* Closed state. */
	opacity: 0;
	pointer-events: none;
	transform: translateX(var(--smart-toc-panel-hide, 12px));
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.smart-toc-sticky--right .smart-toc-sticky__panel {
	--smart-toc-panel-hide: 12px;
}

.smart-toc-sticky--left .smart-toc-sticky__panel {
	--smart-toc-panel-hide: -12px;
}

.smart-toc-sticky.is-open .smart-toc-sticky__panel {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}

/* The cloned TOC inside the panel drops its box styling. */
.smart-toc-sticky__panel .smart-toc {
	margin: 0;
	padding: 0.25em;
	border: 0;
	background: transparent;
}