/*
Theme Name: BULK HOMME JOURNAL
Theme URI: https://journal.bulk.co.jp/
Description: BULK HOMME JOURNAL 用の Twenty Twenty-Five 子テーマ。デザイン設計書 v6 の実装。
Author: BULK HOMME
Author URI: https://bulk.co.jp/
Template: twentytwentyfive
Version: 0.2.12
Requires at least: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bulkhomme-journal
*/

/* --------------------------------------------------------------------------
 * 色・タイポグラフィ・余白・レイアウト幅は theme.json 側で指定している。
 * このファイルに書くのは theme.json で表現できない構造的な調整だけ。
 * 設計書 v6 §3-2 のトークンは theme.json のプリセット CSS 変数として
 * 出力されるので、ここでは直値ではなく変数を参照する。
 * -------------------------------------------------------------------------- */

/* ==========================================================================
   0. 共通トークンのエイリアス（設計書 §3-2 の名前で参照できるようにする）
   ========================================================================== */
:root {
	--bhj-c-bg: var(--wp--preset--color--base, #ffffff);
	--bhj-c-bg-sub: var(--wp--preset--color--base-sub, #fafafa);
	--bhj-c-bg-tint: var(--wp--preset--color--tint, #eaf2f8);
	--bhj-c-line: var(--wp--preset--color--line, #e3e3e3);
	--bhj-c-text: var(--wp--preset--color--contrast, #1a1a1a);
	--bhj-c-text-sub: var(--wp--preset--color--sub, #767676);
	--bhj-c-link: var(--wp--preset--color--link, #1b4f72);
	--bhj-c-black: var(--wp--preset--color--black, #000000);

	--bhj-s3: var(--wp--preset--spacing--30, 16px);
	--bhj-s4: var(--wp--preset--spacing--40, 24px);
	--bhj-s5: var(--wp--preset--spacing--50, 40px);
	--bhj-s6: var(--wp--preset--spacing--60, 64px);

	--bhj-w-read: 680px;
	--bhj-w-page: 1160px;
	--bhj-header-h: 64px;
}

/* ==========================================================================
   1. ロゴ（§3-5）— 原寸で置く。拡大しない
   ========================================================================== */
.bhj-site-logo {
	margin: 0;
	line-height: 0;
}

.bhj-site-logo a {
	display: inline-block;
	text-decoration: none;
	border: 0;
}

.bhj-site-logo img {
	width: 300px; /* 原寸。拡大はしない（§3-5） */
	max-width: 100%; /* 348px 未満の端末でのみ収める。原寸を超えることはない */
	height: auto; /* 縮小時に潰れないよう比率を保つ */
	aspect-ratio: 300 / 21;
	display: block;
}

/* ==========================================================================
   2. ヘッダー（§5-6）— 高さ 64px 固定。position:sticky は使わない
   ========================================================================== */
.bhj-header {
	min-height: var(--bhj-header-h);
	border-bottom: 1px solid var(--bhj-c-line);
}

.bhj-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bhj-s3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--s, 15px);
}

.bhj-nav a {
	color: var(--bhj-c-text);
	text-decoration: none;
}

.bhj-nav a:hover,
.bhj-nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 記事3本未満のカテゴリはリンクにしない（§4-0）。準備中として弱く見せる */
.bhj-nav .bhj-nav__pending {
	color: var(--bhj-c-text-sub);
	cursor: default;
}

.bhj-nav .bhj-nav__official {
	font-weight: 700;
}

/* SP のタップ領域（v0.2.10）。インライン要素のままだと当たり判定が約17pxしかなく、
   WCAG 2.5.5（44x44）を満たさない。行間ではなく padding で高さを作る。
   行間隔は padding が担うので row-gap は 0 に落とし、ヘッダーの伸びを抑える。 */
@media (max-width: 599px) {
	.bhj-nav {
		column-gap: var(--bhj-s3);
		row-gap: 0;
	}

	.bhj-nav a,
	.bhj-nav .bhj-nav__pending {
		display: inline-block;
		line-height: 1.6;
		padding-block: 10px; /* 15px * 1.6 = 24px + 20px = 44px */
	}
}

/* ==========================================================================
   3. 一覧の1件（§3-4 .row-card）— 本文は出さない
   ========================================================================== */
.bhj-row-card {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--bhj-s4);
	align-items: start;
	padding: var(--bhj-s4) 0;
	border-bottom: 1px solid var(--bhj-c-line);
}

.bhj-row-card > * {
	margin: 0;
	min-width: 0;
}

.bhj-row-card .wp-block-post-featured-image {
	margin: 0;
}

.bhj-row-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	/* 原本のアイキャッチは 300x200（3:2）。16:9 だと上下が切れるので原寸比に合わせる（v0.2.10） */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.bhj-row-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--gothic);
	font-size: var(--wp--preset--font-size--l, 22px);
	font-weight: 700;
	line-height: 1.5;
	margin: var(--wp--preset--spacing--20, 8px) 0;
}

.bhj-row-card .wp-block-post-title a {
	color: var(--bhj-c-text);
	text-decoration: none;
}

.bhj-row-card .wp-block-post-title a:hover,
.bhj-row-card .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bhj-row-card .wp-block-post-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 抜粋2行（§4-1） */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bhj-row-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* SP は縦積み。96px サムネイル（実面積 96x64）では記事の判別がつかないため、
   画像を本文幅いっぱいに出す（v0.2.10）。タイトルは L のまま下げない。 */
@media (max-width: 599px) {
	.bhj-row-card {
		grid-template-columns: 1fr;
		gap: var(--bhj-s3);
	}
}

/* ==========================================================================
   4. カテゴリから探す（§3-4 .cat-card）
   ========================================================================== */
.bhj-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bhj-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 899px) {
	.bhj-cat-grid {
		grid-template-columns: 1fr;
	}
}

.bhj-cat-card {
	border: 1px solid var(--bhj-c-line);
	padding: var(--bhj-s4);
}

.bhj-cat-card__name {
	display: block;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--m, 17px);
	line-height: 1.5;
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
	color: var(--bhj-c-text);
	text-decoration: none;
}

a.bhj-cat-card__name:hover,
a.bhj-cat-card__name:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bhj-cat-card--pending .bhj-cat-card__name {
	color: var(--bhj-c-text-sub);
}

.bhj-cat-card__badge {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0 0.5em;
	border: 1px solid var(--bhj-c-line);
	font-size: var(--wp--preset--font-size--xs, 13px);
	font-weight: 400;
	color: var(--bhj-c-text-sub);
	vertical-align: middle;
	/* 「準備中」の3文字が途中で折れないようにする */
	white-space: nowrap;
}

.bhj-cat-card__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--s, 15px);
	line-height: 1.8;
	color: var(--bhj-c-text-sub);
}

/* ==========================================================================
   5. 記事の共通コンポーネント（§3-4）
   ========================================================================== */

/* 要点ブロック — AIが抜き出す先。装飾なし */
.bhj-summary {
	background: var(--bhj-c-bg-tint);
	padding: var(--bhj-s4);
	margin: var(--bhj-s5) 0;
}

.bhj-summary > :first-child {
	margin-top: 0;
}

.bhj-summary > :last-child {
	margin-bottom: 0;
}

.bhj-summary__title {
	font-size: var(--wp--preset--font-size--xs, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
}

/* 直答 — 各 H2 直後の第一段落。AIOの抜粋単位 */
.bhj-lead-answer {
	border-left: 2px solid var(--bhj-c-black);
	padding-left: var(--bhj-s3);
	margin: var(--bhj-s3) 0 var(--bhj-s4);
}

/* 目次 — H2のみ */
.bhj-toc {
	border: 1px solid var(--bhj-c-line);
	padding: var(--bhj-s4);
	margin: var(--bhj-s5) 0;
	font-size: var(--wp--preset--font-size--s, 15px);
}

.bhj-toc__title {
	font-size: var(--wp--preset--font-size--xs, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
}

.bhj-toc ol,
.bhj-toc ul {
	margin: 0;
	padding-left: 1.25em;
}

/* 出典 — 第三者一次情報を最低1件 */
.bhj-refs {
	margin: var(--bhj-s6) 0 var(--bhj-s5);
	padding-top: var(--bhj-s4);
	border-top: 1px solid var(--bhj-c-line);
	font-size: var(--wp--preset--font-size--xs, 13px);
	line-height: 1.8;
	color: var(--bhj-c-text-sub);
}

.bhj-refs__title {
	font-size: var(--wp--preset--font-size--xs, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
	color: var(--bhj-c-text);
}

.bhj-refs ol {
	margin: 0;
	padding-left: 1.5em;
}

.bhj-refs a {
	overflow-wrap: anywhere;
}

/* 編集部 */
.bhj-author-box {
	border: 1px solid var(--bhj-c-line);
	padding: var(--bhj-s4);
	margin: var(--bhj-s5) 0;
	font-size: var(--wp--preset--font-size--s, 15px);
	line-height: 1.8;
}

.bhj-author-box__name {
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
}

.bhj-author-box p {
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
}

.bhj-author-box > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   6. CTA（§3-4）— 黒面＋白文字。価格・割引は書かない
   ========================================================================== */
.bhj-cta {
	border: 1px solid var(--bhj-c-black);
	margin: var(--bhj-s6) 0 var(--bhj-s5);
	padding: var(--bhj-s5) var(--bhj-s4);
	text-align: left;
}

.bhj-cta__title {
	font-size: var(--wp--preset--font-size--l, 22px);
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 var(--bhj-s3);
}

.bhj-cta__body {
	margin: 0 0 var(--bhj-s4);
	font-size: var(--wp--preset--font-size--s, 15px);
}

.bhj-btn,
a.bhj-btn {
	display: inline-block;
	background: var(--bhj-c-black);
	color: #fff;
	border: 1px solid var(--bhj-c-black);
	padding: 0.8em 1.6em;
	font-size: var(--wp--preset--font-size--s, 15px);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

a.bhj-btn:hover,
a.bhj-btn:focus-visible {
	background: #fff;
	color: var(--bhj-c-black);
	text-decoration: none;
}

/* 製品リスト（トップ／カテゴリの製品ブロック）
   列数は固定しない。680px の本文幅で4列にすると1列152px（内側102px）しか
   取れず、THE SCALP SERUM（1行に149px必要）が必ず2行に折れる。
   入る幅があるときだけ列を増やす。 */
.bhj-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--bhj-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bhj-product-card {
	border: 1px solid var(--bhj-c-line);
	padding: var(--bhj-s4);
	font-size: var(--wp--preset--font-size--s, 15px);
	line-height: 1.8;
}

.bhj-product-card__name {
	display: block;
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
}

.bhj-product-card__lead {
	margin: 0 0 var(--bhj-s3);
	color: var(--bhj-c-text-sub);
	font-size: var(--wp--preset--font-size--xs, 13px);
}

.bhj-product-card__link {
	font-size: var(--wp--preset--font-size--xs, 13px);
}

/* ==========================================================================
   7. 単一記事のレイアウト（§4-3）— 1カラム 680px

   v0.2.7:
   サイドバーを廃止した。目次は記事の冒頭（アイキャッチの下・本文の上）へ
   移し、側面の製品カードは外した（本文下の [bhj_cta_next] に集約）。
   PC・SP とも 1カラム 680px。DOM 順＝表示順になったので、SP 用の
   order による並べ替えと、サイドバーを畳むための :has() 判定は不要。
   横位置は親 main（constrained）が 680px 中央寄せにそろえる。
   テンプレート側で .bhj-single-wrap / .bhj-single-tail / .bhj-related の
   wide 指定を外してあるので、ページ内の全ブロックが同じレールに乗る。

   経緯（v0.2.4〜v0.2.6）:
   本文 680px ＋ サイドバー 300px の2カラムで、サイドバーを sticky で
   追従（v0.2.5）→ 静止（v0.2.6）と変えてきた。v0.2.7 でサイドバー自体を
   やめたため、そのグリッド定義は削除した。
   ========================================================================== */
.bhj-single-wrap {
	display: flex;
	flex-direction: column;
	row-gap: var(--bhj-s5);
}

/* 目次は .bhj-single-wrap の直下に置く。上下の間隔は wrap の row-gap で
   決めるので、.bhj-toc 自身が持つ上下マージンはここで打ち消す。 */
.bhj-single-wrap > .bhj-toc {
	margin-top: 0;
	margin-bottom: 0;
}

/* アイキャッチはカラム幅いっぱい。比率は元画像のまま。 */
.bhj-single-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
 * 7-1. 本文の下に続く要素（次の一歩・編集部ボックス）の幅と寄せ
 *
 * テンプレート側でこの2つを .bhj-single-tail という flow の器に入れてある。
 * 器を constrained レイアウトにすると、WordPress コアの
 *   .is-layout-constrained > :where(...) { margin-left: auto !important; }
 * が効いて、こちら側から寄せを制御できなくなる（!important のため
 * 詳細度では勝てない）。そこで器は flow のままにして、幅と寄せをここで決める。
 *
 * box-sizing は border-box を明示する。.bhj-cta / .bhj-author-box は
 * 左右 24px のパディングと 1px のボーダーを持つので、指定しないと
 * 外寸が 680+50=730px になり本文カラムからはみ出す（実測）。
 * -------------------------------------------------------------------------- */
.bhj-single-tail > * {
	box-sizing: border-box;
	max-width: var(--bhj-w-read);
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
 * 7-2. 本文中メディアのカラム内封じ込め（v0.2.4）
 *
 * 記事本文は WordPress の DB 側にあり、ブロックエディタを通していない
 * 生の <figure><img src="..."> が入っている記事がある（実測: 全11記事中6記事）。
 * クラスが一切付かないため core の
 *   .wp-block-image img { max-width: 100%; height: auto; }
 * が一致せず、computed max-width が none のまま実寸（1280px）で描画され、
 * 680px の本文カラムを約600px はみ出していた（v0.2.4 当時は右の
 * サイドバーに覆いかぶさっていた。サイドバーは v0.2.7 で廃止）。
 *
 * 本文HTMLはテーマから直せないので、クラスに依存しない形で止める。
 * -------------------------------------------------------------------------- */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content svg {
	max-width: 100%;
	height: auto;
}

.entry-content pre {
	max-width: 100%;
	overflow-x: auto;
}

.entry-content table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

/* flex/grid の子は既定で min-width:auto のため、中身が本来幅を持つと
   カラム自体が押し広げられる。明示的に止める。 */
.bhj-single-wrap > * {
	min-width: 0;
}

/* --------------------------------------------------------------------------
 * 7-3. 公開日／更新日のラベル（v0.2.8）
 *
 * 「公開」「更新」の文字は functions.php の bhj_child_label_post_date() が
 * 実DOMのテキストとして入れる。::before で作らないのは、疑似要素の文字が
 * DOMに存在せずクローラや一部の読み上げ環境に拾われないため。
 * ここでは見た目だけを決める。
 *
 * 日付本体より一段弱いグレーにして、ラベルが主役にならないようにする。
 * -------------------------------------------------------------------------- */
.bhj-date-label {
	margin-right: 0.4em;
	color: var(--bhj-c-text-sub);
	font-weight: 400;
}

/* ==========================================================================
   8. パンくず（MUプラグイン 040-bhj-site.php が出力する .bhj-breadcrumb を
      本文先頭に差し込むため、こちらでは上書きしない。位置だけ確認用に残す）
   ========================================================================== */

/* ==========================================================================
   9. フッター（§5-6）— 3カラム。SPは1カラム
   ========================================================================== */
.bhj-footer {
	border-top: 1px solid var(--bhj-c-line);
	background: var(--bhj-c-bg-sub);
	font-size: var(--wp--preset--font-size--s, 15px);
	line-height: 1.9;
}

.bhj-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bhj-s5);
}

@media (max-width: 899px) {
	.bhj-footer__cols {
		grid-template-columns: 1fr;
		gap: var(--bhj-s4);
	}
}

.bhj-footer__heading {
	font-size: var(--wp--preset--font-size--xs, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
}

.bhj-footer ul {
	margin: 0 0 var(--bhj-s4);
	padding: 0;
	list-style: none;
}

.bhj-footer li {
	margin: 0 0 var(--wp--preset--spacing--10, 4px);
}

.bhj-footer a {
	color: var(--bhj-c-text);
	text-decoration: none;
}

.bhj-footer a:hover,
.bhj-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bhj-footer__pending {
	color: var(--bhj-c-text-sub);
}

.bhj-footer__tagline {
	margin: var(--bhj-s3) 0 var(--wp--preset--spacing--20, 8px);
}

.bhj-footer__company {
	margin: 0;
	color: var(--bhj-c-text-sub);
	font-size: var(--wp--preset--font-size--xs, 13px);
}

.bhj-footer__copyright {
	margin: var(--bhj-s5) 0 0;
	padding-top: var(--bhj-s3);
	border-top: 1px solid var(--bhj-c-line);
	font-size: var(--wp--preset--font-size--xs, 13px);
	color: var(--bhj-c-text-sub);
}

/* ==========================================================================
   10. 空カテゴリ時の表示（§4-2）— 謝罪ではなく次の行き先を出す
   ========================================================================== */
.bhj-no-results {
	border: 1px solid var(--bhj-c-line);
	padding: var(--bhj-s5) var(--bhj-s4);
	margin: var(--bhj-s5) 0;
}

.bhj-no-results > :first-child {
	margin-top: 0;
}

.bhj-no-results > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   11. ページネーション
   ========================================================================== */
.wp-block-query-pagination {
	margin-top: var(--bhj-s5);
	font-size: var(--wp--preset--font-size--s, 15px);
}

/* ==========================================================================
   12. 表（比較・手順）
   ========================================================================== */
.wp-block-table.bhj-spec table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.bhj-spec th,
.wp-block-table.bhj-spec td {
	border: 1px solid var(--bhj-c-line);
	padding: 0.6em 0.8em;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.bhj-spec th {
	background: var(--bhj-c-bg-sub);
	font-weight: 700;
}

/* ==========================================================================
   13. このケアに使うもの（製品ブロック）— v0.2.9

   記事末の .bhj-cta（白地＋黒枠）と役割を分けるため、こちらは黒面にする。
   新しい色は増やさない。既存トークンの黒・白・線色だけで組む。
   ========================================================================== */
.bhj-use {
	display: grid;
	gap: var(--bhj-s4);
	/* 左右マージンは書かない。器（constrained / .bhj-single-tail > *）が
	   margin-left:auto で中央に寄せているのを打ち消さないため。 */
	margin-block: var(--bhj-s6) var(--bhj-s5);
	padding: var(--bhj-s4);
	background: var(--bhj-c-black);
	color: #fff;
}

@media (min-width: 600px) {
	.bhj-use--has-media {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: center;
	}
}

.bhj-use__media {
	margin: 0;
	line-height: 0;
}

.bhj-use__img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bhj-use__title {
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
	font-size: var(--wp--preset--font-size--l, 22px);
	font-weight: 700;
	line-height: 1.5;
}

.bhj-use__body {
	margin: 0 0 var(--bhj-s4);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--s, 15px);
}

.bhj-use__list {
	display: grid;
	gap: var(--wp--preset--spacing--20, 8px);
	margin: var(--bhj-s3) 0 0;
	padding: 0;
	list-style: none;
}

.bhj-use__link,
a.bhj-use__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bhj-s3);
	padding: 0.7em 1em;
	background: #fff;
	color: var(--bhj-c-black);
	font-size: var(--wp--preset--font-size--s, 15px);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

a.bhj-use__link:hover,
a.bhj-use__link:focus-visible {
	background: var(--bhj-c-bg-sub);
	text-decoration: underline;
}

.bhj-use__arrow {
	flex: 0 0 auto;
}

/* ==========================================================================
   14. 手順リスト（§3-4）— v0.2.9

   意味の上では順序付きリストなので、必ず ol / li で組む。
   番号は counter で描くため、li に番号を書かない（本文と番号が二重になる）。
   1px の隙間から下地の線色を見せて、罫線を1本ずつ引かずに区切る。
   ========================================================================== */
ol.wp-block-list.bhj-steps,
ol.bhj-steps {
	display: grid;
	gap: 1px;
	margin-block: var(--bhj-s5);
	padding: 0;
	border: 1px solid var(--bhj-c-line);
	background: var(--bhj-c-line);
	list-style: none;
	counter-reset: bhj-step;
}

ol.wp-block-list.bhj-steps > li,
ol.bhj-steps > li {
	display: grid;
	grid-template-columns: 2.2em minmax(0, 1fr);
	gap: var(--bhj-s3);
	margin: 0;
	padding: var(--bhj-s3) var(--bhj-s4);
	background: var(--bhj-c-bg);
	counter-increment: bhj-step;
}

ol.wp-block-list.bhj-steps > li::before,
ol.bhj-steps > li::before {
	content: counter( bhj-step, decimal-leading-zero );
	color: var(--bhj-c-text-sub);
	font-size: var(--wp--preset--font-size--xs, 13px);
	font-weight: 700;
	line-height: 2;
}

/* 手順名は太字1行、そのあとに説明。<strong> のあとの <br> で改行する。 */
ol.wp-block-list.bhj-steps > li strong,
ol.bhj-steps > li strong {
	display: block;
	font-weight: 700;
}

@media (max-width: 599px) {
	ol.wp-block-list.bhj-steps > li,
	ol.bhj-steps > li {
		grid-template-columns: 1.9em minmax(0, 1fr);
		padding: var(--bhj-s3);
	}
}

/* ==========================================================================
   15. 記事末の2分割ナビ — v0.2.9

   準備中カテゴリへはリンクしない（functions.php 側で判定済み）。
   セルが1つしか出せないときは1列のまま全幅に伸びる。
   ========================================================================== */
.bhj-next-nav {
	display: grid;
	/* 左右マージンは書かない。.bhj-single-tail > * の margin-left:auto を
	   打ち消すと、この帯だけ左に寄って本文のレールから外れる。 */
	margin-block: var(--bhj-s6) var(--bhj-s5);
	border-top: 1px solid var(--bhj-c-line);
	border-bottom: 1px solid var(--bhj-c-line);
	background: var(--bhj-c-bg-sub);
}

.bhj-next-nav__cell,
a.bhj-next-nav__cell {
	display: grid;
	gap: var(--wp--preset--spacing--20, 8px);
	align-content: start;
	padding: var(--bhj-s4);
	color: var(--bhj-c-text);
	text-decoration: none;
}

a.bhj-next-nav__cell:hover .bhj-next-nav__title,
a.bhj-next-nav__cell:focus-visible .bhj-next-nav__title {
	text-decoration: underline;
}

.bhj-next-nav__label {
	color: var(--bhj-c-text-sub);
	font-size: var(--wp--preset--font-size--xs, 13px);
	letter-spacing: 0.08em;
}

.bhj-next-nav__title {
	font-size: var(--wp--preset--font-size--m, 17px);
	font-weight: 700;
	line-height: 1.6;
}

@media (min-width: 600px) {
	.bhj-next-nav:has(> :nth-child(2)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bhj-next-nav__cell + .bhj-next-nav__cell {
		border-left: 1px solid var(--bhj-c-line);
	}
}

/* ==========================================================================
   16. 装飾の抑制（§8 やらないこと）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}