/**
 * WordPress コアブロックのスタイル
 *
 * .entry-content 配下（記事本文・固定ページ本文）に適用します。
 * 数値はモックアップ（幅 1280px）の実測値です。
 * ブロックエディターのプレビュー用に assets/css/editor-style.css へ同じ内容を複製しています。
 */

/* ---------- 縦のリズム ---------- */
/*
 * 本文中の各ブロックの間隔は --lumen-block-gap（33px）で統一しています。
 * セクション同士の間隔（--lumen-section-gap）とは別の変数です。
 */

.entry-content > * {
	margin-top: var(--lumen-block-gap);
	margin-bottom: 0;
}

.entry-content > *:first-child {
	margin-top: 0;
}

/* ---------- 段落 ---------- */
/* 実測: 14px / 行送り 32px */

.entry-content p {
	font-size: var(--lumen-font-size-base);
	line-height: var(--lumen-line-height-base);
}

/* ---------- 見出し ---------- */
/*
 * デザインの「見出し1 / 2 / 3」は h1 / h2 / h3 に対応します。
 * h1（＝見出し1）は記事タイトル・ページタイトルが使うため、
 * 本文の見出しは h2 から始めてください。
 * h1 のスタイルは components.css の .entry-title にあります。
 */

/* 見出し1（h1）: 32px、左に 7px のアクセントバー。
   本文中で使われた場合もタイトルと同じ見た目にそろえます。 */
.entry-content h1 {
	position: relative;
	padding-left: calc(var(--lumen-accent-bar-width-lg) + var(--lumen-accent-bar-gap-lg));
	font-size: var(--lumen-font-size-2xl);
	line-height: var(--lumen-line-height-heading); /* 32px × 1.2 = 38.4px */
}

.entry-content h1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--lumen-accent-bar-width-lg);
	height: 100%;
	background-color: var(--lumen-color-accent);
}

/* 見出し2（h2）: 20px、下線は左 94px がアクセント色 */
.entry-content h2 {
	position: relative;
	padding-bottom: 5px;
	border-bottom: 3px solid var(--lumen-color-border-light);
	font-size: var(--lumen-font-size-xl);
	line-height: 1.4;
}

.entry-content h2::after {
	content: "";
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 94px;
	height: 3px;
	background-color: var(--lumen-color-accent);
}

/* 見出し3（h3）: 18px、左に 6px の淡いアクセントバー */
.entry-content h3 {
	position: relative;
	padding-left: calc(var(--lumen-accent-bar-width-md) + var(--lumen-accent-bar-gap-md));
	font-size: var(--lumen-font-size-lg);
	line-height: var(--lumen-line-height-heading); /* 18px × 1.2 = 21.6px */
}

.entry-content h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--lumen-accent-bar-width-md);
	height: 100%;
	background-color: var(--lumen-color-accent-light);
}

/* h4 以下はモックアップに指定が無いため、段階的に小さくした簡素な見出しにしています */
.entry-content h4 {
	font-size: var(--lumen-font-size-md);
	line-height: 1.5;
}

.entry-content h5,
.entry-content h6 {
	font-size: var(--lumen-font-size-base);
	line-height: 1.6;
}

/* ---------- リンク ---------- */

.entry-content a {
	color: var(--lumen-color-link);
	text-decoration: underline;
}

/* ---------- 画像 / キャプション ---------- */

.entry-content .wp-block-image img,
.entry-content figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* 実測: 画像からキャプションまで 8px、12px 中央寄せ */
.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-top: 8px;
	font-size: var(--lumen-font-size-xs);
	line-height: 1.5;
	color: var(--lumen-color-text);
	text-align: center;
}

.entry-content .alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.entry-content .alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.entry-content .aligncenter {
	margin-inline: auto;
}

/* ---------- 引用 ---------- */
/* 実測: 左バー 7px / 背景 #f2f2f2 / 内側 上下 24px・左 29px・右 36px */

.entry-content blockquote,
.entry-content .wp-block-quote {
	position: relative;
	padding: 24px 36px 24px 29px;
	border: 0;
	border-left: var(--lumen-accent-bar-width-lg) solid var(--lumen-color-accent);
	background-color: var(--lumen-color-surface);
	font-size: var(--lumen-font-size-base);
	font-style: normal;
}

/* 引用符の装飾 */
.entry-content blockquote::before {
	content: "”";
	position: absolute;
	top: 10px;
	left: 20px;
	color: var(--lumen-color-placeholder);
	font-size: 52px;
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
}

.entry-content blockquote p {
	position: relative;
}

.entry-content blockquote p + p {
	margin-top: 0;
}

/* 実測: 本文から引用元まで 12px、右寄せ 12px */
.entry-content blockquote cite,
.entry-content .wp-block-quote cite,
.entry-content blockquote .wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	font-size: var(--lumen-font-size-xs);
	font-style: normal;
	line-height: 1.9;
	color: var(--lumen-color-text-muted);
	text-align: right;
}

.entry-content .wp-block-pullquote {
	padding: 32px;
	border-top: 2px solid var(--lumen-color-accent);
	border-bottom: 2px solid var(--lumen-color-accent);
	background-color: transparent;
}

/* ---------- リスト ---------- */
/* 実測: 行送り 24px */

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	font-size: var(--lumen-font-size-base);
	line-height: var(--lumen-line-height-title); /* 24px */
}

.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0;
}

/* ---------- 表 ---------- */
/* 実測: 1 行 45px（見出し行も同じ）、見出しはアクセント色 */

.entry-content table,
.entry-content .wp-block-table table {
	width: 100%;
	border: 1px solid var(--lumen-color-border);
	font-size: var(--lumen-font-size-base);
}

.entry-content th,
.entry-content td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	/* height はセルの最小高さとして働き、空のセルでも 45px を保ちます */
	height: 45px;
	padding: 11px 16px;
	border: 1px solid var(--lumen-color-border);
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
}

.entry-content thead th,
.entry-content .wp-block-table thead th {
	background-color: var(--lumen-color-accent);
	border-color: var(--lumen-color-accent);
	color: #ffffff;
	font-weight: 700;
}

/* コアの thead / tfoot / tr の線を打ち消し、セルの枠線に統一する */
.entry-content .wp-block-table thead {
	border-bottom: 0;
}

.entry-content .wp-block-table tfoot {
	border-top: 0;
}

.entry-content .wp-block-table tr,
.entry-content .wp-block-table tbody tr,
.entry-content .wp-block-table thead tr,
.entry-content .wp-block-table tfoot tr {
	border-bottom: 0;
}

.entry-content .wp-block-table figcaption {
	text-align: center;
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--lumen-color-surface);
}

/* ---------- ボタン ---------- */
/* 実測: 幅 235px × 高さ 47px */

.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lumen-button-width);
	min-height: var(--lumen-button-height);
	padding: 0 24px;
	background-color: var(--lumen-color-accent);
	border-radius: var(--lumen-radius);
	color: #ffffff;
	font-size: var(--lumen-font-size-base);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus {
	background-color: var(--lumen-color-accent-dark);
	color: #ffffff;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--lumen-color-accent);
}

/* ---------- 目次（本文内に挿入されるため詳細度を上げる） ---------- */

.entry-content .toc a {
	color: var(--lumen-color-text);
	text-decoration: none;
}

.entry-content .toc a:hover,
.entry-content .toc a:focus {
	text-decoration: underline;
}

.entry-content .toc__list {
	padding-left: 24px;
	list-style: decimal;
}

.entry-content .toc__sublist {
	list-style: none;
	padding-left: 8px;
	margin-top: var(--lumen-toc-sub-gap);
}

.entry-content .toc__item {
	line-height: 1.4286;
}

/* ---------- 区切り線 ---------- */

.entry-content .wp-block-separator,
.entry-content hr {
	border: 0;
	border-top: 1px solid var(--lumen-color-border);
}

.entry-content .wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
}

/* ---------- コード / 整形済みテキスト ---------- */

.entry-content pre,
.entry-content .wp-block-code {
	padding: 16px;
	background-color: var(--lumen-color-surface);
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: var(--lumen-font-size-base);
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre;
}

.entry-content code {
	padding: 2px 6px;
	background-color: var(--lumen-color-surface);
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.92em;
}

/* ---------- 埋め込み / カラム ---------- */

.entry-content .wp-block-embed__wrapper {
	position: relative;
}

.entry-content .wp-block-columns {
	display: flex;
	gap: 24px;
}

.entry-content .wp-block-column {
	min-width: 0;
	flex: 1 1 0;
}

.entry-content .wp-block-column > * + * {
	margin-top: 32px;
}

/* ---------- カラーパレット（theme.json と対応） ---------- */

.has-lumen-accent-color { color: var(--lumen-color-accent); }
.has-lumen-accent-background-color { background-color: var(--lumen-color-accent); }
.has-lumen-blue-color { color: var(--lumen-color-share-facebook); }
.has-lumen-blue-background-color { background-color: var(--lumen-color-share-facebook); }
.has-lumen-dark-color { color: var(--lumen-color-share-x); }
.has-lumen-dark-background-color { background-color: var(--lumen-color-share-x); }
.has-lumen-green-color { color: var(--lumen-color-share-line); }
.has-lumen-green-background-color { background-color: var(--lumen-color-share-line); }
.has-lumen-text-color { color: var(--lumen-color-text); }
.has-lumen-text-background-color { background-color: var(--lumen-color-text); }
.has-lumen-surface-color { color: var(--lumen-color-surface); }
.has-lumen-surface-background-color { background-color: var(--lumen-color-surface); }
.has-lumen-white-color { color: #ffffff; }
.has-lumen-white-background-color { background-color: #ffffff; }