/*
 * The Kitchensmiths contact form — Gravity Forms form 2 ("General Contact"),
 * re-skinned to the design's enquiry panel
 * (docs/design/kitchensmiths-redesign.html lines 1022-1058).
 *
 * SCOPED TO .ks-contact-form THROUGHOUT, without exception, for the same
 * reason assets/css/booking-form.css is scoped to .ks-booking-form: the site
 * runs eleven Gravity Forms and this skin is written against one of them. A
 * rule that escapes this scope silently redesigns the booking, job-application
 * and brochure forms, none of which anyone would be looking at when they
 * broke.
 *
 * THE FIELDS ARE NOT THE DESIGN'S FIELDS. The design draws first name, last
 * name, email, telephone, postcode, an indicative budget band and a message.
 * Form 2 carries name, email, phone and message only. This file styles what
 * the form actually has; adding the missing two is a Gravity Forms change, not
 * a stylesheet one. Nothing here assumes a field that is not there, so the
 * skin will not break when they are added — the budget band will simply need
 * its own rules.
 *
 * Gravity Forms' theme here is `orbital`, which exposes CSS custom properties.
 * Where one exists it is used, because overriding a variable rides along with
 * the theme's cascade rather than fighting it. The property names were read
 * out of booking-form.css, which read them from the framework stylesheet
 * rather than guessing — a misspelt custom property fails silently.
 */

/* -------------------------------------------------------------------------
 * Orbital's own variables.
 *
 * Controls are 50px in the design (line 1026), against the framework's 38px
 * default.
 * ---------------------------------------------------------------------- */

.ks-contact-form .gform_wrapper {
	--gf-ctrl-size-md: 50px;
	--gf-ctrl-radius: 0;
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-border-color: rgba(28, 42, 51, 0.2);
	--gf-ctrl-border-color-hover: rgba(28, 42, 51, 0.4);
	--gf-ctrl-border-color-focus: #b08d57;
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-focus: #ffffff;
	--gf-ctrl-accent-color: #b08d57;
	--gf-ctrl-color: #1c2a33;
	--gf-ctrl-font-family: Jost, sans-serif;
	--gf-ctrl-font-size: 15px;
	--gf-ctrl-font-weight: 300;
	--gf-ctrl-padding-x: 14px;

	/* Labels: 11px tracked caps in muted grey (design line 1025). */
	--gf-ctrl-label-color-primary: #8c9099;
	--gf-ctrl-label-color-req: #b08d57;
	--gf-ctrl-label-font-family-primary: Jost, sans-serif;
	--gf-ctrl-label-font-size-primary: 11px;
	--gf-ctrl-label-font-weight-primary: 500;
	--gf-ctrl-label-letter-spacing-primary: 0.16em;

	--gf-ctrl-desc-color: #8c9099;
	--gf-ctrl-desc-font-family: Jost, sans-serif;
	--gf-ctrl-desc-font-size: 12px;
	--gf-ctrl-desc-font-weight: 300;

	/* 22px between fields, both ways (design line 1023). */
	--gf-form-gap-x: 22px;
	--gf-form-gap-y: 22px;

	/* 9px between a label and its control (design line 1024). */
	--gf-ctrl-label-spacing: 9px;
	--gf-ctrl-label-margin-block-end: 9px;
}

/* -------------------------------------------------------------------------
 * Labels and legend.
 * ---------------------------------------------------------------------- */

.ks-contact-form .gform_wrapper .gfield_label,
.ks-contact-form .gform_wrapper .gform-field-label {
	font: 500 11px/1 Jost, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8c9099;
	margin-bottom: 9px;
}

.ks-contact-form .gform_wrapper .gfield_required {
	color: #b08d57;
}

/*
 * The design's panel carries no "* indicates required fields" line, so it is
 * removed from the page — but only VISUALLY. The sentence is what explains the
 * asterisks to a screen reader, and deleting it outright would leave the
 * required markers unexplained (WCAG 3.3.2). Clipped rather than
 * display: none for exactly that reason.
 */
.ks-contact-form .gform_heading,
.ks-contact-form .gform_required_legend {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Controls.
 *
 * Set explicitly as well as by variable: the variables carry most of it, but
 * what matters is the measured result rather than the elegance of the cascade.
 * ---------------------------------------------------------------------- */

.ks-contact-form .gform_wrapper input[type="text"],
.ks-contact-form .gform_wrapper input[type="email"],
.ks-contact-form .gform_wrapper input[type="tel"],
.ks-contact-form .gform_wrapper input[type="number"],
.ks-contact-form .gform_wrapper select,
.ks-contact-form .gform_wrapper textarea {
	font: 300 15px/1.5 Jost, sans-serif;
	color: #1c2a33;
	background: #ffffff;
	border: 1px solid rgba(28, 42, 51, 0.2);
	border-radius: 0;
	padding: 0 14px;
	box-shadow: none;
}

.ks-contact-form .gform_wrapper input[type="text"],
.ks-contact-form .gform_wrapper input[type="email"],
.ks-contact-form .gform_wrapper input[type="tel"],
.ks-contact-form .gform_wrapper input[type="number"],
.ks-contact-form .gform_wrapper select {
	height: 50px;
}

/*
 * 130px, and it stays where it is put (design line 1054).
 *
 * THE FULL THEME CHAIN IS IN THE SELECTOR ON PURPOSE. Setting
 * --gf-ctrl-textarea-height was tried first, because riding the theme's own
 * variables is what the rest of this file does — measured, it changed
 * nothing: the box stayed at the 192px the framework derives from the field's
 * `rows="10"`. So the height is stated outright, at the framework's own
 * specificity, which is the only thing that actually moves it.
 */
.ks-contact-form .gform_wrapper.gform-theme.gform-theme--framework textarea,
.ks-contact-form .gform_wrapper textarea {
	height: 130px;
	min-height: 130px;
	padding: 14px;
	resize: vertical;
}

.ks-contact-form .gform_wrapper input:focus,
.ks-contact-form .gform_wrapper select:focus,
.ks-contact-form .gform_wrapper textarea:focus {
	border-color: #b08d57;
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 1px #b08d57;
}

/* -------------------------------------------------------------------------
 * The two-column grid.
 *
 * Orbital lays the fields out on a twelve-column grid and gives every field
 * `grid-column: span 12`. The design pairs email with telephone (line 1032),
 * so those two take half the row each and everything else keeps the full
 * width.
 * ---------------------------------------------------------------------- */

.ks-contact-form .gform_wrapper .gform_fields {
	grid-column-gap: 22px;
	grid-row-gap: 22px;
}

.ks-contact-form .gform_wrapper .gfield--type-email,
.ks-contact-form .gform_wrapper .gfield--type-phone {
	grid-column: span 6;
}

/*
 * The name field is one field holding two, and Gravity Forms emits its own
 * grid row for it. Two equal columns, 22px apart, to match the pair below.
 */
.ks-contact-form .ginput_container_name.gform-grid-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}

.ks-contact-form .ginput_container_name .gform-grid-col {
	max-width: none;
	padding: 0;
}

/*
 * SUB-LABELS ABOVE THEIR INPUTS. Gravity Forms puts "First" and "Last" under
 * the boxes; the design labels every box above it, and a form that labels
 * three fields one way and two the other reads as a mistake. column-reverse
 * moves them without touching the DOM order, so the label still precedes its
 * input for a screen reader.
 */
.ks-contact-form .ginput_container_name .gform-grid-col {
	display: flex;
	flex-direction: column-reverse;
}

.ks-contact-form .ginput_container_name .gform-grid-col label {
	font: 500 11px/1 Jost, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8c9099;
	margin: 0 0 9px;
}

/* -------------------------------------------------------------------------
 * Submit (design line 1057).
 *
 * A <button type="submit">, NOT an <input type="submit"> — the same as the
 * booking form, verified against the rendered markup. A rule written for the
 * input selector alone would match nothing and leave the default blue button.
 * ---------------------------------------------------------------------- */

.ks-contact-form .gform_footer {
	margin: 32px 0 0;
	padding: 0;
}

/* The footer is display:flex by default, which sizes the button to its own
   content whatever width it is given. Making it a block lets width: 100% mean
   what it says. */
.ks-contact-form .gform_wrapper .gform_footer {
	display: block;
}

.ks-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.gform_button,
.ks-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gform_footer input.gform_button,
.ks-contact-form .gform_wrapper .gform_footer button.gform_button,
.ks-contact-form .gform_wrapper .gform_footer input.gform_button {
	display: block;
	width: 100%;
	font: 500 12px/1 Jost, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #16222a;
	background: #b08d57;
	border: 0;
	border-radius: 0;
	padding: 21px 32px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.ks-contact-form .gform_wrapper .gform_footer button.gform_button:hover,
.ks-contact-form .gform_wrapper .gform_footer input.gform_button:hover {
	background: #1c2a33;
	color: #f5f2ec;
}

.ks-contact-form .gform_wrapper .gform_footer button.gform_button:focus-visible,
.ks-contact-form .gform_wrapper .gform_footer input.gform_button:focus-visible {
	outline: 2px solid #1c2a33;
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * The "Select All" toggle above a checkbox field.
 *
 * Gravity Forms renders this as `button.gfield_choice_all_toggle` inside a
 * `.gfield-choice-toggle-all` wrapper, carrying its own theme class
 * (`gform-theme-button--size-sm`) and arriving in the framework's default
 * blue — #204CE5, 3px radius, system font. On the ex-display form that put a
 * bright blue browser button in the middle of a page whose every other control
 * is Jost, square-cornered and in the house palette.
 *
 * A SECONDARY CONTROL, not a second primary one. The filled brass belongs to
 * Submit; a convenience toggle that ticks two boxes must not compete with the
 * thing that actually sends the enquiry, so this is an outline.
 *
 * The label toggles between "Select All" and "Deselect All", so nothing here
 * may depend on its width.
 *
 * The `.gform-theme--framework` selector is repeated for the same reason it is
 * on the submit button below: the framework's own rules are written at that
 * specificity, and a plainer selector loses to them.
 * ---------------------------------------------------------------------- */

/* The boxes themselves, which arrive ticked in the same #204CE5 blue.
   Included because a brass button standing beside two bright blue ticks is a
   field half-fixed.

   `accent-color` DOES NOT WORK HERE, which is worth writing down: it is the
   one-line answer for a native checkbox, and Gravity Forms' framework sets
   `appearance: none` and draws its own — so the property computes to brass and
   changes nothing on screen. The tick is a ::before whose `color` carries the
   blue, and the box is the input's own background and border.

   Filled brass with a cream tick, rather than a brass tick on white: it
   matches the submit button's own brass-on-ink logic, and a small mark at this
   size needs the contrast of a filled box to read at a glance. */
.ks-contact-form .gform_wrapper input[type="checkbox"]:checked,
.ks-contact-form .gform_wrapper input[type="radio"]:checked {
	background-color: #b08d57;
	border-color: #b08d57;
}

.ks-contact-form .gform_wrapper input[type="checkbox"]:checked::before,
.ks-contact-form .gform_wrapper input[type="radio"]:checked::before {
	color: #16222a;
}

.ks-contact-form .gform_wrapper .gfield-choice-toggle-all {
	margin: 14px 0 0;
}

.ks-contact-form .gform_wrapper.gform-theme.gform-theme--framework button.gfield_choice_all_toggle,
.ks-contact-form .gform_wrapper button.gfield_choice_all_toggle {
	display: inline-block;
	width: auto;
	font: 500 11px/1 Jost, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1c2a33;
	background: transparent;
	border: 1px solid #dcd5c8;
	border-radius: 0;
	padding: 11px 18px;
	min-height: 0;
	cursor: pointer;
	/* The framework ships a soft blue drop shadow on this button too. */
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* GRAVITY FORMS PUTS ITS BLUE RING ON :focus, NOT :focus-visible — a measured
   `outline: 3px solid rgba(32,76,229,0.65)`. So it fires on a mouse click as
   well as on a keyboard tab, and the button sat there ringed in blue after
   being clicked.

   Cleared here and reinstated on :focus-visible below, which is the state that
   actually needs it. Removing a focus indicator outright would be the wrong
   fix; moving it to the right state and the right colour is the fix. */
.ks-contact-form .gform_wrapper.gform-theme.gform-theme--framework button.gfield_choice_all_toggle:focus,
.ks-contact-form .gform_wrapper button.gfield_choice_all_toggle:focus {
	outline: none;
	box-shadow: none;
}

.ks-contact-form .gform_wrapper.gform-theme.gform-theme--framework button.gfield_choice_all_toggle:hover,
.ks-contact-form .gform_wrapper button.gfield_choice_all_toggle:hover {
	background: #1c2a33;
	border-color: #1c2a33;
	color: #f5f2ec;
}

.ks-contact-form .gform_wrapper.gform-theme.gform-theme--framework button.gfield_choice_all_toggle:focus-visible,
.ks-contact-form .gform_wrapper button.gfield_choice_all_toggle:focus-visible {
	outline: 2px solid #b08d57;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ks-contact-form .gform_wrapper button.gfield_choice_all_toggle {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Validation, repainted into the palette.
 *
 * The MESSAGE stays. Colour must never be the only carrier of an error state
 * (WCAG 1.4.1), and on this form an unnoticed error is a lost enquiry.
 * ---------------------------------------------------------------------- */

.ks-contact-form .gfield_error input,
.ks-contact-form .gfield_error select,
.ks-contact-form .gfield_error textarea {
	border-color: #9b2c2c;
}

.ks-contact-form .gfield_validation_message,
.ks-contact-form .validation_message,
.ks-contact-form .gform_submission_error {
	font: 400 13px/1.5 Jost, sans-serif;
	color: #9b2c2c;
	background: transparent;
	border: 0;
	padding: 6px 0 0;
}

.ks-contact-form .gform_confirmation_message {
	font: 300 17px/1.8 Jost, sans-serif;
	color: #1c2a33;
}

/* -------------------------------------------------------------------------
 * Mobile: the paired row stacks, as every other two-column block on the site
 * does at 767px.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ks-contact-form .gform_wrapper .gfield--type-email,
	.ks-contact-form .gform_wrapper .gfield--type-phone {
		grid-column: span 12;
	}

	.ks-contact-form .ginput_container_name.gform-grid-row {
		grid-template-columns: minmax(0, 1fr);
	}
}