/* サイト独自の上書きCSS（テーマ本体には手を入れない） */

/* Twemoji画像の縦位置補正:
   テーマは 1.1em + vertical-align -0.15em で上に約0.07emはみ出す。
   等倍サイズ + -0.125em で日本語の文字の上下にほぼ揃える。 */
img.emoji {
	height: 1em;
	width: 1em;
	vertical-align: -0.125em;
}

/* テーマの li > img { margin: 1em; box-shadow: ... }（記事画像用の装飾）が
   リスト内の絵文字にも効いてしまう抜けの補正。
   インライン画像は下マージンの分だけベースラインから持ち上がるため、
   絵文字が1文字分ほど上にずれて見えていた。 */
li > img.emoji {
	margin: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/* 記事本文のMarkdownテーブル装飾。
   テーマ（Semantic UI）はクラスなしの素の table を装飾しないため、
   ブラウザデフォルトの罫線なし表示になってしまう。
   列数が多い表は枠内で横スクロールできるようにする。 */
.post-content table {
	display: block;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	margin: 1em auto;
	border-collapse: collapse;
}

.post-content table th,
.post-content table td {
	border: 1px solid rgba(128, 128, 128, .6);
	padding: .45em .8em;
}

.post-content table th {
	background: rgba(128, 128, 128, .3);
}

.post-content table tbody tr:nth-child(even) {
	background: rgba(128, 128, 128, .12);
}

/* 目次（折りたたみカード型）。
   テーマの .toc（半透明白の枠）をベースに、見出し行・階層ガイド・
   ホバー強調を追加し、詰まりすぎた行間を直す。 */
details.toc {
	font-size: 1rem;
	line-height: 1.6;
	padding: 0;
}

details.toc summary {
	cursor: pointer;
	padding: .55em .9em;
	font-weight: bold;
	user-select: none;
}

details.toc summary:hover {
	background: rgba(128, 128, 128, .15);
}

details.toc[open] summary {
	border-bottom: 1px solid rgba(138, 138, 138, .42);
}

details.toc nav {
	padding: .5em 1em .7em;
}

details.toc ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

details.toc ul ul {
	margin-left: .4em;
	padding-left: 1em;
	border-left: 2px solid rgba(138, 138, 138, .42);
}

details.toc li {
	line-height: 1.6;
}

details.toc a {
	display: block;
	padding: .2em .5em;
	border-radius: 4px;
}

details.toc a:hover {
	background: rgba(128, 128, 128, .18);
	text-decoration: none;
}