/**
 * MkSEO — Table of contents.
 *
 * Deliberately low-specificity and colour-agnostic: it inherits the theme's
 * typography and colours (currentColor) so it blends into Divi or any other
 * theme without fighting it.
 */

.mk-seo-toc {
	--mk-seo-toc-gap: 0.35em;

	box-sizing: border-box;
	margin: 0 0 1.5em;
	padding: 1.25em 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
}

.mk-seo-toc *,
.mk-seo-toc *::before,
.mk-seo-toc *::after {
	box-sizing: inherit;
}

.mk-seo-toc__title {
	margin: 0 0 0.75em;
	padding: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
}

/* Collapsible variant: <details>/<summary>, no JavaScript involved. */
details.mk-seo-toc > .mk-seo-toc__title {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

details.mk-seo-toc > .mk-seo-toc__title::-webkit-details-marker {
	display: none;
}

details.mk-seo-toc > .mk-seo-toc__title::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

details.mk-seo-toc[open] > .mk-seo-toc__title::before {
	transform: rotate(45deg);
}

details.mk-seo-toc:not([open]) > .mk-seo-toc__title {
	margin-bottom: 0;
}

.mk-seo-toc__title:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mk-seo-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mk-seo-toc;
}

.mk-seo-toc__list .mk-seo-toc__list {
	margin: var(--mk-seo-toc-gap) 0 0 1.25em;
}

.mk-seo-toc__item {
	margin: 0 0 var(--mk-seo-toc-gap);
	padding: 0;
	list-style: none;
	line-height: 1.45;
}

.mk-seo-toc__item:last-child {
	margin-bottom: 0;
}

.mk-seo-toc__link {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid transparent;
}

.mk-seo-toc__link:hover,
.mk-seo-toc__link:focus-visible {
	border-bottom-color: currentColor;
}

/* Numbering is done with CSS counters, so the markup stays the same. */
.mk-seo-toc--numbered .mk-seo-toc__item {
	counter-increment: mk-seo-toc;
}

.mk-seo-toc--numbered .mk-seo-toc__item > .mk-seo-toc__link::before {
	content: counters(mk-seo-toc, ".") ". ";
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

/* Keeps a sticky header from covering the heading we jump to. */
.mk-seo-toc-target {
	scroll-margin-top: var(--mk-seo-scroll-offset, 0px);
}

/* The active entry while scrolling, set by toc.js. */
.mk-seo-toc__link.is-active {
	font-weight: 700;
}