/**
 * CTA Rail — fixed, right-edge contact shortcut with Popover expansion.
 *
 * Modern stack (2026):
 *   - writing-mode: vertical-rl        … 縦書き（transform: rotate のハック撤廃）
 *   - animation-timeline: scroll()     … スクロール 55% で JS ゼロ退避
 *   - Popover API + @starting-style    … ネイティブ popover + 開閉アニメ
 *   - prefers-reduced-motion           … 退避と開閉のトランジションを最小化
 *
 * Fallbacks:
 *   - scroll-driven 非対応ブラウザ: 常時表示（is-hidden は JS が IO で付与）
 *   - popover 非対応: JS が .is-open クラスでトグル
 *
 * @package Navigator
 * @since   2026-05-18
 */

/* ============================================================
   1. Tokens (CSS custom properties)
   ============================================================ */
:root {
	/* Chatwork ブランドカラー */
	--cw-red:   #F03748;
	--cw-black: #13202F;

	/* CTA グラデーション・テキスト */
	--cta-contact-grad:  linear-gradient(180deg, #0f2fb8 0%, #2e7bff 100%);
	--cta-chatwork-grad: linear-gradient(180deg, var(--cw-red) 0%, var(--cw-red) 100%);
	--cta-text:        #fff;
	--cta-shadow:      0 6px 18px rgba(0, 0, 0, .18);
	--cta-shadow-hover: 0 10px 24px rgba(0, 0, 0, .22);
	--cta-icon-bg:     rgba(255, 255, 255, .15);

	/* レール基準寸法（タテに置く pill）— iOS HIG 44px タップ最小に準拠 */
	--cta-pill-w:    44px;
	--cta-pill-h:    clamp(140px, 36vw, 156px);
	--cta-radius:    10px;
	--cta-gap:       8px;
	--cta-icon-size: 24px;
	--cta-font-size: 14px;

	/* スクロールで隠す閾値（0〜1） */
	--cta-hide-threshold: 55%;
}

@media (min-width: 768px) {
	:root {
		--cta-pill-w:    46px;
		--cta-pill-h:    clamp(150px, 22vw, 168px);
		--cta-radius:    12px;
		--cta-icon-size: 26px;
		--cta-font-size: 15.5px;
	}
}

@media (min-width: 1024px) {
	:root {
		--cta-pill-w:    52px;
		--cta-pill-h:    192px;
		--cta-radius:    14px;
		--cta-icon-size: 28px;
		--cta-font-size: 18px;
	}
}

/* 旧 @media (pointer: coarse) の自己参照 calc() は CSS 仕様上の循環参照と
   なり --cta-pill-w が invalid 化するため削除。
   モバイル基準を 44px に上げて iOS HIG タップ最小を直接満たす。 */

/* ============================================================
   2. Rail container
   ============================================================ */
#cta-rail,
#cta-rail * { box-sizing: border-box; }
#cta-rail ul { margin: 0; padding: 0; list-style: none; }

.cta-rail {
	position: fixed;
	right: max(5px, env(safe-area-inset-right));
	top: 50%;
	transform: translateY(-50%) translateX(0);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: var(--cta-gap);
	isolation: isolate;
	opacity: 0;
	visibility: hidden;
	transition:
		transform .55s cubic-bezier(.2, .8, .2, 1),
		opacity .35s ease,
		visibility .35s ease;
}

/* JS が wp_footer 内で付与（FOUC 回避） */
.cta-rail.is-loaded {
	opacity: 1;
	visibility: visible;
}

/* IO フォールバック（scroll-driven 非対応ブラウザ用） */
.cta-rail.is-hidden {
	transform: translateY(-50%) translateX(120%);
	opacity: 0;
	visibility: hidden;
}

/* ============================================================
   3. Modern: CSS scroll-driven hide
   scroll-driven animations 対応ブラウザは JS 不要で退避。
   fill-mode: forwards だけにし、from/to を明示することで
   range 開始前は underlying スタイル（opacity: 1）が確実に適用される。
   ============================================================ */
@supports (animation-timeline: scroll()) {
	.cta-rail.is-loaded {
		animation: cta-rail-recede linear forwards;
		animation-timeline: scroll(root);
		/* longhand: CSS 変数を shorthand に展開するとパースが落ちるため分解 */
		animation-range-start: 55%;
		animation-range-end: 100%;
	}
	@keyframes cta-rail-recede {
		from {
			transform: translateY(-50%) translateX(0);
			opacity: 1;
			visibility: visible;
		}
		to {
			transform: translateY(-50%) translateX(120%);
			opacity: 0;
			visibility: hidden;
		}
	}
}

/* ============================================================
   4. Pill (button / link)
   ============================================================ */
.cta-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--cta-pill-w);
	height: var(--cta-pill-h);
	padding: 12px 0;
	color: var(--cta-text);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .02em;
	border: 0;
	border-radius: var(--cta-radius);
	box-shadow: var(--cta-shadow);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background-color .2s ease;
}

.cta-contact  { background: var(--cta-contact-grad); }
.cta-chatwork { background: var(--cta-chatwork-grad); }

.cta-contact:hover,
.cta-contact:focus-visible {
	box-shadow: var(--cta-shadow-hover);
	outline: none;
}
.cta-chatwork:hover,
.cta-chatwork:focus-visible {
	background: #D5303F;
	box-shadow: var(--cta-shadow-hover);
	outline: none;
}
.cta-chatwork:active { background: #B82A36; }

.cta-link:focus-visible {
	box-shadow:
		var(--cta-shadow-hover),
		0 0 0 3px #fff,
		0 0 0 5px var(--cw-black);
}

.cta-link:hover,
.cta-link:focus-visible {
	transform: translateX(-4px);
}

/* ============================================================
   5. Icon
   ============================================================ */
.cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cta-icon-size);
	height: var(--cta-icon-size);
	border-radius: 50%;
	background: var(--cta-icon-bg);
	overflow: hidden;
	flex-shrink: 0;
}
.cta-icon svg { width: 60%; height: 60%; fill: #fff; }
.cta-icon img { display: block; width: 70%; height: 70%; object-fit: contain; }

.cta-icon--symbol { background: #fff; }
.cta-icon--symbol img {
	width: calc(var(--cta-icon-size) - 4px);
	height: calc(var(--cta-icon-size) - 4px);
}

/* ============================================================
   6. Label (vertical-rl 縦書き)
   ============================================================ */
.cta-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: var(--cta-font-size);
	line-height: 1.4;
	letter-spacing: .15em;
	white-space: nowrap;
}

/* ============================================================
   7. Popover (Layer B 主役)
   ============================================================ */
#cta-popover {
	/* リセット（popover は inset:0 がデフォルト） */
	position: fixed;
	inset: auto;
	right: calc(var(--cta-pill-w) + 24px);
	top: 50%;
	transform: translateY(-50%);
	width: min(320px, calc(100vw - var(--cta-pill-w) - 40px));
	max-width: 360px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(15, 47, 184, .12);
	border-radius: 16px;
	background: #fff;
	box-shadow:
		0 12px 32px rgba(15, 47, 184, .14),
		0 4px 8px rgba(0, 0, 0, .06);
	color: #1f2937;
	overflow: hidden;

	/* Modern: @starting-style + allow-discrete でフェードイン */
	opacity: 0;
	transition:
		opacity .25s ease,
		transform .35s cubic-bezier(.2, .8, .2, 1),
		overlay .25s ease allow-discrete,
		display .25s ease allow-discrete;
}
#cta-popover:popover-open {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}
@starting-style {
	#cta-popover:popover-open {
		opacity: 0;
		transform: translateY(-50%) scale(.96);
	}
}

/* モバイルはフルワイド寄り */
@media (max-width: 640px) {
	#cta-popover {
		right: 12px;
		left: 12px;
		width: auto;
		max-width: none;
	}
}

.cta-popover__inner {
	padding: 18px 18px 14px;
}
.cta-popover__head {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: .02em;
}
.cta-popover__sub {
	margin: 0 0 14px;
	font-size: 12px;
	color: #64748b;
	line-height: 1.5;
}
.cta-popover__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}
.cta-popover__item a,
.cta-popover__item button {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	width: 100%;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #f8fafc;
	color: #0f172a;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cta-popover__item a:hover,
.cta-popover__item a:focus-visible,
.cta-popover__item button:hover,
.cta-popover__item button:focus-visible {
	background: #eef2ff;
	border-color: #c7d2fe;
	outline: none;
	transform: translateX(2px);
}
.cta-popover__item .pop-emoji {
	font-size: 22px;
	width: 28px;
	flex-shrink: 0;
	text-align: center;
}
.cta-popover__item .pop-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cta-popover__item .pop-title { font-size: 14px; font-weight: 700; }
.cta-popover__item .pop-note  { font-size: 11px; color: #64748b; font-weight: 500; }

.cta-popover__hours {
	margin: 14px -18px -14px;
	padding: 10px 18px;
	background: #f1f5f9;
	font-size: 11.5px;
	color: #475569;
	line-height: 1.5;
	text-align: center;
}
.cta-popover__hours strong { color: #0f172a; }

.cta-popover__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #64748b;
	font-size: 18px;
	cursor: pointer;
	transition: background .18s ease;
}
.cta-popover__close:hover {
	background: #f1f5f9;
	color: #0f172a;
}

/* ============================================================
   8. Responsive hide / a11y
   ============================================================ */
/* モバイル portrait（< 768px）では bottom-nav が同じ CTA を提供しているため、
   cta-rail を非表示にして本文との重なりを解消する。 */
@media (max-width: 767px) {
	.cta-rail,
	#cta-popover { display: none !important; }
}
@media (max-height: 450px) and (orientation: landscape) {
	.cta-rail { display: none; }
}

@media print {
	.cta-rail,
	#cta-popover { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.cta-rail,
	.cta-link,
	#cta-popover { transition-duration: 0s !important; }
	.cta-rail.is-loaded { animation: none !important; }
}

/* ============================================================================
   テーマ切替ボタン (Light ↔ Dark) — 無料診断・Chatwork の下に並べる
   ----------------------------------------------------------------------------
   .cta-theme は .cta-link の縦書き長方形デザインを継承しつつ、
   .theme-toggle (ヘッダー用 38px 円形) のスタイルを上書きする。
   sun/moon アイコンの表示切替は design-polish.css の
   `html[data-theme="dark"] .theme-toggle__icon-moon` などで自動制御される。
   ============================================================================ */
.cta-theme {
	background: linear-gradient(180deg, #4A5570 0%, #2D3548 100%);
	color: #fff;
}
/* .theme-toggle (ヘッダー専用 38px 円形) スタイルを CTA レール内で打ち消し、
   正方形 52x52 のアイコンボタンに整える */
.cta-rail .cta-link.theme-toggle {
	width: 52px;
	height: 52px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--cta-radius);
	background: linear-gradient(180deg, #4A5570 0%, #2D3548 100%);
	color: #fff;
	transform: none;
	writing-mode: horizontal-tb;  /* .cta-link の vertical-rl を打ち消し */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cta-rail .cta-link.theme-toggle:hover,
.cta-rail .cta-link.theme-toggle:focus-visible {
	background: linear-gradient(180deg, #5A6580 0%, #3D4558 100%);
	color: #fff;
	box-shadow: var(--cta-shadow-hover);
	transform: none;
	outline: none;
}
.cta-rail .cta-link.theme-toggle .cta-icon {
	margin: 0;            /* writing-mode 切替に伴う既存マージンをリセット */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cta-theme .theme-toggle__icon-sun,
.cta-theme .theme-toggle__icon-moon {
	width: 26px;
	height: 26px;
}
/* ダーク時の見え方を navy → moon-soft に */
html[data-theme="dark"] .cta-theme,
html[data-theme="dark"] .cta-rail .cta-link.theme-toggle {
	background: linear-gradient(180deg, #5A6580 0%, #3D4558 100%);
}

/* ============================================================
   theme-toggle のアイコン切替（navigator/design-polish.css :7237-7247 を移植）
   慣習: 「次の click で何が起きるか」を見せる。
   ・ light モード時 → MOON を表示（click → dark に変わる予告）
   ・ dark モード時  → SUN  を表示（click → light に戻る予告）
   ============================================================ */
html[data-theme="dark"] .theme-toggle__icon-moon,
html:not([data-theme="dark"]) .theme-toggle__icon-sun {
	display: none;
}