/* ==========================================================================
   Franchise Journal スキン追加分
   トークン（色・書体・角丸・影）は style.css の :root が正本。
   ここには journal 固有の意匠だけを置く：新聞・通信社の基調として、
   マストヘッドの赤い天罫と二重罫、強い罫線で締める見出し、白地に
   墨枠の数字ボックス、赤地に白文字のボタン、日付・数字の等幅揃え。
   意匠は原則として親の front-page／archive／page-profile の部品に
   寄せるが、記事ページは 1.0.5 で single.php を上書きして新聞記事の
   形式に組み替えたため、その専用部品（署名行・案内欄）の意匠も持つ。
   サンプルは記事ページのみのため、フロント側の部品も同じ読み替えで
   基調を統一する。
   ========================================================================== */

/* ---- ナビバー：題字（下記マストヘッド）の足元に置く全幅のバー。
   天に赤6px、足元は二重罫（サンプルの .masthead／.catnav の基調）。
   追従（sticky）するのはこのバーだけで、題字はスクロールで流れ去る
   （header.php 上書き、1.0.3） ---- */
.bmb-site-header {
	border-top: 6px solid var(--gold);
	border-bottom: 3px double var(--journal-line-strong);
}

/* ---- フッター：天罫と同じ赤6pxで紙面を締める ----
   サンプルのフッター天罫は墨6pxだが、親のフッター地色が墨（--navy）の
   ため同色では見えない。マストヘッドの赤と対にしてデスクの罫として引く。 */
.bmb-footer {
	border-top: 6px solid var(--gold);
}

/* ---- ヘッダーのサイト名：正式名称を省略せず全文出す ----
   サイト名「渡辺喜久男のおたからフランチャイズニュース」は21文字あり、
   狭いデスクトップ幅では名称＋ドメイン＋ナビでコンテナ上限を超え、
   ブランド側が省略されることがある（watcher 1.0.3／portal と同じ型）。
   名称を 1.125rem（18px）に一段下げて幅を詰め、ブランドは縮小させない。
   入りきらない分は横スクロール可のナビ側が吸収する。
   モバイル（≤768px）は親の仕様どおりブランド非表示のまま触らない。 */
@media (min-width: 769px) {
	.bmb-site-header__inner {
		gap: 16px 20px;
	}

	.bmb-site-header__brand {
		flex: 0 0 auto;
	}

	.bmb-site-header__name {
		font-size: 1.125rem;
	}
}

/* ---- 追従バーのナビ＝罫で区切られた文字ナビ（1.0.5） ----
   親のピル型（面＋角丸）をやめ、新聞のカテゴリ欄のように、文字だけを
   縦罫で区切って並べる。対象は header.php で付けた .bmb-nav--ruled と、
   モバイルの「トップ」導線（.bmb-nav-home、このサイトの形として残す）。
   現在地は赤文字＋赤の下線（サンプルのカテゴリナビの基調）。
   タップ高さ（親の min-height:44px）はそのまま残す。 */
.bmb-nav--ruled {
	gap: 0;
}

.bmb-nav--ruled a,
.bmb-nav-home {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding-left: 13px;
	padding-right: 13px;
	font-weight: 700;
	color: var(--ink-soft);
}

.bmb-nav--ruled a:hover,
.bmb-nav-home:hover {
	background: transparent;
	color: var(--gold-ink);
}

/* 項目同士の縦罫と、「トップ」導線の右の区切り */
.bmb-nav--ruled li {
	display: flex;
	align-items: center;
}

.bmb-nav--ruled li + li::before {
	content: "";
	width: 1px;
	height: 1em;
	background: var(--journal-line-strong);
	opacity: 0.4;
}

.bmb-nav-home {
	box-shadow: inset -1px 0 0 var(--line);
}

.bmb-nav--ruled .current-menu-item > a,
.bmb-nav--ruled .current_page_item > a {
	background: transparent;
	border-color: transparent;
	color: var(--gold-ink);
	box-shadow: inset 0 -3px 0 var(--gold);
}

/* ---- マストヘッド（header.php 上書き、1.0.3） ----
   親のフレッシュバー（紺地の帯）の置き場所に、新聞の題字を置く。
   題字は白地に墨の大きな明朝で中央に置き、その下の日付行（当日の日付＝
   date_i18n／タグライン／最終更新と数字の時点）を細罫で区切る。
   帯の地色は紙面（--surface）に読み替え、親の紺地はフッター等に残る。
   小さい画面では最終更新の欄を落とし（親がフレッシュバー右欄を
   ≤640px で隠すのと同じ判断）、日付と題字だけを残す。 */
.bmb-masthead {
	background: var(--surface);
	color: var(--ink);
	border-bottom: 1px solid var(--line);
}

.bmb-masthead__inner {
	padding-top: 22px;
	padding-bottom: 12px;
	text-align: center;
}

.bmb-masthead__name {
	display: inline-block;
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: clamp(1.25rem, 4.2vw, 2.5rem);
	line-height: 1.3;
	letter-spacing: 0.05em;
	white-space: nowrap;
	color: var(--ink);
	text-decoration: none;
}

.bmb-masthead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 18px;
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
	font-size: 0.8125rem;
	color: var(--ink-soft);
	text-align: left;
}

.bmb-masthead__date {
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bmb-masthead__tagline {
	flex: 1 1 auto;
}

.bmb-masthead__fresh {
	display: flex;
	gap: 14px;
	white-space: nowrap;
	color: var(--ink-faint);
}

@media (max-width: 640px) {
	.bmb-masthead__inner {
		padding-top: 16px;
	}

	.bmb-masthead__fresh {
		display: none;
	}

	/* 1.0.4：題字は nowrap のためスマホ幅（390px）で名称が右端で切れた。
	   モバイルでは折り返しを許し、2行の題字として見せる。 */
	.bmb-masthead__name {
		white-space: normal;
		font-size: 1.35rem;
	}
}

/* ---- セクション見出しは強い罫線の2px下線で締める（サンプルの本文 h2
   と数字ボックス見出しの基調） ---- */
.bmb-section__head {
	border-bottom: 2px solid var(--journal-line-strong);
	padding-bottom: 8px;
}

/* ---- 数字パネル：墨の塗りパネルを、白地＋墨枠2pxの「数字で見る」
   ボックスに読み替える（サンプルの .numbers の基調） ----
   親の指定は --navy 地に --gold-bright のアクセント。白地では明るい赤が
   薄くなるため、単位・増減・リンクの赤は濃い方の --gold-ink に落とす。 */
.bmb-numbers-panel {
	background: var(--surface);
	border: 2px solid var(--journal-line-strong);
	color: var(--ink);
	box-shadow: none;
}

.bmb-numbers-panel__title {
	color: var(--ink);
	border-bottom: 1px solid var(--journal-line-strong);
}

.bmb-numbers-panel__unit,
.bmb-numbers-panel__delta,
.bmb-numbers-panel__link {
	color: var(--gold-ink);
}

/* ダークモードでは地が暗くなるので、赤は明るい方へ戻す */
@media (prefers-color-scheme: dark) {
	.bmb-numbers-panel__unit,
	.bmb-numbers-panel__delta,
	.bmb-numbers-panel__link {
		color: var(--gold-bright);
	}
}

/* ---- ボタン：主ボタンは赤地に白文字（サンプルのカテゴリチップの基調） ----
   親の指定は「背景 var(--navy)／文字 var(--accent-soft)」で、journal では
   墨地に淡赤地色の文字になり判読はできるが、デスクの顔である赤に合わせる。 */
.bmb-btn--primary {
	background: var(--gold);
	border-color: var(--gold);
	color: #fff;
}

.bmb-btn--primary:hover {
	opacity: 0.88;
}

/* ---- 案内カード（ダーク面）のCTA：赤地のボタンに白文字 ----
   親の指定は「背景 var(--gold)／文字 var(--navy)」で、journal では
   赤（#b91c1c）地に墨（#1c1c1e）文字になり対比が弱い（他サイトで
   起きた同色化と同じ型）。ダークモードの明るい赤（#e5484d）地でも
   墨文字は弱いため、両モードとも文字を白に読み替える。 */
.bmb-guide__card.is-dark .bmb-guide__cta {
	color: #fff;
}

/* ---- プロフィールmini：数字ボックスと同じ墨枠2pxで「囲み記事」の
   重みにする（サンプルの .numbers／.chairman の囲み基調） ---- */
.bmb-profile-mini {
	border: 2px solid var(--journal-line-strong);
}

/* ---- 会長の言葉：左に赤の縦罫を添える（サンプルのリード文の基調） ---- */
.bmb-quote {
	border-left: 4px solid var(--gold);
}

/* ---- 日付・数字は等幅で揃える（サンプルの .pub-date と数字ボックスの
   tabular-nums の基調。速報の日付が顔のメディアなので崩さない） ---- */
.bmb-num,
.bmb-numbers-panel__value,
.bmb-numbers-single__value,
.bmb-timeline__when,
.bmb-card__meta,
.bmb-sources__updated {
	font-variant-numeric: tabular-nums;
}

/* ---- 写真の壁：キャプションは小さく淡く、出典代わりに読ませる
   （サンプルの figcaption の基調）。毎記事に会長写真が載るサイトなので、
   写真まわりは罫と余白で締め、影は付けない ---- */
.bmb-photo-wall__item figcaption {
	font-size: 0.78rem;
	color: var(--ink-soft);
	line-height: 1.6;
}

/* ---- 記事カードの重ねキャプションは出さない（1.0.1） ----
   親の .bmb-card__caption は、記事カード（template-parts/card-post.php）
   の画像下部に白文字で重なるキャプションで、他サイトでは場面説明を
   見せるために使われている。しかし journal の添付画像のキャプションは
   全点が同じ定型文（「おたからやのプレスリリース画像 - 渡辺喜久男の
   フランチャイズニュース」）で、場面ごとの説明ではないため、カード上で
   重ねると2行目が画像の下端で切れたり他の文字と重なって見づらい
   （本番切り替え後の確認で検出）。そのためカード上では視覚的に隠す。
   HTML のテキスト自体は残るので、alt・ImageObject 等の構造化データや
   記事本文内の写真キャプション（画像の下に出るもの）には影響しない。 */
.bmb-card__caption {
	display: none;
}

/* ---- 月別アーカイブ（front-page.php 上書きの専用部品、1.0.2） ----
   wp_get_archives が出す月別リスト（li の並び）。新聞のバックナンバー
   索引として、罫で区切るだけの素のリストにする。件数の数字は
   他の日付・数字と同じく等幅で揃える。 */
.bmb-monthly-archive {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--line);
}

.bmb-monthly-archive li {
	border-top: 1px solid var(--line);
	padding: 0.65rem 0.25rem;
	font-variant-numeric: tabular-nums;
}

.bmb-monthly-archive a {
	color: var(--gold-ink);
	font-weight: 700;
	text-decoration: none;
}

.bmb-monthly-archive a:hover {
	text-decoration: underline;
}

/* ---- トップ記事（front-page.php 上書きの専用部品、1.0.3） ----
   ヒーローを新聞のトップ記事の形にする：本文（キッカー・見出し・
   リード・メタ・ボタン）は左、写真は右に約4割幅（3fr／2fr）。
   横並びは写真がある記事だけ（.bmb-topstory--split は PHP 側で
   付け外しする）。写真が無い記事と狭い画面では、本文→写真の
   1カラムに戻る（親の従来表示と同じ落ち方）。 */
.bmb-topstory {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 861px) {
	.bmb-topstory--split {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 26px;
		align-items: start;
	}
}

/* ---- 見出しリスト（front-page.php 上書きの専用部品、1.0.3） ----
   「最新記事」をカードグリッドではなく、新聞の見出し一覧にする。
   1行＝日付（等幅）＋明朝の見出し＋小さなサムネイルで、罫で区切る。
   サムネイルは bmb-card サイズの画像を 104px 幅に縮めて使う。 */
.bmb-headline-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--line);
}

.bmb-headline {
	display: grid;
	grid-template-columns: 8.5em minmax(0, 1fr) auto;
	gap: 6px 16px;
	align-items: center;
	border-top: 1px solid var(--line);
	padding: 12px 2px;
}

.bmb-headline__date {
	font-size: 0.8125rem;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bmb-headline__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0;
}

.bmb-headline__title a {
	color: var(--ink);
	text-decoration: none;
}

.bmb-headline__title a:hover {
	color: var(--gold-ink);
	text-decoration: underline;
}

.bmb-headline__media {
	display: block;
	width: 104px;
}

.bmb-headline__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

@media (max-width: 640px) {
	.bmb-headline {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.bmb-headline__date {
		grid-column: 1 / -1;
	}

	.bmb-headline__media {
		width: 84px;
	}
}

/* ---- 記事ページ（single）の新聞意匠（1.0.3／1.0.5で single.php 上書き） ----
   日付行（.bmb-freshline）は上下の罫で締めた「日付欄」に、記事タイトルは
   大きな明朝に、本文の h2 は強い罫の下線で締める。
   記事タイトルの拡大は、親の ≤640px の縮小指定を上書きしないよう
   641px 以上にだけ効かせる。 */
.bmb-freshline {
	border-top: 2px solid var(--journal-line-strong);
	border-bottom: 1px solid var(--journal-line-strong);
	padding-top: 8px;
	padding-bottom: 8px;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 641px) {
	.bmb-article__title {
		font-size: 2rem;
		line-height: 1.45;
	}
}

.bmb-article__body h2 {
	border-bottom: 2px solid var(--journal-line-strong);
	padding-bottom: 6px;
}

/* ---- 署名行（single.php 上書きの専用部品、1.0.5） ----
   タイトルの直下に置く、通信社記事のクレジット行。編集部の明朝と
   配信日を、細罫の下に小さく並べる。 */
.bmb-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: baseline;
	margin: -4px 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	font-size: 0.8125rem;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

.bmb-byline__desk {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 0.9375rem;
	color: var(--ink);
	letter-spacing: 0.12em;
}

/* ---- リード文（single.php で主役写真の後ろへ移設、1.0.5） ----
   サンプルの「赤い左罫のリード文」の基調で、本文の冒頭として読ませる。 */
.bmb-article__lead {
	border-left: 4px solid var(--gold);
	padding-left: 14px;
}

/* ---- 案内欄（template-parts/guide-cards.php 上書きの専用部品、1.0.5） ----
   親の3枚カードをやめ、強い罫で囲んだテキストブロックにする。
   3件は細罫で区切った段落として収め、リンクは濃赤で本文の流れに置く。
   親の .bmb-guide（grid）は、この囲みの中身の並びとしてそのまま使う。 */
.bmb-notice {
	background: var(--surface);
	border: 2px solid var(--journal-line-strong);
	padding: 18px 20px 6px;
}

.bmb-notice__title {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 1rem;
	margin: 0 0 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--journal-line-strong);
}

.bmb-notice__item {
	padding: 12px 0;
}

.bmb-notice__item + .bmb-notice__item {
	border-top: 1px solid var(--line);
}

.bmb-notice__label {
	display: block;
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 0.9375rem;
	margin-bottom: 4px;
}

.bmb-notice__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--ink-soft);
}

.bmb-notice__text a {
	color: var(--gold-ink);
	font-weight: 700;
}

.bmb-notice__cta {
	white-space: nowrap;
}

/* ---- フロント構成の作り替え（1.0.6） ----
   トップ記事は右サイド（プロフィールmini／言葉ピックアップ）を外し、
   親の2カラム枠（本文＋320px）を1カラムに戻して紙面いっぱいに使う。
   数字は冒頭の大きなパネルではなく、「数字と記録」セクションの冒頭に
   置くコンパクトな一覧として見せる（数字ボックスと同じ墨枠2px）。 */
.bmb-hero-wrap--solo {
	grid-template-columns: minmax(0, 1fr);
}

.bmb-records-numbers {
	background: var(--surface);
	border: 2px solid var(--journal-line-strong);
	padding: 14px 18px 12px;
	margin-bottom: 22px;
}

.bmb-records-numbers__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--journal-line-strong);
}

.bmb-records-numbers__label {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 1rem;
}

.bmb-records-numbers__link {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--gold-ink);
	text-decoration: none;
}

.bmb-records-numbers__link:hover {
	text-decoration: underline;
}

.bmb-records-numbers__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 22px;
	margin: 12px 0 4px;
}

.bmb-records-numbers__item {
	border-left: 1px solid var(--line);
	padding-left: 14px;
}

.bmb-records-numbers__metric {
	font-size: 0.8125rem;
	color: var(--ink-faint);
	margin: 0;
}

.bmb-records-numbers__value {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	margin: 2px 0 0;
}

.bmb-records-numbers__unit {
	font-size: 0.875rem;
	margin-left: 2px;
}

.bmb-records-numbers__asof {
	display: block;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--ink-faint);
	margin-top: 2px;
}

.bmb-records-numbers__source {
	margin: 6px 0 2px;
	font-size: 0.75rem;
	color: var(--ink-faint);
}

@media (max-width: 640px) {
	.bmb-records-numbers__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bmb-records-numbers__item {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding-left: 0;
		padding-top: 8px;
	}

	.bmb-records-numbers__item:first-child {
		border-top: 0;
		padding-top: 0;
	}
}