/* ─────────────────────────────────────────────
   ACF Smart TOC — стили
   Переопредели переменные в своей теме
   ───────────────────────────────────────────── */

   :root {
	--toc-bg:            #ffffff;
	--toc-border:        #e8edf2;
	--toc-accent:        #1a6bc7;
	--toc-text:          #374151;
	--toc-text-muted:    #6b7280;
	--toc-hover-bg:      #f0f6ff;
	--toc-active-bg:     #eef5ff;
	--toc-active-text:   #1a6bc7;
	--toc-radius:        10px;
	--toc-font-size:     0.875rem;
	--toc-shadow:        0 4px 24px rgba(0, 0, 0, .08);
	--toc-width:         100%;
	--toc-sticky-top:    24px;
	--toc-transition:    0.2s ease;
}

/* ── Обёртка ─────────────────────────────────── */
.acf-smart-toc {
	max-width: 400px;
	width: 100%;
	font-size: var(--toc-font-size);
	line-height: 1.5;
	color: var(--toc-text);

}

/* ── Sticky-блок ─────────────────────────────── */
.acf-smart-toc__inner {
	top: var(--toc-sticky-top);
	background: var(--toc-bg);
	border: 1px solid var(--toc-border);
	border-radius: var(--toc-radius);
	box-shadow: var(--toc-shadow);
	max-height: calc(100vh - var(--toc-sticky-top) * 2 - 155px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--toc-border) transparent;
}


.acf-smart-toc__inner::-webkit-scrollbar { width: 4px; }
.acf-smart-toc__inner::-webkit-scrollbar-thumb {
	background: var(--toc-border);
	border-radius: 4px;
}

/* ── Шапка ───────────────────────────────────── */
.acf-smart-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--toc-border);
	position: sticky;
	top: 0;
	background: var(--toc-bg);
	z-index: 1;
}

.acf-smart-toc__title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--toc-text-muted);
}

/* ── Кнопка сворачивания ─────────────────────── */
.acf-smart-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	color: var(--toc-text-muted);
	border-radius: 4px;
	transition: color var(--toc-transition), background var(--toc-transition);
}
.acf-smart-toc__toggle:hover {
	color: var(--toc-accent);
	background: var(--toc-hover-bg);
}
.acf-smart-toc__toggle svg {
	display: block;
	transition: transform var(--toc-transition);
}
.acf-smart-toc__toggle[aria-expanded="false"] svg {
	transform: rotate(-90deg);
}

/* ── Навигация ───────────────────────────────── */
.acf-smart-toc__nav {
	padding: 8px 0 10px;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
	max-height: 9999px;
	opacity: 1;
}
.acf-smart-toc__nav.is-collapsed {
	max-height: 0;
	opacity: 0;
	padding: 0;
}

/* ── Списки ──────────────────────────────────── */
.toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.toc-list.toc-sub {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.28s ease, opacity 0.2s ease;
}

/* ── Ссылка ──────────────────────────────────── */
.toc-link {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 5px 16px;
	text-decoration: none;
	color: var(--toc-text);
	border-left: 2px solid transparent;
	transition:
		background var(--toc-transition),
		color var(--toc-transition),
		border-color var(--toc-transition);
}
.toc-link:hover {
	background: var(--toc-hover-bg);
	color: var(--toc-accent);
	text-decoration: none;
}

.toc-level-3 > .toc-link { padding-left: 28px; }
.toc-level-4 > .toc-link {
	padding-left: 40px;
	font-size: 0.8125rem;
	color: var(--toc-text-muted);
}

/* ── Стрелка ─────────────────────────────────── */
.toc-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 20px;
	transition: transform var(--toc-transition);
}
.toc-arrow::before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	margin-top: -2px;
	transition: transform var(--toc-transition);
}

.toc-has-children.is-open > .toc-link .toc-arrow::before {
	transform: rotate(45deg);
	margin-top: 0;
}

/* Раскрытие дочернего списка */
.toc-has-children.is-open > .toc-children > .toc-sub {
	max-height: 2000px;
	opacity: 1;
}

/* ── Активный пункт ──────────────────────────── */
.toc-link.is-active {
	color: var(--toc-active-text);
	background: var(--toc-active-bg);
	border-left-color: var(--toc-accent);
	font-weight: 600;
}

/* ── Мобильные ───────────────────────────────── */
@media (max-width: 1024px) {
	.acf-smart-toc {
		width: 100%;
	}
}