/**
 * cfsp-forms.css — the single source of truth for contact-form styling.
 *
 * THEME-AGNOSTIC. This plugin ships independently of any theme, so it must NOT
 * reference theme-specific design tokens (a slug like `--wp--preset--color--primary`
 * only exists if that exact theme defines it; on any other theme it resolves to
 * nothing and the form collapses). Instead this stylesheet:
 *
 *   1. INHERITS typography and text color from whatever theme is active
 *      (`font: inherit`, `color: inherit`, em-relative sizes).
 *   2. Derives structure colors from `currentColor` via `color-mix()` so
 *      hairlines/labels track the theme's own text color automatically.
 *   3. Exposes a small `--cfsp-*` Custom Property API with universal fallbacks.
 *      A theme can brand the forms by setting these (e.g. mapping them to its
 *      own palette) WITHOUT this file knowing anything about that theme. See the
 *      host theme's bridge stylesheet for an example.
 *
 * Loaded in BOTH the editor and the front end (CFSP_Styles) so the seeded form
 * looks identical in the CF7 preview and on the front end.
 *
 * The form-treatment presets are plain marker classes on the wrapper group:
 * `.themed-form` is Outlined by default; add `cfsp-form-filled` or
 * `cfsp-form-underline` to switch. Each only re-maps the `--cfsp-*` variables;
 * the field selectors never change.
 *
 * ── --cfsp-* API (set any of these on .themed-form / .cfsp-bespoke to brand) ──
 *   --cfsp-accent          focus ring + selected-state color   (default: currentColor)
 *   --cfsp-submit-bg       submit fill                          (default: transparent → outlined)
 *   --cfsp-submit-text     submit label color                   (default: inherit)
 *   --cfsp-submit-border   submit border color                  (default: var(--cfsp-accent))
 *   --cfsp-field-bg        field background                     (default: transparent)
 *   --cfsp-field-border    field border color                   (default: currentColor @ 24%)
 *   --cfsp-field-radius    field corner radius                  (default: 6px)
 */

/* ============================================================
   --cfsp-* contract (defaults = Outlined, fully theme-agnostic)
   ============================================================ */
.themed-form,
.cfsp-bespoke {
	--cfsp-accent: currentColor;
	--cfsp-field-bg: transparent;
	--cfsp-field-border: color-mix(in srgb, currentColor 24%, transparent);
	--cfsp-field-text: inherit;
	--cfsp-field-radius: 6px;
	--cfsp-field-pad-y: 0.7em;
	--cfsp-field-pad-x: 0.85em;
	--cfsp-label: color-mix(in srgb, currentColor 68%, transparent);
	--cfsp-muted: color-mix(in srgb, currentColor 60%, transparent);
	--cfsp-hairline: color-mix(in srgb, currentColor 16%, transparent);
	--cfsp-surface: color-mix(in srgb, currentColor 5%, transparent);
	/* Raised card/panel background (department cards, form card). Defaults to a
	   neutral tint; a theme maps it to its real surface (see the theme bridge). */
	--cfsp-card-bg: var(--cfsp-surface);
	--cfsp-gap: 1.15rem;
	--cfsp-row-gap: 0.75rem;
	--cfsp-submit-bg: transparent;
	--cfsp-submit-text: inherit;
	--cfsp-submit-border: var(--cfsp-accent);
	--cfsp-submit-radius: 6px;
	--cfsp-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

/* Form treatment: FILLED — inset fields, borderless at rest. */
.themed-form.cfsp-form-filled {
	--cfsp-field-bg: color-mix(in srgb, currentColor 6%, transparent);
	--cfsp-field-border: transparent;
}
.themed-form.cfsp-form-filled :is(input, textarea, select):focus {
	--cfsp-field-bg: transparent;
}

/* Form treatment: UNDERLINE — borderless underline fields, square submit. */
.themed-form.cfsp-form-underline {
	--cfsp-field-bg: transparent;
	--cfsp-field-radius: 0;
	--cfsp-field-pad-x: 0;
	--cfsp-submit-radius: 0;
}

/* Opt-in: halve the vertical field padding (tighter, shorter inputs). Scoped to
   a pattern's form wrapper so only that pattern is affected. The compound
   selector beats the base --cfsp-field-pad-y; inputs inherit the variable, so it
   applies in the editor preview and on the front end alike. */
.themed-form.cfsp-fields-tight-y {
	--cfsp-field-pad-y: 0.35em;
}

/* Opt-in: a maximally short form — zero vertical field padding and a low
   starting textarea height. Scoped to a pattern's form wrapper. */
.themed-form.cfsp-form-short {
	--cfsp-field-pad-y: 0;
}
.themed-form.cfsp-form-short textarea {
	height: 3.5em;
	min-height: 3.5em;
}

/* ============================================================
   Layout primitives (theme-agnostic spacing)
   ============================================================ */
.themed-form .cfsp-form-grid,
.cfsp-bespoke,
.cfsp-bespoke .cfsp-fields {
	display: flex;
	flex-direction: column;
	gap: var(--cfsp-gap);
}

.cfsp-row {
	display: grid;
	gap: var(--cfsp-row-gap);
}
.cfsp-row-2 { grid-template-columns: 1fr 1fr; }
.cfsp-row-1 { grid-template-columns: 1fr; }

@media (max-width: 600px) {
	.cfsp-row-2 { grid-template-columns: 1fr; }
}

.cfsp-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.cfsp-field-label {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--cfsp-label);
}

/* Placeholder-only forms (e.g. the hotel + hospitality enquiry cards): the
   field placeholders carry the meaning, so the visible label is suppressed —
   kept in the DOM and screen-reader accessible, just visually hidden. */
.cfsp-hide-labels .cfsp-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.cfsp-microlabel {
	font-family: var(--cfsp-mono);
	font-size: 0.75em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cfsp-muted);
}

.cfsp-form-heading {
	font-size: 1.05em;
	font-weight: 600;
	margin: 0;
}

.cfsp-note {
	font-size: 0.8em;
	color: var(--cfsp-muted);
	margin: 0;
	line-height: 1.5;
}
.cfsp-note strong { color: inherit; font-weight: 700; }

/* ============================================================
   Native field styling (element + attribute selectors)
   ============================================================ */
.themed-form :where(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="date"],
		input[type="number"],
		input[type="url"],
		input[type="search"],
		textarea,
		select
	),
.cfsp-bespoke :where(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="date"],
		input[type="number"],
		input[type="url"],
		textarea,
		select
	) {
	width: 100%;
	box-sizing: border-box;
	background: var(--cfsp-field-bg);
	color: var(--cfsp-field-text);
	border: 1px solid var(--cfsp-field-border);
	border-radius: var(--cfsp-field-radius);
	padding: var(--cfsp-field-pad-y) var(--cfsp-field-pad-x);
	font: inherit;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Underline treatment → bottom rule only. */
.themed-form.cfsp-form-underline :where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="url"], textarea, select) {
	border-width: 0 0 1px 0;
}

.themed-form :where(input, textarea, select):focus,
.cfsp-bespoke :where(input, textarea, select):focus {
	outline: none;
	border-color: var(--cfsp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfsp-accent) 18%, transparent);
}
.themed-form.cfsp-form-underline :where(input, textarea, select):focus {
	box-shadow: 0 1px 0 0 var(--cfsp-accent);
}

.themed-form textarea,
.cfsp-bespoke textarea {
	height: 6.5em;
	min-height: 6.5em;
	resize: vertical;
}

.themed-form ::placeholder,
.cfsp-bespoke ::placeholder {
	color: var(--cfsp-muted);
	opacity: 1;
}

/* Opt-in: pin the placeholder text to a fixed 1rem. Scoped to a pattern's form
   wrapper so only that pattern is affected (placeholders otherwise inherit the
   field's em-based size). */
.themed-form.cfsp-placeholder-1rem ::placeholder {
	font-size: 1rem;
}

/* Native select chevron drawn from currentColor (no image, no token). */
.themed-form select,
.cfsp-bespoke select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.1em) center, calc(100% - 0.75em) center;
	background-size: 0.36em 0.36em, 0.36em 0.36em;
	background-repeat: no-repeat;
	padding-right: 2.4em;
}

/* ============================================================
   Submit button (CF7 renders <input type="submit">)
   Default = outlined (legible on ANY theme without contrast guesses);
   a theme sets --cfsp-submit-bg/-text to make it a filled brand button.
   ============================================================ */
.themed-form input[type="submit"],
.cfsp-bespoke input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cfsp-submit-bg);
	color: var(--cfsp-submit-text);
	border: 1px solid var(--cfsp-submit-border);
	border-radius: var(--cfsp-submit-radius);
	padding: 0.7em 1.5em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.themed-form input[type="submit"]:hover,
.cfsp-bespoke input[type="submit"]:hover {
	filter: brightness(0.95);
	background: color-mix(in srgb, var(--cfsp-accent) 12%, var(--cfsp-submit-bg, transparent));
}
.cfsp-actions { margin: 0; }

/* Opt-in: full-width submit button. Scoped to a pattern's form wrapper; the
   label stays centered (justify-content from the base rule still applies). */
.themed-form.cfsp-submit-block input[type="submit"] {
	display: flex;
	width: 100%;
}

/* CF7 wrapper resets so our layout owns spacing. */
.themed-form .wpcf7,
.cfsp-bespoke .wpcf7 { margin: 0; }
.themed-form .wpcf7-form-control-wrap,
.cfsp-bespoke .wpcf7-form-control-wrap { display: block; }
.wpcf7 .wpcf7-response-output {
	margin: 0.9em 0 0;
	padding: 0.7em 0.9em;
	border-radius: var(--cfsp-field-radius, 6px);
	font-size: 0.875em;
}

/* ============================================================
   Bespoke: radio rendered as a SELECTOR
   ============================================================ */
.cfsp-selector { border: 0; margin: 0; padding: 0; }
.cfsp-selector .wpcf7-form-control-wrap { display: block; }
.cfsp-selector input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.cfsp-selector .wpcf7-radio { display: flex; gap: var(--cfsp-row-gap); }
.cfsp-selector .wpcf7-list-item { margin: 0; }
.cfsp-selector .wpcf7-list-item > label {
	display: flex;
	cursor: pointer;
}

/* Healthcare: department cards on the left, fields on the right (one form). */
.cfsp-healthcare {
	display: grid;
	grid-template-columns: minmax(0, 340px) 1fr;
	gap: 2.25rem;
	align-items: start;
}
.cfsp-healthcare .cfsp-dept-col {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
@media (max-width: 781px) {
	.cfsp-healthcare { grid-template-columns: 1fr; }
}

/* The department cards and the fields panel are raised WHITE paper panels —
   pinned to #fff so they read as white on any theme (the compound selector also
   beats the bridge's palette-surface mapping). Inputs sit on the white card as a
   subtle filled tint; hairlines + accent (radio/submit) colors stay theme-driven. */
.cfsp-healthcare {
	--cfsp-field-bg: color-mix(in srgb, currentColor 6%, transparent);
	--cfsp-field-border: transparent;
}
.cfsp-bespoke.cfsp-healthcare {
	--cfsp-card-bg: #ffffff;
}
.cfsp-healthcare .cfsp-fields {
	background: var(--cfsp-card-bg);
	border: 1px solid var(--cfsp-hairline);
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Cards (healthcare department selector) --- */
.cfsp-dept-cards .wpcf7-radio { flex-direction: column; }
.cfsp-dept-cards .wpcf7-list-item > label {
	align-items: center;
	gap: 0.75rem;
	background: var(--cfsp-card-bg);
	border: 1px solid var(--cfsp-hairline);
	border-radius: 14px;
	padding: 1rem;
	font-weight: 600;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cfsp-dept-cards .wpcf7-list-item > label::before {
	content: "";
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--cfsp-accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--cfsp-accent) 30%, transparent);
}
.cfsp-dept-cards .wpcf7-list-item-label { flex: 1 1 auto; }
.cfsp-dept-cards .wpcf7-list-item > label::after {
	content: "";
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 999px;
	border: 2px solid var(--cfsp-hairline);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.cfsp-dept-cards .wpcf7-list-item:has(input:checked) > label {
	border-color: var(--cfsp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfsp-accent) 14%, transparent);
}
.cfsp-dept-cards .wpcf7-list-item:has(input:checked) > label::after {
	border-color: var(--cfsp-accent);
	background: var(--cfsp-accent);
	box-shadow: inset 0 0 0 0.28em color-mix(in srgb, var(--cfsp-accent) 22%, transparent);
}

/* --- Tabs (coworking) & Pills (nonprofit) --- */
/* Inputs read as a faint tint fill so they separate from a panel behind them. */
.cfsp-coworking { --cfsp-field-bg: color-mix(in srgb, currentColor 5%, transparent); }

.cfsp-tabs .wpcf7-radio,
.cfsp-pills .wpcf7-radio { flex-wrap: wrap; }
.cfsp-tabs .wpcf7-list-item > label,
.cfsp-pills .wpcf7-list-item > label {
	align-items: center;
	gap: 0.4em;
	background: var(--cfsp-surface);
	border: 1px solid var(--cfsp-field-border);
	border-radius: 999px;
	padding: 0.4em 0.9em;
	color: var(--cfsp-muted);
	font-size: 0.9em;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cfsp-tabs .wpcf7-list-item > label::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 999px;
	background: var(--cfsp-field-border);
	transition: background-color 0.15s ease;
}
/* Selected state: brand border + tint + full opacity (no inverted-fill, so it
   stays legible on any theme without a contrast color to pair). */
.cfsp-tabs .wpcf7-list-item:has(input:checked) > label,
.cfsp-pills .wpcf7-list-item:has(input:checked) > label {
	border-color: var(--cfsp-accent);
	background: color-mix(in srgb, var(--cfsp-accent) 12%, transparent);
	color: var(--cfsp-field-text);
	font-weight: 600;
}
.cfsp-tabs .wpcf7-list-item:has(input:checked) > label::before {
	background: var(--cfsp-accent);
}

/* --- Inline sentence (conversational fill-in-the-blank) --- */
.cfsp-conversational .cfsp-sentence {
	font-size: 1.35em;
	line-height: 1.8;
	margin: 0;
}
.cfsp-conversational .cfsp-sentence .wpcf7-form-control-wrap { display: inline; }
.cfsp-conversational .cfsp-sentence :where(input, select) {
	display: inline;
	width: auto;
	min-width: 9ch;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cfsp-field-border);
	border-radius: 0;
	padding: 0 0.3em;
	font: inherit;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--cfsp-accent);
}
.cfsp-conversational .cfsp-sentence select {
	background-image: none;
	padding-right: 0.3em;
}
.cfsp-conversational .cfsp-sentence :where(input, select):focus {
	outline: none;
	border-bottom-color: var(--cfsp-accent);
	box-shadow: 0 1px 0 0 var(--cfsp-accent);
}
.cfsp-conversational .cfsp-context {
	border-top: 1px solid var(--cfsp-hairline);
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}
.cfsp-conversational .cfsp-context textarea {
	background: transparent;
	border: 0;
}
/* Borderless context note: its focus must read as the bottom only, not the
   all-sides ring the generic bespoke :focus rule would otherwise apply. */
.cfsp-conversational .cfsp-context textarea:focus {
	box-shadow: 0 1px 0 0 var(--cfsp-accent);
}

/* Action rows that pair a note beside / under the submit. */
.cfsp-action-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Multistep add-on chrome (only meaningful when the add-on is active). */
.cfsp-multistep .cfsp-step { display: flex; flex-direction: column; gap: var(--cfsp-gap); }