/* 固定ページのヒーロー帯。

   出しているのは template-parts/page/hero.php で、入口は page.php の
   get_template_part('template-parts/page/hero', ...) 1 本のみ。
   Woo のカート/チェックアウト/マイページ/ショップは自前のヒーローを
   持たず、パンくずの帯だけをこのファイル経由で出す（hero.php 側の分岐）。

   このファイルは PageHeroController::enqueueStyles で常時読み込まれる
   （ハンドル optib-page-hero）。依存は theme-style と
   optib-breadcrumb-bar の両方に張っており、パンくずの帯のスタイルより
   後に読み込まれることを保証する。詳細度でパンくず側のトークン依存
   （--color-text-muted 等）を上書きするのはこの読み込み順があるため。

   帯は <section class="l-site-content"> の外に置かれ、全幅で敷く。
   幅の制約は中の .l-container が持つ（breadcrumb-bar.css と同じ考え方）。
*/

.optib-page-hero {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 24px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 190px;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}

@media (max-width: 767px) {
	.optib-page-hero {
		min-height: 140px;
		padding: 16px 0;
	}

	/* 親テーマの h1 はスマホ幅で約 33px（本文の h2 は約 27.6px）。帯の中で
	   2 行に折り返しやすく、本文の見出しと大きさの差も付かないので、
	   帯内だけ 26px に落とす。デスクトップは親のまま。 */
	.optib-page-hero__title {
		font-size: 26px;
	}

	/* 本文の見出し（#3401）。親テーマの prose スケールはスマホ幅でも
	   縮まず、H2 27.6px / H3 23px のまま。帯の H1 を 26px に落とした結果、
	   本文の H2 がページタイトルより大きく見え、階層が逆転していた。
	   固定ページの本文に限り H1 26 > H2 22 > H3 19 > H4 以下 17 > p 16 に
	   揃える。親の宣言は :where() 包みで詳細度 0 なので、この 3 段で勝つ。
	   デスクトップは親のまま。 */
	body.page .the-content.prose h2 {
		font-size: 22px;
	}

	body.page .the-content.prose h3 {
		font-size: 19px;
	}

	body.page .the-content.prose h4,
	body.page .the-content.prose h5,
	body.page .the-content.prose h6 {
		font-size: 17px;
	}
}

.optib-page-hero--image {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
		var(--optib-page-hero-image);
}

.optib-page-hero--plain {
	background-color: var(--color-primary, #333);
}

.optib-page-hero__title {
	margin: 0;
	color: #fff;
	overflow-wrap: anywhere;
}

/* パンくずの帯はヒーロー帯の中にネストして出る。
   breadcrumb-bar.css の背景・文字色トークン依存をここで打ち消し、
   ヒーロー帯に馴染む透明背景・白文字にする。詳細度はこのセレクタの
   2 段構成（.optib-page-hero .optib-breadcrumb-bar）で確保する。

   ダーク配色（presets/_shared/palettes/dark/style.css の
   `body.optib-palettes-dark .optib-breadcrumb-bar`）はクラス 2 個 + 要素 1 個
   （0,2,1）で、このセレクタのクラス 2 個（0,2,0）と詳細度が拮抗し、
   勝敗が読み込み順の後勝ちに依存してしまう。`.optib-page-hero` を
   二重にしてクラス数を 3 個（0,3,0）に上げ、読み込み順に関係なく
   確実に勝つようにする。 */
.optib-page-hero.optib-page-hero .optib-breadcrumb-bar {
	background: transparent;
	color: #fff;
}

.optib-page-hero .optib-breadcrumb-bar a,
.optib-page-hero .optib-breadcrumb-bar .optib-crumbs__yoast a {
	color: #fff;
}

/* ヒーロー帯の直後の .l-site-content には、親テーマ既定の margin-top
   （デスクトップ 80px）をそのまま効かせる。appearance-blog.css の
   `.optib-breadcrumb-bar + .l-site-content { margin-top: 0 }` は、白背景の
   パンくずの帯が自身の margin-bottom: 24px で本文との間隔を持つことを
   前提にした打ち消しであり、背景色（画像）付きのヒーロー帯には当てはまらない。
   当初は同じ打ち消しをここにも置いていたが、帯の下端と本文が 0px で接して
   しまったため外した。ヒーロー無しのページと同じ余白になる。 */

/* ヒーロー帯自身にも padding: 24px 0 があり、内部のパンくずの帯
   （breadcrumb-bar.css）は margin-bottom: 24px を持つ。ネストした結果、
   ヒーロー下端とパンくず下端の間に 24px の死に余白が残るため、
   ヒーロー内でのみ打ち消す。 */
.optib-page-hero .optib-breadcrumb-bar {
	margin-bottom: 0;
}

/* パンくず子孫の色。区切り「>」・家アイコン・現在地・Yoast の現在地は、
   breadcrumb-bar.css で子要素へ直接色を宣言しており、親の
   .optib-page-hero .optib-breadcrumb-bar { color: #fff } を継承しない
   （直接宣言は継承に必ず勝つ）。暗い帯の上で最も読ませたい現在地の
   ページ名が沈むため、同等以上の詳細度で白系に上書きする。 */
.optib-page-hero .optib-breadcrumb-bar .optib-crumbs__item + .optib-crumbs__item::before,
.optib-page-hero .optib-breadcrumb-bar .optib-crumbs__current,
.optib-page-hero .optib-breadcrumb-bar .optib-crumbs__yoast .breadcrumb_last {
	color: #fff;
}

.optib-page-hero .optib-breadcrumb-bar .optib-crumbs__item--home::before {
	background-color: #fff;
}