/* ABCom 系ページ共通の「外枠」スタイル
 *
 * 対象は共通ヘッダー（abcom-header.php）と共通フッター（abcom-footer.php）を使うページ、
 * つまり LP／ダウンロード／購入者専用／サポート／見積り／PDF／ガイドライン。
 * 読み込み条件は functions.php の abcom_chrome_enqueue_assets（abcom_is_abcom_page）を参照。
 *
 * 元は #6/#21 として assets/abcom-lp.css にあり LP だけに効いていたが、
 * 要望シート No.36 の追加確認で「ABCom 関連ページの表示はトップページ（LP）に統一する」と
 * 決まったため、LP 限定ロードの abcom-lp.css から当ファイルへ移設して全 ABCom ページへ広げた。
 *
 * 中身（狭い画面での見せ方）
 * - 上部ヘッダー（#navbar の1行目）を隠す。#navbar 自体は #1 の反転状態を保持するため DOM は残す。
 * - 代わりに下部追従アクションバー［見積り / STORE / ≡］を出す。
 * - ≡ は既存 #mobile-menu(#10) を全画面オーバーレイで開く（JS で #bottom-menu-btn を束ねる）。
 *   × は下部バーの ≡→× モーフで兼用するため、メニュー内蔵の × は隠す。
 * - 色反転(#1)：applyNavState が付ける #navbar.ablp-nav-light に連動してバーを白基調へ。
 * - セレクタは #navbar 経由で id を2つに上げ、abcom-footer.php 内の inline <style>（後勝ち）より
 *   優先させる。移設後もこの前提は変わらないため、セレクタは元のまま維持している。
 *
 * 境界は 1023px。本文レイアウト側（abcom-lp.css の LP、abcom-owner.css の購入者専用など）と
 * 揃えており、タブレットはスマホと同じ見せ方になる。
 */

.ablp-bottombar { display: none; } /* 既定は非表示（PC） */

@media (max-width: 1023px) {
	/* 上部ヘッダーを非表示（#navbar は #1 状態保持のため DOM 温存し、見た目だけ消す） */
	#navbar {
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
		pointer-events: none;
		/* #1反転時に付く backdrop-blur-md 等が position:fixed の内包ブロックを作り、
		   下部バーが viewport 基準を失って上端へ飛ぶ(=消える)のを防ぐ。ここでは#navbarは不可視なので無害。 */
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		transform: none !important;
		filter: none !important;
	}
	#navbar > .container { display: none !important; }

	/* 下部追従アクションバー（見積 / STORE / ≡） */
	.ablp-bottombar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		align-items: center;
		gap: 0.6rem;
		padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
		background: rgba(17, 17, 17, 0.72);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		pointer-events: auto;
		transition: background 0.3s ease;
	}
	.ablp-bottombar-btn {
		flex: 1 1 0;
		text-align: center;
		padding: 0.85rem 0.5rem;
		border-radius: 999px;
		font-weight: 800;
		font-size: 0.95rem;
		line-height: 1;
		text-decoration: none;
	}
	.ablp-bottombar-btn.is-estimate { background: #fff; color: #e60028; border: 2px solid #e60028; }
	.ablp-bottombar-btn.is-store { background: #e60028; color: #fff; border: 2px solid #e60028; }
	/* 見積りページ自身では「見積り」を無効表示にする（自ページへのリンクを避ける）。
	   abcom-footer.php がプライバシーポリシーで採っている作法と揃えている。 */
	.ablp-bottombar-btn.is-disabled {
		background: rgba(255, 255, 255, 0.55);
		color: #777;
		border-color: #777;
		cursor: not-allowed;
	}
	.ablp-bottombar-burger {
		flex: 0 0 auto;
		width: 46px;
		height: 46px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 10px;
		background: transparent;
		color: #fff;
	}

	/* #mobile-menu を全画面オーバーレイ化（下からせり上がり）。id2つでフッター inline を上書き */
	#navbar #mobile-menu {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		opacity: 1;
		visibility: hidden;
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform 0.35s ease, visibility 0.35s;
		z-index: 55;
		pointer-events: auto;
	}
	#navbar #mobile-menu.is-open {
		max-height: none;
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
	#navbar #mobile-menu .ablp-menu-body {
		padding: 4.5rem 1.5rem calc(5.5rem + env(safe-area-inset-bottom));
	}
	/* 全画面時のクローズは下部バーの ≡→× で兼用するため、メニュー内蔵の × は隠す */
	#navbar #mobile-menu .ablp-menu-close { display: none; }

	/* 上部ヘッダーを隠すので、固定ヘッダー分に取っていた上余白も外す。
	   外さないと、ページ先頭に何も無い空白が残る（実測：ダウンロード／購入者専用は
	   912px で 144px・390px で 128px、サポート／見積り／PDF／ガイドラインは 113px／97px）。
	   .ablp-header-offset は「固定ヘッダー分の上余白を持つ先頭要素」に付ける目印で、
	   各ページのテンプレートで付与している。値はテンプレート側の py-12 と同じ 3rem に揃えた。
	   ページ側CSS（abcom-owner.css / abcom-downloads.css）より後に読まれる保証がないため、
	   body を足して優先度を上げる（下の .ablp-footer と同じ手）。
	   LP のヒーローは全面表示のため 0 が正で、abcom-lp.css 側で別に指定している。 */
	body .ablp-header-offset { padding-top: 3rem; }

	/* フッター最下部が下部バーに隠れないよう余白を追加（body で優先度を上げる） */
	body .ablp-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }

	/* 色反転(#1連動)：白ヘッダー状態＝下部バーも白基調へ */
	#navbar.ablp-nav-light .ablp-bottombar {
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.08);
	}
	#navbar.ablp-nav-light .ablp-bottombar-burger {
		color: #111827;
		border-color: rgba(0, 0, 0, 0.35);
	}
}

/* 動きを減らす設定を尊重する。
   abcom-footer.php の inline <style> にも #mobile-menu { transition:none; } はあるが、
   上の全画面メニューは #navbar #mobile-menu（id2つ）で指定しているため特異度で勝ってしまい、
   そのままでは 0.35 秒のスライドが残る。同じ特異度で打ち消す。 */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	#navbar #mobile-menu { transition: none; }
}

/* ===================================================================
 * No.36 ③ 中位幅（1024〜1599px）のヘッダーCTA
 *
 * この帯は PC ナビを畳んでハンバーガーにしている（境界は assets/custom.css の
 * @media (max-width: 1599px)）。一方、下部追従アクションバーは 1023px 以下だけの表示。
 * そのままだと 1024〜1599px で「常時見える CTA」がどこにも無くなるため、
 * 下部バーと同じ短いラベル（見積り / STORE）をヘッダーへ出す。
 *
 * ★ 1599px という値は assets/custom.css 側と対になっている。
 *   片方だけ変えると、PC ナビと中位幅CTAが同時に出る／同時に消える帯ができる。
 *   変更するときは必ず両方を一緒に見ること。
 *
 * ラベルと配色は下部バー（.ablp-bottombar-btn）と揃えている。ヘッダーは
 * 黒地と白地（#navbar.ablp-nav-light）の2状態があるが、どちらのボタンも
 * 背景色を自前で持つため、状態ごとの出し分けは不要。
 * =================================================================== */
.ablp-nav-cta { display: none; }

.ablp-nav-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.875rem;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ablp-nav-cta-btn.is-estimate { background: #fff; color: #e60028; border: 2px solid #e60028; }
.ablp-nav-cta-btn.is-store { background: #e60028; color: #fff; border: 2px solid #e60028; }

/* この帯（1024〜1599px）はノートPCなどマウス操作でも起こるため、ホバーを用意する。
   配色は 1600px 以上の PC ナビの CTA と揃えた（Tailwind の brand-bg #fff0f2 /
   brand-dark #b30022、浮き上がりも -translate-y-0.5＝2px と同じ）。
   セレクタを a. に限定しているので、見積りページの無効表示（span）には掛からない。 */
a.ablp-nav-cta-btn:hover { transform: translateY(-2px); }
a.ablp-nav-cta-btn.is-estimate:hover { background: #fff0f2; }
a.ablp-nav-cta-btn.is-store:hover { background: #b30022; border-color: #b30022; }
a.ablp-nav-cta-btn:focus-visible { outline: 2px solid #e60028; outline-offset: 2px; }

/* No.54 ③：購入者専用ページ／ダウンロードは、ボタンではなく
   ヘッダー・フッターのメニューと同じ文字リンクとして並べる。
   文字色は #navbar .nav-link 側（abcom-header.php の inline style）が持っているため
   ここでは指定しない。そのおかげで白反転もホバー赤も自動で追従する。 */
.ablp-nav-cta-link {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s ease;
}
/* 親の gap 0.6rem に足して、リンク同士は 1rem、リンクとボタンの間は 1.2rem 空ける */
.ablp-nav-cta-link + .ablp-nav-cta-link { margin-left: 0.4rem; }
.ablp-nav-cta .is-estimate { margin-left: 0.6rem; }

/* 見積りページ自身では無効表示（下部バーと同じ作法） */
.ablp-nav-cta-btn.is-disabled {
	background: rgba(255, 255, 255, 0.55);
	color: #777;
	border-color: #777;
	cursor: not-allowed;
}

@media (min-width: 1024px) and (max-width: 1599px) {
	.ablp-nav-cta {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		/* ロゴとの間を空け、ハンバーガーの左隣へ寄せる（親は justify-between） */
		margin-left: auto;
		margin-right: 1rem;
	}
}