/**
 * core/table の格子（見本 .a-table）。
 *
 * なぜ theme.json でなくここか：
 * コアの table スタイル（.wp-block-table td / th { border:1px solid; padding:.5em }、
 * .wp-block-table table { border-collapse:collapse }）は詳細度 0-1-1。
 * theme.json の css は :root :where(...) で 0-1-0 になり負けるため、
 * コアの後ろに同じ詳細度で読み込むこのファイルで上書きする（4層目）。
 * 文字サイズ・行間は theme.json（styles.blocks.core/table）。
 */

/*
 * 外枠は table 自身の border で持つ（figure の box-shadow だと、キャプションがあるとき
 * 枠がキャプションごと囲んでしまい、表の上端の線が無くなる＋キャプションの下に線が出るため）。
 * figure は overflow-x:auto なので、table の外側に出す影は切れる → border（内側に描かれる）にする。
 */
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
}

/* キャプション：位置は今のまま（コア既定＝表の下）。補足の色・小さめ・線なし */
.wp-block-table figcaption {
	margin-top: 6px;
	border: 0;
	color: var(--wp--preset--color--ink-sub);
	font-size: var(--wp--preset--font-size--s); /* 12px（全キャプション共通・theme.json elements.caption と同じ） */
}

.wp-block-table th {
	padding: 10px 14px;
	border: 0;
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--primary-pale);
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

.wp-block-table td {
	padding: 10px 14px;
	border: 0;
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}

.wp-block-table tr > :last-child {
	border-right: 0;
}

.wp-block-table tbody tr:last-child > * {
	border-bottom: 0;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table td code {
	white-space: nowrap;
}

/*
 * スマホ：見出しセルも折り返す（見本）。ただし列が細くなりすぎないよう、セルに最小幅を持たせる。
 * 入りきらない表は、表（figure.wp-block-table）の中だけ横にスクロールする（コアの overflow-x:auto）。ページは横に動かない。
 */
@media (width <= 640px) {
	.wp-block-table th {
		white-space: normal;
	}

	.wp-block-table th,
	.wp-block-table td {
		min-width: 6.5em;
	}

	.wp-block-table {
		-webkit-overflow-scrolling: touch;
	}
}