/* ============================================================
   block-styles.css — Gutenberg ブロック固有＋装飾スタイル
   the_content() が出力するコアブロックのうち、prose.css（本文タイポの
   正典）に「無い」ものだけをここに置く。役割分担:
     prose.css       … 見出し/段落/リスト/引用/表/画像/hr/コードの base
     block-styles.css … ボタン・Cover・Columns・Gallery・Details 等の
                          ブロック固有レイアウト＋見出し/セパレータの装飾
   投稿（.post-body）と固定ページ（.page-body）で共有する。

   読み込み: prose.css の直後（enqueue.php 参照）。装飾は prose の base を
   上書きするため後に読む。幅の制御は page.css の配置システム
   （.page-entry > * / .alignwide / .alignfull）に委譲する。

   is-style-* の装飾バリアントは、この段階では CSS が待機するだけ。
   エディタUIに選択肢として出すには register_block_style() の登録が要る
   （lib/admin/block-style.php・次段階）。
   ============================================================ */

/* =========================================
   見出し — 装飾バリアント
   register_block_style('core/heading', ...) で登録して使う
   （lib/admin/block-style.php）。
   見出しの base（font/color/margin）は prose.css が持つ。ここは装飾の差分だけ。

   ★ セレクタは .post-body/.page-body でスコープしない ★
   エディタ iframe には .page-body ラッパーが無いため、スコープすると
   add_editor_style で読んでもプレビューされない。詳細度 (0,1,1) の
   h2.is-style-* を prose の後に読ませ、同詳細度の base `h2.wp-block-heading`
   （0,1,1）をソース順で上書きする。各バリアントの border-bottom:none 等は、
   base に下罫が戻った場合にも装飾が崩れないための防御的リセット。
   is-style-* はブロックエディタが本文見出しにしか付けないので、
   スコープ無しでもナビ等には及ばない。
   ========================================= */

/* A. 下線アクセント — 見出し下に短い brand ライン */
h2.is-style-bottom-accent,
h3.is-style-bottom-accent {
	border-bottom: none;
	padding-bottom: 0;
}
h2.is-style-bottom-accent::after,
h3.is-style-bottom-accent::after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	background: var(--brand);
	margin-top: .5em;
}

/* B. 上線アクセント — 見出し上に短い brand ライン */
h2.is-style-top-accent,
h3.is-style-top-accent {
	border-bottom: none;
	padding-bottom: 0;
}
h2.is-style-top-accent::before,
h3.is-style-top-accent::before {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	background: var(--brand);
	margin-bottom: .6em;
}

/* C. 左罫 — 見出し左に縦の brand ライン */
h2.is-style-left-border,
h3.is-style-left-border {
	border-bottom: none;
	padding-bottom: 0;
	border-left: 3px solid var(--brand);
	padding-left: 20px;
}

/* D. 帯 — 淡い背景で見出しを囲む */
h2.is-style-highlight,
h3.is-style-highlight {
	border-bottom: none;
	padding: 16px 24px;
	background: var(--bg-subtle);
}

/* E. ドット — 見出し先頭に brand の丸 */
h2.is-style-dot,
h3.is-style-dot {
	border-bottom: none;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	gap: 16px;
}
h2.is-style-dot::before,
h3.is-style-dot::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%; /* reason: ドットの完全な丸。意図的な形状 */
	background: var(--brand);
	flex-shrink: 0;
}

/* F. 下線 — 見出し下に ink の 2px 罫 */
h2.is-style-underline,
h3.is-style-underline,
h4.is-style-underline {
	border-bottom: 2px solid var(--ink);
	padding-bottom: 0.5em;
}

/* =========================================
   ボタン — core/buttons・core/button
   岡田屋のボタン言語（footer CTA / .btnfill）に合わせる:
     塗り = --cta / 文字 = --paper / radius 4 / --text-base /
     余白 = spacing token / weight 700
   ========================================= */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-md);
	margin-block: var(--wp--preset--spacing--50);
}

/* グループ揃え — core の「項目を揃える」ツールバーが書き込む
   is-content-justification-* を再宣言（詳細度 0,2,0）して確実に効かせる */
.wp-block-buttons.is-content-justification-left          { justify-content: flex-start; }
.wp-block-buttons.is-content-justification-center        { justify-content: center; }
.wp-block-buttons.is-content-justification-right         { justify-content: flex-end; }
.wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 700;
	border-radius: 4px;
}

/* 幅指定（25/50/75/100%）が付いたときだけラベルを中央寄せ。
   inline-flex は既定で flex-start に寄るため、固定幅だと左寄りに見える。
   自動幅ボタンとグループ揃えは触らないよう幅クラスにスコープする。 */
.wp-block-button[class*="wp-block-button__width-"] .wp-block-button__link {
	justify-content: center;
}

/* 既定 = 塗り（brand・青）。
   padding / text-decoration:none / hover の transition はここ（詳細度 0,2,0）
   に置く。base の .wp-block-button__link（0,1,0）だと、
   ・padding … WordPress コアのボタンCSS（.wp-block-button__link・0,1,0）に
     読み込み順で負けて効かない
   ・text-decoration/transition … prose の .post-body a（0,1,1）に負ける
   ため。全バリアント共通。base 状態のセレクタなので hover の行き帰り両方に
   効き、outline 系の枠線色変化のため border-color も含める。
   天地は 0.8em（左右は spacing--50）。 */
.wp-block-button .wp-block-button__link {
	background: var(--brand);
	color: var(--paper);
	padding: 0.8em var(--wp--preset--spacing--50);
	text-decoration: none;
	transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* CTA（塗り・赤）— register_block_style で登録。既定の brand 塗りより
   詳細度が高い（0,3,0）ので背景が上書きされる。hover の lift・transition・
   text-decoration:none は既定ルール（0,2,0）から継承する。 */
.wp-block-button.is-style-cta .wp-block-button__link {
	background: var(--cta);
	color: var(--paper);
}

/* 塗り＋右矢印 — 既定の brand 塗りを継承し、ラベル末尾に → を足す。
   矢印は別要素（::after）なので背景は上書きしない。TOP の .arrowlnk .ar と
   同じく hover で右へ 5px 動かす（transition は矢印だけに掛ける）。 */
.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: '→';
	margin-left: .4em;
	transition: transform .25s ease;
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

/* アウトライン（is-style-outline = WP 既定バリアント名） */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--brand);
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--brand);
	color: var(--paper);
}

/* アウトライン（濃色背景用）— 白線＋白文字。Cover 内など暗い面で使う。
   currentColor で線色をラベルに追従させる。 */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--paper);
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

/* テキスト（register_block_style で登録するカスタム） */
.wp-block-button.is-style-text .wp-block-button__link {
	background: transparent;
	color: var(--muted);
	padding: 0;
	font-weight: 500;
}
/* テキストは hover で下線を付ける。text-decoration は既定の 0,2,0
   text-decoration:none に勝つ必要があるが、この :hover は 0,3,0 なので勝つ。
   Y軸の lift（.wp-block-button .wp-block-button__link:hover の translateY）は
   このバリアントでは不要なので transform:none で打ち消す（0,3,0 > 0,2,1）。 */
.wp-block-button.is-style-text .wp-block-button__link:hover {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: .18em;
	transform: none;
}

/* テキストは箱を持たないので、固定幅（25/50/75/100%）だと透明な箱の中で
   ラベルが宙に浮く。幅を内容に戻し、位置決めはグループ揃えに委ねる。 */
.wp-block-button.is-style-text[class*="wp-block-button__width-"] {
	width: auto;
}
.wp-block-button.is-style-text[class*="wp-block-button__width-"] .wp-block-button__link {
	width: auto;
	justify-content: flex-start;
}

/* =========================================
   リスト — is-style-note（※ 米印マーカー）
   base の ul/ol は prose.css が持つ。ここは注記バリアントだけ。
   list-style を消して ::before で ※ を絶対配置する。折り返しても
   Shift+Enter の改行でも、本文の左端がマーカー幅で揃う（ハンギング）。
   ========================================= */
.wp-block-list.is-style-note {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-note > li {
	list-style: none;
	position: relative;
	padding-left: 1.6em;
}
.wp-block-list.is-style-note > li::before {
	content: '※';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--body-ink);
}

/* =========================================
   セパレータ — is-style-dots（三点リーダー）
   base の hr は prose.css が持つ。ここは装飾バリアントだけ。
   ========================================= */
.wp-block-separator.is-style-dots {
	border: none;
	text-align: center;
}
.wp-block-separator.is-style-dots::before {
	content: '· · ·';
	padding-left: .5em;
	letter-spacing: .5em;
	font-size: var(--text-ml);
	color: var(--muted);
}

/* =========================================
   Cover — 画像＋テキストの overlay
   幅は page.css の配置システムに委譲（通常=960 / .alignwide=1360 /
   .alignfull=フルブリード）。ここは中身のレイアウトと色だけ。
   ========================================= */
.wp-block-cover {
	position: relative;
	min-height: clamp(320px, 50vw, 560px);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
	color: var(--paper);
}
.wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: var(--content-narrow);
	width: 100%;
}
/* Cover 内の見出し・段落は白系に。prose の base 色を打ち消す。 */
.wp-block-cover h2,
.wp-block-cover h3 {
	color: var(--paper);
	border-bottom: none;
	padding-bottom: 0;
	margin-top: 0;
}
.wp-block-cover p {
	color: var(--text-on-dark);
}

/* =========================================
   Columns — core/columns
   ========================================= */
.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-lg);
	margin-block: var(--wp--preset--spacing--60);
}
@media (min-width: 720px) {
	.wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
	.wp-block-columns.has-3-columns {
		grid-template-columns: repeat(3, 1fr);
	}
}
.wp-block-column {
	min-width: 0;
}

/* オプトイン（親 core/columns の「追加CSSクラス」に付与）:
   高さの揃った行でカード内のボタンを下端で揃える。列を flex 縦にし、
   ボタン塊を margin-top:auto で最下部へ押し出す。 */
.p-cards-bottom-button .wp-block-column {
	display: flex;
	flex-direction: column;
}
.p-cards-bottom-button .wp-block-column .wp-block-buttons {
	margin-top: auto;
	padding-top: 2em;
}

/* オプトイン（親 core/columns の「追加CSSクラス」に付与）:
   横並び時、各列の中身を列の高さいっぱいに揃える。列自体は grid で既に等高。
   列を flex 縦にし、直下の「最後のブロック」だけを伸ばす。
   → 上に固定高の Cover（画像）＋下に本文 Group という構成で、
     Cover は自然な高さのまま、本文 Group だけが余白を吸収して伸びる。
   さらに、伸びた最後のブロック内では末尾の .wp-block-buttons を
   margin-top:auto で下端へ押し出し、複数カード間でボタン位置を揃える。 */
@media (min-width: 720px) {
	.p-cards-fill .wp-block-column {
		display: flex;
		flex-direction: column;
	}
	/* 直下ブロックは自然な高さを保つ（Cover 等が伸びない） */
	.p-cards-fill .wp-block-column > * {
		flex: 0 0 auto;
	}
	/* 最後の直下ブロック（本文カード）だけが列の余白を吸収して伸びる */
	.p-cards-fill .wp-block-column > :last-child {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}
	/* この最後のブロックを flex 縦にしたことで、WP 制約レイアウト（is-layout-constrained）が
	   直下ブロックに強制する左右 auto マージンが「中身幅で中央寄せ」に化け、
	   ボタン等が縮む。コアが !important なので、こちらも !important で打ち消して全幅を維持する。 */
	.p-cards-fill .wp-block-column > :last-child > * {
		margin-left: 0 !important; /* reason: WPコア is-layout-constrained の auto margin(!important) を無効化 */
		margin-right: 0 !important; /* reason: 同上。カード内ブロックを全幅で維持するため */
	}
	/* 伸びた本文カード内で、末尾のボタン塊を下端に揃える */
	.p-cards-fill .wp-block-column > :last-child .wp-block-buttons {
		margin-top: auto;
	}
}

/* =========================================
   Gallery — core/gallery
   レイアウトのみ（写真の色処理は岡田屋では掛けない）。
   ========================================= */
.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-md);
	margin-block: var(--wp--preset--spacing--60);
	list-style: none;
	padding: 0;
}
@media (min-width: 720px) {
	.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
}
.wp-block-gallery figure {
	margin: 0;
}
.wp-block-gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.wp-block-gallery figcaption {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--muted);
	margin-top: .5em;
	text-align: center;
}

/* =========================================
   Media & Text — モバイル段組み時の調整
   core は is-stacked-on-mobile で1列化するが、メディアと本文の間に
   余白が無く、本文の inline padding が残って字下げして見える。
   ========================================= */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile {
		gap: var(--gap-md);
	}
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: 0;
	}
}

/* =========================================
   余白除去オプトアウト — is-style-remove-margin-top
   register_block_style で core/group・core/media-text に登録して使う
   （lib/admin/block-style.php・次段階）。クラスを二重掛けして
   詳細度 (0,2,0) に上げ、prose.css の本文リズム（.page-body > * + *）を
   確実に打ち消す。
   ========================================= */
.is-style-remove-margin-top.is-style-remove-margin-top {
	margin-top: 0;
}

/* =========================================
   Details — アコーディオン（core/details）
   ヘアライン罫＋シェブロン＋開閉フェード。
   ========================================= */
.wp-block-details {
	border-top: 1px solid var(--line);
	margin-block: 0;
	padding-inline: .5rem;
}
.wp-block-details + .wp-block-details {
	/* 隣接 details 間は罫を共有 */
	margin-top: 0;
}
.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--line);
}
.wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: .75em;
	cursor: pointer;
	list-style: none;
	padding-block: 1.25em;
	font-family: var(--font-sans);
	font-weight: 700;
	color: var(--ink);
	transition: color .2s ease;
	user-select: none;
}
.wp-block-details > summary:hover {
	color: var(--brand);
}
.wp-block-details > summary:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}
/* ネイティブの三角マーカーを消す（シェブロンに置換） */
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker { display: none; }

/* シェブロン（開くと回転） */
.wp-block-details > summary::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .3s ease;
	flex-shrink: 0;
	margin-left: auto;
}
.wp-block-details[open] > summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* 回答部 — 開いたとき下に余白＋フェードイン */
.wp-block-details[open] > :not(summary) {
	margin-top: 0;
	padding-bottom: 1.5em;
}
.wp-block-details[open] > summary + * {
	animation: okadaya-details-reveal .3s ease;
}
@keyframes okadaya-details-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   Details — FAQ バリアント（is-style-faq）
   summary に Q マーカー、最初の回答ブロックに A マーカー。
   両マーカーで左ガターを共有し、質問/回答の頭を縦に揃える。
   ========================================= */
.wp-block-details.is-style-faq > summary::before {
	content: 'Q';
	min-width: 1em;
	width: 20px;
	text-align: center;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-md);
	line-height: 1;
	color: var(--brand);
	flex-shrink: 0;
}
.wp-block-details.is-style-faq > :not(summary) {
	padding-left: calc(1em + 1em);    /* Q の min-width + summary の gap */
	position: relative;
}
.wp-block-details.is-style-faq > summary + *::before {
	content: 'A';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	text-align: center;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-md);
	line-height: 1.7;
	color: var(--accent);
}