/* ==========================================================================
   Table of contents
   Base layout for the [table_of_contents] shortcode. It reuses Elementor's
   .elementor-toc__* structure, so the marker, the active-item indent and the
   responsive sizes already carried in custom.css and media-queries.css apply
   here untouched — only what those two leave open is set below.
   ========================================================================== */

.blog-toc {
	box-sizing: border-box;
	width: 100%;
	font-family: 'Instrument Sans', sans-serif;
}

.blog-toc * {
	box-sizing: inherit;
}

/* Kept out of the layout until the list has been built, so an empty box never
   flashes up while the page is still parsing. */
.blog-toc[hidden] {
	display: none;
}

/* ==========================================================================
   Header — title and the expand / collapse control
   ========================================================================== */

.blog-toc .elementor-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.blog-toc .elementor-toc__header-title {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	color: var(--e-global-color-primary);
}

.blog-toc .elementor-toc__toggle-button {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--e-global-color-primary);
	cursor: pointer;
}

.blog-toc .elementor-toc__toggle-button svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* One of the two chevrons at a time — which one depends on the state. */
.blog-toc:not(.elementor-toc--collapsed) .elementor-toc__toggle-button--expand,
.blog-toc.elementor-toc--collapsed .elementor-toc__toggle-button--collapse {
	display: none;
}

/* ==========================================================================
   List
   ========================================================================== */

.blog-toc .elementor-toc__body {
	margin-top: 8px;
}

.blog-toc.elementor-toc--collapsed .elementor-toc__body {
	display: none;
}

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

.blog-toc .elementor-toc__list-item-text-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Sized here only — custom.css owns whether the marker is visible, which is
   what makes it appear beside the active item alone. */
.blog-toc .elementor-toc__list-item-text-wrapper svg {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	fill: var(--e-global-color-primary);
}

.blog-toc .elementor-toc__list-item-text {
	color: var(--e-global-color-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

.blog-toc .elementor-toc__list-item-text:hover,
.blog-toc .elementor-toc__list-item-text.elementor-item-active {
	color: var(--e-global-color-primary);
}

.blog-toc .toc-empty {
	color: var(--e-global-color-08ec0f6, #6b7280);
}

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

@media (max-width: 1024px) {
	.blog-toc .elementor-toc__header-title {
		font-size: 16px;
	}
}