/*
 * Kloomiyin 2026 — lead-form.css
 *
 * Field styling for the Salesforce Web-to-Lead form (patterns/contact-form.php,
 * inlined into patterns/contact-body.php). Values are lifted from the contact
 * card in the design source (bundle-page.html): 52px controls, 14px radius,
 * hairline border, green pill submit.
 *
 * Loaded after extras.css on the front end and via add_editor_style(), so the
 * --kmy-* tokens and the --wp--preset--* palette are already defined. Every
 * token below falls back to its literal value so the form still reads correctly
 * if this file is ever loaded on its own.
 */

/* ---------------------------------------------------------------------------
 * 0. Local tokens
 * ------------------------------------------------------------------------ */

.kmy-lead-form {
	/* Control fill — a touch off the page base so fields read as inputs. */
	--kmy-field-bg: oklch(0.985 0.004 150);
	/* Border for a resting control. Slightly tighter than --kmy-card-border. */
	--kmy-field-border: oklch(0.90 0.012 155);
	--kmy-field-height: 52px;
	--kmy-field-radius: 14px;
	--kmy-field-gap: 16px;

	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 1. Field wrapper, label, two-up row
 * ------------------------------------------------------------------------ */

.kmy-lead-form__field {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.kmy-lead-form__label {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft, oklch(0.34 0.02 162));
}

/* First name / last name sit two-up on desktop. */
.kmy-lead-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kmy-field-gap);
	align-items: start;
}

@media (max-width: 599px) {
	.kmy-lead-form__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * 2. Controls
 * ------------------------------------------------------------------------ */

.kmy-lead-form__input,
.kmy-lead-form__select,
.kmy-lead-form__textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0 18px;
	border: 1px solid var(--kmy-field-border);
	border-radius: var(--kmy-field-radius);
	background: var(--kmy-field-bg);
	color: var(--wp--preset--color--ink, oklch(0.24 0.02 162));
	font-family: inherit;
	font-size: 17px;
	line-height: 1.5;
	/* Safari/iOS otherwise repaints these with its own chrome. */
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.kmy-lead-form__input,
.kmy-lead-form__select {
	height: var(--kmy-field-height);
}

.kmy-lead-form__textarea {
	min-height: 140px;
	padding-top: 14px;
	padding-bottom: 14px;
	resize: vertical;
}

.kmy-lead-form__input::placeholder,
.kmy-lead-form__textarea::placeholder {
	color: var(--wp--preset--color--muted, oklch(0.50 0.015 162));
}

/* Focus: green hairline plus a soft green ring. Never remove the outline
 * without replacing it — this is the keyboard user's only cue. */
.kmy-lead-form__input:focus-visible,
.kmy-lead-form__select:focus-visible,
.kmy-lead-form__textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--green, oklch(0.66 0.15 152));
	box-shadow: 0 0 0 3px oklch(0.66 0.15 152 / 0.22);
}

/* Fallback for browsers without :focus-visible on form controls. */
.kmy-lead-form__input:focus,
.kmy-lead-form__select:focus,
.kmy-lead-form__textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--green, oklch(0.66 0.15 152));
	box-shadow: 0 0 0 3px oklch(0.66 0.15 152 / 0.22);
}

/* ---------------------------------------------------------------------------
 * 3. Select chevron
 * ------------------------------------------------------------------------ */

/* Same 14x9 chevron as the design source, inlined so it costs no request. */
.kmy-lead-form__select {
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2714%27%20height=%279%27%20viewBox=%270%200%2014%209%27%3E%3Cpath%20d=%27M1.4%201.6%20L7%207%20L12.6%201.6%27%20fill=%27none%27%20stroke=%27%235c6661%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 14px 9px;
}

/* The empty first option reads as placeholder text until a service is picked. */
.kmy-lead-form__select:invalid {
	color: var(--wp--preset--color--muted, oklch(0.50 0.015 162));
}

.kmy-lead-form__select option {
	color: var(--wp--preset--color--ink, oklch(0.24 0.02 162));
}

/* Edge/IE arrow suppression. */
.kmy-lead-form__select::-ms-expand {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 4. Submit and note
 * ------------------------------------------------------------------------ */

/* Matches .wp-element-button: green pill, dark ink label, never white on green.
 * Declared here too so the button is right even outside a block context. */
.kmy-lead-form__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 34px;
	margin-top: 4px;
	border: 0;
	border-radius: var(--kmy-radius-btn, 999px);
	background: var(--wp--preset--color--green, oklch(0.66 0.15 152));
	color: var(--wp--preset--color--dark, oklch(0.20 0.04 162));
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.kmy-lead-form__submit:hover,
.kmy-lead-form__submit:focus {
	background: var(--kmy-green-hover, oklch(0.72 0.14 152));
	color: var(--wp--preset--color--dark, oklch(0.20 0.04 162));
}

.kmy-lead-form__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink, oklch(0.24 0.02 162));
	outline-offset: 3px;
}

.kmy-lead-form__note {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, oklch(0.50 0.015 162));
}

/* ---------------------------------------------------------------------------
 * 5. Honeypot
 * ------------------------------------------------------------------------ */

/* Off-screen rather than display:none — a bot that skips hidden fields will
 * still fill this one, which is the whole point. Keep it focusable-but-parked
 * (the markup sets tabindex="-1") so it never lands in the tab order. */
.kmy-lead-form__honeypot {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 6. Motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.kmy-lead-form__input,
	.kmy-lead-form__select,
	.kmy-lead-form__textarea,
	.kmy-lead-form__submit {
		transition: none;
	}
}

/* reCAPTCHA widget: keep it in the form rhythm and stop it overflowing narrow cards. */
.kmy-lead-form__captcha {
	margin-block-end: 20px;
}
.kmy-lead-form__captcha .g-recaptcha {
	max-width: 100%;
}
@media (max-width: 360px) {
	.kmy-lead-form__captcha .g-recaptcha {
		transform: scale(0.85);
		transform-origin: 0 0;
	}
}