/* ============================================================
   form.css - Contact Form 7 のフォーム

   [okadaya_form] を含むページでだけ読む（lib/func/cf7-forms.php）。
   マークアップは forms/*-form.php（テーマ管理）。

   ■ 詳細度について
   1. フォームは固定ページ本文（.page-body）の中に入るため、prose.css の
      「.page-body p / .page-body a」（0,1,1）と競合する。単一クラスだと
      負けるので、p 要素に当てるものは p.form-hint のように要素セレクタを足す。
   2. CF7 自身のスタイル（includes/css/styles.css）とも競合する。
      とくに .wpcf7 form .wpcf7-response-output（0,2,1）と
      .wpcf7-list-item の margin-left は明示的に上書きしないと残る。
      読み込み順で勝つ保証がないので、詳細度で確実に上回らせている。
   ============================================================ */

/* --- 支援技術向けの読み上げ用テキスト ---
   CF7 はエラー件数や送信結果を .screen-reader-response に入れる。目で見る
   ためのものではないので、視覚的には隠して読み上げにだけ残す。
   CF7 のスタイルシートにも同じ指定があるが、それが読まれていないときに
   「1 件のエラーがあります」等がページに露出して崩れるため、こちらでも持つ。 */
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- 全体 --- */
.okadaya-form {
	max-width: var(--content-narrow);
	margin-inline: auto;
	font-size: var(--text-base);
}

/* --- 区切りの見出し（購入情報 / 購入者情報）---
   項目数が多いフォームで、どこまでが何の話かを示す。 */
.form-section-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--brand);
	color: var(--brand);
	font-family: var(--font-serif);
	font-size: var(--text-ml);
	font-weight: 700;
	line-height: 1.5;
}
/* 2 つ目以降の見出しは、前のブロックとの間を大きく空ける */
.form-body + .form-section-title {
	margin-top: var(--wp--preset--spacing--section);
}

/* --- 行 --- */
.form-body {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}
.form-row {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

/* --- ラベル --- */
.okadaya-form .form-label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.5;
}

/* 必須 / 任意のバッジ。ピル形状は意図的な形なのでスケール外の 99px を使う */
.form-required,
.form-optional {
	padding: 2px 8px;
	border-radius: 99px; /* reason: ピル形状（border-radius スケールの例外） */
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.form-required {
	background: var(--cta);
	color: var(--paper);
}
.form-optional {
	background: var(--bg-subtle);
	border: 1px solid var(--line);
	color: var(--muted);
}

/* --- 入力欄 ---
   CF7 は各フィールドを <span class="wpcf7-form-control-wrap"> で包む。
   インライン要素のままだと幅 100% が効かないのでブロックにする。 */
.okadaya-form .wpcf7-form-control-wrap {
	display: block;
}

.okadaya-form input[type="text"],
.okadaya-form input[type="email"],
.okadaya-form input[type="tel"],
.okadaya-form input[type="url"],
.okadaya-form input[type="number"],
.okadaya-form input[type="date"],
.okadaya-form select,
.okadaya-form textarea {
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.6;
	/* iOS で入力欄をタップしたときの自動ズームは font-size 16px 以上で防げる。
	   --text-base が 16px なので、ここを小さくしないこと。 */
	transition: border-color .2s;
}
.okadaya-form textarea {
	min-height: 200px;
	resize: vertical;
}
.okadaya-form select {
	/* ネイティブの矢印を残す（自前の三角を重ねると OS ごとにずれるため） */
	appearance: auto;
}

.okadaya-form input::placeholder,
.okadaya-form textarea::placeholder {
	color: var(--muted);
}

/* 郵便番号のように桁数が決まっている項目。全幅だと入力量に対して
   枠が広すぎ、何桁入れる欄なのか伝わらない */
.okadaya-form .form-row--short input[type="text"] {
	max-width: 220px;
}

/* --- ラジオ / チェックボックスの並び ---
   CF7 は選択肢を <span class="wpcf7-list-item"> で横に並べる。既定の
   margin-left: 1em は打ち消してあるので、間隔は親側の gap で作る。 */
.okadaya-form .wpcf7-radio,
.okadaya-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-md);
	padding-top: var(--wp--preset--spacing--20);
}

.okadaya-form input:focus-visible,
.okadaya-form select:focus-visible,
.okadaya-form textarea:focus-visible {
	border-color: var(--brand);
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

/* --- 入力欄に単位を後置する（「1 セット購入」など）--- */
.form-inline {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
/* 入力欄が伸びて単位が右端に離れないようにする */
.okadaya-form .form-inline input {
	flex: 0 1 140px;
}
.form-suffix {
	flex-shrink: 0;
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/* --- 補足文 ---
   p.form-hint と要素セレクタを足しているのは prose.css の
   .page-body p（0,1,1）に負けないため（font-size / margin が奪われる）。 */
p.form-hint {
	margin: 0;
	color: var(--muted);
	font-size: var(--text-xs);
	line-height: 1.7;
}

/* --- 注意書きの箇条書き ---
   ul を併記しているのは prose.css の .page-body ul（0,1,1）対策。
   list-style を消して「※」を疑似要素で置いているのは、記号と本文の
   ぶら下がりを揃えるため（マーカーだと行頭が揃わない）。 */
ul.form-notes {
	margin: 0;
	padding: 0;
	color: var(--muted);
	font-size: var(--text-xs);
	line-height: 1.8;
}
ul.form-notes li {
	margin: 0;
	padding-left: 1.4em;
	text-indent: -1.4em;
	/* prose.css の .page-body ul > li は li に直接 list-style: disc を
	   当てている。親の ul 側で none にしても li の指定が勝つので、
	   ここで打ち消す（同じ詳細度・後勝ちで効く）。
	   行頭の記号は ::before の「※」が担当する。 */
	list-style: none;
}
ul.form-notes li::before {
	content: "※ ";
}
.form-notes strong {
	color: var(--ink);
}

/* --- 同意チェック --- */
.form-consent {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--line);
	border-radius: 8px; /* reason: 入力欄(4px)より一段大きくして「囲み」であることを示す面 */
	background: var(--bg-subtle);
	font-size: var(--text-sm);
	line-height: 1.8;
}
/* CF7 の .wpcf7-list-item は margin-left: 1em を持つ。中央寄せがずれるので消す */
.okadaya-form .wpcf7-list-item {
	display: inline-block;
	margin: 0;
}
.okadaya-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	cursor: pointer;
}
.okadaya-form .wpcf7-list-item input[type="checkbox"],
.okadaya-form .wpcf7-list-item input[type="radio"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var(--brand);
	cursor: pointer;
}
/* CF7 がラベルの前後に入れる空白（::before / ::after の content: " "）を消す。
   inline-flex の gap で間隔を作っているので二重になる。 */
.okadaya-form .wpcf7-list-item-label::before,
.okadaya-form .wpcf7-list-item-label::after {
	content: none;
}

/* --- ステップ（入力 → 確認） ---
   切り替えは form.js が hidden 属性で行う。.form-step 自体に display を
   指定していないのは、指定すると hidden 属性（既定の display: none）が
   打ち消されて両方のステップが同時に見えてしまうため。 */
.form-confirm-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--font-serif);
	font-size: var(--text-ml);
	font-weight: 700;
	line-height: 1.5;
}
/* form.js が切り替え時にフォーカスを移す。キーボード操作でないときは
   リングを出さない（マウスで押しただけで枠が出ると誤解を招くため） */
.form-confirm-title:focus:not(:focus-visible) {
	outline: none;
}
p.form-confirm-lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--muted);
	font-size: var(--text-sm);
	line-height: 1.8;
}

/* 確認画面側の区切り見出し。入力側（.form-section-title）より控えめにする。
   確認画面は読むための面なので、線や色で分断しすぎない。 */
.form-confirm-section {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
	color: var(--muted);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.6;
}
.form-confirm-lead + .form-confirm-section {
	margin-top: 0;
}

.form-confirm-list {
	margin: 0;
}
.form-confirm-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--gap-md);
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--line);
}
.form-confirm-row:last-child {
	border-bottom: 1px solid var(--line);
}
.form-confirm-key {
	margin: 0;
	color: var(--muted);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.8;
}
.form-confirm-value {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.8;
	/* 入力された改行と連続スペースをそのまま見せる（本文欄で必要）。
	   長いメールアドレスや URL が枠を突き抜けないよう折り返しも許す。 */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.form-confirm-value.is-empty {
	color: var(--muted);
}

/* --- 送信完了 → 完了ページへ移動している間 ---
   CF7 は送信が成功すると必ず form.reset() を呼ぶ。ページ遷移は
   ネットワーク待ちなので、隠さないとリセット後の空の入力欄が現れ、
   「送信できていない」ように見えてしまう。
   CF7 の完了メッセージ（.wpcf7-response-output）は残して案内に使う。 */
.okadaya-form.is-redirecting .form-step {
	display: none;
}
.okadaya-form.is-redirecting::before {
	content: "送信しました。完了ページへ移動しています…";
	display: block;
	padding: var(--wp--preset--spacing--60) 0;
	color: var(--muted);
	font-size: var(--text-base);
	line-height: 1.8;
	text-align: center;
}

/* --- エラーの一覧 ---
   「確認する」で止まった理由を、押したボタンのすぐ上にまとめて出す。
   中身は form.js が組み立て、エラーが無いときは hidden 属性で消える。 */
.form-error-summary {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--cta);
	border-radius: 8px; /* reason: .form-consent と同じ「囲み」の面なので揃える */
	background: var(--paper);
}
.form-error-summary:focus:not(:focus-visible) {
	outline: none;
}
p.form-error-summary-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--cta);
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1.6;
}
/* prose.css の .page-body ul（0,1,1）に負けないよう ul を併記する */
ul.form-error-summary-list {
	margin: 0;
	padding-left: var(--wp--preset--spacing--40);
	font-size: var(--text-sm);
	line-height: 1.9;
}
ul.form-error-summary-list li {
	margin: 0;
	/* prose.css 任せにせず明示する。あちらの .page-body ul > li が変わっても
	   エラー一覧の見た目は動かさない（ここは箇条書きに見せたいので disc） */
	list-style: disc;
}
/* 単一クラスだと .page-body a（0,1,1）に負けて色も下線も奪われる */
.form-error-summary-list a {
	color: var(--cta);
	font-weight: 700;
	text-decoration: underline;
}
.form-error-summary-list a:hover {
	text-decoration: none;
}

/* --- ボタンの並び --- */
.form-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap-md);
	margin-top: var(--wp--preset--spacing--50);
}
.okadaya-form .form-btn {
	min-width: 280px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	border: none;
	border-radius: 4px;
	background: var(--brand);
	color: var(--paper);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.okadaya-form .form-btn:hover {
	background: var(--accent);
	transform: translateY(-2px);
}
.okadaya-form .form-btn:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}
/* 「修正する」など、送信ではない副次的な操作。
   .form-btn と併記されるので、色だけを打ち消して主従を付ける */
.okadaya-form .form-btn--ghost {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
	font-weight: 500;
}
.okadaya-form .form-btn--ghost:hover {
	background: var(--bg-subtle);
	border-color: var(--brand);
	color: var(--brand);
}

/* --- 実際に送信するボタン ---
   .form-nav-send に包まれているのは「この内容で送信する」だけ。
   入力ステップの「入力内容を確認する」（--brand）と区別が付くよう、
   後戻りできない操作を表す --cta にする。商品のカートボタン
   （item.css の .item-btn--cart）と同じ役割の色。
   ホバーで色を変えないのも item.css と揃えている（浮きだけで反応を返す）。 */
.okadaya-form .form-nav-send .form-btn,
.okadaya-form .form-nav-send .form-btn:hover {
	background: var(--cta);
}
.okadaya-form .form-nav-send .form-btn:focus-visible {
	outline-color: var(--cta);
}

/* 同意チェック前・送信中は CF7 が送信ボタンに disabled を付ける */
.okadaya-form .form-btn:disabled {
	background: var(--muted);
	cursor: not-allowed;
	transform: none;
}
/* 上の --cta 指定（0,3,0）より詳細度を上げる。同点だと後勝ちで
   赤いままになり、押せないボタンが押せそうに見えてしまう */
.okadaya-form .form-nav-send .form-btn:disabled {
	background: var(--muted);
}
.okadaya-form .form-btn--ghost:disabled {
	background: transparent;
	color: var(--muted);
}

/* --- 送信中のスピナー ---
   CF7 の既定は visibility: hidden ＋ width: 24px / margin: 0 24px。
   「見えないのに 72px の場所を取り続ける」ので、そのまま .form-nav の
   flex アイテムにすると 2 ボタンが折り返し、送信ボタンが中心からずれる。
   フォーム定義側で .form-nav-send に包み、ここで絶対配置にして
   レイアウトから完全に外している（margin もここで打ち消す）。 */
.form-nav-send {
	position: relative;
	display: inline-flex;
}
.okadaya-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--30);
	margin: 0;
	transform: translateY(-50%);
	/* 送信ボタン（--cta）の上に乗るので、CF7 の既定（濃いグレー）から
	   反転させる。回る点はボタン地の色にして、円の中で溶けて見えるようにする */
	background-color: var(--paper);
}
.okadaya-form .wpcf7-spinner::before {
	background-color: var(--cta);
}

/* --- エラー表示 ---
   項目ごとのエラー。CF7 の既定色（赤の生値）をトークン（--cta）に寄せる。 */
.okadaya-form .wpcf7-not-valid-tip {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--cta);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.6;
}
.okadaya-form .wpcf7-not-valid {
	border-color: var(--cta);
}

/* 中身が無いときは枠ごと消す。
   CF7 にも「form.init / resetting / submitting のときは display: none」と
   いう指定があるが、それはプラグインのスタイルシートが読まれている前提。
   読まれていないと、送信していないのに空の箱だけが残る。
   「中身が無ければ出さない」はどちらの場合も正しいので、ここで押さえる。 */
.wpcf7 form.okadaya-form .wpcf7-response-output:empty {
	display: none;
}

/* 送信後のメッセージ。CF7 の .wpcf7 form .wpcf7-response-output（0,2,1）を
   確実に上回らせるため .wpcf7 を足して（0,3,1）にしている。 */
.wpcf7 form.okadaya-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--line);
	border-radius: 8px; /* reason: .form-consent と同じ「囲み」の面なので揃える */
	background: var(--bg-subtle);
	font-size: var(--text-base);
	line-height: 1.8;
	/* 送信結果は本文ではなく通知なので、ボタンと同じ中心軸に置いて視線を留める */
	text-align: center;
}
.wpcf7 form.okadaya-form.sent .wpcf7-response-output {
	border-color: var(--brand);
	background: var(--brand-pale);
	color: var(--brand);
	font-weight: 700;
}
.wpcf7 form.okadaya-form.invalid .wpcf7-response-output,
.wpcf7 form.okadaya-form.unaccepted .wpcf7-response-output,
.wpcf7 form.okadaya-form.failed .wpcf7-response-output,
.wpcf7 form.okadaya-form.aborted .wpcf7-response-output,
.wpcf7 form.okadaya-form.spam .wpcf7-response-output {
	border-color: var(--cta);
	color: var(--cta);
	font-weight: 700;
}

/* --- 編集者にだけ出す設定ミスの表示（訪問者には出ない） --- */
p.okadaya-form-error {
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--cta);
	border-radius: 4px;
	color: var(--cta);
	font-size: var(--text-sm);
	line-height: 1.7;
}

/* --- 狭い画面 --- */
@media (max-width: 760px) {
	/* 確認は「項目名 → 値」の縦積みにする。2 列のままだと値の幅が
	   足りず、本文欄が極端に細長くなって読めない */
	.form-confirm-row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}

	/* 確認ステップの 2 ボタンは合計 600px ほどあり、620px 付近で
	   flex-wrap による折り返しが起きる。放っておくと「修正する」が上・
	   「送信する」が下という並びになるので、先回りして縦並びに切り替え、
	   主たる操作（送信する）を上に固定する（column-reverse）。 */
	.form-nav--confirm {
		flex-direction: column-reverse;
	}
	.form-nav--confirm .form-btn {
		min-width: 0;
		width: 100%;
	}
	.form-nav--confirm .form-nav-send {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.form-body {
		gap: var(--wp--preset--spacing--40);
	}
	.okadaya-form .form-btn {
		min-width: 0;
		width: 100%;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
	/* 送信ボタンは .form-nav-send に包まれている。包みの幅を伸ばさないと
	   中のボタンの width: 100% が内容幅のままになり、隣の「修正する」と
	   横幅が揃わない */
	.form-nav-send {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.okadaya-form .form-btn,
	.okadaya-form input[type="text"],
	.okadaya-form input[type="email"],
	.okadaya-form input[type="tel"],
	.okadaya-form select,
	.okadaya-form textarea {
		transition: none;
	}
	.okadaya-form .form-btn:hover {
		transform: none;
	}
}