/**
 * Contact Form 7 Styles
 *
 * Scoped to .wpcf7 so these apply to any CF7 form site-wide.
 * Follows theme conventions: Maax fonts, CSS variables, no border-radius.
 */

/* Form layout */
.wpcf7-form p {
	margin: 0 0 1.5rem;
}

.wpcf7-form label {
	display: block;
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text);
}

/* Text inputs, email, url, tel, number */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="password"] {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	margin-top: 0.5rem;
	border: 2px solid var(--color-line-3);
	border-radius: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="password"]:focus {
	border-color: var(--color-black);
	outline: none;
}

/* Select dropdown */
.wpcf7-form select {
	display: block;
	width: 100%;
	padding: 0.75rem 2.5rem 0.75rem 1rem;
	margin-top: 0.5rem;
	border: 2px solid var(--color-line-3);
	border-radius: 0;
	background-color: var(--color-background);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.wpcf7-form select:focus {
	border-color: var(--color-black);
	outline: none;
}

/* Textarea */
.wpcf7-form textarea {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	margin-top: 0.5rem;
	border: 2px solid var(--color-line-3);
	border-radius: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	resize: vertical;
	min-height: 10rem;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form textarea:focus {
	border-color: var(--color-black);
	outline: none;
}

/* Checkbox */
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-family: inherit;
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-text-2);
	cursor: pointer;
}

.wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0 0;
	flex-shrink: 0;
	accent-color: var(--color-black);
	cursor: pointer;
}

.wpcf7-form .wpcf7-list-item-label {
	line-height: 1.4;
}

/* Submit button */
.wpcf7-form input[type="submit"] {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	margin-top: 0.5rem;
	border: 2px solid var(--color-black);
	border-radius: 0;
	background: var(--color-black);
	color: var(--color-white);
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form input[type="submit"]:hover {
	background: var(--color-background);
	color: var(--color-black);
}

.wpcf7-form input[type="submit"]:active {
	background: var(--color-background-2);
}

/* Spinner (CF7 loading indicator) */
.wpcf7-form .wpcf7-spinner {
	margin-left: 1rem;
	vertical-align: middle;
}

/* Validation errors — needs high specificity to beat input[type="..."] selectors */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	border-color: var(--color-red);
}

.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	color: var(--color-red);
}

/* Response messages */
.wpcf7-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border: 2px solid var(--color-line-3);
	font-size: 0.875rem;
	line-height: 1.5;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--color-green);
	color: var(--color-green);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	border-color: var(--color-red);
	color: var(--color-red);
}

/* Constrain form width for readability */
.wpcf7 {
	max-width: 40rem;
}

/* Support form — topic instructions */
.support-form__instructions {
	padding: 1.5rem;
	background: var(--color-background-2);
	border-left: 3px solid var(--color-black);
	margin-bottom: 1.5rem;
}

.support-form__instructions p {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
}

.support-form__instructions p:last-child {
	margin-bottom: 0;
}

.support-form__instructions ul {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}

.support-form__instructions li {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
	margin-bottom: 0.25rem;
}

.support-form__instructions a {
	color: var(--color-text);
	text-decoration: underline;
}

.support-form__instructions a:hover {
	color: var(--color-text-2);
}

/* Responsive */
@media (max-width: 768px) {
	.wpcf7-form input[type="submit"] {
		width: 100%;
		text-align: center;
	}
}