/* ============================================================
   VITA-FORM — theme overlay for the vita-form plugin.

   The plugin ships structural CSS only (display, grid, hidden
   utilities). Visual styling — colors, typography, spacing,
   focus rings — is the theme's responsibility per the plugin
   spec + CLAUDE.md.

   This file matches the book-a-call form's visual language so
   forms embedded anywhere on the site (careers, contact, future
   pages) share one consistent style. Loaded by
   functions.php → vitasiti_enqueue_assets() when the rendered
   page contains a vita-form/form block.
   ============================================================ */

.vita-form {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid rgba(15, 27, 45, 0.08);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: 0 1px 0 rgba(15, 27, 45, 0.04);
	color: #0F1B2D;
	/* Override the WP block-group flow-layout constraint so the form
	   fills its column on /book-a-call/ (2-col grid). On editorial pages
	   where the form sits inside a single 660-760px column, the parent
	   already caps the effective width. box-sizing keeps padding inside
	   the 100% width so we don't overflow the grid column on narrow
	   desktop widths. */
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	min-width: 0;
}

/* The plugin renders steps as a 2-col grid; we keep that and just
   set a comfortable gap, override the bare 1rem default. The plugin
   defaults each step to min-width: min-content, which on narrow
   viewports forces the form (and its grid column) wider than the
   page — override so the step can actually shrink to its parent. */
.vita-form__step {
	gap: 20px;
	min-width: 0;
}

@media (max-width: 599.98px) {
	.vita-form__step {
		grid-template-columns: 1fr;
	}
}

/* ── Field shell ─────────────────────────────────────────────── */

.vita-form__field {
	gap: 6px;
}

.vita-form__label {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(15, 27, 45, 0.62);
}

.vita-form__required {
	color: rgba(15, 27, 45, 0.45);
	margin-inline-start: 4px;
}

.vita-form__help {
	font-size: 13px;
	color: rgba(15, 27, 45, 0.6);
	margin: 4px 0 0;
}

/* ── Text-like inputs ────────────────────────────────────────── */

.vita-form__input,
.vita-form__field input[type="text"],
.vita-form__field input[type="email"],
.vita-form__field input[type="tel"],
.vita-form__field input[type="url"],
.vita-form__field input[type="number"],
.vita-form__field input[type="search"],
.vita-form__field input[type="date"],
.vita-form__field input[type="time"],
.vita-form__field select,
.vita-form__select,
.vita-form__textarea,
.vita-form__field textarea {
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: #0F1B2D;
	background: #ffffff;
	border: 1px solid rgba(15, 27, 45, 0.18);
	border-radius: 8px;
	padding: 12px 14px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
	width: 100%;
}

.vita-form__input:focus,
.vita-form__field input:focus,
.vita-form__field select:focus,
.vita-form__select:focus,
.vita-form__textarea:focus,
.vita-form__field textarea:focus {
	outline: none;
	border-color: #1F3933;
	box-shadow: 0 0 0 3px rgba(31, 57, 51, 0.12);
}

.vita-form__textarea,
.vita-form__field textarea {
	resize: vertical;
	min-height: 130px;
}

/* Selects get a custom chevron so they don't fall back to the system
   widget chrome which clashes with the editorial look. */
.vita-form__select,
.vita-form__field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231F3933' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
}

/* ── Radio / checkbox groups ─────────────────────────────────── */

/* The plugin wraps groups in a fieldset.vita-form__field plus a
   .vita-form__choices container holding individual .vita-form__choice
   labels. We give the group room to breathe and align the inputs
   like checkboxes on book-a-call. */
.vita-form__field.vita-form__field--radio,
.vita-form__field.vita-form__field--checkbox,
.vita-form__field.vita-form__field--checkboxes {
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.vita-form__field--radio > .vita-form__label,
.vita-form__field--checkbox > .vita-form__label,
.vita-form__field--checkboxes > .vita-form__label {
	display: block;
	margin-bottom: 10px;
}

.vita-form__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px 16px;
}

.vita-form__choice {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #0F1B2D;
	cursor: pointer;
}

.vita-form__choice input[type="radio"],
.vita-form__choice input[type="checkbox"] {
	accent-color: #1F3933;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ── File input ──────────────────────────────────────────────── */

/* The plugin uses .vita-form__file as the <input type="file"> class
   itself, not as a wrapper. We style the native control so it reads
   as part of the form rather than a system-default UI element. */
.vita-form__file {
	font-family: inherit;
	font-size: 14px;
	color: #0F1B2D;
	background: rgba(31, 57, 51, 0.04);
	border: 1px dashed rgba(31, 57, 51, 0.28);
	border-radius: 8px;
	padding: 14px;
	cursor: pointer;
	width: 100%;
	transition: border-color 120ms ease, background 120ms ease;
}

.vita-form__file::file-selector-button {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	background: #1F3933;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	margin-right: 12px;
	cursor: pointer;
	transition: background 120ms ease;
}

.vita-form__file::file-selector-button:hover {
	background: #2A4D44;
}

.vita-form__file:hover {
	border-color: rgba(31, 57, 51, 0.5);
	background: rgba(31, 57, 51, 0.07);
}

.vita-form__file:focus {
	outline: none;
	border-color: #1F3933;
	box-shadow: 0 0 0 3px rgba(31, 57, 51, 0.12);
}

/* ── Error state ─────────────────────────────────────────────── */

.vita-form__field.is-error .vita-form__input,
.vita-form__field.is-error input,
.vita-form__field.is-error select,
.vita-form__field.is-error textarea {
	border-color: #C04A4A;
	box-shadow: 0 0 0 3px rgba(192, 74, 74, 0.12);
}

.vita-form__error {
	font-size: 13px;
	color: #C04A4A;
	margin: 4px 0 0;
}

.vita-form__error-summary {
	background: rgba(192, 74, 74, 0.06);
	border: 1px solid rgba(192, 74, 74, 0.25);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
	color: #82302F;
}

.vita-form__error-summary ul {
	margin: 8px 0 0 18px;
	padding: 0;
}

.vita-form__error-summary li {
	margin: 2px 0;
}

/* ── Success message ─────────────────────────────────────────── */

.vita-form__success {
	background: rgba(107, 224, 184, 0.12);
	border: 1px solid rgba(31, 57, 51, 0.18);
	border-radius: 12px;
	padding: 20px 22px;
	color: #1F3933;
}

/* ── Nav (multi-step Next/Prev + Submit) ─────────────────────── */

.vita-form__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	align-items: center;
}

.vita-form__submit,
.vita-form__prev,
.vita-form__next {
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	padding: 14px 26px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.vita-form__submit,
.vita-form__next {
	background: #1F3933;
	color: #ffffff;
}

.vita-form__submit:hover,
.vita-form__next:hover {
	transform: translateY(-1px);
	background: #2A4D44;
}

.vita-form__prev {
	background: transparent;
	color: #1F3933;
	border: 1px solid rgba(31, 57, 51, 0.25);
}

.vita-form__prev:hover {
	background: rgba(31, 57, 51, 0.05);
	transform: translateY(-1px);
}

.vita-form__submit:focus-visible,
.vita-form__prev:focus-visible,
.vita-form__next:focus-visible {
	outline: 2px solid #6BE0B8;
	outline-offset: 3px;
}

.vita-form__submit:disabled,
.vita-form__prev:disabled,
.vita-form__next:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* ── Honeypot — keep hidden from real users, visible to bots ─ */

.vita-form__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ── Progress strip (multi-step indicator) ───────────────────── */

.vita-form__progress {
	margin-bottom: 18px;
	gap: 8px;
}

.vita-form__progress-step {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(15, 27, 45, 0.55);
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(15, 27, 45, 0.04);
}

.vita-form__progress-step.is-active {
	color: #ffffff;
	background: #1F3933;
	opacity: 1;
	font-weight: 500;
}