/**
 * Contact Form 7 のフォームを、テーマのデザインに合わせる。
 *
 * プラグインのファイルは編集せず、プラグインのスタイル（contact-form-7）の後に読み込んで上書きする。
 * 読み込みは functions.php の nkj_theme_enqueue_contact_form_style()。
 */

.wpcf7 {
	--nkj-form-border: #8f887d;      /* 入力欄の枠。灰茶系で、白の上で 3.51:1（部品の境目の目安 3:1 以上） */
	--nkj-form-error: #b3261e;       /* 白の上で 6.54:1 */
	--nkj-form-error-bg: #fbecea;    /* 墨の文字で 12.12:1 */
	--nkj-form-success-bg: #eaf2ee;  /* 墨の文字で 12.22:1 */
}

/* ---- 項目のまとまり ---- */
.wpcf7-form > p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* 項目名：墨色の太字。Contact Form 7 が自動で入れる改行は使わず、入力欄との間は余白で空ける */
.wpcf7-form label {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.wpcf7-form label br {
	display: none;
}

.wpcf7-form label > .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.5em;
	font-weight: 400;
}

/* ---- 必須・任意のラベル（functions.php で「（必須）」「（任意）」から置き換え） ---- */
.nkj-badge {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.6em;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 0.1em;
}

.nkj-badge--required {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.nkj-badge--optional {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast-2);
}

/* ---- 入力欄（1行・複数行） ---- */
.wpcf7-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--nkj-form-border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	/* iPhone で入力時に画面が拡大されないよう、16px 以上にする */
	font-size: max(1rem, 16px);
	line-height: 1.7;
}

.wpcf7-form textarea {
	min-height: 12em;
	resize: vertical;
}

/* 入力中：深緑の枠線（太さを足して、色以外でも分かるようにする） */
.wpcf7-form :where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	outline: 1px solid var(--wp--preset--color--primary);
	outline-offset: 0;
}

/* ---- プライバシーポリシーへの同意（チェックボックス） ---- */
.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance label {
	display: inline-flex;
	gap: 0.6em;
	align-items: center;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7-form input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.wpcf7-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---- 送信ボタン：サイト共通のボタン（無料で相談する）と同じ見た目 ---- */
.wpcf7-form .wpcf7-submit {
	padding: 0.9em 2em;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-family: inherit;
	font-size: max(1rem, 16px);
	font-weight: 700;
	line-height: inherit;
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* 同意のチェックが入るまで押せない状態 */
.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- 入力エラー：色だけに頼らず、記号と太字、枠線の太さでも伝える ---- */
.wpcf7-form .wpcf7-not-valid {
	border-color: var(--nkj-form-error);
	outline: 1px solid var(--nkj-form-error);
	outline-offset: 0;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.4em;
	color: var(--nkj-form-error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.wpcf7 .wpcf7-not-valid-tip::before {
	content: "\26A0\FE0E\00A0"; /* ⚠（絵文字ではなく文字として表示） */
}

/* ---- 送信結果のメッセージ ---- */
.wpcf7 form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 1em 1.25em;
	border: 1px solid var(--nkj-form-error);
	border-left-width: 6px;
	border-radius: 6px;
	background: var(--nkj-form-error-bg);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.wpcf7 form .wpcf7-response-output::before {
	content: "\26A0\FE0E\00A0";
	color: var(--nkj-form-error);
}

/* 入力エラー・送信失敗など（プラグインの状態ごとの色指定を上書き） */
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
	border-color: var(--nkj-form-error);
}

/* 送信完了 */
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--primary);
	background: var(--nkj-form-success-bg);
}

.wpcf7 form.sent .wpcf7-response-output::before {
	content: "\2713\00A0"; /* ✓ */
	color: var(--wp--preset--color--primary);
}

/* 送信中・初期状態ではメッセージ欄を表示しない（プラグインの既定どおり） */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}