/**
 * 独自TOC CSS (D23 / D32 / T195 FIX v2 / T379)
 *
 * T379 (D73③ / D78 / 4-7): 本文の上部に置く折りたたみ形式（.esrij-toc--inline）。
 * 初期表示は数項目のみで、残りはボタンで展開する。
 *   - 長い記事でも目次に必ず届く（本文の下に置く旧案の弱点をつぶす）
 *   - 狭い画面でサイドバーが本文の下へ回っても目次は上に残る
 *
 * T400: サイドバー追従（.esrij-toc--widget）を復活させ、2 形式に戻した。
 * 折りたたみは狭い画面の解であって、広い画面では常に見えている追従型のほうが
 * 読みやすい、というご指摘による。両方を出力し、どちらを見せるかは
 * 子テーマ（support.css）が画面幅で切り替える。
 *
 * 初期表示の項目数は PHP 側（Esrij_Custom_TOC::COLLAPSED_ITEMS ＝ 既定 3、
 * フィルター esrij_toc_collapsed_items）で決まる。CSS は「あふれた項目を隠す」だけ。
 *
 * 角丸は --radius（5px）。T378 で 2px から変更（2026-06-26 町田様ご指示「本体サイトのデザインに準ずる」）
 *
 * @package Esrij_Support_Core
 */

/* ====== 本体（本文上部） ====== */
.esrij-toc--inline {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--ui-accent, #00619B);
	border-radius: var(--radius, 5px);
}

.esrij-toc__title {
	margin: 0 0 8px;
	padding-bottom: 6px;
	font-size: var(--fs-14, 14px);
	font-weight: 700;
	color: var(--ui-accent-strong, #034B77);
	border-bottom: 1px solid #eee;
}

/* ====== サイドバー追従（T400） ======
   追従そのもの（sticky と上部の余白）は子テーマの .sidebar-inner が持つ（T391 で
   --esrij-sticky-top に一本化済み）。ここは箱の見た目と、画面に収まらないときに
   箱の中でスクロールさせることだけを担当する。
   折りたたみは持たない＝サイドバーには全項目を出す。 */
.esrij-toc--widget {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--ui-accent, #00619B);
	border-radius: var(--radius, 5px);
	/* 34px は .sidebar-inner がクローム下端との間に取っている余白（T391）、
	   16px は画面下端の余裕。--esrij-sticky-top は support.js が管理バー込みの
	   実測下端を配信するので、ログイン状態を自前で場合分けしなくてよい。 */
	max-height: calc(100vh - var(--esrij-sticky-top, 100px) - 34px - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ====== 見出しリスト ====== */
.esrij-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-14, 14px);
	line-height: 1.7;
}

.esrij-toc__item {
	position: relative;
	padding-left: 14px;
}

.esrij-toc__item::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--ui-accent-strong, #034B77);
}

.esrij-toc__item--indent-1 {
	padding-left: 28px;
}
.esrij-toc__item--indent-1::before {
	content: "-";
	left: 14px;
	color: #888;
}
.esrij-toc__item--indent-2 {
	padding-left: 42px;
}
.esrij-toc__item--indent-2::before {
	content: "·";
	left: 28px;
	color: #aaa;
}

.esrij-toc__list a {
	color: #333;
	text-decoration: none;
}

.esrij-toc__list a:hover,
.esrij-toc__list a:focus-visible {
	color: var(--ui-accent-strong, #034B77);
	text-decoration: underline;
}

.esrij-toc__item.is-current > a {
	color: var(--ui-accent-strong, #034B77);
	font-weight: 700;
}

/* ====== 折りたたみ（T379 / 4-7） ====== */
/* あふれた項目は展開するまで隠す。展開状態は JS が .is-expanded で表す。
   JS が無い環境では PHP 側の <noscript> がこの指定を打ち消して全件表示に戻す。 */
.esrij-toc--collapsible:not(.is-expanded) .esrij-toc__item--overflow {
	display: none;
}

.esrij-toc__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 0;
	font-size: var(--fs-14, 14px);
	font-weight: 700;
	color: var(--ui-accent, #00619B);
	background: none;
	border: 0;
	cursor: pointer;
}

.esrij-toc__toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.esrij-toc--inline.is-expanded .esrij-toc__toggle::after {
	transform: translateY(2px) rotate(225deg);
}

.esrij-toc__toggle:hover,
.esrij-toc__toggle:focus-visible {
	color: var(--ui-accent-hover, #034B77);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.esrij-toc--inline {
		padding: 10px 12px;
	}
	.esrij-toc__list,
	.esrij-toc__toggle {
		font-size: var(--fs-12, 12px);
	}
}