/**
 * pk-standard-forms — front-end (public form) styles.
 *
 * DESIGN CONTRACT: match the theme's Gravity Forms stylesheet
 * (pk-daylit-theme/assets/css/components/gravityforms.css). Labels uppercase /
 * small / muted, fields with a subtle tinted bg + hairline border, focus =
 * terracotta ring, radio/checkbox choices as chip pills, submit = terracotta
 * primary button, Next = primary / Previous = secondary ghost.
 *
 * TONE AWARENESS: every colour rule uses the daybreak tone vars — var(--on),
 * var(--on-soft), var(--on-mute), var(--acc), var(--acc-hover), var(--eyebrow),
 * var(--hair) — which daybreak-tone.css flips per [data-tone="night|transition|
 * day"]. The pk-form reads correctly on all three grounds from a single rule set.
 * The terracotta focus ring uses var(--terracotta, …) which only the transition
 * tone defines, so it falls back through var(--acc) then the brand primitive.
 * NO hardcoded colour — every literal is a var() fallback.
 *
 * SPECIFICITY: scoped under .pk-form so the theme's global forms.css rules
 * (input/textarea/select/label, which paint the wrong --field-color and make
 * input text invisible on the night ground) are cleanly overridden. The fix for
 * the contrast bug is binding field text + labels to var(--on, …) here.
 *
 * MARKUP (fixed, from src/Shortcode.php — do NOT change):
 *   .pk-form > .pk-form__title / __description
 *   .pk-form__progress (label / step / track / fill)
 *   .pk-form__page (multi-page)
 *   .pk-form__field.pk-form__field--{type}
 *     > label[for]           the field label (no input inside)
 *     > control              input / textarea / select, OR for radio/checkbox:
 *       label[for] > input   the choice chips (input inside the label)
 *     > .pk-form__field-desc
 *     > .pk-form__field-error
 *   .pk-form__section (h4), .pk-form__html
 *   .pk-form__nav > .pk-form__prev / __next / __submit
 *   .pk-form__validation-summary / __errors / __confirmation
 *   .pk-form__save-continue / __save-resume
 */

/* ─── BOX MODEL RESET ─────────────────────────────────────────────────────── */
.pk-form,
.pk-form *,
.pk-form *::before,
.pk-form *::after {
	box-sizing: border-box;
}

/* ─── FORM SHELL ──────────────────────────────────────────────────────────── */
.pk-form {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* SINGLE-PAGE rhythm. A multi-page form wraps its fields in .pk-form__page, which
   is the flex column that supplies the 18px inter-field gap (and the space above
   the submit). A SINGLE-page form has NO .pk-form__page — the fields + submit are
   flat direct children of .pk-form — so without this they collapse tight against
   each other and the submit sits flush (the contact form vs the kitchen sink).
   Give the single-page form the SAME flex column + 18px gap so both render with
   identical spacing. Scoped with :has() to forms that have NO .pk-form__page, so
   the multi-page case (which already has its wrapper) is untouched. */
.pk-form:not(:has(.pk-form__page)) {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* The title/description carry their own bottom margins; keep them out of the
   flex gap's double-spacing by zeroing those margins when the gap owns the rhythm. */
.pk-form:not(:has(.pk-form__page)) > .pk-form__title,
.pk-form:not(:has(.pk-form__page)) > .pk-form__description {
	margin-bottom: 0;
}

/* The flex column defaults to align-items:stretch, which is right for the
   full-width field blocks but would stretch the auto-width submit button to the
   whole form width. Pin the submit back to its natural width, left-aligned. */
.pk-form:not(:has(.pk-form__page)) > .pk-form__submit {
	align-self: flex-start;
}

/* ─── TITLE + DESCRIPTION ─────────────────────────────────────────────────── */
.pk-form__title {
	font-family: inherit;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--on, var(--color-ink));
	margin: 0 0 0.5rem;
}

.pk-form__description {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--on-soft, color-mix(in srgb, var(--on, var(--color-ink)) 78%, transparent));
	margin: 0 0 clamp(20px, 3vw, 28px);
}

/* ─── PAGE (multi-page) — single-column stack with the 18px comp rhythm ────── */
.pk-form__page {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pk-form__page[hidden] {
	display: none;
}

/* ─── FIELD ROW — label stacked over control, 8px gap ─────────────────────── */
.pk-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* A conditionally-hidden field must not render. The [hidden] attribute needs an
   explicit display:none because the base rule above sets display:flex, which
   otherwise beats the low-specificity UA [hidden] rule and shows the field. */
.pk-form__field[hidden] {
	display: none;
}

/* ─── FIELD LABEL — the direct <label> child (no input inside) ─────────────── */
.pk-form__field > label {
	display: block;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.4;
	color: var(--on-mute, var(--color-ink-muted));
	margin: 0;
}

/* Required asterisk, if the label text carries one in a <span>. */
.pk-form__field > label .pk-form__required {
	color: var(--acc, var(--color-accent));
	margin-left: 3px;
}

/* ─── FIELD DESCRIPTION ───────────────────────────────────────────────────── */
.pk-form__field-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--on-mute, var(--color-ink-muted));
	margin: 0;
}

/* ─── TEXT INPUTS + TEXTAREA + SELECT ─────────────────────────────────────────
   Broad input match: the markup emits some uncommon types (e.g. type="name"),
   so style every text-like input plus textarea/select rather than per-type. */
.pk-form__field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.pk-form__field textarea,
.pk-form__field select {
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1;
	color: var(--on, var(--color-ink));
	background: color-mix(in srgb, var(--on, var(--color-ink)) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--on, var(--color-ink)) 22%, transparent);
	border-radius: var(--btn-radius, var(--radius-md, 6px));
	padding: 13px 16px;
	transition: border-color var(--motion-slow-border, 300ms) ease,
		box-shadow var(--motion-slow-border, 300ms) ease;
	-webkit-appearance: none;
	appearance: none;
}

.pk-form__field textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.5;
}

.pk-form__field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus,
.pk-form__field textarea:focus,
.pk-form__field select:focus {
	outline: none;
	border-color: var(--terracotta, var(--acc, var(--color-brand-terracotta)));
	box-shadow: 0 0 0 3px color-mix(in srgb,
		var(--terracotta, var(--acc, var(--color-brand-terracotta))) 22%, transparent);
}

.pk-form__field input::placeholder,
.pk-form__field textarea::placeholder {
	color: color-mix(in srgb, var(--on, var(--color-ink)) 42%, transparent);
}

/* ─── SELECT — same field chrome + a tone-neutral chevron caret ───────────── */
.pk-form__field select {
	padding-right: 36px;
	cursor: pointer;
	/* Neutral gray stroke (%23888) reads on both the dark night and light day
	   grounds; currentColor in a background SVG does not cascade reliably. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/* ─── RADIO / CHECKBOX — chip pills ───────────────────────────────────────────
   Markup: each choice is `<label for><input> text</label>` placed directly in
   the field, as siblings of the field label. The field is laid out as a block so
   the field label sits on its own line and the choice labels flow as a wrapping
   inline-flex chip row beneath it. Style the choice <label>s (those containing an
   input) as pills; the bare field label is excluded by :has(input). */
.pk-form__field--radio,
.pk-form__field--checkbox {
	display: block;
}

/* Gap between the field label and the chip row. */
.pk-form__field--radio > label:first-child,
.pk-form__field--checkbox > label:first-child {
	margin-bottom: 8px;
}

/* The chip pill. inline-flex chips wrap naturally on the block field; right +
   bottom margins give the 10px row/column rhythm. */
.pk-form__field--radio label:has(input),
.pk-form__field--checkbox label:has(input) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 100%;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	/* line-height:1 + padding 12px top / 10px bottom (Peter's chosen value) to
	   optically centre the cap block on this top-heavy font. */
	line-height: 1;
	color: var(--on-soft, color-mix(in srgb, var(--on, var(--color-ink)) 78%, transparent));
	background: none;
	border: 1px solid color-mix(in srgb, var(--on, var(--color-ink)) 22%, transparent);
	border-radius: var(--radius-pill, 999px);
	padding: 12px 16px 10px;
	margin: 0 10px 10px 0;
	cursor: pointer;
	transition: border-color var(--motion-base, 250ms) ease,
		background var(--motion-base, 250ms) ease,
		color var(--motion-base, 250ms) ease;
}

/* Hide the native radio/checkbox; the pill carries the visual state. */
.pk-form__field--radio label:has(input) input[type="radio"],
.pk-form__field--checkbox label:has(input) input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	pointer-events: none;
}

.pk-form__field--radio label:has(input):hover,
.pk-form__field--checkbox label:has(input):hover {
	border-color: var(--terracotta, var(--acc, var(--color-brand-terracotta)));
	color: var(--on, var(--color-ink));
}

/* Checked chip = terracotta fill, button-fg text. :has() targets the label whose
   nested input is checked. */
.pk-form__field--radio label:has(input:checked),
.pk-form__field--checkbox label:has(input:checked) {
	background: var(--acc, var(--color-accent));
	border-color: var(--acc, var(--color-accent));
	color: var(--btn-fg, var(--color-ink-inverse));
}

/* Keyboard focus ring on the pill. */
.pk-form__field--radio label:has(input:focus-visible),
.pk-form__field--checkbox label:has(input:focus-visible) {
	outline: 2px solid var(--terracotta, var(--acc, var(--color-brand-terracotta)));
	outline-offset: 2px;
}

/* ─── FILE UPLOAD ─────────────────────────────────────────────────────────── */
.pk-form__field--file input[type="file"] {
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--on, var(--color-ink));
	background: color-mix(in srgb, var(--on, var(--color-ink)) 6%, transparent);
	border: 1px dashed color-mix(in srgb, var(--on, var(--color-ink)) 28%, transparent);
	border-radius: var(--btn-radius, var(--radius-md, 6px));
	padding: 12px 16px;
	cursor: pointer;
	transition: border-color var(--motion-base, 250ms) ease;
}

.pk-form__field--file input[type="file"]:hover {
	border-color: var(--terracotta, var(--acc, var(--color-brand-terracotta)));
	border-style: solid;
}

.pk-form__field--file input[type="file"]:focus-visible {
	outline: 2px solid var(--terracotta, var(--acc, var(--color-brand-terracotta)));
	outline-offset: 2px;
}

/* The native "Choose file" button — a small terracotta chip, not raw chrome. */
.pk-form__field--file input[type="file"]::file-selector-button,
.pk-form__field--file input[type="file"]::-webkit-file-upload-button {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	color: var(--btn-fg, var(--color-ink-inverse));
	background: var(--acc, var(--color-accent));
	border: none;
	border-radius: var(--btn-radius, var(--radius-md, 6px));
	padding: 7px 14px;
	margin-right: 12px;
	transition: background var(--motion-base, 250ms) ease;
	-webkit-appearance: none;
	appearance: none;
}

.pk-form__field--file input[type="file"]:hover::file-selector-button,
.pk-form__field--file input[type="file"]:hover::-webkit-file-upload-button {
	background: var(--acc-hover, var(--color-accent-strong));
}

/* ─── SECTION DIVIDER (h4 + the <hr> before it) ───────────────────────────── */
.pk-form hr {
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--on, var(--color-ink)) 14%, transparent);
	margin: clamp(20px, 3vw, 28px) 0 0;
}

.pk-form__section {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--eyebrow, var(--color-brand-terracotta-deep));
	margin: 8px 0 0;
}

/* ─── HTML CONTENT BLOCK ──────────────────────────────────────────────────── */
.pk-form__html {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--on-soft, color-mix(in srgb, var(--on, var(--color-ink)) 78%, transparent));
}

.pk-form__html p {
	margin: 0 0 0.75em;
}

.pk-form__html p:last-child {
	margin-bottom: 0;
}

.pk-form__html a {
	color: var(--acc, var(--color-accent));
	text-decoration: underline;
}

/* ─── PROGRESS BAR (multi-page) ───────────────────────────────────────────── */
.pk-form__progress {
	margin-bottom: clamp(20px, 3vw, 28px);
}

.pk-form__progress-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pk-form__progress-step {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--on-mute, var(--color-ink-muted));
}

.pk-form__progress-track {
	height: 3px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--on, var(--color-ink)) 14%, transparent);
	overflow: hidden;
}

.pk-form__progress-fill {
	height: 100%;
	border-radius: 2px;
	background: var(--acc, var(--color-accent));
	transition: width var(--motion-glow, 500ms) var(--ease-unfurl, ease);
}

/* ─── NAV (Previous / Next / Submit) + SAVE-CONTINUE ──────────────────────── */
.pk-form__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: clamp(18px, 2.5vw, 28px);
}

/* Next sits at the end of the row when Previous is present (GF nav hierarchy). */
.pk-form__nav .pk-form__next {
	margin-left: auto;
}

/* Shared button chrome. */
.pk-form__prev,
.pk-form__next,
.pk-form__submit,
.pk-form__save-resume {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--btn-radius, var(--radius-md, 6px));
	padding: var(--btn-pad-y, 0.875rem) var(--btn-pad-x, 1.125rem);
	width: auto;
	transition: background var(--motion-base, 250ms) ease,
		color var(--motion-base, 250ms) ease,
		border-color var(--motion-base, 250ms) ease;
	-webkit-appearance: none;
	appearance: none;
}

.pk-form__prev[hidden],
.pk-form__next[hidden],
.pk-form__submit[hidden] {
	display: none;
}

/* Next + Submit = primary terracotta fill. */
.pk-form__next,
.pk-form__submit {
	background: var(--acc, var(--color-accent));
	color: var(--btn-fg, var(--color-ink-inverse));
	border: 1px solid transparent;
}

.pk-form__next:hover,
.pk-form__submit:hover {
	background: var(--acc-hover, var(--color-accent-strong));
}

.pk-form__next:focus-visible,
.pk-form__submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb,
		var(--terracotta, var(--acc, var(--color-brand-terracotta))) 36%, transparent);
}

/* Previous = secondary ghost (hairline outline, tone-adaptive text). */
.pk-form__prev {
	background: transparent;
	color: var(--on, var(--color-ink));
	-webkit-text-fill-color: var(--on, var(--color-ink));
	border: 1px solid color-mix(in srgb, var(--on, var(--color-ink)) 32%, transparent);
}

.pk-form__prev:hover {
	background: color-mix(in srgb, var(--on, var(--color-ink)) 8%, transparent);
	border-color: color-mix(in srgb, var(--on, var(--color-ink)) 48%, transparent);
}

.pk-form__prev:focus-visible {
	outline: 2px solid var(--terracotta, var(--acc, var(--color-brand-terracotta)));
	outline-offset: 2px;
}

/* Save-and-continue link — quiet underlined accent text, not a heavy button. */
.pk-form__save-continue {
	margin-top: 12px;
}

.pk-form__save-resume {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	color: var(--acc, var(--color-accent));
	text-decoration: underline;
}

.pk-form__save-resume:hover {
	color: var(--acc-hover, var(--color-accent-strong));
}

/* ─── ERROR / VALIDATION STATES ───────────────────────────────────────────── */
/* Per-field inline error message (revealed by JS — [hidden] keeps it out of flow). */
.pk-form__field-error {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-error, var(--acc, var(--color-brand-terracotta)));
	margin: 0;
}

.pk-form__field-error[hidden] {
	display: none;
}

/* A field flagged invalid: tint its control border + label. JS toggles an
   .pk-form__field--error / aria-invalid; cover both signals. */
.pk-form__field[aria-invalid="true"] > label,
.pk-form__field--error > label {
	color: var(--color-error, var(--acc, var(--color-brand-terracotta)));
}

.pk-form__field[aria-invalid="true"] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.pk-form__field[aria-invalid="true"] textarea,
.pk-form__field[aria-invalid="true"] select,
.pk-form__field--error input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.pk-form__field--error textarea,
.pk-form__field--error select {
	border-color: var(--color-error, var(--acc, var(--color-brand-terracotta)));
	box-shadow: 0 0 0 3px color-mix(in srgb,
		var(--color-error, var(--acc, var(--color-brand-terracotta))) 16%, transparent);
}

/* Top-of-form validation summary + the errors block. */
.pk-form__validation-summary,
.pk-form__errors {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-error, var(--acc, var(--color-brand-terracotta)));
	border: 1px solid color-mix(in srgb,
		var(--color-error, var(--acc, var(--color-brand-terracotta))) 40%, transparent);
	background: color-mix(in srgb,
		var(--color-error, var(--acc, var(--color-brand-terracotta))) 8%, transparent);
	border-radius: var(--btn-radius, var(--radius-md, 6px));
	padding: 12px 16px;
	margin-bottom: clamp(16px, 2vw, 24px);
}

.pk-form__validation-summary[hidden],
.pk-form__errors[hidden],
.pk-form__confirmation[hidden] {
	display: none;
}

.pk-form__validation-summary ul,
.pk-form__errors ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

/* ─── CONFIRMATION (post-submit) ──────────────────────────────────────────── */
.pk-form__confirmation {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--on, var(--color-ink));
	padding: clamp(20px, 3vw, 32px) 0;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.pk-form__nav {
		flex-direction: column;
		align-items: stretch;
	}

	.pk-form__nav .pk-form__next {
		margin-left: 0;
	}

	.pk-form__prev,
	.pk-form__next,
	.pk-form__submit {
		justify-content: center;
	}
}