/* ============================================
   Plugins — third-party output styled to the Sukha system.

   Loaded on the front end whenever Contact Form 7 is active and printed
   after CF7's own stylesheet (see functions.php → sukha_enqueue_plugin_styles),
   so these rules win the cascade. Everything is scoped to .wpcf7-form; colors
   and fonts come from theme.json tokens, sizes follow the rem convention used
   in header.css / footer.css.
   ============================================ */

/* --------------------------------------------
   Contact Form 7
   CF7 wraps each field in a <p>, with the label text, a <br>, then the control
   inside <span class="wpcf7-form-control-wrap">. The submit sits in its own <p>.
   -------------------------------------------- */

.wpcf7-form {
	/* No palette token exists for an error state — one documented red, reused
	   for invalid borders and validation tips below. */
	--sukha-form-invalid: #c0492b;
}

/* Each field's <p> carries the vertical rhythm between controls. */
.wpcf7-form p {
	margin: 0 0 var(--wp--preset--spacing--md);
}

/* Assumes the submit block is the last paragraph */
.wpcf7-form p:last-of-type {
	margin: 0;
	padding-top: var(--wp--preset--spacing--md);
}

/* Drop CF7's hidden-fields fieldset chrome so it leaves no stray box. */
.wpcf7-form .hidden-fields-container {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Labels — heading voice, sitting directly above their control. */
.wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal);
}

/* The control-wrap becomes the full-width block under the label; its top margin
   is the label-to-field gap, so CF7's inline <br> is no longer needed. */
.wpcf7-form label br {
	display: none;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--wp--preset--spacing--xs);
}

/* Text-like controls + textarea + select share one field style. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea,
.wpcf7-form select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem 1.25rem;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--cream);
	border-radius: 3.5rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form textarea {
	min-height: 13rem;
	resize: vertical;
	border-radius: 1.5rem;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: var(--wp--preset--color--charcoal);
	opacity: 0.45;
}

/* Focus — terracotta border and a soft ring mixed from the same token. */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--terracotta);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--terracotta) 22%, transparent);
}

/* --------------------------------------------
   Submit — full-width terracotta button, matching the field radius.
   Inherits Roboto to stay consistent with the site's other buttons.
   -------------------------------------------- */
.wpcf7-form input[type="submit"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: var(--wp--preset--spacing--lg);
	padding: 1.15rem 1.5rem;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 400;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--terracotta);
	border: none;
	border-radius: 0.875rem;
	cursor: pointer;
	transition: transform 0.3s ease, filter 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form input[type="submit"]:hover {
	filter: brightness(0.96);
}

.wpcf7-form input[type="submit"]:active {
	transform: scale(0.99);
}

.wpcf7-form input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--terracotta) 35%, transparent);
}

/* The AJAX spinner sits after the full-width button; center it on its own line. */
.wpcf7-form .wpcf7-spinner {
	display: none;
	margin: var(--wp--preset--spacing--sm) auto 0;
}

.wpcf7-form.submitting .wpcf7-spinner {
	display: block;
}

/* --------------------------------------------
   Validation + response messages
   -------------------------------------------- */
.wpcf7-form .wpcf7-not-valid {
	border-color: var(--sukha-form-invalid);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--small);
	color: var(--sukha-form-invalid);
}

.wpcf7-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--md) 0 0;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	border: 1px solid var(--wp--preset--color--cream);
	border-radius: 0.875rem;
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	.wpcf7-form input,
	.wpcf7-form textarea,
	.wpcf7-form select {
		transition: none;
	}

	.wpcf7-form input[type="submit"]:active {
		transform: none;
	}
}