/* Contact form. */

.wwh-contact-form {
	max-width: 720px;
	margin: 0 auto;
}

.wwh-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.wwh-contact-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wwh-contact-form__label {
	font-family: var(--wp--preset--font-family--ui), 'Montserrat', sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-caption, #5a544d);
}

/* "Gallery proposal" → Expression of Interest note (core 2.113.1). */
.wwh-contact-form__intent-note .wwh-contact-form__hint {
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--body), 'EB Garamond', serif;
	font-size: var(--wp--preset--font-size--prose-li);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-primary, #1a1613);
}
.wwh-contact-form__intent-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wwh-contact-form__input,
.wwh-contact-form__select,
.wwh-contact-form__textarea {
	font-family: var(--wp--preset--font-family--body), 'EB Garamond', serif;
	font-size: var(--wp--preset--font-size--prose-li);
	line-height: 1.5;
	padding: 0.875rem 1rem;
	border: 1px solid rgba(26, 22, 19, 0.12);
	background: var(--wp--preset--color--warm-cream, #f2efea);
	color: var(--wp--preset--color--ink-primary, #1a1613);
	border-radius: 0;
	outline: none;
	width: 100%;
	box-sizing: border-box;
}

.wwh-contact-form__textarea {
	resize: vertical;
	min-height: 180px;
}

/* A 1px border-colour shift is not a sufficient focus indicator on its own
 * (WCAG 2.4.7), so pair it with a real outline. The base rule above sets
 * outline:none to suppress the browser default; this restores a deliberate
 * one for keyboard users. */
.wwh-contact-form__input:focus,
.wwh-contact-form__select:focus,
.wwh-contact-form__textarea:focus {
	border-color: var(--wp--preset--color--ink-primary, #1a1613);
	background: #fff;
	outline: 2px solid var(--wp--preset--color--ink-primary, #1a1613);
	outline-offset: 2px;
}

.wwh-contact-form__input:invalid:not(:placeholder-shown),
.wwh-contact-form__textarea:invalid:not(:placeholder-shown) {
	border-color: rgba(180, 80, 60, 0.6);
}

.wwh-contact-form__btn {
	font-family: var(--wp--preset--font-family--ui), 'Montserrat', sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 1rem 1.75rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--ink-primary, #1a1613);
	color: var(--wp--preset--color--warm-cream, #f2efea);
	border: 1px solid var(--wp--preset--color--ink-primary, #1a1613);
	cursor: pointer;
	align-self: flex-start;
	transition: background 0.2s;
}

.wwh-contact-form__btn:hover {
	background: #000;
}

.wwh-contact-form__note {
	font-family: var(--wp--preset--font-family--body), 'EB Garamond', serif;
	font-style: italic;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption, #5a544d);
	margin: 0;
}

.wwh-contact-form__error {
	font-family: var(--wp--preset--font-family--body), 'EB Garamond', serif;
	font-size: var(--wp--preset--font-size--body);
	color: rgba(180, 80, 60, 1);
	background: rgba(180, 80, 60, 0.08);
	border: 1px solid rgba(180, 80, 60, 0.3);
	padding: 1rem 1.25rem;
	margin: 0;
}

.wwh-contact-form__success {
	background: var(--wp--preset--color--warm-cream-2, #E9E4DB);
	border-left: 3px solid #3a8a4d;
	padding: 2rem 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wwh-contact-form__success-eyebrow {
	font-family: var(--wp--preset--font-family--ui), 'Montserrat', sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #3a8a4d;
	margin: 0;
}

.wwh-contact-form__success-title {
	font-family: var(--wp--preset--font-family--display), 'DM Serif Display', serif;
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--display-h-3);
	line-height: 1.2;
	margin: 0;
	color: var(--wp--preset--color--ink-primary, #1a1613);
}

.wwh-contact-form__success-body {
	font-family: var(--wp--preset--font-family--body), 'EB Garamond', serif;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-primary, #1a1613);
	margin: 0;
}

/* Newsletter opt-in checkbox row (D5 — only rendered when Brevo + DOI template are configured). */
.wwh-contact-form__row--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.625rem;
	margin-top: -0.5rem;
}

.wwh-contact-form__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body), 'EB Garamond', serif;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-caption, #5a544d);
}

.wwh-contact-form__checkbox {
	margin: 0.25rem 0 0;
	width: 16px;
	height: 16px;
	accent-color: var(--wp--preset--color--ink-primary, #1a1613);
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Anti-bot slider puzzle.
 *
 * Uses the same token vocabulary as the fields above (warm-cream fill, square
 * corners, hairline ink border) so it reads as part of the form rather than a
 * bolted-on gadget.
 * ----------------------------------------------------------------------- */

.wwh-contact-form__puzzle {
	gap: 0.75rem;
}

.wwh-contact-form__puzzle-hint {
	font-family: var(--wp--preset--font-family--body), 'EB Garamond', serif;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-caption, #5a544d);
	margin: 0 0 0.75rem;
}

.wwh-contact-form__puzzle-track {
	/* Half the handle width plus its 2px breathing room. The handle and the
	 * target both inset by this, so a percentage means the same pixel
	 * position for each and neither end can be clipped. Change the handle
	 * size and this is the only other value to change. */
	--wwh-puzzle-inset: 26px;
	position: relative;
	height: 56px;
	background: var(--wp--preset--color--warm-cream, #f2efea);
	border: 1px solid rgba(26, 22, 19, 0.12);
	box-sizing: border-box;
	touch-action: none; /* let the handle own the gesture, not the scroller */
}

/* The gap the handle has to land in. Sized to the server-side tolerance
 * (±4%) so what the visitor sees matches what the server accepts.
 *
 * Both target and handle use the same calc() so a given percentage maps to
 * the same pixel position for each: the travel range is inset by half a
 * handle width at both ends, which keeps 0% and 100% fully on-track instead
 * of half-clipped by the track border. */
.wwh-contact-form__puzzle-target {
	position: absolute;
	top: 50%;
	left: calc(var(--wwh-puzzle-inset, 26px) + (100% - var(--wwh-puzzle-inset, 26px) * 2) * var(--wwh-puzzle-pos, 0) / 100);
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
	/* 2px at 0.6 alpha composites to ~#6b6762 on the cream track, ≈3.4:1 —
	 * clear of the 3:1 WCAG 1.4.11 floor for a graphical object the user must
	 * perceive to succeed. The old 1px/0.35 was ≈2.6:1 and failed. */
	border: 2px dashed rgba(26, 22, 19, 0.6);
	background: rgba(26, 22, 19, 0.07);
	box-sizing: border-box;
	pointer-events: none;
}

/* 44px minimum target size (WCAG 2.5.5); 48px gives a comfortable thumb
 * target on a phone. */
.wwh-contact-form__puzzle-handle {
	position: absolute;
	top: 50%;
	left: calc(var(--wwh-puzzle-inset, 26px) + (100% - var(--wwh-puzzle-inset, 26px) * 2) * var(--wwh-puzzle-pos, 0) / 100);
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	background: var(--wp--preset--color--ink-primary, #1a1613);
	color: var(--wp--preset--color--warm-cream, #f2efea);
	cursor: grab;
	touch-action: none;
	display: block;
	box-sizing: border-box;
	transition: box-shadow 120ms ease;
}

/* Waterwheel glyph, drawn in CSS so there is no media asset to manage. */
.wwh-contact-form__puzzle-handle::before {
	content: '';
	position: absolute;
	inset: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

/* Four spokes, so the handle reads as a wheel rather than a plain circle. */
.wwh-contact-form__puzzle-handle::after {
	content: '';
	position: absolute;
	inset: 12px;
	background:
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat,
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
	transform: rotate(22.5deg);
}

/* Two-tone ring: a light inner halo plus a dark outer edge, so focus stays
 * visible whether the handle sits on the cream track or overlaps the dark
 * dashed target. A single dark outline vanished against the handle itself. */
.wwh-contact-form__puzzle-handle:focus-visible,
.wwh-contact-form__puzzle-handle:focus {
	outline: 2px solid var(--wp--preset--color--ink-primary, #1a1613);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--warm-cream, #f2efea);
}

/* Browsers with :focus-visible get the ring only on keyboard focus; the
 * :focus rule above is the fallback for those without it. */
.wwh-contact-form__puzzle-handle:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* The always-available typed-word alternative. */
.wwh-contact-form__puzzle-alt {
	margin-top: 1rem;
}

.wwh-contact-form__puzzle-alt .wwh-contact-form__input {
	max-width: 22rem;
}

.wwh-contact-form__puzzle-handle.is-dragging {
	cursor: grabbing;
	box-shadow: 0 0 0 6px rgba(26, 22, 19, 0.08);
}

.wwh-contact-form__puzzle-status {
	font-family: var(--wp--preset--font-family--ui), 'Montserrat', sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-caption, #5a544d);
	margin: 0.75rem 0 0;
	min-height: 1.2em; /* reserve space so announcing doesn't shift layout */
}

@media (prefers-reduced-motion: reduce) {
	.wwh-contact-form__puzzle-handle {
		transition: none;
	}
}