/* ===================================================================
 * donation-form.css — TEC donation form (Gravity Forms 2.9 / Orbital)
 * Loaded conditionally by functions.php when post_content embeds form 29.
 * Tokens consumed: --wp--preset--color--*, --wp--preset--font-family--*,
 * --wp--preset--font-size--*, --wp--preset--spacing--*, --tec-bp-sm.
 * No raw hex / px outside breakpoint media queries. Logical properties
 * only. No !important — specificity beats Gravity Forms defaults.
 * =================================================================== */

/* === Container === */
.gform_wrapper.tec-donation-form_wrapper,
.gform_wrapper[id*="gform_wrapper_29"] {
	font-family: var(--wp--preset--font-family--sans-body);
	color: var(--wp--preset--color--navy);
	max-width: var(--tec-width-prose);
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* === Field block: spacing rhythm === */
.gform_wrapper.tec-donation-form_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.gform_wrapper.tec-donation-form_wrapper .gfield {
	margin-block: 0;
}

/* === Labels ===
 * Default label style for non-boxed fields (radio pills, checkboxes, sections,
 * Stripe element, and the legend on complex name/address fields). Each label
 * here is a question heading — "Where would you like your gift to go?",
 * "How often?", "How much?", "Your details", "How would you like to pay?" —
 * so the typographic register is H3-equivalent: serif-heading family,
 * --large size (1.4375rem), weight 700. Matches the visual weight of an H3
 * elsewhere on the site so the form's section structure reads at the same
 * level as page sub-sections. Per Alfonso 2026-05-02.
 *
 * Specificity note: Gravity Forms 2.9 ships
 *   .gform-theme--framework .gform-field-label:where(:not(...))
 * in gravity-forms-theme-framework.min.css. The `:where()` wrapper
 * contributes 0, so that selector is (0,2,0). Every label on the form
 * carries both `.gfield_label` (legacy) and `.gform-field-label` (GF 2.9),
 * and the GF rule sets every typography property to `var(--gf-local-*)`,
 * which the orbital theme paints at sans-body / 14px / 500. A naive
 * `.gform_wrapper .gfield_label` rule is also (0,2,0) and loses on
 * source order — the GF framework sheet enqueues after ours. Mirror
 * GF's wrapper class chain (`.gform-theme.gform-theme--framework`) plus
 * `.gform_fields .gfield .gfield_label` to land at (0,6,0), which beats
 * GF by four classes without `!important`. Same pattern as the submit
 * button cascade fix below. Per Alfonso 2026-05-02 (cascade fix #2).
 *
 * The inside-label / gift-aid / amount-other / gsection / error-state
 * exclusions further down had to be re-bumped in the same pass: each now
 * mirrors this base chain plus its own `.gfield--type-*` or `.tec-*`
 * differentiator, landing at (0,7,0) so it beats this base rule by one
 * class. Without that bump the H3 upgrade would leak into the inside-box
 * labels and the gift-aid inline label. Verified by the cascade probe at
 * scripts/audit/probe-donation-labels-cascade.js. */
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_fields .gfield .gfield_label {
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
	margin-block-start: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--30);
	display: block;
}

.gform_wrapper.tec-donation-form_wrapper .gfield_required {
	color: var(--wp--preset--color--accent-yellow);
	margin-inline-start: 0.25rem;
}

.gform_wrapper.tec-donation-form_wrapper .gfield_description {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-low-emphasis);
	margin-block-start: var(--wp--preset--spacing--20);
	line-height: 1.5;
}

/* === Section break === */
.gform_wrapper.tec-donation-form_wrapper .gsection {
	border-block-start: 1px solid var(--wp--preset--color--ink-divider);
	padding-block-start: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--30);
}
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_fields .gsection .gfield_label {
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: 0;
}

/* === Inside-label "filled" input boxes ===
 * Stripe-checkout / Material "filled" pattern: label sits inside the input's
 * visual container (top-left, small + muted), input value appears below.
 * Solves Alfonso 2026-05-02 readability issue where above-input labels were
 * ambiguous in the form's vertical flow.
 *
 * Two structural cases:
 *   (a) Simple field — .gfield is the box, child <label> at top, child <input>
 *       inside .ginput_container is the unstyled text-entry area.
 *       Targets: gfield--type-text, gfield--type-email.
 *   (b) Complex field — .gfield is a <fieldset> wrapping multiple inputs;
 *       the box is each .ginput_complex > <span> child. The legend acts as
 *       a section heading above the boxes; each span gets its own box with
 *       its sub-<label> hoisted above the input via column-reverse (GF
 *       renders the sub-label after the input by default).
 *       Targets: gfield--type-name, gfield--type-address.
 *
 * Excluded: pill controls (radio), checkboxes (Gift Aid), Stripe Element
 * (already its own bordered box), submit button, total (invisible),
 * tec-amount-other (lives inside .tec-amount-grid pill row, has £ prefix
 * pseudo and no rendered label — keeping its current treatment).
 */

/* (a) Simple inside-label box: the .gfield itself is the visible input box. */
.gform_wrapper.tec-donation-form_wrapper .gfield--type-text,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-email {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink-divider);
	border-radius: var(--wp--custom--card--border--radius, 5px);
	padding-block: 0.5rem;
	padding-inline: 0.75rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* The label becomes the small muted "eyebrow" inside the box.
 * Specificity must beat the base H3-upgrade rule above (0,5,0). Mirroring
 * the same wrapper chain (`.gform-theme.gform-theme--framework`) plus the
 * `.gfield--type-*` modifier puts this at (0,6,0) — one class higher than
 * the base, so the eyebrow style wins on this field type while every
 * other field type inherits the H3 base. Same pattern below for the
 * complex name/address sub-spans wrap and the gift-aid / amount-other
 * exclusions. */
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_fields .gfield.gfield--type-text > .gfield_label,
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_fields .gfield.gfield--type-email > .gfield_label {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--ink-low-emphasis);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-block: 0;
	line-height: 1.2;
}

/* The input is now the text-entry area; the parent box owns the chrome.
 * The orbital theme applies box-shadow + min-height to inputs by default —
 * neutralised here so the input sits flush inside our box. */
.gform_wrapper.tec-donation-form_wrapper .gfield--type-text .ginput_container input[type="text"],
.gform_wrapper.tec-donation-form_wrapper .gfield--type-text .ginput_container input[type="tel"],
.gform_wrapper.tec-donation-form_wrapper .gfield--type-email .ginput_container input[type="email"] {
	width: 100%;
	display: block;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
	background: transparent;
	border: 0;
	outline: 0;
	box-shadow: none;
	min-height: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* Focus: lift the parent box's border to the accent ring. */
.gform_wrapper.tec-donation-form_wrapper .gfield--type-text:focus-within,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-email:focus-within {
	border-color: var(--wp--preset--color--accent-yellow);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-yellow);
}

/* Description sits outside the box, below it (default GF position). */
.gform_wrapper.tec-donation-form_wrapper .gfield--type-text > .gfield_description,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-email > .gfield_description {
	margin-block-start: var(--wp--preset--spacing--20);
	padding-inline: 0.75rem;
}

/* (b) Complex inside-label box: each sub-input span is its own box.
 * The legend ("Your details") inherits the base .gfield_label H3 register —
 * serif-heading + --large + 700 — set above. No typography override here;
 * we only confirm it renders as a block. The base's margin-block-end
 * (--spacing--30) governs the gap to the boxed sub-inputs below. */
.gform_wrapper.tec-donation-form_wrapper .gfield--type-name > .gfield_label,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-address > .gfield_label {
	display: block;
}

.gform_wrapper.tec-donation-form_wrapper .gfield--type-name .ginput_complex,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-address .ginput_complex {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--20);
}

.gform_wrapper.tec-donation-form_wrapper .gfield--type-name .ginput_complex > span,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-address .ginput_complex > span {
	/* Each span becomes a labelled box. column-reverse hoists the GF sub-label
	 * (rendered after the input in source) to the visual top of the box. */
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink-divider);
	border-radius: var(--wp--custom--card--border--radius, 5px);
	padding-block: 0.5rem;
	padding-inline: 0.75rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	min-inline-size: 0;
}

/* Address line 1, line 2, hidden country, etc. are full-width spans. */
.gform_wrapper.tec-donation-form_wrapper .gfield--type-address .ginput_complex > .ginput_full {
	grid-column: 1 / -1;
}

.gform_wrapper.tec-donation-form_wrapper .gfield--type-name .ginput_complex > span > label,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-address .ginput_complex > span > label {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--ink-low-emphasis);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.2;
}

.gform_wrapper.tec-donation-form_wrapper .gfield--type-name .ginput_complex > span > input[type="text"],
.gform_wrapper.tec-donation-form_wrapper .gfield--type-address .ginput_complex > span > input[type="text"] {
	width: 100%;
	display: block;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
	background: transparent;
	border: 0;
	outline: 0;
	box-shadow: none;
	min-height: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield--type-name .ginput_complex > span:focus-within,
.gform_wrapper.tec-donation-form_wrapper .gfield--type-address .ginput_complex > span:focus-within {
	border-color: var(--wp--preset--color--accent-yellow);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-yellow);
}

/* Mobile: stack address grid 1-up so labels stay readable. */
@media (max-width: 766px) {
	.gform_wrapper.tec-donation-form_wrapper .gfield--type-name .ginput_complex,
	.gform_wrapper.tec-donation-form_wrapper .gfield--type-address .ginput_complex {
		grid-template-columns: 1fr;
	}
}

/* === Other inputs (number, tel, select, textarea — used by amount-other,
 * Stripe sublabel hidden inputs, etc.) keep the legacy bordered style. ===
 * tec-amount-other has its own £-prefix treatment below; the generic rules
 * here protect any future text/number/select fields not covered by the
 * inside-label pattern above. */
.gform_wrapper.tec-donation-form_wrapper input[type="number"],
.gform_wrapper.tec-donation-form_wrapper select,
.gform_wrapper.tec-donation-form_wrapper textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink-divider);
	border-radius: var(--wp--custom--card--border--radius, 5px);
	padding-block: 0.625rem;
	padding-inline: 0.875rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gform_wrapper.tec-donation-form_wrapper input[type="number"]:focus-visible,
.gform_wrapper.tec-donation-form_wrapper select:focus-visible,
.gform_wrapper.tec-donation-form_wrapper textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-yellow);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--navy);
}

/* === Pill segmented controls (designation, frequency, payment method) ===
 * Hide the native radio input; the visible pill is the <label>.
 * Uses :has() — supported everywhere we ship.
 * Layout: flex-wrap + content-width pills. Pills size to their label
 * (flex-grow: 0) with a min-width safety so short labels stay tappable;
 * they sit side-by-side at the start of the row and wrap when there's
 * no room. Mobile stacks 1-up full-width for tap targets (see below). */
/* Modern Gravity Forms (2.5+) renders the radio group as
 * <div class="ginput_container_radio">
 *   <div class="gfield_radio">
 *     <div class="gchoice">...</div>
 *   </div>
 * </div>
 * The flex container has to sit on .gfield_radio — the *direct* parent
 * of the .gchoice items — not on .ginput_container (whose only child
 * is .gfield_radio, which would then be the lone flex item). */
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gfield_radio,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gfield_radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* Tightened twice: first from --spacing--20 (8–12px) to 4–8px, then again
	 * to 2–4px (Alfonso 2026-05-02) so adjacent pills read as a true
	 * segmented control with hairline separation rather than separated buttons.
	 * No --spacing--10 token in theme.json (smallest is --20); inline clamp. */
	gap: clamp(0.125rem, 0.25vw, 0.25rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice {
	flex: 0 1 auto;
	min-inline-size: 8rem;
	margin: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice input[type="radio"],
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice label,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	border: 1px solid var(--wp--preset--color--accent-yellow);
	border-radius: 4.9px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	margin: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice:hover label,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice:hover label {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice:has(input:checked) label,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice:has(input:checked) label {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--accent-yellow);
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice:has(input:focus-visible) label,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice:has(input:focus-visible) label {
	outline: 2px solid var(--wp--preset--color--accent-yellow);
	outline-offset: 2px;
}

/* Sublabel variant for segmented/tabs pills — used by the designation field
 * (id 1) and payment-method field (id 19). Same vocabulary as .tec-amount-grid:
 * the gform_field_choice_markup_pre_render_29 filter injects two spans
 * (.tec-pill-amount = main label, .tec-pill-tier = parenthetical sublabel).
 * When present, the label switches to column layout and gives the sublabel
 * the same muted small-caps treatment used on the amount pills, so the three
 * pill control families share one visual rhythm. Plain-text fallback (no
 * inner spans) keeps the legacy single-line typography. */

/* Sublabel text on designation/payment is long-form prose (60–70+ chars)
 * unlike the patron-tier sublabels (≤ 14 chars). Letting the pill size to
 * its content pushed each pill past the 680px prose container, wrapping
 * the two pills onto separate rows. Force the .gchoice to share the row
 * equally (flex: 1 1 0; min-inline-size: 0) so the long sublabel wraps
 * inside the pill instead of the pill growing to fit one line. Scoped via
 * :has() to the sublabel variant only — patron-tier pills (.tec-amount-grid)
 * and plain text pills keep their content-width sizing. */
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice:has(.tec-pill-amount),
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice:has(.tec-pill-amount) {
	flex: 1 1 0;
	min-inline-size: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice label:has(.tec-pill-amount),
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice label:has(.tec-pill-amount) {
	flex-direction: column;
	gap: 0.125rem;
	min-height: 56px;
	padding-block: 0.5rem;
	padding-inline: 0.5rem;
	line-height: 1.2;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice label:has(.tec-pill-amount) .tec-pill-tier,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice label:has(.tec-pill-amount) .tec-pill-tier {
	white-space: normal;
	overflow-wrap: anywhere;
	text-transform: none;
	letter-spacing: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice label .tec-pill-amount,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice label .tec-pill-amount {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.1;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice label .tec-pill-tier,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice label .tec-pill-tier {
	/* Same demotion as .tec-amount-grid (see Linnea §7 note below). */
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-low-emphasis);
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice:hover label .tec-pill-tier,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice:has(input:checked) label .tec-pill-tier,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice:hover label .tec-pill-tier,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice:has(input:checked) label .tec-pill-tier {
	color: inherit;
}

/* === Amount preset grid (product radio) ===
 * Layout: flex-wrap + content-width pills. Monthly path renders 5 pills
 * (Friend / Coram / Hanover / Chandos / Other); one-off path renders 6
 * (£5 / £75 / £300 / £600 / £1,200 / Other). Pills size to their labels
 * and sit at the start of the row at desktop; they wrap progressively at
 * narrower viewports and stack 1-up full-width on mobile (see media query
 * at the end of this block). flex-grow: 0 prevents pills ballooning to
 * fill the prose column when there are only a few of them. */
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gfield_radio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* See note on .tec-pill-segmented gap above — same value, same reason. */
	gap: clamp(0.125rem, 0.25vw, 0.25rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice {
	flex: 0 1 auto;
	/* Sublabel layout (amount over tier name) means each pill is narrower
	 * than the old single-line label (~180px). 5 pills (monthly) or 6
	 * (one-off) + tightened gap fit inside the 680px prose container at
	 * desktop. Min 4rem (64px) keeps the short pills (£5, Other) tappable
	 * without forcing them to the same width as the patron-tier pills. */
	min-inline-size: 4rem;
	margin: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Sublabel pill: amount on top, tier name below, stacked.
 * Inner spans (.tec-pill-amount, .tec-pill-tier) are injected by the
 * gform_field_choice_markup_pre_render_29 filter in
 * mu-plugins/tec-donation-form.php. Plain-text fallback: if the filter
 * is removed the label text reverts to the GF-saved string and still
 * renders centered (single text node) by virtue of the column flex. */
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-height: 56px;
	padding-block: 0.5rem;
	/* Tightened from 0.75rem to 0.5rem so 6 one-off pills (including the
	 * three patron-tier pills with long uppercase sublabels) fit on a
	 * single row inside the 680px prose container at desktop. */
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--accent-yellow);
	border-radius: 4.9px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--sans-body);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	margin: 0;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice label .tec-pill-amount {
	/* Toned down from --large (23px) to --medium (17px, body size) per
	 * Alfonso 2026-05-02 — the larger size read as too prominent against
	 * the small-caps tier sublabel below. The ramp has no slug between
	 * medium and large, so medium is the canonical pick. */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.1;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice label .tec-pill-amount small {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice label .tec-pill-tier {
	/* Linnea audit 2026-05-02 §7: visually demote the tier name so the
	 * amount is the primary read. Italic + muted + no eyebrow uppercase
	 * lets first-timers scan past the unfamiliar tier name; donors who
	 * recognise it still get the upgrade signal. The previous uppercase +
	 * letter-spacing eyebrow register fought against the demotion. */
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-low-emphasis);
}

/* When pill is selected/hovered, secondary text inherits the inverted
 * colour (white on yellow) — override the muted ink-low-emphasis. */
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice:hover label .tec-pill-tier,
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice:has(input:checked) label .tec-pill-tier {
	color: inherit;
}

/* Plain-label fallback: when filter is absent and the label is a single
 * text node, restore the legacy single-line typography so the pill is
 * still readable. */
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice label:not(:has(.tec-pill-amount)) {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice:hover label {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice:has(input:checked) label {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
}

/* === Other amount field ===
 * Sub-field of the amount-grid pill row above (donor picked "Other" → fills
 * this in). Not a top-level question, so its label stays at the small inline
 * register rather than the H3 question register applied to .gfield_label
 * by default. The £ prefix pseudo lives on the input wrapper. */
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_fields .gfield.tec-amount-other > .gfield_label {
	font-family: var(--wp--preset--font-family--sans-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-block-start: 0;
	margin-block-end: var(--wp--preset--spacing--20);
	line-height: 1.4;
}

.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-other .ginput_container::before {
	content: "£";
	display: inline-block;
	margin-inline-end: 0.5rem;
	font-weight: 600;
}

/* === Gift Aid checkbox ===
 * Single-checkbox row, not a section heading. Suppress the field-level
 * .gfield_label (if Gravity Forms emits one) so the checkbox + its choice
 * label read as one inline statement, not a heading + control pair. The
 * choice <label> inside .gchoice carries the visible copy. */
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_fields .gfield.tec-gift-aid > .gfield_label {
	font-family: var(--wp--preset--font-family--sans-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-block-start: 0;
	margin-block-end: var(--wp--preset--spacing--20);
	line-height: 1.4;
}
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-gift-aid .gchoice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface-low);
	border-radius: 4.9px;
}
.gform_wrapper.tec-donation-form_wrapper .gfield.tec-gift-aid label {
	font-weight: 600;
	cursor: pointer;
}

/* === DD guarantee block === */
.tec-dd-guarantee {
	background-color: var(--wp--preset--color--surface-low);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: 4.9px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-low-emphasis);
	line-height: 1.6;
}
.tec-dd-guarantee p { margin-block: 0 var(--wp--preset--spacing--20); }
.tec-dd-guarantee p:last-child { margin-block-end: 0; }

/* === Submit button — match is-style-tec-primary ===
 * Specificity note: Gravity Forms 2.9 ships its own button rule in
 * gravity-forms-theme-framework.min.css with the selector
 *   .gform-theme.gform-theme--framework.gform_wrapper
 *     input[type=submit].button.gform_button:where(:not(...))
 * which computes to (0,6,1) — six classes/attrs + one element
 * (`:where()` contributes 0). It sets `background-color` to a CSS
 * custom property that the orbital theme paints blue
 * (rgb(32,76,229)). A "natural" `.gform_wrapper .gform_footer
 * .gform_button` rule is only (0,3,0) and loses the cascade — that
 * was the original bug Linnea flagged.
 *
 * To beat (0,6,1) without `!important` we mirror GF's selector
 * shape (chain `.gform-theme` + `.gform-theme--framework` on the
 * wrapper, qualify the input with `[type="submit"].gform_button.button`)
 * and add `.gform_footer` as a descendant. Resulting specificity:
 *   .gform_wrapper.gform-theme.gform-theme--framework  (0,3,0)
 *   .gform_footer                                      (0,1,0)
 *   input[type="submit"].gform_button.button           (0,3,1)
 *   total                                              (0,7,1)
 * which beats (0,6,1) by one class. Hover/focus rules use the same
 * shape to beat GF's same-specificity hover/focus rules via source
 * order (this stylesheet enqueues with `generate-style` as a dep,
 * after the GF framework sheet — see Holt's persona note).
 *
 * Visual values are the canonical TEC primary button vocabulary
 * (see buttons.css `.is-style-tec-primary`): accent-yellow fill,
 * white text, accent-yellow border, ~5px radius, 700 weight,
 * accent-yellow / white invert on hover. */
.gform_wrapper.tec-donation-form_wrapper .gform_footer {
	margin-block-start: var(--wp--preset--spacing--50);
	padding: 0;
}

/* Stack submit + trust block as a centred column. GF's framework lays
 * `.gform_footer` out as a flex row by default; without this override the
 * trust div sits flush-left at content-width and its internal centring
 * is invisible. Specificity mirrors the submit rule (0,7,1) to beat the
 * framework's default `.gform-theme.gform-theme--framework.gform_wrapper
 * .gform_footer` row layout. Holt 2026-05-10. */
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
}

.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"].gform_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-block: 0.75rem;
	padding-inline: 2rem;
	border: 1px solid var(--wp--preset--color--accent-yellow);
	border-radius: var(--wp--custom--card--border--radius, 5px);
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"].gform_button.button:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-yellow);
	border-color: var(--wp--preset--color--accent-yellow);
}
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"].gform_button.button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-yellow);
	outline-offset: 2px;
}

/* Mobile — submit fills the row, matching buttons.css convention.
 * Pills also stack 1-up full-width: tap-target priority outweighs
 * content-width rhythm when the row is too narrow for >1 pill. */
@media (max-width: 766px) {
	/* Match the desktop submit selector's specificity (0,7,1) so the
	 * GF framework's `--gf-local-width: auto` doesn't win the cascade. */
	.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"].gform_button.button { width: 100%; }

	.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice,
	.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice,
	.gform_wrapper.tec-donation-form_wrapper .gfield.tec-amount-grid .gchoice,
	.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-segmented .gchoice:has(.tec-pill-amount),
	.gform_wrapper.tec-donation-form_wrapper .gfield.tec-pill-tabs .gchoice:has(.tec-pill-amount) {
		flex: 1 0 100%;
	}

	/* Sticky submit on mobile — Linnea P2 #11 / Imogen mobile spec.
	 * The footer (button + trust block) sticks to the viewport bottom
	 * once the donor scrolls past its natural position, so the commit
	 * action stays in reach on long-form paths (monthly+DD). Sticky
	 * (not fixed) keeps it inside the form's flow at the top of scroll.
	 * White background and a soft shadow above the footer separate it
	 * from the form content scrolling beneath. */
	.gform_wrapper.tec-donation-form_wrapper .gform_footer {
		position: sticky;
		inset-block-end: 0;
		z-index: 5;
		background-color: var(--wp--preset--color--white);
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--30);
		margin-inline: calc(-1 * var(--wp--preset--spacing--30));
		box-shadow: 0 -1px 0 var(--wp--preset--color--ink-divider),
			0 -8px 16px -8px rgb(0 0 0 / 0.08);
	}
}

/* === Validation === */
.gform_wrapper.tec-donation-form_wrapper .gfield_error {
	color: var(--wp--preset--color--navy);
}
.gform_wrapper.tec-donation-form_wrapper.gform-theme.gform-theme--framework .gform_fields .gfield_error .gfield_label {
	color: var(--wp--preset--color--navy);
}
.gform_wrapper.tec-donation-form_wrapper .gfield_error input,
.gform_wrapper.tec-donation-form_wrapper .gfield_error select,
.gform_wrapper.tec-donation-form_wrapper .gfield_error textarea {
	border-color: var(--wp--preset--color--accent-yellow);
	background-color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-yellow);
}
/* Inside-label boxes: lift the parent box border in the error state since
 * the input itself is borderless. */
.gform_wrapper.tec-donation-form_wrapper .gfield_error.gfield--type-text,
.gform_wrapper.tec-donation-form_wrapper .gfield_error.gfield--type-email {
	border-color: var(--wp--preset--color--accent-yellow);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-yellow);
}
.gform_wrapper.tec-donation-form_wrapper .gfield_error.gfield--type-name .ginput_complex > span,
.gform_wrapper.tec-donation-form_wrapper .gfield_error.gfield--type-address .ginput_complex > span {
	border-color: var(--wp--preset--color--accent-yellow);
}
.gform_wrapper.tec-donation-form_wrapper .validation_message {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--surface-low);
	border-inline-start: 3px solid var(--wp--preset--color--accent-yellow);
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--20);
	border-radius: 4.9px;
}
.gform_wrapper.tec-donation-form_wrapper .gform_validation_errors {
	background-color: var(--wp--preset--color--surface-low);
	border-inline-start: 3px solid var(--wp--preset--color--accent-yellow);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
	border-radius: 4.9px;
}

/* === Stripe Elements wrapper === */
.gform_wrapper.tec-donation-form_wrapper .ginput_container_creditcard,
.gform_wrapper.tec-donation-form_wrapper .ginput_container_stripe_creditcard,
.gform_wrapper.tec-donation-form_wrapper .StripeElement {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink-divider);
	border-radius: 4.9px;
	padding-block: 0.75rem;
	padding-inline: 0.875rem;
	min-height: 44px;
}
.gform_wrapper.tec-donation-form_wrapper .StripeElement--focus {
	border-color: var(--wp--preset--color--navy);
	outline: 2px solid var(--wp--preset--color--accent-yellow);
	outline-offset: 2px;
}

/* === Address & name sub-field layout: handled by the inside-label complex
 * block above. Generic .ginput_complex rules removed — they conflicted with
 * the per-span boxed grid. Stripe Element's .ginput_complex is scoped by
 * .ginput_container_creditcard / .StripeElement and unaffected. === */

/* === Confirmation page === */
.gform_confirmation_wrapper.tec-donation-form,
[id^="gform_confirmation_wrapper_29"] {
	max-width: var(--tec-width-prose);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60);
}
.gform_confirmation_wrapper h2 {
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--navy);
	margin-block-end: var(--wp--preset--spacing--40);
}
.gform_confirmation_wrapper p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--navy);
}

/* === Lede paragraph (above the form) ===
 * Maya §7 voice handshake. Sits above the form, soft register, prose
 * width — the form's first warmth before the transactional surface. */
.tec-donation-lede {
	max-width: var(--tec-width-prose);
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

/* === Frequency helper-line conditional reveal (field 2 description) ===
 * Both helper lines are emitted in the description; CSS shows only the
 * one matching the active frequency choice. Uses :has() on the field's
 * checked radio. No JS. */
.gform_wrapper.tec-donation-form_wrapper .gfield .tec-freq-helper {
	display: none;
}
.gform_wrapper.tec-donation-form_wrapper .gfield:has(input[name="input_2"][value="monthly"]:checked) .tec-freq-helper--monthly,
.gform_wrapper.tec-donation-form_wrapper .gfield:has(input[name="input_2"][value="oneoff"]:checked) .tec-freq-helper--oneoff {
	display: block;
}

/* === Trust-signal block (under submit) ===
 * Linnea §2.10 / §2.12. Quiet caption beneath the action; not a section.
 * Three short lines, each on their own row at all viewports. */
.gform_wrapper.tec-donation-form_wrapper .gform_footer .tec-donation-trust {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-low-emphasis);
	line-height: 1.4;
	text-align: center;
}
.gform_wrapper.tec-donation-form_wrapper .gform_footer .tec-donation-trust .tec-trust__line {
	display: block;
}
.gform_wrapper.tec-donation-form_wrapper .gform_footer .tec-donation-trust a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.gform_wrapper.tec-donation-form_wrapper .gform_footer .tec-donation-trust a:hover {
	color: var(--wp--preset--color--navy);
}

/* === Direct Debit Guarantee — collapsed accordion ===
 * Linnea §2.9 + P2 #9. Field 24 now emits a <details class="wp-block-details">
 * around the BACS legal text; the "What happens next." paragraph stays
 * visible above. The base .wp-block-details rules in style.css carry
 * most of the visual treatment; tighten the inner padding for the
 * inline-form context where the surrounding rhythm is denser. */
.gform_wrapper.tec-donation-form_wrapper .tec-dd-guarantee-toggle {
	margin-block-start: var(--wp--preset--spacing--30);
}
.gform_wrapper.tec-donation-form_wrapper .tec-dd-guarantee-toggle > div {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
}
.gform_wrapper.tec-donation-form_wrapper .tec-dd-guarantee-toggle .tec-dd-guarantee {
	background-color: transparent;
	padding: 0;
}
.gform_wrapper.tec-donation-form_wrapper .tec-dd-next {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--navy);
	margin-block-end: var(--wp--preset--spacing--30);
	line-height: 1.5;
}

/* === Gift Aid HMRC declaration — collapsed accordion === */
.gform_wrapper.tec-donation-form_wrapper .tec-gift-aid-toggle {
	margin-block-start: var(--wp--preset--spacing--20);
}
.gform_wrapper.tec-donation-form_wrapper .tec-gift-aid-toggle > div {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-low-emphasis);
	line-height: 1.5;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
	.gform_wrapper.tec-donation-form_wrapper .gchoice label,
	.gform_wrapper.tec-donation-form_wrapper .gform_button,
	.gform_wrapper.tec-donation-form_wrapper input,
	.gform_wrapper.tec-donation-form_wrapper select,
	.gform_wrapper.tec-donation-form_wrapper textarea {
		transition: none;
	}
}