/*
 * FORMULARIOS — campos nativos de WP (búsqueda, comentarios) y de plugins.
 * Estados de error señalados con borde + texto, nunca solo color.
 */

input:where([type='text'], [type='email'], [type='url'], [type='search'], [type='tel'], [type='number']),
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm);
	background-color: var(--color-base);
	transition: border-color var(--duration-fast) var(--ease-out);
}

input:where([type='text'], [type='email'], [type='url'], [type='search'], [type='tel'], [type='number']):hover,
textarea:hover,
select:hover {
	border-color: var(--color-ink-soft);
}

input:where([type='text'], [type='email'], [type='url'], [type='search'], [type='tel'], [type='number']):focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--color-primary);
	outline-offset: 0;
}

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

label {
	display: block;
	font-weight: var(--weight-medium);
	margin-block-end: var(--space-1);
}

.field-error,
input[aria-invalid='true'],
textarea[aria-invalid='true'] {
	border-color: var(--color-error);
}

.field-error-message {
	color: var(--color-error);
	font-size: var(--text-sm);
	margin-block-start: var(--space-1);
}

/* Búsqueda */
.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form__input {
	flex: 1;
}

/* Comentarios */
.comments__title {
	margin-block-end: var(--space-5);
}

.comments__list {
	margin-block-end: var(--space-6);
}

.comments__list .comment {
	padding-block: var(--space-5);
	border-block-end: 1px solid var(--color-line);
}

.comments__list .children {
	margin-inline-start: var(--space-6);
	list-style: none;
}

.comment-form p {
	margin-block-end: var(--space-4);
}

.comment-form .submit {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	min-height: 44px;
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-sm);
	font-weight: var(--weight-semibold);
	transition: background-color var(--duration-fast) var(--ease-out);
}

.comment-form .submit:hover {
	background-color: var(--color-primary-hover);
}