/* =============================================================================
   Quote request card + the ii-forms contact form (Contact #message, Corporate #quote).
   Visual reference: Claude Design QuoteForm.dc.html + FormSelect.dc.html + DS Field/Input.
   The form markup belongs to the form engine (wherespinky-core modules/ii-forms); the theme styles it
   ONLY through its shipped .ii-nc-form* classes and attributes (ii-forms 0.1.1, module README):
     field states  [aria-invalid="true"] on the control, .ii-nc-form__error text (empty when valid)
     conditionals  .ii-nc-form__field[data-show-when-field][hidden] (also disabled)
     root states   .ii-nc-form.is-sending (post in flight, submit [disabled] + relabelled),
                   .has-errors (summary showing), .has-failed (failure line showing),
                   .is-done (success panel has replaced the form)
     summary       .ii-nc-form__summary[hidden] > __summary-title + ul.__summary-list > li > a
     consent       p.ii-nc-form__consent, inside the form; copy and link from the definition
     failure       .ii-nc-form__failure[hidden] (role=alert) > strong.__failure-lead + text + <a>: server or network
     status        .ii-nc-form__status (role=status, aria-live): "Sending…" or a non-field failure
     success       .ii-nc-form__success[hidden] (a sibling of the form) > h3.__success-heading + button.__again
   The module scrolls to the section first and only then swaps the form for the success panel, so the
   panel's entrance below is the only motion. v0's data-nc-done is set BEFORE that scroll; the card uses it
   (below) and nothing else does. The sticky header is cleared with scroll-margin-top on every target.
   ============================================================================= */

/* ---- The card --------------------------------------------------------------- */
.wsp-quote-card {
	min-width: 0; background: var(--c-white); border: 3px solid var(--c-navy); box-shadow: var(--sh-xl);
	padding: var(--s-8) var(--s-8) var(--s-10);
}
.wsp-quote-card-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--wp--custom--lh--tight); color: var(--c-navy); margin: 0; }
.wsp-quote-card-note { font-size: var(--fs-sm); color: var(--c-muted); margin: var(--s-1) 0 var(--s-6); }
/* After a successful send the card holds only the thank-you, as the design's success state. Keyed to
   data-nc-done, which the engine sets just BEFORE it measures and scrolls: the title and note go as the
   scroll starts, so nothing above the form moves once the page has settled. */
.wsp-quote-card:has(form[data-nc-done="1"]) :is(.wsp-quote-card-title, .wsp-quote-card-note) { display: none; }
@media (max-width: 899px) {
	.wsp-quote-card { padding: var(--s-8) var(--wp--custom--gap--grid) var(--s-8); }
}
@media (max-width: 640px) {
	.wsp-quote-card { padding: var(--s-6) var(--s-4) var(--s-8); box-shadow: var(--wp--custom--shadow--card); }
}

/* ---- Layout: two columns, full rows where the design spans ------------------ */
.ii-nc-form__form {
	--wsp-form-row-gap: var(--s-5);
	position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5);
}
/* Scroll targets: the form's own top on a phone (the section is too tall), the summary on an error. */
.ii-nc-form { scroll-margin-top: var(--s-24); }
/* The engine hides the form (and the summary and panel) with [hidden]; a display rule here must not undo it. */
.ii-nc-form [hidden] { display: none; }
/* Row spacing is each field's bottom margin, not the grid gap, so a collapsed conditional field adds nothing. */
.ii-nc-form__field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; margin-bottom: var(--wsp-form-row-gap); }
.ii-nc-form__field:is([data-field="city"], [data-field="your_city"], [data-field="event_type"], [data-field="other_event_type"], [data-field="venue"], [data-field="details"]),
.ii-nc-form__summary, .ii-nc-form__consent, .ii-nc-form__failure, .ii-nc-form__status, .ii-nc-form__submit { grid-column: 1 / -1; }
.ii-nc-form__failure, .ii-nc-form__status { order: 1; }
.ii-nc-form__submit { order: 2; justify-self: start; }
/* Paired fields line up (Ben, 20 Oct, prompt 18): in a two-up row, a label that wraps ("Group size (estimated is
   fine) *") no longer drops its input below its neighbour's. Each field shares three rows with its neighbour (label,
   control, error) through subgrid, so labels top-align, the inputs sit on one line, and an error under one field
   doesn't push the other field's input. The label → control → error spacing is margins, as the flex gap was (s-2).
   Two-up rows only (641 up); conditional fields keep their own expand/collapse box; phones are one column, unchanged. */
@media (min-width: 641px) {
	.ii-nc-form__field:not([data-show-when-field]) { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
	.ii-nc-form__field:not([data-show-when-field]) > .ii-nc-form__label { margin-bottom: var(--s-2); }
	.ii-nc-form__field:not([data-show-when-field]) > .ii-nc-form__control { align-self: start; }
	.ii-nc-form__field:not([data-show-when-field]) > .ii-nc-form__error { margin-top: var(--s-2); }
}
@media (max-width: 640px) {
	.ii-nc-form__form { --wsp-form-row-gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
	.ii-nc-form__submit { justify-self: stretch; }
}

/* ---- Field: label, control, inline error (DS Field + Input) ----------------- */
.ii-nc-form__label {
	font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button);
	text-transform: uppercase; color: var(--c-navy);
}
.ii-nc-form__required { color: var(--c-pink-text); }
.ii-nc-form__control {
	width: 100%; max-width: 100%; min-width: 0; min-height: 44px; margin: 0;
	font-family: var(--f-body); font-size: var(--fs-md); line-height: var(--wp--custom--lh--normal); color: var(--c-ink);
	background-color: var(--c-cream); border: 2px solid var(--c-navy); border-radius: var(--wp--custom--radius--none);
	padding: var(--s-3) var(--s-4); outline: none;
	transition: border-color var(--m-fast) var(--e-std), box-shadow var(--m-fast) var(--e-std), background-color var(--m-fast) var(--e-std);
}
.ii-nc-form__control::placeholder { color: var(--c-muted); opacity: 1; }
textarea.ii-nc-form__control { resize: vertical; line-height: var(--wp--custom--lh--body); }
/* Focus: pink border plus the brand's hard pink offset (the DS soft ring has no token; see report). */
.ii-nc-form__control:focus-visible, .ii-nc-form__control:focus { border-color: var(--c-pink); box-shadow: var(--wp--custom--shadow--pink-sm); }
.ii-nc-form__control[aria-invalid="true"] { border-color: var(--c-pink); }
@media (max-width: 640px) { .ii-nc-form__control { min-height: 48px; } }

/* Preferred Date & Time: the native datetime-local, dressed as the other inputs. iOS draws an empty one
   with no height and centres its value; the min-height above and a left-aligned value keep it in line. */
input[type="datetime-local"].ii-nc-form__control { appearance: none; -webkit-appearance: none; display: block; text-align: left; }
input[type="datetime-local"].ii-nc-form__control::-webkit-date-and-time-value { text-align: left; }
input[type="datetime-local"].ii-nc-form__control::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; transition: opacity var(--m-fast) var(--e-std); }
input[type="datetime-local"].ii-nc-form__control::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Native select, dressed as FormSelect: cream fill, navy caret; "Select…" in the muted placeholder colour. */
select.ii-nc-form__control {
	appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--s-10);
	background-image: linear-gradient(45deg, transparent 50%, var(--c-navy) 50%), linear-gradient(135deg, var(--c-navy) 50%, transparent 50%);
	background-position: right 20px center, right 15px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select.ii-nc-form__control:has(option[value=""]:checked) { color: var(--c-muted); }
select.ii-nc-form__control option { color: var(--c-ink); background-color: var(--c-white); }

/* Inline error: empty until the engine sets it; then it fades in under the field. */
.ii-nc-form__error { margin: 0; font-family: var(--f-body); font-weight: 600; font-size: var(--fs-sm); line-height: 1.4; color: var(--c-pink-text); }
.ii-nc-form__error:empty { display: none; }
.ii-nc-form__error:not(:empty) { animation: wsp-form-in var(--m-base) var(--e-enter) both; }

/* ---- Conditional fields expand and collapse (never pop) ---------------------- */
/* The engine toggles [hidden] (and disables the control). The theme keeps the field laid out and collapses
   its height and bottom margin to 0, so revealing it is an expansion, not an appearance. */
.ii-nc-form__field[data-show-when-field] {
	overflow: clip; overflow-clip-margin: var(--wp--custom--focus--width);
	transition: max-height var(--m-base) var(--e-std), margin-bottom var(--m-base) var(--e-std),
		opacity var(--m-base) var(--e-enter), visibility var(--m-base) var(--e-std);
	max-height: calc(var(--s-24) * 2);
}
.ii-nc-form__field[data-show-when-field][hidden] {
	display: flex; max-height: 0; margin-bottom: 0; opacity: 0; visibility: hidden;
	transition: max-height var(--m-base) var(--e-std), margin-bottom var(--m-base) var(--e-std),
		opacity var(--m-fast) var(--e-exit), visibility var(--m-base) var(--e-std);
}
/* Where height can animate to auto, use it: the expansion then tracks the field's real height. */
@supports (interpolate-size: allow-keywords) {
	.ii-nc-form__field[data-show-when-field] {
		interpolate-size: allow-keywords; max-height: none; height: auto;
		transition: height var(--m-base) var(--e-std), margin-bottom var(--m-base) var(--e-std),
			opacity var(--m-base) var(--e-enter), visibility var(--m-base) var(--e-std);
	}
	.ii-nc-form__field[data-show-when-field][hidden] {
		max-height: none; height: 0;
		transition: height var(--m-base) var(--e-std), margin-bottom var(--m-base) var(--e-std),
			opacity var(--m-fast) var(--e-exit), visibility var(--m-base) var(--e-std);
	}
}

/* ---- Submit (Button primary, lg) --------------------------------------------- */
.ii-nc-form__submit {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 52px; margin: 0;
	font-family: var(--f-label); font-size: var(--fs-md); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; white-space: nowrap;
	background-color: var(--c-pink); color: var(--c-white); border: 3px solid var(--c-navy); border-radius: var(--wp--custom--radius--none);
	box-shadow: var(--sh-lg); padding: var(--s-5) var(--s-10); cursor: pointer;
	transition: transform var(--m-fast) var(--e-std), box-shadow var(--m-fast) var(--e-std), opacity var(--m-base) var(--e-std);
}
.ii-nc-form__submit:hover { transform: var(--lift); box-shadow: var(--wp--custom--shadow--navy-7); }
/* Sending: the engine disables and relabels the button ("Sending…"); it settles and dims, no lift. */
.ii-nc-form.is-sending .ii-nc-form__submit, .ii-nc-form__submit:disabled { opacity: 0.7; cursor: progress; transform: none; box-shadow: var(--sh-lg); }
@media (max-width: 640px) { .ii-nc-form__submit { white-space: normal; } }

/* ---- Consent line: inside the form, between the fields and the submit (QuoteForm.dc.html) ---- */
.ii-nc-form__consent { margin: 0 0 var(--s-5); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-muted); }
.ii-nc-form__consent a { color: var(--c-pink-text); border-bottom: 1px solid var(--c-pink); transition: color var(--m-fast) var(--e-std); }
.ii-nc-form__consent a:hover { color: var(--c-navy); }

/* ---- Error summary: the design's pink box at the top of the form; fades in -------------------- */
.ii-nc-form__summary {
	margin: 0 0 var(--s-6); padding: var(--s-3) var(--s-4); font-size: var(--fs-button); line-height: 1.5; color: var(--c-ink);
	background-color: var(--c-white); border: 2px solid var(--c-pink); box-shadow: var(--wp--custom--shadow--pink-md);
	scroll-margin-top: var(--s-24); outline: none;
}
.ii-nc-form__summary:not([hidden]) { animation: wsp-form-in var(--m-base) var(--e-enter) both; }
.ii-nc-form__summary-title { margin: 0; font-weight: 700; color: var(--c-pink-text); }
.ii-nc-form__summary-list { margin: var(--s-2) 0 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.ii-nc-form__summary-list a { color: var(--c-navy); font-weight: 700; border-bottom: 1px solid var(--c-navy); transition: color var(--m-fast) var(--e-std), border-color var(--m-fast) var(--e-std); }
.ii-nc-form__summary-list a:hover { color: var(--c-pink-text); border-bottom-color: var(--c-pink); }

/* ---- Status: a non-field failure in the design's sand box; "Sending…" is for screen readers only
   (the button already says it) ------------------------------------------------------------------ */
.ii-nc-form__status:empty { display: none; }
.ii-nc-form__status:not(:empty) {
	margin: 0 0 var(--wsp-form-row-gap); padding: var(--s-3) var(--s-4); font-size: var(--fs-button); line-height: 1.5; color: var(--c-ink);
	background-color: var(--c-sand); border: 2px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--pink-md);
	animation: wsp-form-in var(--m-base) var(--e-enter) both;
}
.ii-nc-form.is-sending .ii-nc-form__status {
	position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; animation: none;
}

/* ---- Failure line: the server or the network failed (nothing the visitor can fix). The design's sand
   box with the bold navy lead, between the consent line and the submit; fades in, never pops. ---------- */
.ii-nc-form__failure {
	margin: 0 0 var(--wsp-form-row-gap); padding: var(--s-3) var(--s-4); font-size: var(--fs-button); line-height: 1.5; color: var(--c-ink);
	background-color: var(--c-sand); border: 2px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--pink-md);
}
.ii-nc-form.has-failed .ii-nc-form__failure:not([hidden]) { animation: wsp-form-in var(--m-base) var(--e-enter) both; }
.ii-nc-form__failure-lead { color: var(--c-navy); }
.ii-nc-form__failure a { color: var(--c-pink-text); font-weight: 700; border-bottom: 1px solid var(--c-pink); transition: color var(--m-fast) var(--e-std); }
.ii-nc-form__failure a:hover { color: var(--c-navy); }

/* ---- Success panel: replaces the form once the page has stopped scrolling; fades and rises in ---- */
.ii-nc-form__success { text-align: center; padding: var(--s-12) var(--s-3); scroll-margin-top: var(--s-24); }
.ii-nc-form__success:not([hidden]) { animation: wsp-form-panel-in var(--m-slow) var(--e-enter) both; }
.ii-nc-form__success::before {
	content: "★"; display: block; margin-bottom: var(--s-5); font-size: var(--fs-2xl); line-height: 1; color: var(--c-pink);
}
.ii-nc-form__success-heading {
	margin: 0 0 var(--s-6); text-wrap: balance; outline: none;
	font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.3; color: var(--c-navy);
}
/* "Send another": Button secondary, md. */
.ii-nc-form__again {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 44px; margin: 0;
	font-family: var(--f-label); font-size: var(--fs-button); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; white-space: nowrap;
	background-color: var(--c-cream); color: var(--c-navy); border: 3px solid var(--c-navy); border-radius: var(--wp--custom--radius--none);
	box-shadow: var(--sh-lg); padding: var(--s-4) var(--s-8); cursor: pointer;
	transition: transform var(--m-fast) var(--e-std), box-shadow var(--m-fast) var(--e-std);
}
.ii-nc-form__again:hover { transform: var(--lift); box-shadow: var(--wp--custom--shadow--navy-7); }

@keyframes wsp-form-in {
	from { opacity: 0; transform: translateY(calc(-1 * var(--s-1))); }
	to { opacity: 1; transform: none; }
}
@keyframes wsp-form-panel-in {
	from { opacity: 0; transform: translateY(var(--s-4)); }
	to { opacity: 1; transform: none; }
}
/* Reduced motion: messages appear at once (the entrance rises 4px, which is movement). */
@media (prefers-reduced-motion: reduce) {
	.ii-nc-form__error:not(:empty), .ii-nc-form__status:not(:empty),
	.ii-nc-form__summary:not([hidden]), .ii-nc-form__success:not([hidden]), .ii-nc-form__failure:not([hidden]) { animation: none !important; }
}