/* Blog Table of Content
   Every rule is scoped under .spark-toc, so nothing here affects the rest of the site.
   See README.md in this folder for what each class/variable controls. */

/* ==========================================================================
   1. BASE: quick settings (colours, sizes, fonts)
   ========================================================================== */
.spark-toc {
	--toc-title: var(--e-global-color-text, #1A1919);
	--toc-text: var(--e-global-color-text, #1A1919);
	--toc-active-text: var(--e-global-color-text, #1A1919);
	--toc-rail: #E9E9E6;
	--toc-accent: var(--e-global-color-primary, #FFC300);
	--toc-pill-bg: #FFFFFF;
	--toc-pill-border: #E8E8E5;
	--toc-rail-w: 2px;
	--toc-pad-x: 16px;
	--toc-pad-y: 6px;
	--toc-title-gap: 20px;
	--toc-pill-h: 54px;
	--toc-body-font: var(--e-global-typography-text-font-family, "SF Pro Display"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	box-sizing: border-box;
	padding: 0;
	color: var(--toc-text);
	font-family: var(--toc-body-font);
}

.spark-toc *,
.spark-toc *::before,
.spark-toc *::after {
	box-sizing: border-box;
}

.spark-toc[hidden],
.spark-toc [hidden] {
	display: none !important;
}

/* No side padding on any device: the Elementor container around the widget provides the spacing. */
.spark-toc__inner {
	padding: 0;
}

/* ==========================================================================
   2. DESKTOP AND TABLET: title + list with a rail on the left
   ========================================================================== */
.spark-toc .spark-toc__title {
	margin: 0 0 var(--toc-title-gap);
	padding: 0;
	color: var(--toc-title);
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

.spark-toc__toggle {
	display: none;
}

.spark-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: var(--toc-rail-w) solid var(--toc-rail);
}

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

/* The link's own left border sits on top of the list's rail, so the item being read
   shows the accent colour in place of the grey. */
.spark-toc .spark-toc__link {
	display: block;
	margin: 0 0 0 calc(var(--toc-rail-w) * -1);
	padding: var(--toc-pad-y) 0 var(--toc-pad-y) var(--toc-pad-x);
	border: 0;
	border-left: var(--toc-rail-w) solid transparent;
	background: transparent;
	color: var(--toc-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.spark-toc .spark-toc__link:hover,
.spark-toc .spark-toc__link:focus {
	background: transparent;
	color: var(--toc-active-text);
}

.spark-toc .spark-toc__link:focus-visible {
	outline: 2px solid var(--toc-title);
	outline-offset: 2px;
}

.spark-toc .spark-toc__link.is-active {
	border-left-color: var(--toc-accent);
	color: var(--toc-active-text);
	font-weight: 500;
}

.spark-toc__note {
	margin: 0;
	padding: 10px 14px;
	border: 1px dashed #C9A100;
	background: #FFF9E0;
	font-size: 13px;
	line-height: 1.4;
}

/* Stays in view while the article scrolls (when switched on; desktop and tablet only). */
@media (min-width: 768px) {
	.spark-toc--sticky {
		position: sticky;
		top: var(--toc-sticky-top, 100px);
	}
}

/* ==========================================================================
   3. MOBILE (767 and below): the title is a pill that opens the list
   ========================================================================== */
@media (max-width: 767px) {
	.spark-toc .spark-toc__title {
		display: none;
	}

	.spark-toc .spark-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		height: var(--toc-pill-h);
		margin: 0;
		padding: 0 22px;
		border: 1px solid var(--toc-pill-border);
		border-radius: 999px;
		background: var(--toc-pill-bg);
		color: var(--toc-title);
		font-family: inherit;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.2;
		text-align: left;
		text-transform: none;
		cursor: pointer;
	}

	.spark-toc .spark-toc__toggle:hover,
	.spark-toc .spark-toc__toggle:focus {
		background: var(--toc-pill-bg);
		border-color: var(--toc-accent);
		color: var(--toc-title);
	}

	.spark-toc .spark-toc__toggle:focus-visible {
		outline: 2px solid var(--toc-title);
		outline-offset: 2px;
	}

	.spark-toc__chevron {
		flex: none;
		transition: transform 0.2s ease;
	}

	.spark-toc.is-open .spark-toc__chevron {
		transform: rotate(180deg);
	}

	/* Closed until the script has run and the visitor opens it (without JS the list simply shows). */
	.spark-toc--js:not(.is-open) .spark-toc__panel {
		display: none;
	}

	.spark-toc__panel {
		margin-top: 8px;
		padding: 14px 18px;
		border: 1px solid var(--toc-pill-border);
		border-radius: 20px;
		background: var(--toc-pill-bg);
	}

	.spark-toc .spark-toc__link {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spark-toc * {
		transition: none !important;
	}
}