/**
 * BPS Lite — front-end form styles.
 *
 * Block layout for label + control, sensible spacing, and a clear success notice.
 * Inputs inherit colours from the active skin tokens where possible.
 *
 * @package BPS_Lite
 */

.bps-lite-form {
	max-width: 560px;
	margin: 0 0 2rem;

	/*
	 * A form owns its own alignment.
	 *
	 * Without this the form inherits `text-align` from whatever container it is
	 * dropped into — an Elementor section set to centred alignment centres every
	 * label and the submit button, which is not a form layout anyone wants. Labels
	 * belong on the same left edge as the control they describe.
	 */
	text-align: left;
}

.bps-lite-form-title {
	margin: 0 0 1rem;
}

.bps-lite-field {
	margin-bottom: 1.1rem;
}

.bps-lite-field-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	line-height: 1.3;
}

.bps-lite-field input[type="text"],
.bps-lite-field input[type="email"],
.bps-lite-field input[type="number"],
.bps-lite-field input[type="date"],
.bps-lite-field input[type="tel"],
.bps-lite-field input[type="url"],
.bps-lite-field input[type="password"],
.bps-lite-field select,
.bps-lite-field textarea {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	/* 🔴 BUG-601's twin, fixed 2026-09-16. `background: #fff` with `color: inherit`
	   is the same half-pinned pair Base carried: the surface is a literal and the
	   INK follows the surrounding tone, so a form on a `.dark` band painted white
	   on white and a visitor's typed text vanished. Both ends are form-owned now,
	   and a Form Style variant re-points them together. */
	border: 1px solid var(--bps-lite-form-border, var(--border-color, #ccc));
	border-radius: var(--radius-base, 6px);
	background: var(--bps-lite-form-bg, #fff);
	color: var(--bps-lite-form-text, #1a1a1a);
	font: inherit;

	/*
	 * Control METRICS — these two lines exist because of a measured defect, not tidiness.
	 *
	 * `font: inherit` above is deliberate (the control should wear the site's typeface),
	 * but the `font` shorthand also drags in the body's LINE-HEIGHT. On a theme with a
	 * generous body leading that is far taller than a form control expects — Astra at
	 * 17px/1.65 gives a 28.05px line box.
	 *
	 * Astra separately pins form fields to `height: 40px` via its customizer inline CSS.
	 * 28.05 line + 20.4 padding + 2 border = 50.45px of content in a 40px box, so the
	 * text clips — worst on `<select>`, where the native arrow well competes for the room.
	 *
	 * We were not losing on specificity: `.bps-lite-field input[type="text"]` is (0,2,1)
	 * against Astra's (0,1,1). We were losing by never making the declaration at all.
	 * Hence no `!important` — just say it.
	 *
	 * Measured on Astra 4.x + Elementor, lite.buildprosites.com/fairweather/quote/, 2026-08-05.
	 */
	height: auto;
	line-height: 1.4;
	box-sizing: border-box;
}

.bps-lite-field input[type="color"] {
	width: 3rem;
	height: 2.2rem;
	padding: 2px;
	border: 1px solid var(--border-color, #ccc);
	border-radius: var(--radius-base, 6px);
}

.bps-lite-field textarea {
	min-height: 6rem;
	resize: vertical;
}

.bps-lite-field input:focus,
.bps-lite-field select:focus,
.bps-lite-field textarea:focus {
	outline: 2px solid var(--accent, #0066cc);
	outline-offset: 1px;
	border-color: var(--accent, #0066cc);
}

/* Checkbox / radio groups stack with breathing room. */
.bps-lite-checkboxes,
.bps-lite-radios {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.bps-lite-checkbox,
.bps-lite-radio {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

/* Select2 fits the field width. */
.bps-lite-field .select2-container {
	width: 100% !important;
}

.bps-lite-form-actions {
	margin-top: 1.25rem;
}

.bps-lite-form-success {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: var(--radius-base, 6px);
	background: #e7f6ec;
	border: 1px solid #b6e0c4;
	color: #1d643b;
}

/* ============================================================================
   FORM STYLE — .moa-form-*                                          (0.7.29)
   ============================================================================
   Same class names as moa-bps-base, deliberately: Mark's ruling 2026-09-16 is
   that Base and Lite carry ONE vocabulary or we maintain two. Base just offers
   more chips; the ones both have must be identical.

   🔴 ANCESTOR-SCOPED. Contact Form 7 renders its own markup from a shortcode and
   can carry no author class except via `html_class`, so a class on a CONTAINER
   read downward is the only shape a chip can use to reach it. Lite's own
   `.bps-lite-form` and CF7's `.wpcf7-*` share no selectors at all, so each
   variant states both.

   🪤 The `--cf7-*` locals exist because ambient context tokens measure EMPTY on a
   deep CF7 descendant — see the note at the top of bps-lite-cf7.css. Anything
   here reading a bare `--border-color` on a CF7 field is a bug.

   Default is unchanged: white input, dark ink, fine grey border.
   ------------------------------------------------------------------------- */

.moa-form-dark {
  --bps-lite-form-bg:     #14171a;
  --bps-lite-form-text:   #f2f4f6;
  --bps-lite-form-border: rgba(255, 255, 255, 0.24);
  --cf7-field:            #14171a;
  --cf7-ink:              #f2f4f6;
  --cf7-border:           rgba(255, 255, 255, 0.24);
}

/* Transparent field, border only — for a photograph or a strong tone, where a
   filled box would punch a hole in the design. Ink follows the surrounding text
   on purpose: on a ghost field that IS the correct colour. */
.moa-form-ghost {
  --bps-lite-form-bg:     transparent;
  --bps-lite-form-text:   currentColor;
  --bps-lite-form-border: color-mix(in srgb, currentColor 38%, transparent);
  --cf7-field:            transparent;
  --cf7-ink:              currentColor;
  --cf7-border:           color-mix(in srgb, currentColor 38%, transparent);
}

.moa-form-filled {
  --bps-lite-form-bg:     var(--bg2, #f1f3f5);
  --bps-lite-form-border: transparent;
  --cf7-field:            var(--bg2, #f1f3f5);
  --cf7-border:           transparent;
}

.moa-form-underline {
  --bps-lite-form-bg:     transparent;
  --bps-lite-form-border: color-mix(in srgb, currentColor 38%, transparent);
  --cf7-field:            transparent;
  --cf7-border:           color-mix(in srgb, currentColor 38%, transparent);
}

/* ===========================================================================
   🔴 THE CF7 COMPANION BLOCK — without this, three of the four variants above
   are DEAD ON A CF7 FORM. Added 0.7.32.
   ===========================================================================
   The blocks above declare the locals on the ANCESTOR the chip class sits on.
   That is enough for Lite's own `.bps-lite-field` markup, which inherits them.
   It is NOT enough for Contact Form 7, because `bps-lite-cf7.css:107` declares
   the same locals ON THE FORM ELEMENT itself:

       .section:is(.dark,.dark2,.dark3) .wpcf7-form { --cf7-field: rgba(0,0,0,.32) }

   A property set on the element always beats one inherited from an ancestor, so
   the chip's value never reaches the field. `.moa-form-light` escaped this only
   because it was given its own form-level companion (below, ~line 275); the
   other three never were, and `.moa-form-underline` appears to work only because
   it also sets real border PROPERTIES a few rules down, not just tokens.

   Measured 2026-09-20 on a 12-cell fixture (6 renditions x 2 band tones), every
   variant pre-rendered in the markup rather than toggled at runtime:

       DARK band   dark / ghost / filled  -> byte-identical to no chip at all
       LIGHT band  dark / ghost / filled  -> byte-identical to no chip at all

   The contrast gate could never have caught this: an inert variant is perfectly
   readable, it just is not the variant you asked for. Only looking caught it.

   🪤 `body[class] .moa-form-x .wpcf7-form` is (0,3,1), exactly one point above
   the tone rule's (0,3,0). Do not "simplify" it to `.moa-form-x .wpcf7-form`
   (0,2,0) — that loses to the tone rule and silently restores this bug. The
   second selector covers the class landing on the form element itself.
   --------------------------------------------------------------------------- */

body[class] .moa-form-dark .wpcf7-form,
body[class] .wpcf7-form.moa-form-dark {
  --cf7-field:  #14171a;
  --cf7-ink:    #f2f4f6;
  --cf7-border: rgba(255, 255, 255, 0.24);
}

body[class] .moa-form-ghost .wpcf7-form,
body[class] .wpcf7-form.moa-form-ghost {
  --cf7-field:  transparent;
  --cf7-ink:    currentColor;
  --cf7-border: color-mix(in srgb, currentColor 38%, transparent);
}

body[class] .moa-form-filled .wpcf7-form,
body[class] .wpcf7-form.moa-form-filled {
  --cf7-field:  var(--bg2, #f1f3f5);
  --cf7-border: transparent;
}

body[class] .moa-form-underline .wpcf7-form,
body[class] .wpcf7-form.moa-form-underline {
  --cf7-field:  transparent;
  --cf7-border: color-mix(in srgb, currentColor 38%, transparent);
}

/* 🪤 `body[class]` is load-bearing — the same device the type scale and the
   aspect classes use. Lite's field rules are (0,2,0) and a bare variant selector
   would tie them and win only on source order, which a future file reshuffle
   would silently reverse. The attribute selector buys the extra point. */
body[class] .moa-form-underline .bps-lite-field input,
body[class] .moa-form-underline .bps-lite-field select,
body[class] .moa-form-underline .bps-lite-field textarea,
body[class] .moa-form-underline .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  border-width: 0 0 2px;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

body[class] .moa-form-dark .bps-lite-field input,
body[class] .moa-form-dark .bps-lite-field select,
body[class] .moa-form-dark .bps-lite-field textarea,
body[class] .moa-form-ghost .bps-lite-field input,
body[class] .moa-form-ghost .bps-lite-field select,
body[class] .moa-form-ghost .bps-lite-field textarea,
body[class] .moa-form-filled .bps-lite-field input,
body[class] .moa-form-filled .bps-lite-field select,
body[class] .moa-form-filled .bps-lite-field textarea,
body[class] .moa-form-underline .bps-lite-field input,
body[class] .moa-form-underline .bps-lite-field select,
body[class] .moa-form-underline .bps-lite-field textarea {
  background: var(--bps-lite-form-bg);
  color: var(--bps-lite-form-text);
  border-color: var(--bps-lite-form-border);
}

body[class] [class*="moa-form-"] .wpcf7-form-control:not([type="submit"]) {
  background: var(--cf7-field);
  color: var(--cf7-ink);
  border-color: var(--cf7-border);
}

/* 🔴 A LABEL SITS ON THE BAND, NOT IN THE FIELD — corrected 0.7.32.
 *
 * This rule used to read `color: var(--bps-lite-form-text, var(--cf7-ink, inherit))`,
 * i.e. it painted the label with the INK THAT GOES INSIDE THE INPUT. That is only
 * correct while the field tone matches the band tone — and making them differ is the
 * entire purpose of the form-style chip.
 *
 * Measured 2026-09-20 on cashflow-sales, a dark band with `moa-form-light`: fields went
 * correctly white, and "First name" / "Email address" went to rgb(16,21,15) — dark ink
 * on a near-black band, effectively invisible. The computed value LOOKED right in a
 * measurement (dark ink is what a light form wants) and was wrong on the page, because
 * the label is outside the white box. Found by looking, not by measuring.
 *
 * `inherit` is the correct default: the label takes the colour of whatever encloses it.
 * On a bare band that is the band's own text colour; inside a panel that sets `color`
 * (see `.bps-cf7--card`) it is the panel's. A variant that genuinely wants a different
 * label colour sets `--cf7-label` and nothing else changes.
 *
 * 🪤 Do NOT "fix" this by pointing --cf7-label at a tone literal. A tone class is a
 * ROLE, not a brightness — a yellow band carries `.dark` — which is the trap that put a
 * 1.06-contrast tip on the author fleet. Inheritance cannot make that mistake.
 */
body[class] [class*="moa-form-"] .bps-lite-field-label,
body[class] [class*="moa-form-"] .wpcf7-form label {
  color: var(--cf7-label, inherit);
}

/* BPS-TRADES-2026-09-18 */

/* LIGHT — the mirror of .moa-form-dark, and the one the ruling above was written for:
   a white capture card on a dark band. Added 2026-09-18 for the Brisbane trades fleet,
   where all ten wireframes put one in the home hero.

   🪤 The locals are re-declared on the descendant `.wpcf7-form`, not just on this
   container, because `bps-lite-cf7.css` declares them ON the form element for dark
   sections and a property set on the element beats one inherited from an ancestor. */
.moa-form-light {
  --bps-lite-form-bg:     var(--light-bg, #ffffff);
  --bps-lite-form-text:   var(--light-text, #14171a);
  --bps-lite-form-border: var(--light-border, #d6dde6);
  --cf7-field:            var(--light-bg, #ffffff);
  --cf7-ink:              var(--light-text, #14171a);
  --cf7-border:           var(--light-border, #d6dde6);
  --cf7-accent:           var(--light-accent, #0066cc);
}

body[class] .moa-form-light .wpcf7-form,
body[class] .wpcf7-form.moa-form-light {
  --cf7-field:  var(--light-bg, #ffffff);
  --cf7-ink:    var(--light-text, #14171a);
  --cf7-border: var(--light-border, #d6dde6);
  --cf7-accent: var(--light-accent, #0066cc);
}

body[class] .moa-form-light .bps-lite-field input,
body[class] .moa-form-light .bps-lite-field select,
body[class] .moa-form-light .bps-lite-field textarea {
  background: var(--bps-lite-form-bg);
  color: var(--bps-lite-form-text);
  border-color: var(--bps-lite-form-border);
}