/* Kasper Forms — front end
   Deliberately quiet. Fonts and colours are inherited from the theme so a
   form looks like part of the page rather than a plugin dropped onto it.
   Override any of the custom properties below in your theme's stylesheet. */

.kf-form-wrap {
	--kf-border: #d3d5d8;
	--kf-border-focus: currentColor;
	--kf-error: #b32d2e;
	--kf-muted: #6b7075;
	--kf-radius: 5px;
	--kf-gap: 1.15rem;

	/* Breathing room between a label and whatever it labels. */
	--kf-label-gap: 0.6rem;

	/* The checkbox and radio squares. White by default so they read as
	   fillable on any background, with a dark tick that stays visible on
	   white regardless of the surrounding text colour. */
	--kf-control-bg: #fff;
	--kf-control-ink: #1d2327;

	max-inline-size: 42rem;
}

.kf-form-title {
	margin-block: 0 1rem;
}

.kf-form {
	display: grid;
	gap: var(--kf-gap);
}

/* An author `display` declaration beats the UA's [hidden] rule, so steps,
   fields and buttons set to display:grid would stay visible when JS hides
   them. This keeps the hidden attribute authoritative. */
.kf-form-wrap [hidden] {
	display: none !important;
}

/* Fields ---------------------------------------------------------- */

.kf-step {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kf-gap);
	align-content: start;
}

.kf-field {
	grid-column: span 2;
	display: grid;
	gap: 0.35rem;
	min-inline-size: 0;
}

.kf-field > .kf-label + .kf-input,
.kf-field > .kf-desc + .kf-input {
	margin-block-start: calc(var(--kf-label-gap) - 0.35rem);
}

.kf-field.kf-w-half {
	grid-column: span 1;
}

@media (max-width: 40rem) {
	.kf-field.kf-w-half {
		grid-column: span 2;
	}
}

/* Themes routinely uppercase, letterspace and enlarge form labels, which
   turns an ordinary label into a shouty heading. Those three are reset here
   so a label is just the body text in semibold. */
.kf-form-wrap .kf-label,
.kf-form-wrap legend.kf-label {
	font-weight: 600;
	font-size: 1em !important;
	line-height: 1.3;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-variant: normal !important;
	color: inherit;
}

/* Text inside the controls.

   The same problem as the labels, one layer down. `font: inherit` on the
   input is not enough: text-transform, letter-spacing and font-variant are
   not part of the font shorthand, so a theme rule on `input` or `textarea`
   goes straight through it. Uppercased input text is worse than an
   uppercased label — it mangles what the visitor typed, and an email address
   or a registration number in caps is genuinely harder to proofread. */
.kf-form-wrap .kf-input,
.kf-form-wrap .kf-textarea,
.kf-form-wrap .kf-select,
.kf-form-wrap .kf-select option,
.kf-form-wrap .kf-choice,
.kf-form-wrap .kf-choice span,
.kf-form-wrap .kf-desc,
.kf-form-wrap .kf-note,
.kf-form-wrap .kf-error {
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	font-variant: normal !important;
	font-variant-caps: normal !important;
	font-feature-settings: normal !important;
	font-style: normal !important;
}

/* Size and weight only on the controls themselves — help text and notes are
   deliberately smaller, so they keep their own scale. */
.kf-form-wrap .kf-input,
.kf-form-wrap .kf-textarea,
.kf-form-wrap .kf-select,
.kf-form-wrap .kf-choice span {
	font-size: 1em !important;
	font-weight: 400 !important;
	line-height: 1.4;
}

.kf-form-wrap .kf-input::placeholder,
.kf-form-wrap .kf-textarea::placeholder {
	font-family: inherit;
	font-size: 1em;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	color: var(--kf-muted);
	opacity: 1;
}

.kf-req {
	color: var(--kf-error);
}

.kf-desc {
	margin: 0;
	font-size: 0.875em;
	color: var(--kf-muted);
	line-height: 1.45;
}

.kf-input {
	inline-size: 100%;
	padding: 0.6em 0.75em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--kf-border);
	border-radius: var(--kf-radius);
	box-sizing: border-box;
}

.kf-input:focus-visible {
	outline: 2px solid var(--kf-border-focus);
	outline-offset: 1px;
	border-color: var(--kf-border-focus);
}

.kf-textarea {
	resize: vertical;
	min-block-size: 6em;
}

.kf-fieldset {
	border: none;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
	position: relative;
}

/* A full legend reset.

   <legend> is the odd one out in HTML: browsers render it inside the
   fieldset's top border, so it is neither block nor inline, and themes
   routinely override that. Two overrides in particular break this layout:

   - position: absolute, as a blunt reset of the default rendering. It takes
     the legend out of flow, so margin-bottom no longer pushes the options
     down and the label ends up sitting on top of them.
   - the screen-reader-only pattern (absolute + clip + height: 1px), which
     hides the label visually altogether.

   Neither is wrong of the theme — it cannot know a plugin will put a visible
   legend inside a fieldset. So the legend is put back into flow here. */
.kf-form-wrap .kf-fieldset > .kf-label,
.kf-form-wrap legend.kf-label {
	position: static !important;
	display: block !important;
	float: none !important;
	inline-size: auto !important;
	max-inline-size: none !important;
	block-size: auto !important;
	max-block-size: none !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 0 var(--kf-label-gap) !important;
	padding: 0 !important;
	inset: auto !important;
	white-space: normal !important;
}

/* When help text sits between the label and the options it carries the
   spacing, so the two do not stack up. */
.kf-form-wrap .kf-fieldset > .kf-label + .kf-desc {
	margin-block: calc(var(--kf-label-gap) * -0.5) var(--kf-label-gap);
}

/* Text underneath the options. */
.kf-note {
	margin: var(--kf-label-gap) 0 0;
	font-size: 0.875em;
	line-height: 1.5;
	color: var(--kf-muted);
}

.kf-choices {
	display: grid;
	gap: 0.4rem;
}

.kf-choices[data-cols="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kf-choices[data-cols="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 34rem) {
	.kf-choices[data-cols="3"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 24rem) {
	.kf-choices[data-cols] {
		grid-template-columns: 1fr;
	}
}

.kf-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	line-height: 1.4;
	cursor: pointer;
	min-block-size: 1.75rem;
}

/* Boxed choices: a bigger tap target, and the selection is legible at a
   glance rather than hinging on a 14px tick. */
.kf-choices[data-style="box"] .kf-choice {
	align-items: center;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--kf-border);
	border-radius: var(--kf-radius);
}

.kf-choices[data-style="box"] .kf-choice:hover {
	border-color: currentColor;
}

.kf-choices[data-style="box"] .kf-choice.is-checked {
	border-color: var(--kf-control-ink);
	box-shadow: inset 0 0 0 1px var(--kf-control-ink);
}

/* -----------------------------------------------------------------
   The control itself.

   This is the one place the form refuses to inherit from the theme.
   Plenty of themes hide the native input (display:none, opacity:0,
   position:absolute) and redraw it from their own markup pattern — with
   this markup that leaves a checkbox you can toggle but cannot see, which
   reads to a visitor as "the form is broken". So the box and the tick are
   drawn here, and the properties themes usually clobber are forced back.
   -------------------------------------------------------------- */

.kf-form-wrap .kf-choice input[type="checkbox"],
.kf-form-wrap .kf-choice input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-grid !important;
	place-content: center;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	clip-path: none !important;
	inline-size: 1.15em !important;
	block-size: 1.15em !important;
	min-inline-size: 1.15em;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--kf-border) !important;
	border-radius: 3px;
	background: var(--kf-control-bg) !important;
	color: var(--kf-control-ink);
	cursor: pointer;
	flex: 0 0 auto;
	transition: none;
}

.kf-choices:not([data-style="box"]) .kf-choice input {
	margin-block-start: 0.18em !important;
}

.kf-form-wrap .kf-choice input[type="radio"] {
	border-radius: 50%;
}

.kf-form-wrap .kf-choice input::before {
	content: "";
	inline-size: 0.65em;
	block-size: 0.65em;
	transform: scale(0);
	background: currentColor;
}

.kf-form-wrap .kf-choice input[type="checkbox"]::before {
	clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 70%);
}

.kf-form-wrap .kf-choice input[type="radio"]::before {
	border-radius: 50%;
	inline-size: 0.55em;
	block-size: 0.55em;
}

.kf-form-wrap .kf-choice input:checked {
	border-color: var(--kf-control-ink) !important;
	background: var(--kf-control-bg) !important;
}

.kf-form-wrap .kf-choice input:checked::before {
	transform: scale(1);
}

.kf-form-wrap .kf-choice input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.kf-form-wrap .kf-choice input:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed;
}

.kf-consent {
	font-size: 0.9375em;
}

.kf-heading {
	margin: 0.5em 0 0;
}

.kf-divider {
	border: none;
	border-top: 1px solid var(--kf-border);
	margin: 0.5rem 0;
	inline-size: 100%;
}

.kf-text-block p:first-child {
	margin-top: 0;
}

.kf-text-block p:last-child {
	margin-bottom: 0;
}

/* Errors ---------------------------------------------------------- */

.kf-error {
	margin: 0;
	font-size: 0.85em;
	color: var(--kf-error);
	font-weight: 500;
}

.kf-field.has-error .kf-input,
.kf-field.has-error .kf-select {
	border-color: var(--kf-error);
}

.kf-form-error {
	grid-column: span 2;
	padding: 0.75em 1em;
	border: 1px solid var(--kf-error);
	border-inline-start-width: 4px;
	border-radius: var(--kf-radius);
	color: var(--kf-error);
	font-size: 0.9375em;
}

/* Steps ----------------------------------------------------------- */

.kf-steps-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	counter-reset: none;
}

.kf-step-pip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875em;
	color: var(--kf-muted);
}

.kf-pip-num {
	display: grid;
	place-items: center;
	inline-size: 1.6em;
	block-size: 1.6em;
	border-radius: 50%;
	border: 1px solid var(--kf-border);
	font-size: 0.8em;
	font-weight: 600;
	flex: 0 0 auto;
}

.kf-step-pip.is-current {
	color: inherit;
	font-weight: 600;
}

.kf-step-pip.is-current .kf-pip-num,
.kf-step-pip.is-done .kf-pip-num {
	border-color: currentColor;
}

.kf-step-pip.is-done .kf-pip-num {
	background: currentColor;
	color: transparent;
}

/* Actions --------------------------------------------------------- */

.kf-actions {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	flex-wrap: wrap;
}

.kf-btn {
	font: inherit;
	font-weight: 600;
	padding: 0.65em 1.5em;
	border: 1px solid #1d2327;
	border-radius: var(--kf-radius);
	background: #1d2327;
	color: #fff;
	cursor: pointer;
	line-height: 1.2;
}

.kf-btn:hover {
	background: #000;
	border-color: #000;
}

.kf-btn-secondary {
	background: transparent;
	color: inherit;
	border-color: var(--kf-border);
}

.kf-btn:disabled {
	opacity: 0.55;
	cursor: progress;
}

.kf-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Honeypot: hidden from people, reachable by naive bots. */

.kf-hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kf-turnstile {
	margin-block: 0.25rem;
}

/* Success --------------------------------------------------------- */

.kf-success {
	padding: 1.25em 1.5em;
	border: 1px solid var(--kf-border);
	border-inline-start-width: 4px;
	border-radius: var(--kf-radius);
	background: rgba(0, 0, 0, 0.02);
}

.kf-success:focus {
	outline: none;
}

.kf-success p:first-child {
	margin-top: 0;
}

.kf-success p:last-child {
	margin-bottom: 0;
}

.kf-hidden-by-logic {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}