/**
 * 目次（snk-toc）のスタイル。Hoffman のカラー変数（--snk-color-*）に連動しつつ、
 * var() フォールバック付きで他テーマでも破綻しない（プラグイン単独生存）。
 *
 * box  ＝ヘッダー帯（メイン色・白文字）＋薄い背景＋H3以下に chevron＋開閉トグル
 * simple＝枠なし・左に細い罫線だけの控えめ版
 *
 * @package HoffmanCoreBlocks
 */

.snk-toc {
	margin: 1.75rem 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ---- ヘッダー帯 ---- */
.snk-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.snk-toc__title {
	font-weight: 700;
}

.snk-toc__toggle {
	margin: 0;
	padding: 0.1em 0.2em;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
	opacity: 0.9;
}

.snk-toc__toggle:hover,
.snk-toc__toggle:focus {
	opacity: 1;
	text-decoration: underline;
}

.snk-toc__toggle::before {
	content: "[ ";
}

.snk-toc__toggle::after {
	content: " ]";
}

/* ---- リスト ---- */
.snk-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.snk-toc__item {
	margin: 0;
}

.snk-toc__item a {
	display: block;
	padding: 0.4rem 0;
	color: var(--snk-color-text, #333);
	text-decoration: none;
}

.snk-toc__item a:hover .snk-toc__text,
.snk-toc__item a:focus .snk-toc__text {
	text-decoration: underline;
}

/* トップ階層（H2）＝太字・濃い色・アイコンなし。 */
.snk-toc__item--h2 a {
	font-weight: 700;
	color: var(--snk-color-heading, #222);
}

/* 子階層（H3/H4）＝chevron（›）＋インデント・やや淡い色。 */
.snk-toc__item--h3 a,
.snk-toc__item--h4 a {
	color: var(--snk-color-text, #555);
}

.snk-toc__item--h3 a {
	padding-inline-start: 1.4em;
}

.snk-toc__item--h4 a {
	padding-inline-start: 2.8em;
}

.snk-toc__item--h3 a::before,
.snk-toc__item--h4 a::before {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-end: 0.6em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
	vertical-align: middle;
}

/* ---- box デザイン（色帯なし・薄い背景の枠＋濃いタイトル） ---- */
/* 内側パディングは nav 自身でなく head/body に持たせる：2カラム（サイドバー）レイアウトでは
   テーマの `.snk-body--sidebar .snk-article__body > *{padding-inline:0}`（高詳細度）が nav の
   左右パディングを打ち消すため、内側要素側に余白を置くことで 1カラム/2カラムどちらでも
   テキストが枠の端に張り付かない. */
.snk-toc--box {
	border-radius: 6px;
	background: color-mix(in srgb, var(--snk-color-main, #4aa3d6) 6%, #fff);
}

/* タイトル帯の色背景は出さない＝タイトル/トグルは濃い見出し色のテキストで見せる. */
.snk-toc--box .snk-toc__head {
	padding: 1.1rem 1.4rem 0.5rem;
	color: var(--snk-color-heading, #222);
}

.snk-toc--box .snk-toc__title {
	font-size: 1.05em;
}

.snk-toc--box .snk-toc__body {
	padding: 0 1.4rem 1.1rem;
}

/* ---- simple デザイン（控えめ・左罫線） ---- */
.snk-toc--simple {
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--snk-color-main, #2b5797);
}

.snk-toc--simple .snk-toc__head {
	margin-bottom: 0.4rem;
	color: var(--snk-color-heading, #222);
}

/* ---- 開閉（is-collapsed で本体を隠す） ---- */
.snk-toc.is-collapsed .snk-toc__body {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.snk-toc__item a,
	.snk-toc__toggle {
		transition: color 0.15s ease, opacity 0.15s ease;
	}
}