/**
 * Text fields (Style Guide 04)
 *
 * Usage:
 *   <div class="field">
 *     <label class="field__label" for="email">Email</label>
 *     <input class="input" id="email" type="email" placeholder="Email address">
 *     <p class="field__hint">We only email about your order.</p>
 *   </div>
 *
 *   <div class="field-row">   side by side fields
 *     <input class="input" placeholder="First Name">
 *     <input class="input" placeholder="Last Name">
 *   </div>
 */

.input,
.textarea {
	display: block;
	width: 100%;
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-md);
	line-height: var(--line-snug);
	color: var(--color-text);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-none);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.input:hover,
.textarea:hover {
	border-color: var(--color-muted);
}

.input:focus,
.textarea:focus {
	outline: none;
	border-color: var(--color-border-strong);
	box-shadow: var(--focus-ring);
}

.input:disabled,
.textarea:disabled {
	background: var(--color-surface-muted);
	color: var(--color-muted);
	cursor: not-allowed;
}

.input[readonly],
.textarea[readonly] {
	background: var(--color-surface-muted);
}

.textarea {
	min-height: 7.5rem;
	line-height: var(--line-normal);
	resize: vertical;
}

/* Mono input — SKUs, coupon and gift-card codes. */
.input--mono {
	font-family: var(--font-mono);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* Rule-only field — newsletter signup, inline search. */
.input--underline {
	background: transparent;
	border: 0;
	padding-inline: 0;
}

.input--underline:hover,
.input--underline:focus {
	border: 0;
	box-shadow: none;
}

.input--sm {
	min-height: var(--control-height-sm);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
}

.input--lg {
	min-height: var(--control-height-lg);
	font-size: var(--text-lg);
}

/* --- Field wrapper --- */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.field__label {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-heading);
}

.field__label[data-required]::after {
	content: " *";
	color: var(--color-accent);
}

.field__hint,
.field__error {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wide);
	line-height: var(--line-normal);
	margin: 0;
}

.field__hint {
	color: var(--color-muted);
}

.field__error {
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

/* Invalid state — driven by aria-invalid or a wrapper class. */
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
	border-color: var(--color-accent);
}

.field.has-error .input:focus,
.field.has-error .textarea:focus,
.field.has-error .select:focus,
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px var(--clay-soft);
}

/* --- Field layouts --- */

/* Side-by-side fields; stacks on small screens. */
.field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--space-4);
}

/* Vertical stack of fields — the standard form body. */
.field-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Input paired with a button, e.g. newsletter signup. */
.input-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.input-group > .input,
.input-group > .select {
	flex: 1 1 12rem;
	width: auto;
}

.input-group--attached {
	gap: 0;
}

.input-group--attached > .input {
	border-right-width: 0;
}

.input-group--attached > .input:focus {
	border-right-width: var(--border-width);
	margin-right: calc(var(--border-width) * -1);
}