/**
 * Slabwork: generic form-field rules, plus a thin layer mapping Contact
 * Form 7's own classes onto them. Every selector here is inert when the
 * plugin is absent — this file loads either way.
 *
 * --slabwork-field-* custom properties are computed at runtime (they flip
 * between the bone and inverted contexts) rather than read from a fixed
 * theme.json preset, so they use the --slabwork- prefix rather than
 * --wp--custom--.
 */

form,
.slabwork-contact-band-form {
	--slabwork-field-fill: var( --wp--custom--color--paper );
	--slabwork-field-border: var( --wp--preset--color--contrast );
	--slabwork-field-text: var( --wp--preset--color--contrast );
	--slabwork-field-focus: var( --wp--preset--color--accent-ink );
	--slabwork-field-helper: var( --wp--preset--color--secondary );
	--slabwork-field-error: var( --wp--preset--color--accent-ink );
	--slabwork-submit-fill: var( --wp--preset--color--contrast );
	--slabwork-submit-text: var( --wp--preset--color--base );
}

.is-style-slabwork-inverted form,
.is-style-slabwork-inverted .slabwork-contact-band-form {
	--slabwork-field-fill: var( --wp--custom--color--field );
	--slabwork-field-border: var( --wp--custom--color--field-border );
	--slabwork-field-text: var( --wp--preset--color--base );
	--slabwork-field-focus: var( --wp--preset--color--accent-light );
	--slabwork-field-helper: var( --wp--custom--color--on-dark-hint );
	--slabwork-field-error: var( --wp--preset--color--accent-light );
	--slabwork-submit-fill: var( --wp--preset--color--accent-light );
	--slabwork-submit-text: var( --wp--custom--color--ink );
}

/* ----------------------------------------------------------------------
 * Fields
 * ------------------------------------------------------------------- */

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="search"],
form input[type="number"],
form select,
form textarea,
.wpcf7-form-control:not( [type="radio"] ):not( [type="checkbox"] ):not( [type="submit"] ) {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	background: var( --slabwork-field-fill );
	border: 1px solid var( --slabwork-field-border );
	border-radius: 0;
	color: var( --slabwork-field-text );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--body );
}

form textarea,
.wpcf7-form-control[multiple],
textarea.wpcf7-form-control {
	min-height: 140px;
	padding: 14px 16px;
}

form label,
.slabwork-form-label {
	display: block;
	margin-block-end: var( --wp--preset--spacing--xs );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var( --slabwork-field-text );
}

form .slabwork-optional {
	text-transform: none;
	letter-spacing: 0;
	color: var( --slabwork-field-helper );
}

form .slabwork-field-helper {
	margin-block-start: var( --wp--preset--spacing--xs );
	font-size: var( --wp--preset--font-size--body-s );
	color: var( --slabwork-field-helper );
}

form .slabwork-field-error,
.wpcf7-not-valid-tip {
	margin-block-start: var( --wp--preset--spacing--xs );
	font-size: var( --wp--preset--font-size--body-s );
	color: var( --slabwork-field-error );
}

.wpcf7-not-valid {
	border-inline-start: 3px solid var( --slabwork-field-error );
}

form :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	select,
	textarea
):focus-visible,
.wpcf7-form-control:focus-visible {
	outline: 3px solid var( --slabwork-field-focus );
	outline-offset: 2px;
}

form .wp-block-button__link[type="submit"],
form input[type="submit"],
form button[type="submit"],
.wpcf7-form-control[type="submit"] {
	min-height: 56px;
	background: var( --slabwork-submit-fill );
	color: var( --slabwork-submit-text );
	border: 0;
	border-radius: 0;
	padding-inline: var( --wp--preset--spacing--m );
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 500;
	cursor: pointer;
}

/* ----------------------------------------------------------------------
 * Topic chips: real radio inputs with styled labels, so the choice
 * submits with no JavaScript.
 * ------------------------------------------------------------------- */

.slabwork-chips {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--xs );
}

.slabwork-chips legend {
	width: 100%;
	margin-block-end: var( --wp--preset--spacing--xs );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var( --slabwork-field-text );
}

.slabwork-chips input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.slabwork-chips label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 18px;
	border: 1px solid var( --slabwork-field-border );
	color: var( --slabwork-field-text );
	cursor: pointer;
}

.slabwork-chips input:checked + label {
	background: var( --wp--preset--color--accent-light );
	border-color: var( --wp--preset--color--accent-light );
	color: var( --wp--custom--color--ink );
}

.slabwork-chips input:focus-visible + label {
	outline: 3px solid var( --slabwork-field-focus );
	outline-offset: 2px;
}

@media ( max-width: 781px ) {
	.slabwork-chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

/* ----------------------------------------------------------------------
 * Contact Form 7 response region and spinner
 * ------------------------------------------------------------------- */

.wpcf7-response-output {
	border: 1.5px solid var( --slabwork-field-border );
	border-radius: 0;
	padding: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--s );
	margin-block-start: var( --wp--preset--spacing--s );
	font-size: var( --wp--preset--font-size--body-s );
}

.wpcf7-spinner {
	background: none;
	width: 11px;
	height: 11px;
	margin: 0 8px;
}

.wpcf7-spinner::before {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	background: var( --wp--preset--color--primary );
	opacity: 1;
}

@media ( prefers-reduced-motion: no-preference ) {
	.wpcf7-spinner::before {
		animation: slabwork-spinner-pulse 900ms ease-in-out infinite;
	}
}

@keyframes slabwork-spinner-pulse {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 1;
	}
}