/**
 * 診断3フローの相互ナビ（`PNM_Shindan_Nav::render()` が出す `.pnm-flownav`）。
 *
 * 助成金 簡易診断 / 補助金 無料診断 / 補助金 申請文章AI作成 の3ページで、ヘッダー帯の
 * 直下に「自分以外の2つ」への枠線ボタンを並べる。
 *
 * ⚠️ **このファイルが唯一の正。** 同じ指定を各フローの CSS（`pnm-joseikin.css` /
 *    `pnm-hojokin-shindan.css` / `pnm-hojokin-app.css`）へ複製しないこと
 *    （複製すると3箇所が黙って食い違う。ページヘッダー帯で実際に起きた地雷と同型）。
 *
 * 🔴 **セレクタは `.pnm-flownav` 配下に限定する。** 裸の `a` / `nav` は書かない
 *    ＝3フローのラッパー（`.pnm-joseikin` / `.pnm-hojokin` / `.pnm-app`）の内側に
 *    置かれるため、外へ漏らすとフロー本体の見た目を壊す。
 *
 * ⚠️ **変数はこのブロックで自前に定義する**（`.pnm-joseikin` 等が定義する `--pnm-*` に
 *    依存しない）。3つの異なるラッパーの下で同じ見た目にするため。値は
 *    `.claude/skills/mitsukuru-design/SKILL.md` のパレットと同じ。
 *
 * モバイルファースト：基準は SP（縦積み）、600px 以上で PC（横並び）へ。
 * ⚠️ **600px は同居する `pnm-joseikin.css`（:692）と `pnm-page-header.css`（:89）に
 *    合わせている。** 独自のブレークポイントを持ち込むと、帯とナビと本体が別々の幅で
 *    切り替わって段差が出る。
 *
 * @package PN_Mitsukuru
 */

.pnm-flownav {
	--pnm-nav-primary: #7CB342;
	--pnm-nav-primary-dark: #689A38;
	--pnm-nav-primary-light: #EFF6E4;

	/* 🔴 アクセント（制作・企画ヒアリングのボタン）。0.7.220 で**新規に追加した色**。
	   ⚠️ 「当プラグイン内で既に使っている値」という説明は誤りで、それまで1件も無かった
	      （リポジトリ全体の grep で 0 件を確認）。
	   ⚠️ 追加するのはこの2つだけ（崇さん指定＝2色まで）。
	      --pnm-nav-accent       … 枠線と文字色（崇さんの指定値をそのまま）
	      --pnm-nav-accent-light … ホバー背景。#E8A33D を白と混ぜた派生値
	                               （緑の #7CB342 → #EFF6E4 と同じ約12.5%の混色比で算出）。 */
	--pnm-nav-accent: #E8A33D;
	--pnm-nav-accent-light: #FCF4E7;

	--pnm-nav-tap: 44px;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 24px;
}

.pnm-flownav *,
.pnm-flownav *::before,
.pnm-flownav *::after {
	box-sizing: border-box;
}

/* 枠線ピル（セカンダリCTA）。本体の主導線より弱く見せる＝常設ナビなので煽らない。 */
.pnm-flownav .pnm-flownav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pnm-nav-tap);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: var(--pnm-nav-primary-dark);
	background: transparent;
	border: 1.5px solid var(--pnm-nav-primary);
	border-radius: 9999px;
	transition: background 0.15s ease, color 0.15s ease;
}

.pnm-flownav .pnm-flownav__btn:hover,
.pnm-flownav .pnm-flownav__btn:focus {
	background: var(--pnm-nav-primary-light);
	color: var(--pnm-nav-primary-dark);
	text-decoration: none;
}

/* フォーカスの可視化は消さない（アクセシビリティ）。 */
.pnm-flownav .pnm-flownav__btn:focus-visible {
	outline: 2px solid var(--pnm-nav-primary-dark);
	outline-offset: 2px;
}

/* 🔴 アクセント（制作・企画ヒアリング）。**変えるのは枠線の色と文字色だけ**。
   ⚠️ padding / font-size / border-radius / border の太さ / min-height は
      `.pnm-flownav__btn` の指定をそのまま継承する＝**新しい数字を1つも持ち込まない**。 */
.pnm-flownav .pnm-flownav__btn--accent {
	color: var(--pnm-nav-accent);
	border-color: var(--pnm-nav-accent);
}

.pnm-flownav .pnm-flownav__btn--accent:hover,
.pnm-flownav .pnm-flownav__btn--accent:focus {
	background: var(--pnm-nav-accent-light);
	color: var(--pnm-nav-accent);
}

.pnm-flownav .pnm-flownav__btn--accent:focus-visible {
	outline-color: var(--pnm-nav-accent);
}

/* 改行用の空要素（`PNM_Shindan_Nav::render()` が緑とオレンジの間に1つだけ出す）。
   🔴 SP（〜599px）はラッパーが `column` で3つとも1列に縦積みになるため**出さない**
      （出すと `gap` 1つ分の隙間だけが増える）。 */
.pnm-flownav .pnm-flownav__break {
	display: none;
}

@media screen and ( min-width: 600px ) {
	.pnm-flownav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		margin-bottom: 32px;
	}

	/* 横並びでは中身なりの幅にする（縦積みのときだけ全幅）。 */
	.pnm-flownav .pnm-flownav__btn {
		flex: 0 1 auto;
		padding: 10px 24px;
		font-size: 15px;
	}

	/* 🔴 PC は「緑2つを1行目・オレンジを2行目に単独」にする（崇さん指定・0.7.220）。
	   ⚠️ 既存の `flex-wrap: wrap` をそのまま使い、**高さ 0 で全幅の要素を1つ挟んで折り返す**
	      だけ＝ラッパーの `display` も既存2ボタンのマークアップも変えていない。
	   ⚠️ この要素自体が1つの行として数えられるため、1行目と2行目の間隔は
	      `gap` 2つ分（12px × 2 ＝ **24px**）になる。8px グリッドには乗っている。
	      広すぎる場合はラッパーを PC だけ grid にする案へ切り替える（実機で判断）。 */
	.pnm-flownav .pnm-flownav__break {
		display: block;
		flex-basis: 100%;
		height: 0;
	}
}