/**
 * お問い合わせフォーム（CF7）共通スタイル
 *
 * WHY: フロントページ（LP）19 お問い合わせセクションと、固定ページ「お問い合わせ」
 *      （ショートコード [kdc_contact_form] 経由）は、同じ kdc_render_contact_form_or_fallback()
 *      （inc/helpers.php）で HTML を出力する。同じ見た目を front.css と page.css の
 *      2箇所に複製すると改修のたびに乖離するため、フォーム本体（ラベル・必須バッジ・
 *      入力欄・セレクト・テキストエリア・送信ボタン・エラー表示・同意チェック）と
 *      フォールバック表示（電話・メール導線）の装飾をこのファイルへ一本化する。
 *      LP セクションの背景色・見出し・リード文など、セクション固有の装飾は対象外
 *      のため front.css 側に残す。
 *
 *      スコープ用クラス .ds-contact-form は、CF7 ショートコードの html_class 属性
 *      経由で <form class="wpcf7-form ... ds-contact-form"> に付与している
 *      （inc/helpers.php 参照）。旧実装ではLPの <section class="ds-contact"> を
 *      祖先セレクタに使っていたため、同じ詳細度になるよう .ds-contact-form を
 *      .wpcf7-form とのコンパウンド（同一要素の複合クラス）で使う箇所と、単独の
 *      祖先セレクタとして使う箇所を、移設前のセレクタ構成に合わせて使い分けている
 *      （CF7本体スタイルとの詳細度比較を崩さないため）。
 *      色・spacing は tokens.css の --ds-* トークンを使い、直値のハードコードを避ける。
 *
 * @package kadence-child
 */

/*
 * WHY: 個人の色覚特性やモノクロ環境でも必須／エラーが判別できるよう、
 *      色だけに頼らずテキスト（「必須」表記・エラー文言）でも判別できるようにする。
 */
.ds-form__required {
	margin-left: 4px;
	color: var(--ds-brand-dark);
	font-size: 12.5px;
	font-weight: 700;
}

.ds-contact-form.wpcf7-form {
	max-width: 640px;
	margin: 0 auto;
}

.ds-contact-form.wpcf7-form p {
	margin: 0 0 20px;
}

.ds-contact-form.wpcf7-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--ds-fg);
	font-weight: 700;
}

/*
 * WHY: box-sizing / font-family の継承リセットは、acceptance（同意）欄の
 *      外枠 <span class="wpcf7-form-control wpcf7-acceptance"> にも
 *      wpcf7-form-control クラスが付くため無害な指定に留め、見た目に影響する
 *      幅・枠線・パディングは実要素（input/select/textarea）だけに絞って
 *      次のブロックで指定する。
 */
.ds-contact-form .wpcf7-form-control {
	box-sizing: border-box;
	font-family: inherit;
}

/*
 * WHY: iOS Safari はテキスト入力のフォントサイズが16px未満だと、タップ時に
 *      ページ全体を自動でズームしてしまい操作性が落ちるため、16px以上を確保する。
 */
.ds-contact-form input.wpcf7-form-control,
.ds-contact-form select.wpcf7-form-control,
.ds-contact-form textarea.wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	color: var(--ds-fg);
	font-size: 16px;
	font-weight: 400;
	background-color: #fff;
	border: 1px solid var(--ds-line);
	border-radius: 4px;
}

.ds-contact-form textarea.wpcf7-form-control {
	min-height: 140px;
}

/*
 * WHY: ブラウザ既定のフォーカスリングを消さず、キーボード操作でも
 *      どの項目にフォーカスがあるか視認できるようにする
 *      （アクセシビリティ要件: キーボード操作可能）。
 *      サイト内のフォーカスリングを .ds-btn:focus-visible 等と同一の
 *      3px / var(--ds-fg) / offset 3px に統一する。var(--ds-brand) は
 *      白背景に対し2.87:1でWCAG 1.4.11 非テキストコントラスト基準3:1に
 *      届かないため使わない。
 */
.ds-contact-form.wpcf7-form :focus-visible {
	outline: 3px solid var(--ds-fg);
	outline-offset: 3px;
}

.ds-contact-form .wpcf7-list-item {
	display: block;
	margin: 0 0 8px;
	margin-left: 0;
}

.ds-contact-form .wpcf7-list-item-label {
	margin-left: 8px;
}

/*
 * WHY: チェックボックス・ラジオ自体のタップ領域が小さいままだと誤操作の
 *      原因になるため、最低限のサイズを確保する。
 */
.ds-contact-form .wpcf7-list-item input[type="checkbox"],
.ds-contact-form .wpcf7-list-item input[type="radio"] {
	width: auto;
	min-width: 20px;
	min-height: 20px;
	vertical-align: middle;
}

/*
 * WHY: エラー色は既存の CSS 変数だけでは「注意喚起」の意味が伝わらないため、
 *      この1色（赤系）のみ新規に定義する。色だけに依存させず「※」の
 *      テキストでも判別できるようにする。
 */
.ds-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #C0392B;
	font-size: 13px;
	font-weight: 700;
}

.ds-contact-form .wpcf7-not-valid-tip::before {
	content: "※ ";
}

.ds-contact-form input.wpcf7-not-valid,
.ds-contact-form select.wpcf7-not-valid,
.ds-contact-form textarea.wpcf7-not-valid {
	border-color: #C0392B;
}

/*
 * WHY: CF7本体の `.wpcf7 form .wpcf7-response-output` が (0,2,1) の詳細度で
 *      2px の青枠と余白を指定しているため、`.ds-contact-form.wpcf7-form` の
 *      コンパウンド（2クラス）に `.wpcf7-response-output` を足しクラス3個にし
 *      詳細度で上回る。読み込み順だけでは勝てない。
 */
.ds-contact-form.wpcf7-form .wpcf7-response-output {
	box-sizing: border-box;
	max-width: 640px;
	margin: 24px auto 0;
	padding: 14px 16px;
	color: var(--ds-fg);
	font-size: 14.5px;
	border: 1px solid var(--ds-line);
	border-radius: 4px;
}

.ds-contact-form.wpcf7-form.sent .wpcf7-response-output {
	background-color: var(--ds-bg-soft);
	border-color: var(--ds-cta-surface);
}

.ds-contact-form.wpcf7-form.invalid .wpcf7-response-output,
.ds-contact-form.wpcf7-form.unaccepted .wpcf7-response-output,
.ds-contact-form.wpcf7-form.failed .wpcf7-response-output,
.ds-contact-form.wpcf7-form.spam .wpcf7-response-output {
	color: #C0392B;
	border-color: #C0392B;
}

.ds-contact-form .wpcf7-spinner {
	margin-left: 8px;
}

/*
 * WHY: 送信ボタンは既存の .ds-btn と見え方を揃え、CF7 が生成する
 *      <input type="submit"> にも同じタップ領域・トランジションを適用する。
 *      CF7 は input[type="submit"] にも wpcf7-form-control クラスを付与するため、
 *      汎用入力欄向けに指定した width:100% を打ち消す必要がある。
 *      白文字を載せるため var(--ds-brand) では2.87:1でWCAG 1.4.5 通常文字
 *      基準4.5:1に届かない。.ds-btn-primary と同じ #B85A00（4.67:1）/
 *      hover #A85200（5.42:1）に揃える。CF7 が出力する input[type="submit"]
 *      は .ds-btn クラスを持たないため、共通クラスの見直しでは対象外だった。
 */
.ds-contact-form.wpcf7-form input[type="submit"] {
	display: inline-block;
	width: auto;
	min-height: 44px;
	padding: 14px 28px;
	color: #fff;
	font-weight: 700;
	/* WHY (2026-08-14): --ds-cta-surface は白文字 3.31:1 のため 19px 以上が必須。 */
	font-size: 19px;
	background-color: var(--ds-cta-surface);
	border: 1.5px solid var(--ds-cta-surface);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.ds-contact-form.wpcf7-form input[type="submit"]:hover {
	background-color: var(--ds-cta-surface-hover);
	border-color: var(--ds-cta-surface-hover);
}

.ds-contact__fallback {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.ds-contact__fallback-text {
	margin: 0 0 20px;
	color: var(--ds-fg-soft);
}

.ds-contact__fallback-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.ds-contact__admin-note {
	margin-top: 20px;
	color: var(--ds-fg-soft);
	font-size: 13px;
}

.ds-contact__note {
	margin: 32px 0 0;
	color: var(--ds-fg-soft);
	font-size: 13px;
	text-align: center;
}

/*
 * WHY: 767px 以下でも横スクロールを生まないよう、内側コンテンツ幅を
 *      画面幅に合わせて縮める（box-sizing: border-box は各要素側で指定済み）。
 */
@media (max-width: 767px) {
	.ds-contact-form.wpcf7-form,
	.ds-contact-form .wpcf7-response-output,
	.ds-contact__fallback {
		max-width: 100%;
	}

	.ds-contact__fallback-actions {
		flex-direction: column;
	}
}

/*
 * WHY: front.css 側の「アクセシビリティ: motion の抑制」ブロックと同じ理由
 *      （前庭障害への配慮）。送信ボタンのクラスがこのファイルへ移設されたため、
 *      transition 無効化ルールもここへ一緒に移設する。
 */
@media (prefers-reduced-motion: reduce) {
	.ds-contact-form.wpcf7-form input[type="submit"] {
		transition: none;
	}
}