/**
 * Front-end only style for bcp/section-nav — block.json の `viewStyle` (WP 6.5+)。
 *
 * 訪問者にだけ配信され、ブロックエディタには読み込まれない。エディタはピルバー
 * しか描画しないため、以下はどれもエディタでは 1 行も要らない:
 *  - sticky 追従 (と WP 管理バーぶんのオフセット)
 *  - ハンバーガートグル
 *  - 出現アニメーション (スタッガー / フェイルセーフ / nth-child 20 行)
 *  - モバイル (横スクロール / ハンバーガー / no-JS フォールバック)
 *
 * 共通部分は style.css を参照。
 */

/* sticky: 上部に追従。--bcp-sticky-offset は固定ヘッダー高さぶんのオフセット。 */
.bcp-section-nav.is-sticky {
	position: sticky;
	top: var( --bcp-sticky-offset, 0px );
	z-index: var( --bcp-nav-z );
}

/* ログイン時の WP 管理バー(固定)と sticky バーが被るのを回避。管理バー高さ分だけ
   さらに下げる。WP コアが提供する --wp-admin--admin-bar--height(PC 32px / モバイル
   46px)を使い、無い環境向けに 32px をフォールバック。 */
.admin-bar .bcp-section-nav.is-sticky {
	top: calc( var( --bcp-sticky-offset, 0px ) + var( --wp-admin--admin-bar--height, 32px ) );
}

/* === ハンバーガートグル(mobileMode='hamburger')============== */
.bcp-section-nav__toggle {
	display: none; /* デスクトップでは非表示。@media で出す。 */
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.bcp-section-nav__toggle-bars,
.bcp-section-nav__toggle-bars::before,
.bcp-section-nav__toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
	transition: transform 0.16s ease;
}
.bcp-section-nav__toggle-bars::before,
.bcp-section-nav__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.bcp-section-nav__toggle-bars::before { top: -7px; }
.bcp-section-nav__toggle-bars::after  { top: 7px; }

/* === 出現アニメーション(appearance / staggered)===============
   【フラッシュ防止 + フェイルセーフ】
   バー自体は常時可視(opacity:1)でレイアウト(sticky 等)を初回ペイントから確定。
   スタッガー対象のピルは **初回ペイントから隠す**(is-js を待たない)。これにより
   「一瞬全ピルが見えてから消えてスタッガー」というフラッシュが起きない。
   JS が無い/失敗(is-js が付かない)場合は CSS フェイルセーフ・アニメで必ず表示する。
   prefers-reduced-motion ではピルを隠さない(下の @media)。 */
/* 既定: スタッガー対象のピルを初回ペイントから隠す(バー自体は見える)。 */
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button {
	opacity: 0;
}

/* まだ可視化(is-visible)されていない間のフェイルセーフ。JS が無い/遅い/失敗で
   is-visible が付かないままでも、1.6s 後に必ず表示する(待っても出ない事故を防ぐ)。
   JS が is-visible を付ければ下のスタッガー登場が優先され、フェイルセーフは発火しない。 */
.bcp-section-nav.is-staggered:not( .is-visible ) .bcp-section-nav__bar .wp-block-button {
	animation: bcp-section-nav-failsafe 0.001s linear 1.6s forwards;
}
@keyframes bcp-section-nav-failsafe {
	to { opacity: 1; }
}

@keyframes bcp-section-nav-fade-left {
	from { opacity: 0; transform: translateX( -0.75rem ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}
@keyframes bcp-section-nav-fade-up {
	from { opacity: 0; transform: translateY( 0.75rem ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* staggered: .is-visible が付いた瞬間に各ピルが順番にフェードイン。
   遅延 = index × --bcp-stagger-step。最大 20 ピルまで面倒を見る(下の nth-child 参照)。
   ピル要素は core/button の `.wp-block-button`。 */
.bcp-section-nav.is-staggered.is-visible .bcp-section-nav__bar .wp-block-button {
	animation: bcp-section-nav-fade-left 0.42s var( --bcp-stagger-ease ) both;
	animation-delay: calc( var( --bcp-stagger-index, 0 ) * var( --bcp-stagger-step, 100ms ) );
}
.bcp-section-nav.is-staggered.is-anim-fadeInUp.is-visible .bcp-section-nav__bar .wp-block-button {
	animation-name: bcp-section-nav-fade-up;
}

.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(1)  { --bcp-stagger-index: 0; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(2)  { --bcp-stagger-index: 1; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(3)  { --bcp-stagger-index: 2; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(4)  { --bcp-stagger-index: 3; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(5)  { --bcp-stagger-index: 4; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(6)  { --bcp-stagger-index: 5; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(7)  { --bcp-stagger-index: 6; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(8)  { --bcp-stagger-index: 7; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(9)  { --bcp-stagger-index: 8; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(10) { --bcp-stagger-index: 9; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(11) { --bcp-stagger-index: 10; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(12) { --bcp-stagger-index: 11; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(13) { --bcp-stagger-index: 12; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(14) { --bcp-stagger-index: 13; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(15) { --bcp-stagger-index: 14; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(16) { --bcp-stagger-index: 15; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(17) { --bcp-stagger-index: 16; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(18) { --bcp-stagger-index: 17; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(19) { --bcp-stagger-index: 18; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(20) { --bcp-stagger-index: 19; }

/* 動きを減らす設定では時間差フェード・フェイルセーフを無効化し、ピルを常時可視にする。 */
@media ( prefers-reduced-motion: reduce ) {
	.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button {
		opacity: 1;
		animation: none;
	}
}

/* === モバイル ====================================================
   モバイル判定のしきい値はブロックの `breakpoint` 属性(既定 1024px)。CSS @media は
   カスタムプロパティを読めないため、view.js が matchMedia('(max-width: breakpoint-1)')
   で root に `.is-mobile` を付け外しして driving する(= 属性が実際に効く)。
   JS 無効時のみ下の `@media ( max-width: 599px )` が固定 599px フォールバックとして効く
   (`:not(.is-js)` でガード。JS 有効時は breakpoint 属性=既定 1024 で driving し二重適用しない)。
   横スクロール(scroll)/ ハンバーガー(hamburger)の 2 モード。メガパネルは desktop 専用
   なのでモバイル幅では常に非表示(ピル = 直リンクで該当セクションへジャンプ)。 */

/* --- JS パス: 実 breakpoint で view.js が付ける .is-mobile --- */
.bcp-section-nav.is-mobile .bcp-section-nav__panels {
	display: none;
}
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar {
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* 全幅ブリード(背景・スクロール領域は画面端〜端)。左ガターは constrained 本文の実際の
	   左端 = max(root-padding, (100vw - contentSize)/2) に一致させる。本文が中央寄せされる幅
	   では (100vw-contentSize)/2、狭い幅では root-padding が効くので、どの幅でも先頭ピルが
	   見出し等と左揃えになる。スクロールするとガターが流れて余白が消え、右端は見切れる。 */
	--bcp-nav-content-gutter: max(
		var( --wp--style--root--padding-left, 16px ),
		calc( ( 100vw - var( --wp--style--global--content-size, 650px ) ) / 2 )
	);
	padding-inline-start: var( --bcp-nav-content-gutter );
	padding-inline-end: 0;
	scroll-padding-inline-start: var( --bcp-nav-content-gutter );
}
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar::-webkit-scrollbar {
	display: none;
}
/* 内側の core/buttons(.wp-block-buttons)は独自に flex-wrap:wrap / justify center を
   持つため、横スクロールにはこれも nowrap + 左寄せにする(でないとピルが内側で折り返す /
   中央寄せだとスクロール時に先頭ピルが見切れる)。/price の button-scroll-wrap と同方針。 */
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar .wp-block-buttons {
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar .wp-block-button {
	flex: 0 0 auto;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__toggle {
	display: inline-flex;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__bar {
	display: none;
	flex-direction: column;
	align-items: stretch;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__bar.is-menu-open {
	display: flex;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__bar .wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/* --- no-JS フォールバック: 固定 599px。JS 有効時(.is-js)は二重適用しない ---
   メガパネルは JS 駆動(no-JS では .is-open が付かず既定で非表示)なので隠す指定は不要。 */
@media ( max-width: 599px ) {
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		--bcp-nav-content-gutter: max(
			var( --wp--style--root--padding-left, 16px ),
			calc( ( 100vw - var( --wp--style--global--content-size, 650px ) ) / 2 )
		);
		padding-inline-start: var( --bcp-nav-content-gutter );
		padding-inline-end: 0;
		scroll-padding-inline-start: var( --bcp-nav-content-gutter );
	}
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar::-webkit-scrollbar {
		display: none;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar .wp-block-buttons {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar .wp-block-button {
		flex: 0 0 auto;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__toggle {
		display: inline-flex;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__bar {
		display: none;
		flex-direction: column;
		align-items: stretch;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__bar.is-menu-open {
		display: flex;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__bar .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
}

/* トグルは既定で display:none(.bcp-section-nav__toggle)。モバイル(.is-mobile or
   no-JS の @media)かつ hamburger のときだけ上のルールで表示するので、デスクトップ用の
   明示的な打ち消しルールは不要。 */