/**
 * Form control styles (markup only — processing lives in parenting-core).
 */

.pp-form,
.wp-block-group.pp-form {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	max-width: 32rem;
}

.pp-form label,
.pp-field-label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2xs);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.pp-form input[type="text"],
.pp-form input[type="email"],
.pp-form input[type="password"],
.pp-form input[type="tel"],
.pp-form input[type="date"],
.pp-form input[type="search"],
.pp-form input[type="url"],
.pp-form input[type="number"],
.pp-form select,
.pp-form textarea,
.pp-input,
.pp-select,
.pp-textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.4;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.pp-form textarea,
.pp-textarea {
	min-height: 8rem;
	resize: vertical;
}

.pp-form input:focus-visible,
.pp-form select:focus-visible,
.pp-form textarea:focus-visible,
.pp-input:focus-visible,
.pp-select:focus-visible,
.pp-textarea:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.pp-form input[aria-invalid="true"],
.pp-input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger);
}

.pp-field-hint {
	margin-top: var(--wp--preset--spacing--2xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.pp-field-error {
	margin-top: var(--wp--preset--spacing--2xs);
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--sm);
}

.pp-checkbox,
.pp-radio {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
	min-height: 44px;
}

.pp-checkbox input,
.pp-radio input {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	flex-shrink: 0;
}