/**
 * Public form styling.
 *
 * A deliberately plain base layer. Its job is that a form looks correct and
 * aligned the moment it is placed on a page, not that it matches any particular
 * theme. Fields stay easy to override: single class selectors, no !important,
 * no ids, and a low specificity throughout, so a theme rule of the same
 * specificity wins simply by loading later.
 *
 * THE SHELL IS THE EXCEPTION
 *
 * The <form> element itself is reset explicitly. Themes very commonly style
 * `form` as a bare element selector — a card with a border, a background and
 * padding — and that arrived uninvited on the quote page, which is why one form
 * looked boxed in and a different colour from the others. Resetting the shell
 * costs nothing (there is nothing to override, only theme decoration to
 * remove) and it is what makes every form on the site look the same.
 *
 * Field colours are set explicitly for the same reason: an input that inherits
 * a theme's background and text colour is an input whose scheme changes from
 * page to page.
 *
 * Colours, spacing and radius come from custom properties declared on the form
 * itself. A theme can restyle the whole thing by setting a handful of variables
 * rather than rewriting rules:
 *
 *   .wpbos-form { --wpbos-form-accent: #0073AA; --wpbos-form-gap: 20px; }
 *
 * Layout is a flex row. Each field carries its own width as a percentage from
 * the approved list, handed over as --wpbos-field-width, and wraps onto the
 * next row when it will not fit. Below the breakpoint every field takes the
 * full width, because two columns of inputs on a phone is unusable however
 * carefully it is configured.
 */

.wpbos-form {
	/* Darker than the WordPress default #0073aa, by decision. It carries the
	   focus ring and the progress bar, so it has to hold its own against a
	   white page and pass contrast against it. */
	--wpbos-form-accent: #0073aa;
	--wpbos-form-ink: #1e1e1e;
	--wpbos-form-muted: #646970;
	--wpbos-form-border: #dcdcde;
	--wpbos-form-border-focus: var(--wpbos-form-accent);
	--wpbos-form-error: #b32d2e;
	--wpbos-form-surface: #ffffff;
	--wpbos-form-gap: 18px;
	--wpbos-form-radius: 8px;
	--wpbos-form-field-min: 220px;

	/*
	 * Declared here so it always resolves, and so a field with no width of its
	 * own takes the full row. Each field overrides it inline from the approved
	 * list. A token used before it was declared once fell back to an inherited
	 * value in silence, which is why there is a test for this.
	 */
	--wpbos-field-width: 100%;

	display: block;
	color: var(--wpbos-form-ink);
	max-width: 100%;

	/*
	 * Theme decoration removed. A theme styling `form` as a card puts a border
	 * and a background round our fields, and the result is one form that looks
	 * boxed and others that do not. Set here rather than left to chance,
	 * because "no border" is a decision and inheriting one is an accident.
	 */
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/*
 * The row the fields sit in. A wrapper rather than the form itself, because a
 * form also carries hidden inputs, the step header and the submit row, and
 * none of those should be laid out as a column in the grid.
 */
.wpbos-form__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpbos-form-gap);
	align-items: flex-start;
}

/*
 * Every field takes the full row unless it carries a width. The width arrives
 * as a custom property on the element, set from the approved list server side,
 * so an unrecognised value can never reach a style rule.
 */
 
 .wpbos-form button,
.wpbos-form input[type="submit"],
.wpbos-form input[type="button"] {
	border-radius: 8px;
}

.wpbos-form__field {
	flex: 1 1 calc(var(--wpbos-field-width, 100%) - var(--wpbos-form-gap));
	box-sizing: border-box;
	min-width: 0;
	border-radius: 4px !important;
}

/*
 * A field never squeezes below a usable width. If the configured layout would
 * make it narrower than this, it wraps onto its own row instead. This is what
 * stops a 25% field becoming an unusable sliver in a narrow sidebar or a
 * half-width page template.
 */
@supports ( width: min(100%, 1px) ) {
	.wpbos-form__field {
		min-width: min(100%, var(--wpbos-form-field-min));
	}
}

.wpbos-form__label {
	display: block;
	margin: 6px 0px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: capitalize !important;
}

.wpbos-form__required {
	/* Black, by decision. The asterisk shape carries the meaning, not the
	   colour: a hidden "required" is announced to screen readers alongside it,
	   so nothing here depends on the marker being seen or on it being any
	   particular colour. Black also reads as text rather than as a link, which
	   a blue asterisk did. */
	color: var(--wpbos-form-ink);
	margin-left: 2px;
}

/* Used for the required announcement and the phone country label. */
.wpbos-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.wpbos-form__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--wpbos-form-border);
	border-radius: 4px !important;
	background: var(--wpbos-form-surface);

	/* Stated rather than inherited. `color: inherit` picked up whatever the
	   theme had set on the surrounding section, so the same input read dark
	   grey on one page and near-black on another. */
	color: var(--wpbos-form-ink);
	font: inherit;
	font-size: 15px;   /* add after font: inherit */
	line-height: 1.4;
	box-shadow: none;
	text-transform: none;
}

.wpbos-form__input:focus {
	outline: 2px solid var(--wpbos-form-border-focus);
	outline-offset: 1px;
	border-color: var(--wpbos-form-border-focus);
}

.wpbos-form__textarea {
	min-height: 140px;
	resize: vertical;
}

.wpbos-form__select {
	/* Stops the native arrow overlapping long option text. */
	padding-right: 32px;
}

/*
 * Phone: a country selector beside the number. The selector takes only the
 * space it needs so the number keeps the room.
 */
.wpbos-form__phone {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.wpbos-form__country {
	flex: 0 0 auto;
	width: auto;
	/* Wide enough for a country name now that the list is by name rather than
	   ISO code, without taking the room the number needs. */
	min-width: 9rem;
	max-width: 40%;
}

.wpbos-form__tel {
	flex: 1 1 auto;
	min-width: 0;
}

.wpbos-form__file {
	padding: 8px;
	background: transparent;
}

.wpbos-form__hint {
	margin: 6px 0 0;
	color: var(--wpbos-form-muted);
	font-size: 0.875em;
	line-height: 1.4;
}

/* Errors are announced in text and marked with colour, never colour alone. */

.wpbos-form__error {
	margin: 6px 0 0;
	color: var(--wpbos-form-error);
	font-size: 0.875em;
	font-weight: 600;
}

.wpbos-form__field--has-error .wpbos-form__input {
	border-color: var(--wpbos-form-error);
}

.wpbos-form__summary {
	margin: 0 0 var(--wpbos-form-gap);
	padding: 12px 14px;
	border-left: 4px solid var(--wpbos-form-error);
	background: rgba(179, 45, 46, 0.06);
	border-radius: var(--wpbos-form-radius);
}

.wpbos-form__summary p {
	margin: 0;
}

/* Consent always takes a full row: it is a decision, not a form field. */

.wpbos-form__field--consent {
	flex: 1 1 100%;
}

.wpbos-form__label--consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	cursor: pointer;
}

.wpbos-form__checkbox {
	width: auto;
	flex: 0 0 auto;
	margin-top: 3px;
	padding: 0;
}

.wpbos-form__consent-text {
	line-height: 1.5;
}

/*
 * Only ever rendered when the consent sentence contains nothing that could be
 * linked in place. The links have to be reachable somehow, so losing them to
 * an unexpected wording is not an outcome that is allowed to happen.
 */
.wpbos-form__consent-links a + a {
	margin-left: 12px;
}

.wpbos-form__field--submit {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: var(--wpbos-form-gap);
	border-radius: 8px;
}

/*
 * Steps.
 *
 * The count is a sentence, and the bar repeats it. Progress must never exist
 * only as a shape, so the bar is hidden from screen readers rather than
 * described to them twice.
 */

.wpbos-form__steps {
	margin-bottom: var(--wpbos-form-gap);
}

.wpbos-form__step-count {
	margin: 0 0 6px;
	font-size: 0.875em;
	color: var(--wpbos-form-muted);
}

.wpbos-form__progress {
	height: 4px;
	border-radius: var(--wpbos-form-radius);
	background: var(--wpbos-form-border);
	overflow: hidden;
}

.wpbos-form__progress-bar {
	display: block;
	height: 100%;
	background: var(--wpbos-form-accent);
}

.wpbos-form__step-title {
	margin: 12px 0 4px;
	font-size: 1.25em;
}

.wpbos-form__step-description {
	margin: 0;
	color: var(--wpbos-form-muted);
}

.wpbos-form__back {
	padding: 12px 24px;
	border: 1px solid var(--wpbos-form-border);
	border-radius: var(--wpbos-form-radius);
	background: transparent;
	color: var(--wpbos-form-ink);
	font: inherit;
	cursor: pointer;
}

.wpbos-form__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Radio and checkbox sets flow along the row and wrap when they run out of
 * space, so half a dozen short answers occupy one line instead of six. A long
 * choice simply takes the width it needs and pushes the next one down, which is
 * why this is `wrap` rather than a column count: nothing has to be told in
 * advance how long the wording is.
 */
.wpbos-form__choices {
	display: flex;
	flex-flow: row wrap;
	gap: 8px 20px;
	margin-top: 6px;
}

.wpbos-form__choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;

	/* Never split a label across two lines mid-answer while its box sits on
	   the line above. */
	flex: 0 1 auto;
	max-width: 100%;
}

/*
 * On a narrow screen they stack. Two columns of tap targets on a phone is a
 * mis-tap waiting to happen, and the same reasoning already drops every field
 * to full width at this breakpoint.
 */
@media (max-width: 600px) {
	.wpbos-form__choices {
		flex-direction: column;
		gap: 10px;
	}
}

.wpbos-form__radio,
.wpbos-form__choice .wpbos-form__checkbox {
	width: auto;
	flex: 0 0 auto;
	margin-top: 3px;
}

.wpbos-form__heading {
	margin: 12px 0 4px;
	font-size: 1.25em;
}

.wpbos-form__heading-body {
	margin: 0;
	color: var(--wpbos-form-muted);
}

/*
 * Shown where a form cannot be rendered. Deliberately plain and deliberately
 * uninformative: a visitor gains nothing from being told the form is in the
 * trash, and the administrator is told separately.
 */
.wpbos-form__unavailable {
	padding: 14px 16px;
	border-left: 4px solid #c3c4c7;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 4px;
}

.wpbos-form__submit {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--wpbos-form-accent);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.wpbos-form .wpbos-form__submit:hover,
.wpbos-form .wpbos-form__submit:focus {
	background: #2540bd !important;
}

.wpbos-form__submit:focus-visible {
	outline: 2px solid var(--wpbos-form-ink);
	outline-offset: 2px;
}

.wpbos-form__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.wpbos-form__success {
	padding: 16px 18px;
	border-left: 4px solid var(--wpbos-form-accent);
	background: rgba(0, 115, 170, 0.06);
	border-radius: var(--wpbos-form-radius);
}

.wpbos-form__success p:first-child {
	margin-top: 0;
}

.wpbos-form__success p:last-child {
	margin-bottom: 0;
}

/*
 * Below this width every field takes the full row. Multiple columns of inputs
 * on a phone is unusable no matter how the layout is configured, so the
 * configuration is overridden rather than respected.
 */
@media screen and ( max-width: 600px ) {
	.wpbos-form__field {
		flex-basis: 100%;
		min-width: 0;
	}

	.wpbos-form__phone {
		flex-wrap: wrap;
	}

	.wpbos-form__country {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wpbos-form__submit {
		transition: none;
	}
}