/**
 * Form Styling — native fields
 *
 * Box styling for native <input>/<select> comes from theme.json
 * styles.elements (border, radius, padding, color), applied sitewide (core
 * search block, child-theme forms, etc.). theme.json (WP 6.9) can't express a
 * focus state and has no <textarea> element key, so those two pieces live here.
 *
 * Gravity Forms is branded separately — GF generates its own per-form CSS at a
 * specificity a stylesheet can't beat, so it's themed via the
 * `gform_default_styles` filter in inc/gravity-forms.php, not here.
 */

/* Gravity Forms field row gap. GF's foundation default is 40px, which reads
 * tall; 30px is tighter. This var isn't exposed through gform_default_styles
 * and (unlike the color/palette vars) isn't in GF's per-form inline <style>,
 * so it lives at the foundation layer (.gform-theme--foundation, 0,1,0) — a
 * `.gform-theme`-qualified rule (0,2,0) overrides it. Child themes override
 * with the same selector or higher. */
.gform_wrapper.gform-theme {
	--gf-form-gap-y: 30px;
}

/* Focus ring for native fields (theme.json can't set a focus state in WP 6.9).
 * The box-shadow lays a base-colored separator between field and ring so the
 * ring stays visible on dark section backgrounds, where primary-on-dark alone
 * falls below the 3:1 non-text-contrast threshold (WCAG 1.4.11). */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	box-shadow: 0 0 0 1px var(--wp--preset--color--base);
}

/* <textarea> box styling to match the input/select tokens (no theme.json key).
 * Keep these values in sync with styles.elements.input/select in theme.json. */
textarea {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 0.375rem;
	padding: 0.625rem 0.875rem;
}

/* ── Media split panel (lp-media-split on core/columns) ───────────────────
   A zero-gap photo + panel split: the cover in one column stretches to
   match the other column's height, so the two edges always align. */
.lp-media-split .wp-block-cover {
	height: 100%;
}

/* ── Dark-panel form (lp-form-dark on any container) ──────────────────────
   Opt-in styling for a plain HTML form sitting on a dark surface:
   transparent fields with light borders, a white submit button, and a
   gold focus ring. Token-based so child themes restyle via theme.json. */
.lp-form-dark {
	display: grid;
	gap: 0.875rem;
}

.lp-form-dark input,
.lp-form-dark select,
.lp-form-dark textarea {
	box-sizing: border-box;
	width: 100%;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fff) 55%, transparent);
	border-radius: 8px;
	color: var(--wp--preset--color--base, #fff);
	font: inherit;
	font-size: 0.9375rem;
	padding: 0.75rem 1.25rem;
}

.lp-form-dark textarea {
	min-height: 7rem;
	resize: vertical;
}

.lp-form-dark select option {
	color: var(--wp--preset--color--contrast, #15191d);
	background: var(--wp--preset--color--base, #fff);
}

.lp-form-dark ::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 80%, transparent);
	opacity: 1;
}

.lp-form-dark input:focus-visible,
.lp-form-dark select:focus-visible,
.lp-form-dark textarea:focus-visible,
.lp-form-dark button:focus-visible {
	outline: 2px solid var(--wp--preset--color--highlight, #eab308);
	outline-offset: 2px;
}

.lp-form-dark button[type="submit"] {
	background: var(--wp--preset--color--highlight, #eab308);
	color: var(--wp--preset--color--dark, #15191d);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--secondary, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.875rem 1.625rem;
	margin-top: 0.25rem;
	transition: opacity 0.15s ease;
}

.lp-form-dark button[type="submit"]:hover {
	opacity: 0.88;
}

/* Visually hidden labels for placeholder-labelled fields. */
.lp-form-dark .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.lp-form-dark button[type="submit"] {
		transition: none;
	}
}