/**
 * Base Theme - forms.
 *
 * The theme does not build a form system. It styles whatever a form plugin
 * outputs, so a project can use WPForms, Fluent Forms, Gravity Forms, Contact
 * Form 7 or a hand-written form and get the same look with no extra work.
 *
 * Loaded conditionally - see base_theme_should_load_form_styles() in
 * inc/enqueue.php. Integration notes are in docs/FORMS.md.
 */

/* -------------------------------------------------------------------------
 * Fields
 *
 * Selected by element and input type rather than by plugin class, so a plugin
 * the theme has never heard of is styled correctly too.
 * ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	max-width: 100%;
	padding: 0.75rem 1rem;
	transition: border-color var(--wp--custom--transition--fast) var(--wp--custom--transition--easing),
		box-shadow var(--wp--custom--transition--fast) var(--wp--custom--transition--easing);
	width: 100%;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

/* A native select needs its own arrow once appearance is normalised. */
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.85rem center;
	background-repeat: no-repeat;
	background-size: 1.1rem;
	padding-inline-end: 2.5rem;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	outline: none;
}

/*
 * Keyboard users get the outline defined in base.css. Suppressing the resting
 * box-shadow here stops the two focus affordances stacking into a thick halo.
 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	box-shadow: none;
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly] {
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text-muted);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Labels and help text
 * ---------------------------------------------------------------------- */

label {
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-block-end: 0.4rem;
}

/*
 * The asterisk is decoration. The real requirement is communicated by the
 * required attribute on the field, which is where screen readers read it.
 */
.required,
.wpforms-required-label,
.gfield_required {
	color: var(--wp--preset--color--error);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Checkbox and radio
 * ---------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
	block-size: 1.05rem;
	inline-size: 1.05rem;
	margin-inline-end: 0.5rem;
	vertical-align: middle;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	font-weight: 400;
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * File upload
 * ---------------------------------------------------------------------- */

input[type="file"] {
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--md);
	width: 100%;
}

input[type="file"]::file-selector-button {
	background-color: var(--wp--preset--color--surface-alt);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-inline-end: var(--wp--preset--spacing--md);
	padding: 0.5rem 1rem;
}

/* -------------------------------------------------------------------------
 * Submit buttons
 *
 * Every plugin names its submit button differently. Matching all of them is
 * what makes a plugin form look native without per-project CSS.
 * ---------------------------------------------------------------------- */

button[type="submit"],
input[type="submit"],
.wp-block-search__button,
.wpforms-submit,
.gform_button,
.wpcf7-submit,
.fluentform .ff-btn-submit,
.forminator-button-submit {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--text-inverse);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.25;
	padding: 0.875rem 1.75rem;
	transition: background-color var(--wp--custom--transition--fast) var(--wp--custom--transition--easing);
	width: auto;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-search__button:hover,
.wpforms-submit:hover,
.gform_button:hover,
.wpcf7-submit:hover,
.fluentform .ff-btn-submit:hover,
.forminator-button-submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* -------------------------------------------------------------------------
 * Validation and status messages
 * ---------------------------------------------------------------------- */

.wpforms-error,
.gfield_description.validation_message,
.wpcf7-not-valid-tip,
.fluentform .error,
.forminator-error-message,
.base-form-error {
	color: var(--wp--preset--color--error);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	margin-block-start: 0.35rem;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.wpforms-error-input,
.gfield_error input,
.wpcf7-not-valid {
	border-color: var(--wp--preset--color--error);
}

.wpforms-confirmation-container-full,
.gform_confirmation_message,
.wpcf7-mail-sent-ok,
.fluentform .ff-message-success,
.forminator-success,
.base-form-success {
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 10%, transparent);
	border: 1px solid var(--wp--preset--color--success);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--success);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing,
.base-form-warning {
	background-color: color-mix(in srgb, var(--wp--preset--color--warning) 10%, transparent);
	border: 1px solid var(--wp--preset--color--warning);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--warning);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}

/* -------------------------------------------------------------------------
 * Field spacing
 *
 * Plugins ship their own row wrappers. Give them all the same rhythm.
 * ---------------------------------------------------------------------- */

.wpforms-field,
.gfield,
.fluentform .ff-el-group,
.forminator-row,
.base-form-row {
	margin-block-end: var(--wp--preset--spacing--lg);
}

/* -------------------------------------------------------------------------
 * Core search block
 * ---------------------------------------------------------------------- */

.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	padding: 0;
}

.wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-search__input {
	border: 0;
	border-radius: 0;
}

.wp-block-search__input:focus {
	box-shadow: none;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
	margin: 0.25rem;
	padding: 0.6rem 1rem;
}

/* -------------------------------------------------------------------------
 * Comment form
 * ---------------------------------------------------------------------- */

.comment-form {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}

.comment-form .comment-notes,
.comment-form .form-submit {
	margin-block: 0;
}