/*
 * Contact Form 7 styling.
 *
 * Clean underline-only inputs with spaced layout and small-caps labels.
 *
 * @package emhowart-2025
 * @since 1.0.0
 */

.wpcf7 {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

/* Spacing between form rows */
.wpcf7 .wpcf7-form-control-wrap,
.wpcf7 p {
	display: block;
	margin-bottom: 2rem;
}

.wpcf7 p:last-of-type {
	margin-bottom: 0;
}

/* Labels */
.wpcf7 label {
	display: block;
	font-size: var(--wp--preset--font-size--extra-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.5rem;
}

/* All text-like inputs: underline only */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding: 0.5rem 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.2s ease;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/* Textarea: underline only, matching inputs */
.wpcf7 textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding: 0.5rem 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	resize: none;
	min-height: 120px;
	transition: border-color 0.2s ease;
}

.wpcf7 textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/* Submit button */
/*
 * The submit button was the odd one out: the only solid accent fill on the
 * site, and its hover ran backwards — filled to empty, where every other button
 * goes empty to filled. On Contact and Commissions that made the most prominent
 * control on the page behave opposite to the rest of the site. It is now the
 * standard button (buttons.css); only its spacing lives here.
 */
.wpcf7 input[type="submit"] {
	margin-top: 0.5rem;
}

/* Inline field validation tips */
.wpcf7 .wpcf7-not-valid-tip {
	color: #c0392b;
	font-size: var(--wp--preset--font-size--extra-small);
	margin-top: 0.4rem;
	display: block;
}

/* Response output — shared */
.wpcf7 .wpcf7-response-output {
	margin-top: 2rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.03em;
	border: none;
	padding: 0;
}

/* Success */
.wpcf7 form.sent .wpcf7-response-output {
	color: var(--wp--preset--color--contrast);
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 1rem;
}

/* Error / failed send */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	color: #c0392b;
	border-left: 2px solid #c0392b;
	padding-left: 1rem;
}

/* Validation errors */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	color: #c0392b;
	border-left: 2px solid #c0392b;
	padding-left: 1rem;
}