/* Reusable floating-label form fields — site-wide input design.
 *
 * Markup (no classes needed, works on any page):
 *
 *   <label>
 *     <input type="email" name="email" placeholder=" " required>
 *     <span>Email</span>
 *   </label>
 *
 * The <label> wraps the control (so no for/id wiring is needed) and the
 * trailing <span> acts as a placeholder that floats to the top and shrinks
 * once the field is focused or filled. Selectors are purely structural, so
 * every input that follows this pattern gets the same look automatically.
 *
 * The placeholder attribute must be present and effectively empty (a single
 * space) so :placeholder-shown drives the float.
 */

form label:has(> input),
form label:has(> textarea) {
	position: relative;
	display: block;
	margin-bottom: 16px;
}

form label > input,
form label > textarea {
	width: 100%;
	height: 56px;
	padding: 22px 18px 6px;
	font-size: 15px;
	color: var(--text, #181819);
	background: #fff;
	border: 1px solid var(--border, #d1d5db);
	border-radius: var(--radius, 16px);
	outline: none;
	transition: border-color .0s, box-shadow .0s;
}

form label > input:hover,
form label > input:focus,
form label > textarea:hover,
form label > textarea:focus {
	border-color: #6b7280;
}

/* Resting state: sits over the field like a placeholder, vertically centered. */
form label:has(> input) > span,
form label:has(> textarea) > span {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted, #6b7280);
	font-size: 15px;
	pointer-events: none;
	transition: top .15s, font-size .15s, color .15s, transform .15s;
}

/* Floated state: smaller and pinned to the top, on focus or when filled. */
form label > input:focus ~ span,
form label > input:not(:placeholder-shown) ~ span,
form label > textarea:focus ~ span,
form label > textarea:not(:placeholder-shown) ~ span {
	top: 7px;
	transform: none;
	font-size: 13px;
	color: var(--muted, #6b7280);
}

/* Mobile: slightly larger inputs */
@media (max-width: 768px) {
	form label > input,
	form label > textarea {
		height: 64px;
		padding: 22px 16px 6px;
		font-size: 16px;
	}
	form label:has(> input) > span,
	form label:has(> textarea) > span {
		font-size: 16px;
	}
}