/*
 * acf/toc-auto - оглавление.
 * Сток: рамка акцентным цветом на всю ширину, список в одну колонку.
 * Делаем плотную карточку на тёмной поверхности, список в колонки.
 */

/* Рамку акцентом ставит body[data-change-theme] .toc - селектор повторяем, иначе не перебить. */
main .toc,
body[data-change-theme] main .toc {
	background-color: var(--gs-surface);
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	box-shadow: none;
	padding: 20px 24px;
	position: relative;
}

/* Жёлтое подчёркивание заголовка прилетает из .section-tag h2:after. */
main .toc__title::after {
	content: none;
}

main .toc__title {
	color: var(--gs-text);
	font-size: .82rem !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

main .toc__show {
	border: 1px solid var(--gs-line-strong);
	border-radius: var(--gs-radius-sm);
	color: var(--gs-muted);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 5px 12px;
	text-transform: uppercase;
	top: 16px;
	transition: color .2s var(--gs-ease), border-color .2s var(--gs-ease);
}

main .toc__show:focus,
main .toc__show:hover {
	border: 1px solid var(--gs-accent);
	color: var(--gs-accent);
}

main .toc__list {
	counter-reset: gs-toc;
	list-style: none;
	margin-top: 14px;
}

@media (min-width: 900px) {
	main .toc__list {
		column-count: 2;
		column-gap: 40px;
	}
}

@media (min-width: 1200px) {
	main .toc__list {
		column-count: 3;
	}
}

main .toc__list li {
	break-inside: avoid;
	counter-increment: gs-toc;
	padding: 5px 0 5px 30px;
	position: relative;
}

main .toc__list li::before {
	color: var(--gs-muted);
	content: counter(gs-toc);
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 7px;
	text-align: right;
	width: 20px;
}

main .toc__list a,
body[data-change-theme] main .toc__list a {
	color: var(--gs-body);
	text-decoration: none;
	transition: color .2s var(--gs-ease);
}

main .toc__list a:hover,
body[data-change-theme] main .toc__list a:hover {
	color: var(--gs-accent);
}

main .toc__list li:hover::before {
	color: var(--gs-accent);
}