/* Blog TOC — layout & structure only; all palette values injected via wp_add_inline_style */

/* ── Base (mobile-first): full-height right drawer, hidden off-screen ── */
#blog-toc {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	max-height: 100dvh;
	width: min(300px, 85vw);
	overflow-y: auto;
	border-radius: 10px 0 0 10px;
	padding: 20px;
	z-index: 1000;
	font-size: 1rem;
	line-height: 1.6;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

/* Mobile/tablet open state — toggled by JS */
#blog-toc.is-open {
	transform: translateX(0);
}

/* ── Desktop (1200px+): vertically centred, peeked, hover-controlled ── */
@media (min-width: 1200px) {
	#blog-toc {
		top: 50%;
		height: auto;
		max-height: 80vh;
		width: 300px;
		transform: translateY(-50%) translateX(calc(100% - 80px));
	}
	/* Neutralise .is-open so desktop stays purely hover-driven */
	#blog-toc.is-open {
		transform: translateY(-50%) translateX(calc(100% - 80px));
	}
	#blog-toc:hover,
	#blog-toc.is-open:hover {
		transform: translateY(-50%) translateX(0);
	}
	#blog-toc-toggle,
	#blog-toc-backdrop {
		display: none !important;
	}
}

/* ── Scrollbar ── */
#blog-toc::-webkit-scrollbar       { width: 3px; }
#blog-toc::-webkit-scrollbar-track { background: transparent; }

/* ── Toggle button (mobile + tablet, hidden at desktop) ── */
#blog-toc-toggle {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 1rem;
	z-index: 1001;
}

/* ── Backdrop (mobile + tablet only) ── */
#blog-toc-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 999;
}
#blog-toc-backdrop.is-visible { display: block; }
@media (min-width: 1200px) {
	#blog-toc-backdrop { display: none !important; }
}

/* ── Typography ── */
.blog-toc__title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding-bottom: 10px;
	margin: 0 0 12px;
	user-select: none;
}

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

.blog-toc__item {
	margin: 0;
	padding: 0;
}

.blog-toc__item a {
	display: block;
	padding: 4px 0;
	text-decoration: none;
	transition: color 0.15s ease;
	line-height: 1.4;
}

.blog-toc__item a.is-active {
	font-weight: 600;
}

.blog-toc__item--top a {
	font-weight: 600;
	padding-bottom: 8px;
	margin-bottom: 6px;
}

.blog-toc__item--h3 a {
	padding-left: 1rem;
	font-size: 0.9375rem;
}