/**
 * 目次（picico-core / modules/toc）
 *
 * 目次は Core の機能なので CSS も Core が持つ。テーマを入れ替えても崩れないよう、
 * 値はテーマの `--picico-*` トークンを参照しつつ、第 2 引数にフォールバックを置く。
 * `!important` は使わない。specificity は `:where()` で低く保つ。
 *
 * 番号は CSS カウンタ。ol の既定マーカーは消して、入れ子でも「1-2」形式にならない
 * 素直な連番にする。
 */

:where(.pc-toc) {
	margin-block: var(--picico-space-lg, 2rem);
	padding: var(--picico-space-sm, 1rem);
	border: var(--picico-border-width, 1px) solid var(--picico-color-border, #dce2e0);
	border-radius: var(--picico-radius-md, 12px);
	background: var(--picico-color-surface-alt, #f5f7f6);
	font-size: var(--picico-font-size-sm, 0.9375rem);
	line-height: var(--picico-line-height-body, 1.9);
}

:where(.pc-toc__title) {
	margin: 0;
	color: var(--picico-color-text, #22282a);
	font-family: var(--picico-font-heading, inherit);
	font-size: var(--picico-font-size-md, 1rem);
	font-weight: var(--picico-font-weight-bold, 700);
	line-height: var(--picico-line-height-heading, 1.4);
}

/* <summary> のマーカーを自前の三角に置き換える */
:where(.pc-toc__details > .pc-toc__title) {
	display: flex;
	align-items: center;
	gap: var(--picico-space-xs, 0.5rem);
	min-height: var(--picico-tap-size, 2.75rem);
	cursor: pointer;
	list-style: none;
}

.pc-toc__details > .pc-toc__title::-webkit-details-marker {
	display: none;
}

.pc-toc__details > .pc-toc__title::before {
	flex: none;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	content: "";
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform var(--picico-duration-fast, 120ms) var(--picico-easing, ease);
}

.pc-toc__details:not([open]) > .pc-toc__title::before {
	transform: rotate(-45deg) translate(-0.05em, 0.05em);
}

:where(.pc-toc__body) {
	margin-block-start: var(--picico-space-xs, 0.5rem);
}

:where(.pc-toc__list) {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pc-toc;
}

:where(.pc-toc__list--sub) {
	margin-block-start: 0.25rem;
	margin-inline-start: 1.25rem;
	font-size: var(--picico-font-size-xs, 0.8125rem);
}

:where(.pc-toc__item) {
	margin: 0;
	padding: 0;
	counter-increment: pc-toc;
}

:where(.pc-toc__item + .pc-toc__item) {
	margin-block-start: 0.25rem;
}

:where(.pc-toc__link) {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	padding-block: 0.25rem;
	min-height: var(--picico-tap-size-inline, 2rem); /* キーボード・指で押しやすい高さ（WCAG 2.5.8） */
	display: inline-flex;
	align-items: center;
	color: var(--picico-color-link, #2b7a5e);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pc-toc__link::before {
	flex: none;
	color: var(--picico-color-text-muted, #5b6668);
	content: counter(pc-toc) ".";
	font-variant-numeric: tabular-nums;
}

.pc-toc__link:hover,
.pc-toc__link:focus-visible {
	color: var(--picico-color-link-hover, #1f5b45);
	text-decoration: underline;
}

/* アンカーで飛んだ見出しがヘッダーの下に隠れないように */
:where(.entry-content) :where(h2, h3, h4, h5, h6)[id^="toc_id"] {
	scroll-margin-top: calc(var(--picico-header-height, 3.5rem) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	.pc-toc__details > .pc-toc__title::before {
		transition: none;
	}
}