/* ==========================================================================
   Contact form /contact/ — Figma 「/contact - bình thường」「/contact - bản error」 (PC 1440, 3/11).
   Loaded on /contact/ only (inc/enqueue.php). Markup: inc/contact-form.php (CF7 in code).

   PC: section padding 120; form 800 wide, centered. Every block 48 apart (24 + 24).
       Label = 「必須」 badge 38×19 (#00479D, r2, 10/500) + 10 + text 15/700 (lh 24) → 8 → field.
       Field 40 tall (textarea 124), 1px #DDE3EA, r5, padding 8 / 14.
       Radios: circle 14 (1px #DDE3EA) + 4 + text 14, 16 apart. Consent: box 16 (1px #1E2A38, r2)
       + 8 + underlined text 14. Submit 224 × 51, 16/500, left.
       Error: field border #BA3F41; message 11/500 #BA3F41, 8 under the field, inside the
       48 gap → nothing moves when errors appear.
   Not in Figma (kept minimal): focus = blue border + ring; checked = blue; sending = dimmed.
   SP (Figma 「/contact」 SP 375): section padding 80; 20px gutters (field 335); rows 48 apart;
       everything else as PC (submit 224 × 51, left). Inputs 16px (iOS zoom), PC 15.
   ========================================================================== */

.p-contact-form {
	/* SP = Figma SP */
	--form-section-pad: var(--space-20);
	--form-row-gap: var(--space-12);
	--form-input-size: 16px; /* ≥ 16px: iOS Safari does not zoom in on focus */

	padding-block: var(--form-section-pad);
}

.c-form {
	--form-w: 800px;
	--form-label-gap: var(--space-2);
	--form-field-h: 40px;
	--form-textarea-h: 124px;
	--form-radius: 5px;
	--form-tip-gap: var(--space-2);

	max-width: var(--form-w);
	margin-inline: auto;
}

/* Contact Form 7 unavailable (plugin off / missing): message + mail link instead of a blank area */
.c-form__unavailable {
	padding: var(--space-8);
	font-size: var(--fs-text);
	line-height: 1.6;
	text-align: center;
	background-color: var(--c-bg-alt);
	border-radius: var(--form-radius);
}

.c-form__unavailable a {
	color: var(--c-primary);
	text-decoration: underline;
}

/* CF7's hidden inputs (its CSS is not loaded → default fieldset border/padding) */
.c-form .hidden-fields-container {
	display: none;
}

.c-form__fields {
	display: grid;
	gap: var(--form-row-gap);
}

/* --- Label: badge + text -------------------------------------------------- */
.c-form__row {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.c-form__legend {
	padding: 0;
}

.c-form__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.c-form__badge {
	flex-shrink: 0;
	padding: 1px 9px 2px;
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
	color: var(--c-on-dark);
	background-color: var(--c-primary);
	border-radius: 2px;
}

.c-form__control {
	margin-top: var(--form-label-gap);
}

/* CF7 wraps every control: the error message is positioned against it */
.c-form .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

/* --- Text fields ------------------------------------------------------------ */
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form textarea {
	display: block;
	width: 100%;
	height: var(--form-field-h);
	padding: 8px 14px;
	font-size: var(--form-input-size);
	line-height: 1.5;
	color: var(--c-text);
	background-color: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--form-radius);
	appearance: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.c-form textarea {
	height: var(--form-textarea-h);
	min-height: var(--form-textarea-h);
	resize: vertical;
}

.c-form input[type="text"]:focus,
.c-form input[type="email"]:focus,
.c-form input[type="tel"]:focus,
.c-form textarea:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.15);
}

/* --- Radios (お問い合わせ種別) ------------------------------------------------ */
.c-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
}

.c-form .wpcf7-list-item {
	display: flex; /* no inherited 27px line box around the 22px choice */
	margin: 0;
	white-space: nowrap; /* 「その他」… never broken inside */
}

.c-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-text);
	line-height: 1.6;
	white-space: nowrap; /* a choice label never wraps */
	cursor: pointer;
}

.c-form input[type="radio"] {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin: 1px;
	border: 1px solid var(--c-border);
	border-radius: 50%;
	background-color: var(--c-bg);
	appearance: none;
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.c-form input[type="radio"]:checked {
	border-color: var(--c-primary);
	background-color: var(--c-primary);
	box-shadow: inset 0 0 0 3px var(--c-bg);
}

/* --- Consent ---------------------------------------------------------------- */
.c-form .wpcf7-acceptance {
	display: block;
}

.c-form__row--consent .wpcf7-list-item label {
	gap: var(--space-2);
	white-space: normal;
}

.c-form input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--c-checkbox);
	border-radius: 2px;
	background: var(--c-bg) no-repeat center / 12px 12px;
	appearance: none;
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.c-form input[type="checkbox"]:checked {
	border-color: var(--c-primary);
	background-color: var(--c-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.c-form__consent-link {
	font-size: var(--fs-text);
	line-height: 1.6;
	text-decoration: underline;
	transition: color var(--transition-fast);
}

.c-form__consent-link:hover {
	color: var(--c-primary);
}

/* --- Errors (CF7: .wpcf7-not-valid + .wpcf7-not-valid-tip) ------------------- */
.c-form .wpcf7-not-valid {
	border-color: var(--c-error) !important; /* also while focused */
}

.c-form .wpcf7-not-valid-tip {
	position: absolute;
	top: calc(100% + var(--form-tip-gap));
	left: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	color: var(--c-error);
}

/* --- Submit ----------------------------------------------------------------- */
.c-form__actions {
	display: flex;
	align-items: center;
}

.c-form .c-form__submit {
	min-width: 224px;
	min-height: 51px;
	padding: 15px 30px; /* 15 + 1px border = Figma 16 */
	font-size: 16px;
	line-height: 19px;
}

.c-form .c-form__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* CF7's spinner (its CSS is not loaded): the dimmed button is the sending state */
.c-form .wpcf7-spinner {
	display: none;
}

/* --- Form-level messages ------------------------------------------------------
   CF7's screen-reader summary: hidden visually (its CSS is not loaded).
   "Invalid" summary: not in Figma → screen readers only. Send failure / spam: shown in red. */
.c-form .screen-reader-response,
.c-form .wpcf7-form.invalid .wpcf7-response-output,
.c-form .wpcf7-form.unaccepted .wpcf7-response-output {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Shown ONLY for real errors. On success CF7 writes 「お問い合わせが完了しました」 here, then resets
   the form (status "resetting") while the browser goes to /contact-complete/ — it must not flash. */
.c-form .wpcf7-response-output {
	display: none;
	margin-top: var(--space-6);
	font-size: var(--fs-text);
	line-height: 1.6;
	color: var(--c-error);
}

.c-form .wpcf7-form:is(.failed, .spam, .aborted) .wpcf7-response-output:not(:empty) {
	display: block;
}

@media (max-width: 1023.98px) {
	/* 20px gutters, as the hero above (Figma SP) */
	.p-contact-form > .l-container {
		padding-inline: 20px;
	}

	/* Hero without a button: 72 under the lead (Figma SP; /improvement's 75 has a button) */
	.c-page-hero--band:has(+ .p-contact-form) {
		--ph-pad-bottom: 72px;
	}
}

@media (min-width: 1024px) {
	.p-contact-form {
		/* PC = Figma */
		--form-section-pad: var(--space-30);
		--form-input-size: 15px;
	}
}