/**
 * 本文の CSS（ブロックエディターで書いた文章）
 *
 * ブログ記事と、通常のブロックで書いた固定ページ（プライバシーポリシーなど）の本文に使う。
 * 本文は .c-prose の箱に入っているので、その中の見出し・段落・リスト・表などに見た目を付ける。
 *
 * ── 公開画面とエディターで同じ CSS を使うしくみ ──
 * このファイルは記事を書く画面（ブロックエディター）にも読み込ませている（inc/editor.php）。
 * ただしエディターの中には .c-prose の箱がなく、代わりに本文全体が .is-root-container の箱に入っている。
 * そこで、すべてのルールを「.c-prose 〇〇, .is-root-container 〇〇」の 2 つ並べて書いている。
 *   - 公開画面では .c-prose の方が効く（.is-root-container は公開画面に存在しない）
 *   - エディターでは .is-root-container の方が効く
 * 片方だけ直すと公開画面とエディターで見た目がずれるので、必ず両方そろえて書くこと。
 */

/*
 * エディターには base.css を読み込ませていないので、本文の文字の基本（書体・行の高さ・色）だけここで指定する。
 * 公開画面では body（base.css）から同じ値を受け継ぐので、.c-prose 側には書かなくてよい。
 * .editor-post-title はエディターの記事タイトル欄（本文の箱の外にあるので別に指定する）。
 */
.is-root-container,
.editor-post-title {
	font-family: var(--locus-font-sans);
	line-height: var(--locus-line-height);
	color: var(--locus-color-text);
}

/* ── 要素どうしの間隔 ──────────────────────── */

/* 前に要素がある要素だけに、上の余白を付ける（最初の要素の上に余計な余白ができない） */
.c-prose > * + *,
.is-root-container > * + * {
	margin-top: 1.5em;
}

/* ── 見出し ───────────────────────────────── */

.c-prose :is(h2, h3, h4),
.is-root-container :is(h2, h3, h4) {
	font-weight: var(--locus-font-weight-prose-heading);
}

.c-prose h2,
.is-root-container h2 {
	margin-top: 2.5em;
	padding: 0.6em 0.9em;
	font-size: var(--locus-font-size-prose-h2);
	background-color: var(--locus-color-bg-alt);
	border-left: 5px solid var(--locus-color-primary);
	border-radius: 0 var(--locus-radius) var(--locus-radius) 0;
}

.c-prose h3,
.is-root-container h3 {
	margin-top: 2em;
	padding-bottom: 0.4em;
	font-size: var(--locus-font-size-prose-h3);
	border-bottom: 2px solid var(--locus-color-border);
}

.c-prose h4,
.is-root-container h4 {
	margin-top: 1.75em;
	padding-left: 0.75em;
	font-size: var(--locus-font-size-lg);
	border-left: 3px solid var(--locus-color-primary);
}

/* 見出しのすぐ後の要素は、少し近づけて「見出しと本文のまとまり」を見せる */
.c-prose :is(h2, h3, h4) + *,
.is-root-container :is(h2, h3, h4) + * {
	margin-top: 1em;
}

/* ── 文字 ───────────────────────────────── */

.c-prose a,
.is-root-container a {
	text-decoration: underline;
}

.c-prose strong,
.is-root-container strong {
	font-weight: 700;
}

/* ── リスト ───────────────────────────────── */

.c-prose ul,
.c-prose ol,
.is-root-container ul,
.is-root-container ol {
	padding-left: 1.5em;
}

.c-prose li + li,
.is-root-container li + li {
	margin-top: 0.4em;
}

/*
 * 箇条書きの項目の中の段落と表（法務のページの「広告の効果の測定のための提供」の下の表と説明など）。
 * 項目の文や前の段落とくっついて読みにくくならないよう、上を空ける。
 * 入れ子の箇条書き（li の中の ol）は対象にしない（今の法務のページの見え方を変えないため）。
 */
.c-prose li > :is(p, .c-table),
.is-root-container li > :is(p, .c-table) {
	margin-top: 0.75em;
}

/* 箇条書きの印・番号をメインカラーにする */
.c-prose li::marker,
.is-root-container li::marker {
	color: var(--locus-color-primary);
	font-weight: 700;
}

/* ── 画像 ───────────────────────────────── */

.c-prose figure img,
.is-root-container figure img {
	border-radius: var(--locus-radius);
}

/* 画像の説明文（キャプション） */
.c-prose figcaption,
.is-root-container figcaption {
	margin-top: 0.5em;
	font-size: var(--locus-font-size-sm);
	text-align: center;
	color: var(--locus-color-text-muted);
}

/* 画像の左寄せ・右寄せ（文章を回り込ませる）は PC だけ。スマホでは狭すぎて読めないので中央に置く */
.c-prose .aligncenter,
.is-root-container .aligncenter {
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 768px) {
	.c-prose .alignleft,
	.is-root-container .alignleft {
		float: left;
		max-width: 50%;
		margin: 0.4em 1.5em 1em 0;
	}

	.c-prose .alignright,
	.is-root-container .alignright {
		float: right;
		max-width: 50%;
		margin: 0.4em 0 1em 1.5em;
	}
}

/* ── 引用 ───────────────────────────────── */

.c-prose blockquote,
.is-root-container blockquote {
	padding: 1em 1.25em;
	color: var(--locus-color-text-muted);
	background-color: var(--locus-color-bg-alt);
	border-left: 4px solid var(--locus-color-border);
	border-radius: 0 var(--locus-radius) var(--locus-radius) 0;
}

.c-prose blockquote cite,
.is-root-container blockquote cite {
	display: block;
	margin-top: 0.5em;
	font-size: var(--locus-font-size-sm);
	font-style: normal;
}

/* ── 表 ─────────────────────────────────── */

/* 表がスマホの画面より広いとき、表の部分だけ横にスクロールできるようにする */
.c-prose .wp-block-table,
.is-root-container .wp-block-table {
	overflow-x: auto;
}

/*
 * ここから下の表のルールは、ブロックエディターの「表」ブロックなど、ふつうの表に効かせる。
 * 部品の c-table で囲んだ表（法務のページの表など）には効かせない（:not(.c-table) > table）。
 * 両方が効くと、どちらの見た目が勝つかが CSS の読み込み順で決まってしまい、分かりにくくなるため。
 */
.c-prose :not(.c-table) > table,
.is-root-container :not(.c-table) > table {
	font-size: var(--locus-font-size-sm);
}

.c-prose :not(.c-table) > table :is(th, td),
.is-root-container :not(.c-table) > table :is(th, td) {
	padding: 0.75em 1em;
	border: 1px solid var(--locus-color-border);
}

.c-prose :not(.c-table) > table thead th,
.is-root-container :not(.c-table) > table thead th {
	background-color: var(--locus-color-bg-alt);
}

/* ── 区切り線 ───────────────────────────────── */

.c-prose hr,
.is-root-container hr {
	margin-block: 2.5em;
	border: 0;
	border-top: 1px solid var(--locus-color-border);
}

/* ── ボタン（ボタンブロック）──────────────────── */
/* 部品の .c-button と同じ見た目にそろえる */

.c-prose .wp-block-button__link,
.is-root-container .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75em 1.75em;
	font-size: var(--locus-font-size-base);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	color: var(--locus-color-on-accent);
	background-color: var(--locus-color-accent);
	border-radius: var(--locus-radius-pill);
}

.c-prose .wp-block-button__link:hover,
.is-root-container .wp-block-button__link:hover {
	color: var(--locus-color-on-accent);
	background-color: var(--locus-color-accent-dark);
}

/* ── 詳細（開閉ブロック）──────────────────────── */

.c-prose .wp-block-details,
.is-root-container .wp-block-details {
	padding: 0.75em 1em;
	border: 1px solid var(--locus-color-border);
	border-radius: var(--locus-radius);
}

.c-prose .wp-block-details summary,
.is-root-container .wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
}

.c-prose .wp-block-details > * + *,
.is-root-container .wp-block-details > * + * {
	margin-top: 0.75em;
}

/* ── コード ───────────────────────────────── */

.c-prose code,
.is-root-container code {
	padding: 0.1em 0.4em;
	font-size: 0.9em;
	background-color: var(--locus-color-bg-alt);
	border-radius: 4px;
}

/* 回り込み（alignleft / alignright）を、本文の最後で解除する */
.c-prose::after {
	content: "";
	display: table;
	clear: both;
}