/**
 * Honeypot hiding rule for the xo-forms example markup. Copy this into
 * your theme if you use the example honeypot field, or hide it however
 * you like — it just needs to be invisible without `display:none` /
 * `type="hidden"`, which basic bots skip automatically.
 */
.xo-forms-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/**
 * Base presentation layer for any `.xo-form`-marked form (see
 * examples/xo-forms-example-contact-form.php). Sensible, readable
 * defaults only — not a full design system. Every value is a token a
 * child theme can override by redeclaring it, either globally or
 * scoped to a narrower selector than `.xo-form` itself:
 *
 *   .xo-form { --xo-form-field-border-color: #ccc; }
 *
 * Tokens fall back to existing xo-dna variables (--color-text,
 * --color-border, etc.) where an equivalent already exists, then to a
 * plain CSS value when xo-dna isn't present (xo-forms must still work
 * standalone, without the parent theme active).
 */
.xo-form {
	--xo-form-font-family: var(--font-family-body, inherit);
	--xo-form-font-size: 1rem;
	--xo-form-label-color: var(--color-text, #17181e);
	--xo-form-field-bg: #fff;
	--xo-form-field-color: #111;
	--xo-form-field-border-color: var(--color-border, #767676);
	--xo-form-field-border-width: 1px;
	--xo-form-field-radius: var(--radius, 0);
	--xo-form-field-min-height: 3.125rem;
	--xo-form-field-padding: 0.75rem;
	--xo-form-label-gap: 0.375rem;
	--xo-form-field-gap: 1rem;
	--xo-form-textarea-min-height: 8rem;
	--xo-form-max-width: 42rem;
	--xo-form-focus-color: var(--color-focus, #005fcc);
	--xo-form-button-bg: var(--color-button-background, #3768af);
	--xo-form-button-color: var(--color-button-text, #fff);
	--xo-form-button-radius: var(--radius, 6px);
	--xo-form-help-size: 0.875rem;
	--xo-form-error-color: #b42318;
	--xo-form-success-color: #166534;

	font-family: var(--xo-form-font-family);
	max-width: var(--xo-form-max-width);
}

.xo-form__group {
	display: flex;
	flex-direction: column;
	gap: var(--xo-form-label-gap);
	margin-block-end: var(--xo-form-field-gap);
}

.xo-form__label {
	font-size: var(--xo-form-font-size);
	color: var(--xo-form-label-color);
}

.xo-form__required {
	color: var(--xo-form-error-color);
}

.xo-form__hint {
	font-size: var(--xo-form-help-size);
	color: var(--xo-form-label-color);
}

.xo-form__control {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: var(--xo-form-font-size);
	min-height: var(--xo-form-field-min-height);
	padding: var(--xo-form-field-padding);
	background: var(--xo-form-field-bg);
	color: var(--xo-form-field-color);
	border: var(--xo-form-field-border-width) solid var(--xo-form-field-border-color);
	border-radius: var(--xo-form-field-radius);
}

textarea.xo-form__control {
	min-height: var(--xo-form-textarea-min-height);
	resize: vertical;
}

.xo-form__control:focus-visible {
	outline: 2px solid var(--xo-form-focus-color);
	outline-offset: 1px;
}

.xo-form__control[aria-invalid="true"] {
	border-color: var(--xo-form-error-color);
}

.xo-form__error {
	font-size: var(--xo-form-help-size);
	color: var(--xo-form-error-color);
}

.xo-form__error:empty {
	display: none;
}

.xo-form__errors {
	border: 1px solid var(--xo-form-error-color);
	border-radius: var(--xo-form-field-radius);
	padding: var(--xo-form-field-padding);
	margin-block-end: var(--xo-form-field-gap);
	color: var(--xo-form-error-color);
}

.xo-form__errors:empty {
	display: none;
}

.xo-form__status {
	font-size: var(--xo-form-font-size);
}

.xo-form__status[data-xo-status="success"] {
	color: var(--xo-form-success-color);
}

.xo-form__status[data-xo-status="error"] {
	color: var(--xo-form-error-color);
}

.xo-form__actions {
	margin-block-start: var(--xo-form-field-gap);
}

.xo-form__submit {
	width: 100%;
	min-height: 48px;
	font-size: var(--xo-form-font-size);
	font-weight: 400;
	background: var(--xo-form-button-bg);
	color: var(--xo-form-button-color);
	border: 0;
	border-radius: var(--xo-form-button-radius);
	cursor: pointer;
}

.xo-form__submit:disabled {
	cursor: default;
	opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
	.xo-form__control {
		transition: border-color 0.15s ease;
	}
}