/*
 * Form styling.
 *
 * The theme does not ship a form handler. These rules target the markup of the
 * common form plugins (Contact Form 7, WPForms, Gravity Forms) and the core
 * form blocks, so whichever one is installed inherits the theme's fields
 * without needing plugin-side CSS overrides.
 */

/*
 * The form itself is the field-note card, so it reads as a distinct object
 * wherever it sits in the page content.
 */
.siol-form-scope :where(.wpcf7, .wpforms-container, .gform_wrapper, .wp-block-form) {
	margin-block: 2rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background-color: var(--siol-card);
	border: 1px solid var(--siol-rule);
	border-radius: 0.5rem;
	box-shadow: 0 24px 48px -36px rgba(29, 47, 38, 0.4);
}

.siol-form-scope :where(.wpcf7, .wpforms-container, .gform_wrapper, .wp-block-form) > :last-child {
	margin-bottom: 0;
}

.siol-form-scope label,
.wpcf7-form label,
.wpforms-field-label,
.gform_wrapper .gfield_label,
.wp-block-form label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--siol-ink);
	font-family: var(--siol-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Fields */
.siol-form-scope :where(input, textarea, select),
.wpcf7-form :where(input:not([type="submit"]), textarea, select),
.wpforms-field :where(input:not([type="submit"]), textarea, select),
.gform_wrapper :where(input:not([type="submit"]), textarea, select),
.wp-block-form :where(input:not([type="submit"]), textarea, select) {
	width: 100%;
	padding: 0.75rem 0.95rem;
	background-color: #fbf9f3;
	border: 1px solid var(--siol-rule-strong);
	border-radius: 0.375rem;
	color: var(--siol-ink);
	font-family: var(--siol-font-body);
	font-size: var(--siol-step-0);
	line-height: 1.5;
	transition: border-color var(--siol-speed) var(--siol-ease),
		box-shadow var(--siol-speed) var(--siol-ease);
}

.siol-form-scope :where(input, textarea, select):focus,
.wpcf7-form :where(input, textarea, select):focus,
.wpforms-field :where(input, textarea, select):focus,
.gform_wrapper :where(input, textarea, select):focus,
.wp-block-form :where(input, textarea, select):focus {
	border-color: var(--siol-green);
	box-shadow: 0 0 0 3px var(--siol-green-soft);
	outline: none;
}

.siol-form-scope :where(input, textarea)::placeholder,
.wpcf7-form :where(input, textarea)::placeholder,
.wpforms-field :where(input, textarea)::placeholder {
	color: var(--siol-muted);
	opacity: 0.85;
}

.siol-form-scope textarea,
.wpcf7-form textarea,
.wpforms-field textarea {
	min-height: 9rem;
	resize: vertical;
}

.siol-form-scope :where(input[type="checkbox"], input[type="radio"]),
.wpcf7-form :where(input[type="checkbox"], input[type="radio"]) {
	width: auto;
	accent-color: var(--siol-green);
}

/* Field spacing */
.wpcf7-form p,
.wpforms-field,
.gform_wrapper .gfield,
.wp-block-form .wp-block-group {
	margin-bottom: 1.15rem;
}

/* Submit buttons inherit the pill treatment. */
.siol-form-scope :where(button, input[type="submit"]),
.wpcf7-form :where(input[type="submit"], button[type="submit"]),
.wpforms-submit,
.gform_wrapper .gform_button,
.wp-block-form :where(button, input[type="submit"]) {
	display: inline-flex;
	width: auto;
	align-items: center;
	padding: 0.85rem 1.75rem;
	background-color: var(--siol-green);
	border: 1px solid transparent;
	border-radius: 999px;
	color: #f7f4ec;
	font-family: var(--siol-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--siol-speed) var(--siol-ease);
}

.siol-form-scope :where(button, input[type="submit"]):hover,
.wpcf7-form :where(input[type="submit"], button[type="submit"]):hover,
.wpforms-submit:hover,
.gform_wrapper .gform_button:hover,
.wp-block-form :where(button, input[type="submit"]):hover {
	background-color: var(--siol-green-dark);
}

/* Validation and response messages */
.wpcf7-not-valid-tip,
.wpforms-error,
.gfield_validation_message {
	margin-top: 0.35rem;
	color: #8c2f24;
	font-size: 0.8125rem;
}

.wpcf7-not-valid {
	border-color: #8c2f24 !important;
}

.wpcf7-response-output,
.wpforms-confirmation-container,
.gform_confirmation_message {
	margin: 1.25rem 0 0 !important;
	padding: 0.9rem 1.1rem !important;
	background-color: var(--siol-green-soft);
	border: 1px solid var(--siol-rule-strong) !important;
	border-radius: 0.375rem;
	color: var(--siol-ink);
	font-size: 0.9375rem;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	background-color: rgba(140, 47, 36, 0.07);
	border-color: rgba(140, 47, 36, 0.4) !important;
}

/* Search form, used by the 404 page. */
.siol-search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 24rem;
	margin-inline: auto;
}

.siol-search-form input[type="search"] {
	flex: 1 1 auto;
}