/* 目次ブロック
   テーマ側の ul / li 装飾に負けないよう、すべて .tp-toc の下にぶら下げて詳細度を上げている。
   文字色・フォントはテーマのものを受け継ぎ、ホバー時だけ --color-orange を使う。 */

.tp-toc {
	margin: 2.5em 0;
	padding: 1.25em 1.5em;
	border: 1px solid;
	border-color: color-mix( in srgb, currentColor 18%, transparent );
	border-radius: 4px;
	font-size: 0.95em;
	line-height: 1.7;
}

.tp-toc .tp-toc__title {
	margin: 0 0 0.7em;
	padding: 0;
	font-weight: 700;
	font-size: 1em;
}

.tp-toc .tp-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tp-toc .tp-toc__list .tp-toc__item {
	margin: 0.45em 0;
	padding: 0;
	list-style: none;
	background: none;
	text-indent: 0;
}

/* Lightning など多くのテーマは li::before で記号を描いている。
   list-style: none では消えないので、擬似要素ごと止める。 */
.tp-toc .tp-toc__list .tp-toc__item::before,
.tp-toc .tp-toc__list .tp-toc__item::after {
	content: none !important;
	display: none !important;
}

.tp-toc .tp-toc__list .tp-toc__item::marker {
	content: '';
}

/* H3 のインデント */
.tp-toc .tp-toc__list .tp-toc__item--h3 {
	padding-left: 1.75em;
	font-size: 0.94em;
}

/* 番号と本文を2カラムに分けて、折り返しても本文の頭が揃うようにする */
.tp-toc .tp-toc__link {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	color: inherit;
	text-decoration: none;
	background: none;
}

.tp-toc .tp-toc__number {
	flex: none;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.tp-toc a.tp-toc__link:hover,
.tp-toc a.tp-toc__link:focus-visible {
	color: var( --color-orange, #ea6a1e );
	/* ショートハンドで指定して、テーマの点線下線を実線に戻す */
	text-decoration: underline solid;
}

.tp-toc a.tp-toc__link:hover .tp-toc__number,
.tp-toc a.tp-toc__link:focus-visible .tp-toc__number {
	opacity: 1;
}

.tp-toc .tp-toc__empty {
	margin: 0;
	opacity: 0.6;
}

/* 固定ヘッダーがあるテーマでアンカー先が隠れないように余白を取る。
   ヘッダーの高さに合わせて調整する。 */
:where( h2, h3 )[ id^='toc-' ] {
	scroll-margin-top: 5rem;
}