/**
 * Contact Form 7 のフォーム（/contact/ など）。フォームがあるページだけで読む（inc/cf7.php）。
 *
 * フォーム本体（CF7 の設定）は旧子テーマ swell_child のクラス hc-contact-form / hc-button のまま。
 * 見た目は新テーマに合わせる：入力欄は枠 2px button-hover（#F4CB8B）・角6・フォーカスで primary（#EFA336）。
 * 送信ボタンは theme.json の elements.button と同じ（button #F8D9A8 地・ink の太字・角6・ホバー button-hover）。
 */

.hc-contact-form__row + .hc-contact-form__row {
	margin-top: 24px;
}

.hc-contact-form__label label {
	color: var(--wp--preset--color--ink-head);
	font-weight: 700;
}

/* CF7 は <p> で包むことがあるので、余白をそろえる */
.hc-contact-form p {
	margin: 0;
}

.hc-contact-form__control {
	margin-top: 8px;
}

/*
 * 「必須」の札（2026-10-13 CEO）。label の中に入れる＝読み上げでも「お名前 必須」と伝わる。任意の項目には何も付けない。
 * 地 primary（#EFA336）・文字 ink（#2A3550）＝コントラスト約 6:1（白文字は約 2:1 で足りないので使わない）。相談パネルの .req と同じ組み合わせ。
 */
.hc-contact-form__required {
	display: inline-block;
	margin-left: 8px;
	padding: 0 6px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	vertical-align: 1px;
}

/* 項目の補足・送信前の同意の一文（補足の大きさ・色） */
.hc-contact-form p.hc-contact-form__note,
.hc-contact-form p.hc-contact-form__consent {
	color: var(--wp--preset--color--ink-sub);
	font-size: 14px;
	line-height: 1.7;
}

.hc-contact-form p.hc-contact-form__note {
	margin-top: 6px;
}

.hc-contact-form p.hc-contact-form__consent {
	margin-top: 32px;
	text-align: center;
}

.hc-contact-form__consent a {
	color: inherit;
	text-decoration: underline;
}

.hc-contact-form__consent a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.hc-contact-form__consent + .hc-contact-form__submit,
.hc-contact-form__consent + p + .hc-contact-form__submit {
	margin-top: 12px;
}

.hc-contact-form__control input,
.hc-contact-form__control textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	border: 2px solid var(--wp--preset--color--button-hover);
	border-radius: 6px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 16px; /* iPhone でフォーカス時に拡大されない大きさ */
	line-height: 1.6;
	vertical-align: top;
}

/* 1行の欄は高さ 44px 前後（上下の内側 7px＋文字 16px×1.6＋枠 2px×2。2026-10-14 CEO：54px から詰める。押しやすさのため 40px 未満にはしない） */
.hc-contact-form__control input {
	padding-top: 7px;
	padding-bottom: 7px;
}

.hc-contact-form__control textarea {
	height: 180px; /* 約6行。CF7 既定の rows=10 だと高すぎる（2026-10-14：220px から、1行の欄を詰めたのに合わせて少し減らす） */
	min-height: 120px;
	resize: vertical;
}

.hc-contact-form__control input:focus,
.hc-contact-form__control textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

.hc-contact-form__control input::placeholder,
.hc-contact-form__control textarea::placeholder {
	color: var(--wp--preset--color--ink-sub);
	opacity: 0.7;
}

.hc-contact-form__control .wpcf7-not-valid {
	border-color: var(--wp--preset--color--error);
}

.hc-contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--wp--preset--color--error);
	font-size: 14px;
}

.hc-contact-form__submit {
	box-sizing: border-box;
	position: relative;
	width: max-content;
	max-width: 100%;
	margin: 32px auto 0;
	padding: 0 36px; /* 右にスピナーの場所 */
	text-align: center;
}

.hc-contact-form__submit .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 0;
	margin: 0;
	transform: translateY(-50%);
}

.hc-button {
	display: inline-block;
	min-width: 240px;
	margin: 0;
	padding: 12px 32px;
	border: 2px solid transparent;
	border-radius: 6px;
	background-color: var(--wp--preset--color--button);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--m-plus);
	font-weight: 700;
	line-height: 1.8;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.hc-button:hover {
	background-color: var(--wp--preset--color--button-hover);
}

.hc-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.hc-button:disabled {
	cursor: wait;
	opacity: 0.6;
}

@media (max-width: 599px) {
	.hc-contact-form__submit {
		width: 100%;
	}

	.hc-button {
		width: 100%;
		min-width: 0;
	}
}

/* 送信後のメッセージ */
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border-width: 2px;
	border-radius: 6px;
}