/*!
 * Contact Form 7 defaults, corrected once for every form on the site.
 *
 * CF7 ships its own stylesheet (contact-form-7/includes/css/styles.css) and we do
 * not dequeue it, so its resets are live on every page that renders a form. Two
 * of them are wrong everywhere:
 *
 *   1. `.wpcf7-list-item { margin: 0 0 0 1em }` indents every checkbox/radio row
 *      ~14px past the fields above it while the row's text still runs to the
 *      right edge — the lopsided padding Raman flagged on the protocol survey
 *      (2026-08-13) and, before that, on the quiz gate.
 *   2. `[acceptance]` nests the checkbox and its label inside a plain <label>,
 *      which is not a flex container, so there is no gap between the box and the
 *      text at all. The design system puts 10px there.
 *
 * Plus one house rule: links inside a form are colour-highlighted, not
 * underlined (Raman, 2026-08-13).
 *
 * WHY THIS FILE AND NOT A PAGE STYLESHEET. Four templates render a CF7 form and
 * three of them had their own answer to the same two problems —
 * components/_rs-form.scss for book-call + the self-audit modal, pages/quiz-result.scss
 * for the gate, and .protocol-survey__privacy in main.scss, which never targeted
 * the CF7 markup at all and so never fixed either. This file is the one place
 * that reaches all four, and any form added later.
 *
 * SPECIFICITY IS DELIBERATELY LOW. Every selector here is the least specific
 * thing that can do the job, and the sheet is enqueued immediately after
 * rs-design-tokens — before every page stylesheet. A page that wants a different
 * checkbox size, colour or typography still wins without !important; only CF7's
 * own broken defaults lose.
 */

/* CF7's list-item indent. Nothing in the design system indents a consent row. */
.wpcf7-list-item {
	margin: 0;
}

/* The [acceptance] row: box and label on one line, 10px apart, label top-aligned
   so a two-line consent text still lines up with the box. Size, colour and font
   stay with whichever page stylesheet owns the form. */
.wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* Colour highlighting, not underlines. Hover keeps an underline as the pointer
   affordance — that is the pattern components/_rs-form.scss already uses for
   consent links. */
.wpcf7-form a {
	text-decoration: none;
}

.wpcf7-form a:hover,
.wpcf7-form a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * The response panel — success and error, for every form on the site.
 *
 * Ported from pages/book-call-survey.scss, where it was written for the
 * Diagnostic registration form (Figma 42387-12895) and scoped
 * `.book-call-survey form.wpcf7-form .wpcf7-response-output`. That scope is the
 * <main> wrapper class printed by exactly one template, so the design reached
 * exactly one of the site's eight CF7 forms; every other form kept CF7's stock
 * 2px blue/green/red/orange/yellow bordered box. De-scoped here, which is what
 * this file is for.
 *
 * The page-scoped copy is deliberately left in place rather than deleted: it
 * lives on an unmerged branch and carries identical values, so it simply wins on
 * that one page and nothing moves. Fold it away when that branch lands.
 *
 * SPECIFICITY. CF7's own sheet sets the box at `.wpcf7 form .wpcf7-response-output`
 * (0,2,1) and then a per-state border colour at `.wpcf7 form.sent|failed|invalid
 * ... .wpcf7-response-output` (0,3,1). So:
 *   - the base rule carries `form.wpcf7-form` to reach (0,2,1) and wins on order,
 *     because this sheet is enqueued after CF7's;
 *   - `border: 0 !important` is the one thing that cannot be done on specificity,
 *     since the state rules outrank the base at (0,3,1) — it kills all five
 *     colours at once instead of restating each;
 *   - the sent rule carries `form.wpcf7-form.sent` to reach (0,3,1) and again
 *     wins on order.
 * A page stylesheet still outranks all of this without !important.
 *
 * The icon is a real Font Awesome codepoint at weight 400. Subsetting strips FA's
 * per-icon rules, so `.fa-triangle-exclamation::before` would resolve to
 * `content: none` for an icon absent from the markup — but the Pro font files
 * load whole, so writing the codepoint directly works where relying on FA's own
 * rules would not.
 * ------------------------------------------------------------------------- */
form.wpcf7-form .wpcf7-response-output {
	position: relative;
	margin: 30px 0 0;
	/* left = 20 padding + 14 icon + 10 gap */
	padding: 12px 20px 12px 44px;
	border: 0 !important;
	border-radius: 4px;
	background-color: #fff4f3;
	color: #34383c;
	font-size: 0.875rem;
	line-height: 1.5;
}

form.wpcf7-form .wpcf7-response-output::before {
	content: "\f071"; /* triangle-exclamation */
	position: absolute;
	top: 50%;
	left: 20px;
	width: 14px;
	color: #f35b54;
	font-family: "Font Awesome 7 Pro", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400; /* regular, per Figma — not solid */
	line-height: 1;
	text-align: center;
	transform: translateY(-50%);
}

/* Success — same panel, teal fill and a check (Figma 42387-12895). */
form.wpcf7-form.sent .wpcf7-response-output {
	background-color: #f0f8f9;
}

form.wpcf7-form.sent .wpcf7-response-output::before {
	content: "\f00c"; /* check */
	color: #408897;
}