/*
 * contact-form.css — Contact Form 7 の出力を、サイト既存のフォーム意匠に合わせる。
 *
 * 2026-09-07: formrun 解約に伴い、お問い合わせフォームを CF7 へ全面置換した。
 * CF7 は入力欄を <span class="wpcf7-form-control-wrap"> で包む・独自クラスを付ける等、
 * 旧 formrun 版とは markup が異なる。その差分だけをここで吸収する。
 *
 * 【なぜ Tailwind ではなく手書き CSS なのか】
 * サイトの CSS は Next.js の Tailwind ビルド成果物で、assets/css/ 配下は
 * build-theme.sh が毎回作り直す（＝手書きを置けない）。加えて CF7 のフォーム定義は
 * DB に保存されるため Tailwind の purge 対象にならない。
 * そこで js/interactions.js と同じく「assets/ の外に置く手管理ファイル」とし、
 * functions.php から filemtime 付きで enqueue する。
 *
 * このファイルは CF7 の構造にだけ依存する。テーマ本体の .form-input 等は
 * globals.css（Tailwind ビルド側）が持っており、ここでは触らない。
 */

/* --------------------------------------------------------------------
 * 1. CF7 のラッパーを「無かったこと」にする
 *
 * CF7 は入力欄を <span class="wpcf7-form-control-wrap"> で包む。span は
 * インライン要素なので、そのままだと grid（姓・名の 2 列）で幅が潰れ、
 * width:100% の .form-input が親に合わせて伸びない。
 * ------------------------------------------------------------------ */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* CF7 が form 直下に入れる余白・枠を打ち消す（テーマ側で余白を管理しているため） */
.wpcf7 form.wpcf7-form {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------
 * 2. 同意チェックボックス
 *
 * [acceptance] は中身を空にすると <label> で包まずチェックボックスだけを出す。
 * ラベル側の markup はフォームテンプレートで自前に書いているので、
 * ここでは CF7 側のラッパーがレイアウトを崩さないようにするだけ。
 * ------------------------------------------------------------------ */
.wpcf7 .wpcf7-acceptance,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: inline;
	margin: 0;
}

/* 同意チェックの wrap だけは flex の子として自然幅にする（block だと折り返す） */
.wpcf7 .wpcf7-form-control-wrap[data-name="privacy-consent"] {
	display: inline;
	width: auto;
	flex: 0 0 auto;
}

.wpcf7 input[type="checkbox"] {
	accent-color: var(--orange);
	cursor: pointer;
}

/* --------------------------------------------------------------------
 * 3. エラー表示
 *
 * 旧 formrun 版のエラー文（.mt-2 .text-[12px] .font-bold .text-red-600）と
 * 同じ見た目に揃える。CF7 は各入力欄の直後に .wpcf7-not-valid-tip を出す。
 * ------------------------------------------------------------------ */
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	color: #dc2626; /* Tailwind text-red-600 と同値 */
}

/* 入力欄自体にも異常であることを示す（色だけに頼らないよう枠線で表す） */
.wpcf7 .wpcf7-not-valid {
	border-color: #dc2626 !important;
}

/* --------------------------------------------------------------------
 * 4. 送信後のメッセージ
 *
 * CF7 はフォーム下部に .wpcf7-response-output を出す。既定は素の枠線なので、
 * サイトの配色に合わせる。成功・失敗で色を変える。
 * ------------------------------------------------------------------ */
.wpcf7 .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.8;
	background: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #16a34a;
	color: #15803d;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--orange);
	color: var(--orange);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #dc2626;
	color: #dc2626;
}

/* --------------------------------------------------------------------
 * 5. 送信ボタンと送信中スピナー
 *
 * CF7 の submit は <input type="submit">（旧版は <button>）。
 * .form-submit（globals.css）が当たるようテンプレートで class を指定しているので、
 * ここでは input 特有の見え方だけ補正する。
 * ------------------------------------------------------------------ */
.wpcf7 input.form-submit {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
}

.wpcf7 .wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* --------------------------------------------------------------------
 * 6. ハニーポット
 *
 * inc/cf7.php がインライン style 付きで出しているので CSS 無しでも隠れるが、
 * インライン style を落とす環境（一部のメールクライアント風プロキシ等）でも
 * 見えないよう二重に押さえる。display:none は使わない
 * （「隠しフィールドは無視する」種類のボットに見抜かれやすいため）。
 * ------------------------------------------------------------------ */
.wpcf7 .occ-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}