/**
 * Form elements.
 *
 * These selectors target native elements, not bespoke classes. That is
 * deliberate: the system ships no form engine, so whichever form plugin a client
 * installs inherits the design system for free (ARCHITECTURE.md §7).
 *
 * The design calls for underlined fields that thicken and turn accent on focus.
 */

:where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	input[type="date"],
	textarea,
	select
) {
	background-color: transparent;
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--base-3);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--leading--body);
	padding: 0.75rem 0;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
	width: 100%;
	/* Hold whichever script the visitor types, rather than forcing the page direction. */
	text-align: start;
}

/*
 * Focus thickens the underline rather than adding a ring, matching the design.
 * box-shadow rather than border-width, so the field does not shift by a pixel
 * when focused. The visible focus ring from base.css still applies via
 * :focus-visible for keyboard users.
 */
:where(input, textarea, select):focus {
	border-block-end-color: var(--wp--preset--color--accent);
	box-shadow: 0 1px 0 0 var(--wp--preset--color--accent);
	outline: none;
}

:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-strong);
	outline-offset: 4px;
}

::placeholder {
	color: var(--wp--preset--color--contrast-3);
	opacity: 1;
}

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

/*
 * Labels sit above fields. This works in both scripts, avoids the RTL alignment
 * problems of inline labels, and keeps the tap target adjacent to its input.
 */
:where(label) {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-block-end: 0.5rem;
}

/* Required marker: colour is never the only signal, so it carries a glyph. */
:where(label) .required {
	color: var(--wp--preset--color--accent-strong);
	margin-inline-start: 0.25rem;
}

:where(input[type="submit"], button[type="submit"]) {
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: 0.9rem 2rem;
	transition: all var(--wp--custom--transition);
	width: auto;
}

:where(input[type="submit"], button[type="submit"]):hover {
	background-color: var(--wp--preset--color--accent-strong);
	border-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--white);
}

/* Checkbox and radio keep their native box; only the accent colour is themed. */
:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--accent-strong);
	width: auto;
	min-width: 1.15rem;
	min-height: 1.15rem;
}

/* On ink sections the field underline needs to be visible against dark. */
.is-style-section-ink :where(input, textarea, select) {
	border-block-end-color: rgba(255, 255, 255, 0.28);
	color: var(--wp--preset--color--base);
}

.is-style-section-ink ::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.is-style-section-ink :where(label) {
	color: var(--wp--preset--color--base);
}

.is-style-section-ink :where(input, textarea, select):focus {
	border-block-end-color: var(--wp--preset--color--accent-on-dark);
	box-shadow: 0 1px 0 0 var(--wp--preset--color--accent-on-dark);
}

/* ==========================================================================
   Form layout
   ========================================================================== */

/*
 * Layout only — no colours or typography, which come from the element rules
 * above. A replacement form plugin gets the look without needing these classes.
 */
.brand-form > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.brand-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 600px) {
	.brand-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.brand-form__field,
.brand-subscribe__field {
	margin: 0;
}

.brand-subscribe > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* core/search uses its own wrapper classes but the same visual language. */
.wp-block-search__input {
	border-block-end: 1px solid var(--wp--preset--color--base-3);
}

.wp-block-search__button {
	background-color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: 0.75rem 1.5rem;
}

.wp-block-search__button:hover {
	background-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--white);
}