/**
 * nr/contact-form. The underline fields and the one focus state the design
 * draws — docs/design-digest.md's "Say Hi | field focus" row:
 * `style-focus="border-bottom-color: var(--rose)"`, the only focus state
 * anywhere in the vendored design — plus the visually-hidden label
 * technique (a placeholder is not a label; see the block's render.php) and
 * the honeypot's own off-screen layout.
 *
 * Radii/shadows/durations come from tokens.css (loaded first — see
 * inc/assets.php); gaps and padding here are hand-typed to match the
 * design source directly (_design-source/Nathaly Rojas.dc.html's Say Hi
 * section), the same way cards.css already hand-types its own spacing.
 */

.nr-contact-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 640px;
}

.nr-contact-form__field {
	display: flex;
	flex-direction: column;
}

.nr-contact-form__input {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(245, 245, 240, 0.3);
	padding: 10px 0;
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--body-lg, 1.25rem);
	color: var(--wp--preset--color--off-white, #f5f5f0);
	outline: none;
	transition: border-color var(--nr-duration) var(--nr-ease);
}

.nr-contact-form__input::placeholder {
	color: rgba(245, 245, 240, 0.5);
}

.nr-contact-form__input:focus {
	border-bottom-color: var(--wp--preset--color--rose);
}

/* The rose underline above is these fields' focus state (the design's
   only drawn one), so the site-wide ring's off-white band (motion.css)
   stays off them. */
.nr-contact-form__input:focus-visible {
	box-shadow: none;
}

/*
 * A rejected field: the message under it (contact-form.js) is what says
 * so; the underline also thickens, so the state never rests on colour
 * alone. Padding gives back the extra pixel, so nothing below moves.
 */
.nr-contact-form__input[aria-invalid="true"] {
	border-bottom: 2px solid var(--wp--preset--color--burnt-orange);
	padding-bottom: 9px;
}

/* Focus still shows on a rejected field (contact-form.js focuses the
   first one): rose, at the error state's thickness. */
.nr-contact-form__input[aria-invalid="true"]:focus {
	border-bottom-color: var(--wp--preset--color--rose);
}

/* A sent form is hidden; this beats `.nr-contact-form { display: flex }`,
   which otherwise overrode the `hidden` attribute. */
.nr-contact-form[hidden] {
	display: none;
}

/*
 * The field's own label, above the underline and staying there while the
 * visitor types — the artboard's placeholder-only fields lost their label
 * at the first keystroke (audit 2026-09-21).
 */
.nr-contact-form__label {
	margin-bottom: 4px;
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--nr-text-muted);
}

/* The message's minimum length, disclosed before anyone trips on it. */
.nr-contact-form__hint {
	margin: 8px 0 0;
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--label);
	color: var(--nr-text-muted);
}

/* Burnt orange on ink: 5.16:1. */
.nr-contact-form__error {
	margin: 8px 0 0;
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	color: var(--wp--preset--color--burnt-orange);
}

.nr-contact-form__error[hidden] {
	display: none;
}

.nr-contact-form__input--textarea {
	resize: none;
}

/*
 * Round 3, Finding 12: `Button.jsx`'s `highlight` variant — burnt-orange
 * background, off-white text — not `primary`'s rose, which is what this
 * carried before (a plain custom class, never wired to either variant).
 * Sized to match Finding 8's `lg` (18px 36px, `--text-body-lg`): every CTA
 * on this page uses `size="lg"` in the artboard, Send included.
 */
.nr-contact-form__submit {
	align-self: flex-start;
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--body-lg, 1.25rem);

	/* 700 makes 20px large text, where off-white on burnt orange (3.08:1)
	   clears the 3:1 bar (decisions-log, "Bold filled buttons"). */
	font-weight: 700;
	color: var(--wp--preset--color--off-white);
	background: var(--wp--preset--color--burnt-orange);
	border: 2px solid transparent; /* Button.jsx base: every variant carries it */
	line-height: normal;
	border-radius: var(--radius-pill);
	padding: 18px 36px;
	cursor: pointer;
	transition: background-color var(--nr-duration) var(--nr-ease);
}

.nr-contact-form__submit:hover,
.nr-contact-form__submit:focus-visible {
	background-color: var(--accent-highlight-hover);
}

/* In flight (contact-form.js). `aria-disabled`, not `disabled`, so the
   button keeps focus while the request runs. */
.nr-contact-form__submit[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* Right under Send; after a send, it is all that is left of the form. */
.nr-contact-form__status:not([hidden]) {
	margin: 20px 0 0;
	max-width: 640px;
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--body-lg, 1.25rem);
	color: var(--wp--preset--color--off-white, #f5f5f0);
}

/* Focused by script so the thank-you is read out and the next Tab
   continues from here; it is not a control, so it draws no ring. */
.nr-contact-form__status:focus,
.nr-contact-form__status:focus-visible {
	outline: none;
	box-shadow: none;
}

/*
 * Only ever visible with JavaScript disabled — see render.php's own
 * comment on why a Turnstile-configured site discloses this upfront
 * rather than letting the visitor discover it on submit.
 */
.nr-contact-form__noscript {
	font-family: var(--font-body, inherit);
	color: var(--wp--preset--color--off-white, #f5f5f0);
}

.nr-contact-form__noscript a {
	color: var(--wp--preset--color--rose);
}

/*
 * Honeypot: off-screen, never `display:none`. A field that is only moved
 * off-screen (rather than hidden from layout entirely) is still filled by
 * some password managers' autofill the same way a naive bot script fills
 * every field it can find in the DOM — which is exactly the behaviour this
 * needs to catch. `tabindex="-1"` and `autocomplete="off"` (both in
 * render.php) are the other two signals working alongside this.
 */
.nr-contact-form__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/*
 * Visually hidden but still in the accessibility tree — the standard
 * clip-based technique. Used for this block's real <label> elements, kept
 * so the drawn placeholder-only look is unchanged for sighted visitors.
 */
.nr-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}