/*
 * Shelbys forms (.sf-* hooks, FORMS-MAIL §15.1; DESIGN-SPEC §4.16, §4.30, §7).
 * Uses the design tokens from shelbys-base. Layout responds to the width the form is given
 * (container queries), so the same form works in a 288px phone column, a half-width split,
 * a sidebar or a full content column. Viewport media queries are the fallback.
 */

/* Container ------------------------------------------------------------------------------ */
.sf {
	box-sizing: border-box;
	container: sf / inline-size;
	inline-size: 100%;
	max-inline-size: 60rem;
	min-inline-size: 0;
	color: var(--c-text, var(--ink));
}
.sf *,
.sf *::before,
.sf *::after { box-sizing: border-box; }
.sf > * + * { margin-block-start: var(--space-m); }
.sf > :first-child { margin-block-start: 0; }
.sf [hidden] { display: none !important; }

.sf-title {
	margin-block-end: 0;
	margin-inline: 0;
	font: var(--w-bold) var(--step-3)/1.1 var(--font-sans);
	color: var(--c-heading, var(--ink));
	text-wrap: balance;
}
.sf-intro {
	margin-block-end: 0;
	margin-inline: 0;
	max-inline-size: 60ch;
	color: var(--c-text-2, var(--ink-2));
	font-size: var(--step-0);
	text-wrap: pretty;
}

.sf-vh {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Honeypot: rendered but clipped to 1px (never display:none, which some bots skip, §9.3). Clipping in
   place rather than moving it off-screen keeps it inside the viewport, so no page overflow. */
.sf-form { position: relative; }
.sf-hp {
	position: absolute !important;
	inset-block-start: 0 !important;
	inset-inline-start: 0 !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	opacity: 0;
	pointer-events: none;
}

/* Form grid ------------------------------------------------------------------------------ */
.sf-form {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	min-inline-size: 0;
}
.sf > .sf-summary + .sf-form { margin-block-start: var(--space-m); }
.sf-row { display: grid; gap: 1.25rem; min-inline-size: 0; }
/* One column until the form itself is wide enough (overrides any viewport-based rule in base.css). */
.sf-row--2,
.sf-choices--2,
.sf-choices--3 { grid-template-columns: minmax(0, 1fr); }

.sf-field {
	display: grid;
	gap: .375rem;
	align-content: start;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.sf-field > label,
.sf-field > legend {
	padding: 0;
	font-size: var(--step--1);
	font-weight: var(--w-bold);
	line-height: 1.35;
	color: var(--blue);
}
.sf-field > legend {
	float: left;          /* lets the legend sit inside the fieldset like a label */
	inline-size: 100%;
	margin-block-end: .375rem;
}
.sf-field > legend + * { clear: both; }
.sf-opt { font-weight: 400; color: var(--ink-2); }
.sf-hint {
	margin: 0;
	max-inline-size: 62ch;
	font-size: var(--step--1);
	line-height: 1.45;
	color: var(--ink-2);
}

/* Controls ------------------------------------------------------------------------------- */
.sf-field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.sf-field select,
.sf-field textarea {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 3.375rem;           /* 54px */
	margin: 0;
	padding: .75rem 1rem;
	background-color: var(--white);
	color: var(--ink);
	border: 1px solid var(--field-line);
	border-radius: var(--r-xs);
	font: inherit;
	font-size: max(1.0625rem, 16px);    /* >= 16px stops iOS zoom */
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.sf-field input[type="date"]:not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
	appearance: none;
	-webkit-appearance: none;
	max-inline-size: 18rem;
	text-align: start;
}
.sf-field input[type="date"]::-webkit-date-and-time-value { text-align: start; }
.sf-field textarea {
	min-block-size: 9rem;
	resize: vertical;
}
.sf-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 3rem;
	text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1236' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.125rem;
	cursor: pointer;
}
.sf-field input:hover,
.sf-field select:hover,
.sf-field textarea:hover { border-color: var(--blue); }
.sf-field input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.sf-field select:focus-visible,
.sf-field textarea:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 0;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgb(0 0 126 / .18);
}
.sf-field [aria-invalid="true"] {
	border-color: var(--error) !important;
	border-width: 2px !important;
}

/* Errors */
.sf-error {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	margin: 0;
	color: var(--error);
	font-size: var(--step--1);
	font-weight: var(--w-bold);
	line-height: 1.4;
}
.sf-error .sf-icon,
.sf-error svg { flex: none; inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .1rem; }
.sf-field--error > label,
.sf-field--error > legend { color: var(--error); }

/* Radios and checkboxes: 22px controls in 44px+ rows */
.sf-choices {
	display: grid;
	gap: 0 1.5rem;
	min-inline-size: 0;
}
.sf-choice {
	display: grid;
	grid-template-columns: 1.375rem minmax(0, 1fr);
	column-gap: .75rem;
	align-items: start;
	min-block-size: 2.75rem;
}
.sf-choice input {
	grid-column: 1;
	inline-size: 1.375rem;
	block-size: 1.375rem;
	margin: .7rem 0 0;
	accent-color: var(--blue);
	cursor: pointer;
}
.sf-choice input:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
	box-shadow: none;
}
.sf-choice label {
	grid-column: 2;
	padding-block: .625rem;
	font-size: var(--step-0);
	line-height: 1.4;
	color: var(--ink);
	cursor: pointer;
	overflow-wrap: anywhere;
}
.sf-choice__hint {
	grid-column: 2;
	margin: -.375rem 0 .5rem;
	padding-inline-start: .75rem;
	border-inline-start: 3px solid var(--blue);
	font-size: var(--step--1);
	line-height: 1.45;
	color: var(--ink-2);
}
.sf-field--choice[aria-invalid="true"] .sf-choices,
.sf-field--error .sf-choices {
	padding-inline-start: .875rem;
	border-inline-start: 2px solid var(--error);
}

/* Contact / valuation tips that link the dedicated form */
.sf-tip {
	margin: .25rem 0 0;
	padding: .625rem .875rem;
	background: var(--ground-2);
	border-inline-start: 3px solid var(--blue);
	border-radius: 0 var(--r-xs) var(--r-xs) 0;
	font-size: var(--step--1);
	line-height: 1.45;
	color: var(--ink-2);
}
.sf-tip a { color: var(--blue); font-weight: var(--w-bold); text-decoration-color: currentColor; text-underline-offset: .22em; }

/* Photos */
.sf-file input[type="file"] {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	padding: .5rem;
	background: var(--white);
	border: 1px dashed var(--field-line);
	border-radius: var(--r-xs);
	color: var(--ink-2);
	font: inherit;
	font-size: var(--step--1);
	cursor: pointer;
}
.sf-file input[type="file"]:hover { border-color: var(--blue); }
.sf-file input[type="file"]:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 0;
	border-style: solid;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgb(0 0 126 / .18);
}
.sf-file input[type="file"]::file-selector-button {
	margin-inline-end: .875rem;
	min-block-size: 2.75rem;
	padding: .5rem 1.125rem;
	background: transparent;
	color: var(--blue);
	border: 1px solid var(--blue);
	border-radius: var(--r-xs);
	font: inherit;
	font-weight: var(--w-bold);
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sf-file input[type="file"]:hover::file-selector-button { background: var(--blue); color: var(--on-blue); }

.sf-files {
	display: grid;
	gap: .5rem;
	margin: .25rem 0 0;
	padding: 0;
	list-style: none;
}
.sf-file-item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	gap: .75rem;
	align-items: center;
	padding: .375rem .375rem .375rem .375rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-s);
}
.sf-file-item__thumb {
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	overflow: hidden;
	background: var(--ground-2);
	border-radius: var(--r-xs);
	color: var(--ink-3);
}
.sf-file-item__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sf-file-item__thumb svg { inline-size: 1.5rem; block-size: 1.5rem; }
.sf-file-item__meta { display: grid; min-inline-size: 0; line-height: 1.35; }
.sf-file-item__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--step--1);
	font-weight: var(--w-bold);
	color: var(--ink);
}
.sf-file-item__size { font-size: var(--step--2); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sf-file-item__remove {
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	padding: .5rem .875rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-xs);
	color: var(--blue);
	font: inherit;
	font-size: var(--step--1);
	font-weight: var(--w-bold);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: .22em;
	cursor: pointer;
}
.sf-file-item__remove:hover { text-decoration-thickness: 2px; }
.sf-file-item__remove:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Grouped fieldsets (house clearance quote). Narrow: a ruled heading, no box, so phones keep
   the full width for the fields. Wide: a panel (ground-2 on white, white inside the ground-2
   .form-panel the quote template provides). */
.sf-group {
	--sf-group-bg: var(--ground-2);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.form-panel .sf-group { --sf-group-bg: var(--white); }
.sf-group + .sf-group { margin-block-start: .75rem; }
.sf-group__title {
	float: left;
	inline-size: 100%;
	margin: 0 0 1.25rem;
	padding: 0 0 .625rem;
	border-block-end: 2px solid var(--blue);
	font: var(--w-bold) var(--step-2)/1.14 var(--font-sans);
	color: var(--ink);
	text-wrap: balance;
}
.sf-group__body { clear: both; display: grid; gap: 1.25rem; min-inline-size: 0; }

/* Actions -------------------------------------------------------------------------------- */
.sf-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	min-inline-size: 0;
}
.sf-actions > .sf-error,
.sf-actions > .sf-turnstile,
.sf-actions > noscript,
.sf-actions > .sf-noscript { grid-column: 1 / -1; }
.sf-turnstile {
	min-block-size: 0;
	max-inline-size: 100%;
	overflow: hidden;
	border-radius: var(--r-xs);
}
.sf-turnstile:focus { outline: none; }
.sf-turnstile:focus-visible { outline: 3px solid var(--c-focus, var(--blue)); outline-offset: 3px; }
.sf-turnstile iframe { max-inline-size: 100%; }
.sf-actions .sf-submit,
.sf-submit { inline-size: 100%; justify-content: center; }
.sf-submit[aria-disabled="true"] { opacity: .7; cursor: progress; }
.sf-notice {
	margin: 0;
	font-size: var(--step--1);
	line-height: 1.45;
	color: var(--ink-2);
	text-wrap: pretty;
}
.sf-notice a,
.sf-alt a,
.sf-noscript a {
	color: var(--blue);
	font-weight: var(--w-bold);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
}
.sf-notice a:hover,
.sf-alt a:hover,
.sf-noscript a:hover { text-decoration-thickness: 2px; }
.sf-alt a[href^="tel:"],
.sf-noscript a[href^="tel:"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-alt a[href^="mailto:"] { overflow-wrap: anywhere; }
.sf-noscript {
	margin: 0;
	padding: .75rem 1rem;
	background: var(--ground-2);
	border-inline-start: 4px solid var(--blue);
	border-radius: var(--r-xs);
	font-size: var(--step--1);
	color: var(--ink);
}
.sf-alt {
	margin-block-end: 0;
	margin-inline: 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--rule);
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-2);
	text-wrap: pretty;
}

/* Error summary (GOV.UK pattern) -------------------------------------------------------- */
.sf-summary {
	padding: 1.25rem 1.5rem;
	background: var(--error-bg);
	border: 2px solid var(--error);
	border-inline-start-width: 6px;
	border-radius: var(--r-s);
	color: var(--ink);
}
.sf-summary:focus { outline: 3px solid var(--blue); outline-offset: 3px; }
.sf-summary__title {
	margin: 0;
	font: var(--w-bold) var(--step-1)/1.3 var(--font-sans);
	color: var(--error);
}
.sf-summary__text { margin: .5rem 0 0; font-size: var(--step-0); }
.sf-summary__text a { color: var(--blue); font-weight: var(--w-bold); }
.sf-summary__list { margin: .5rem 0 0; padding-inline-start: 1.25rem; }
.sf-summary__list li + li { margin-block-start: .25rem; }
.sf-summary__list a {
	color: var(--error);
	font-weight: var(--w-bold);
	text-decoration: underline;
	text-underline-offset: .2em;
	overflow-wrap: anywhere;
}
.sf-summary__list a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Success panel ----------------------------------------------------------------------- */
.sf-done {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .25rem 1rem;
	align-items: start;
	padding: 1.5rem 1.75rem;
	background: var(--success-bg);
	border: 1px solid var(--rule);
	border-inline-start: 6px solid var(--success);
	border-radius: var(--r-s);
	color: var(--ink);
}
.sf-done > svg,
.sf-done > .sf-icon {
	inline-size: 1.75rem;
	block-size: 1.75rem;
	margin-block-start: .1rem;
	color: var(--success);
}
.sf-done:focus { outline: 3px solid var(--blue); outline-offset: 3px; }
.sf-done__title {
	margin: 0;
	font: var(--w-bold) var(--step-1)/1.3 var(--font-sans);
	color: var(--success);
}
.sf-done p { margin: .375rem 0 0; font-size: var(--step-0); text-wrap: pretty; }

/* Sale alerts: single field + button (DESIGN §4.30) ------------------------------------ */
.sf-form--inline { gap: .875rem; }
.sf-inline {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-end;
	min-inline-size: 0;
}
.sf-inline > .sf-field { flex: 1 1 14rem; }
.sf-inline > .btn { flex: 1 1 100%; min-block-size: 3.375rem; }
.sf--compact > .sf-form { margin-block-start: 0; }

/* Width-driven layout (container queries) --------------------------------------------- */
@container sf (min-width: 26rem) {
	.sf-inline > .btn { flex: 0 0 auto; }
	.sf-choices--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf (min-width: 32rem) {
	.sf-group {
		padding: clamp(1.25rem, 3cqi, 2rem);
		background: var(--sf-group-bg);
		border: 1px solid var(--rule);
		border-radius: var(--r-m);
	}
	.sf-group + .sf-group { margin-block-start: 0; }
	.sf-group__title { border-block-end-width: 1px; border-block-end-color: var(--rule); }
	.sf-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Side-by-side fields: keep the inputs level even when one has a hint, a two-line label or an error. */
	.sf-row--2 > .sf-field { align-content: end; }
	.sf-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-actions { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; }
	.sf-actions .sf-submit,
	.sf-submit { inline-size: auto; }
}
@container sf (min-width: 44rem) {
	.sf-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Browsers without container queries: viewport fallback (DESIGN §3.5 breakpoints). */
@supports not (container-type: inline-size) {
	@media (min-width: 480px) {
		.sf-inline > .btn { flex: 0 0 auto; }
	}
	@media (min-width: 640px) {
		.sf-row--2,
		.sf-choices--2,
		.sf-choices--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.sf-row--2 > .sf-field { align-content: end; }
		.sf-actions { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; }
		.sf-actions .sf-submit,
		.sf-submit { inline-size: auto; }
	}
}

/* Dark grounds (blue bands, footer block) --------------------------------------------- */
.sf--dark { color: var(--on-blue); }
.sf--dark .sf-title { color: var(--on-blue); }
.sf--dark .sf-intro,
.sf--dark .sf-hint,
.sf--dark .sf-opt,
.sf--dark .sf-notice,
.sf--dark .sf-alt { color: var(--on-blue-2); }
.sf--dark .sf-field > label,
.sf--dark .sf-field > legend,
.sf--dark .sf-choice label { color: var(--on-blue); }
.sf--dark .sf-error,
.sf--dark .sf-field--error > label,
.sf--dark .sf-field--error > legend { color: var(--error-on-blue); }
.sf--dark .sf-field [aria-invalid="true"] { border-color: var(--error-on-blue) !important; }
.sf--dark .sf-field input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.sf--dark .sf-field select:focus-visible,
.sf--dark .sf-field textarea:focus-visible { outline-color: var(--on-blue-2); border-color: var(--on-blue-2); }
.sf--dark .sf-choice input { accent-color: var(--on-blue-2); }
.sf--dark .sf-notice a,
.sf--dark .sf-alt a,
.sf--dark .sf-noscript a { color: var(--on-blue); text-decoration-color: var(--on-blue-2); }
.sf--dark .sf-noscript { background: rgb(255 255 255 / .06); border-inline-start-color: var(--on-blue-2); color: var(--on-blue); }
.sf--dark .sf-alt { border-block-start-color: var(--rule-blue); }
.sf--dark .sf-summary { background: rgb(255 180 171 / .08); border-color: var(--error-on-blue); color: var(--on-blue); }
.sf--dark .sf-summary__title,
.sf--dark .sf-summary__list a { color: var(--error-on-blue); }
.sf--dark .sf-summary:focus,
.sf--dark .sf-done:focus,
.sf--dark .sf-summary__list a:focus-visible,
.sf--dark .sf-choice input:focus-visible { outline-color: var(--on-blue-2); }
.sf--dark .sf-done { background: rgb(255 255 255 / .06); border-color: var(--rule-blue); border-inline-start-color: var(--on-blue-2); color: var(--on-blue); }
.sf--dark .sf-done__title,
.sf--dark .sf-done > svg { color: var(--on-blue); }

/* Motion, forced colours ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sf *,
	.sf *::file-selector-button { transition: none !important; }
}
@media (forced-colors: active) {
	.sf-summary,
	.sf-done,
	.sf-group,
	.sf-file-item { border: 2px solid CanvasText; }
	.sf-field select { background-image: none; padding-inline-end: 1rem; }
}

/* A form with its own heading dropped into block-editor prose gets section-like spacing. */
.prose > .sf:has(> .sf-title) { margin-block-start: var(--space-xl); }