/**
 * Pattern: Form Band + Form Card  (patterns/form-band.php + bare .blg-form-card)
 *
 * Two consumers, one wrapper class:
 *   .blg-form-band .blg-form-card  — Join "Not sure where to start?" (6:74):
 *     full-bleed Deep Petrol band, white H2, Sky Tint lead, Sky-Cyan-fill
 *     petrol-text submit (buttons-on-dark-w/-petrol-text, per token spec).
 *   .blg-form-card alone            — Contact two-col form card (6:1015):
 *     composed bare (no band) directly in the editor at Phase 5; submit stays
 *     the default Georgia-Blue-fill white-text pill (pixel-verified against
 *     6:1015 — rgb(0,119,182) = #0077B6).
 *
 * FORM ENGINE: Gravity Forms since 2026-08-21 (afternoon-r1, Alain supplied
 * the licensed plugin and asked for CF7 to be replaced everywhere). The CF7
 * rules below are KEPT, not deleted — contact-form-7 is still an active plugin
 * and the two engines' selectors don't overlap, so the old rules are inert on
 * a GF page and cost nothing, while a stray CF7 shortcode anywhere still
 * renders styled instead of raw. Delete them in the same pass that deactivates
 * CF7, not before.
 *
 * Styles the form plugin's OWN markup inside `.blg-form-card` — Gravity Forms
 * (.gform_wrapper / .gfield / .ginput_container / .gform_button) in §GF below,
 * Contact Form 7 (.wpcf7-form / .wpcf7-form-control / …) in the legacy block.
 * No forms are created by this partial; page assembly drops the shortcodes in.
 *
 * Specificity note: assets/css/forms.css (shared, NOT edited here) already
 * gives every bare `input[type="text"]:not(.kd-nav-search):not([class*="wp-
 * block"])` a 2px Georgia-Blue-border pill at (0,3,1) specificity, and it is
 * enqueued AFTER this pattern's partial (inc/enqueue.php: the patterns glob
 * runs before wp_enqueue_style('kd-forms', ...)) — so a same-or-lower-
 * specificity override here would lose on cascade order. Every override below
 * threads FOUR class-level selectors (.blg-form-card + .wpcf7-form ancestor +
 * .wpcf7-form-control + the field-specific class, e.g. .wpcf7-text) to reach
 * (0,4,0), which beats (0,3,1) on the class/attribute digit alone — no
 * !important needed. forms.css's submit rule requires a `.kd-form` ancestor
 * this markup never carries, so submit styling here starts from zero (no
 * specificity fight there).
 */

/* ── Band (Join, 6:74) ───────────────────────────────────────────────────── */

/* ── Band ─────────────────────────────────────────────────────────────────
   Sky Tint, NOT Deep Petrol. This band is always the closing section of its
   page, and Deep Petrol is the footer colour — so band and footer rendered as
   one undifferentiated dark slab with a white form card floating in it
   (Alain, on /join/: "the form background is merging with the footer"; the
   same defect had already been fixed on /certification-help/ via a
   .blg-cert-form override, which this replaces).

   The light treatment is now the DEFAULT rather than a per-page override:
   both consumers are closing sections against the same footer, so the
   override was the rule wearing a disguise. Sky Tint is the ground the CTA
   cards already use, so this stays inside established language.

   Consequence worth keeping in mind: the heading, lead and submit roles below
   all assume a LIGHT ground now. If this band is ever wanted dark again, all
   three have to move together — they cannot be flipped independently. */
.blg-form-band {
	background-color: var(--blg-color-tint);
	padding-block: var(--blg-space-xl); /* 64px */
}

.blg-form-band__heading {
	font-size: var(--blg-size-h2-section) !important; /* shared section scale */
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	color: var(--blg-color-contrast) !important;
	margin: 0 0 var(--blg-gap-tight);
}

.blg-form-band__lead {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	/* Body ink, not Sky Tint. Sky Tint was correct while the band was Deep
	   Petrol; on the Sky Tint band it is the SAME colour as the ground —
	   invisible text. */
	color: var(--blg-color-body);
	max-width: var(--blg-measure-narrow);
	margin: 0 auto var(--blg-space-lg);
}

/* ── Card — white, radius-16, shadow ─────────────────────────────────────── */

.blg-form-card {
	background-color: var(--blg-color-base);
	border-radius: var(--blg-radius-card); /* 16px */
	box-shadow: var(--blg-shadow-md);
	max-width: 44.75rem; /* ~716px, Figma card width */
	margin: 0 auto;
	padding: var(--blg-space-lg); /* 40px */
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRAVITY FORMS  (current engine — 3.0.3.1, "Orbital" theme)

   Skinned through GF's OWN CSS custom properties, not by out-specifying its
   selectors. Verified against the real rendered DOM + the shipped stylesheets
   (assets/css/dist/gravity-forms-theme-framework.min.css, 558KB, which is
   where Orbital's rules actually live — gravity-forms-orbital-theme.min.css
   is a 0-byte stub in this release, don't go looking for rules in it).

   Why variables: GF 3.0's theme framework sets control colours, radii, sizes
   and button styling through ~780 `--gf-*` properties scoped to
   `.gform-theme--framework`. Overriding the resulting rules by selector means
   guessing at minified internals and re-guessing on every plugin update.
   Setting the properties on the wrapper is the documented integration point
   and survives updates.

   Scoped to `.blg-form-card` so a GF form dropped anywhere else on the site
   keeps the plugin's own defaults rather than silently inheriting a card skin
   that assumes a white background.
   ══════════════════════════════════════════════════════════════════════════ */

.blg-form-card .gform_wrapper.gform-theme {
	/* Controls — pill inputs, neutral-300 hairline, matching the CF7 treatment
	   this replaced and the .kd-nav-search / forms.css family. */
	--gf-ctrl-bg-color: var(--blg-color-base);
	--gf-ctrl-bg-color-hover: var(--blg-color-base);
	--gf-ctrl-bg-color-focus: var(--blg-color-base);
	--gf-ctrl-border-color: var(--blg-color-neutral-300);
	--gf-ctrl-border-color-hover: var(--blg-color-neutral-500);
	--gf-ctrl-border-color-focus: var(--blg-color-accent-1);
	--gf-ctrl-border-color-error: var(--blg-color-error);
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-radius: var(--blg-radius-pill);
	--gf-ctrl-color: var(--blg-color-contrast);
	--gf-ctrl-font-family: var(--blg-font-body);
	--gf-ctrl-size: var(--blg-size-body);

	/* Labels */
	--gf-ctrl-label-color-primary: var(--blg-color-contrast);
	--gf-ctrl-label-color-secondary: var(--blg-color-neutral-700);
	--gf-ctrl-label-color-req: var(--blg-color-neutral-500);
	--gf-ctrl-label-font-family-primary: var(--blg-font-body);
	--gf-ctrl-label-font-size-primary: var(--blg-size-body);

	/* Descriptions / help text */
	--gf-ctrl-desc-color: var(--blg-color-neutral-700);
	--gf-ctrl-desc-font-family: var(--blg-font-body);

	/* Submit — pill, Georgia Blue fill / white text (the default button role,
	   matching Figma 6:1015 on Contact). The dark-band override is below. */
	--gf-ctrl-btn-bg-color-primary: var(--blg-btn-bg);
	--gf-ctrl-btn-bg-color-hover-primary: var(--blg-btn-bg-hover);
	--gf-ctrl-btn-bg-color-focus-primary: var(--blg-btn-bg-hover);
	--gf-ctrl-btn-border-color-primary: var(--blg-btn-bg);
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-color-primary: var(--blg-btn-fg);
	--gf-ctrl-btn-font-family: var(--blg-font-heading);
	--gf-ctrl-btn-font-size: var(--blg-size-btn);
	--gf-ctrl-btn-font-weight: var(--blg-fw-heading);
	--gf-ctrl-btn-radius: var(--blg-radius-pill);
	--gf-ctrl-btn-padding-x: 2em;
	--gf-ctrl-btn-padding-y: 0.85em;
	/* GF drives button case through this variable —
	   `text-transform: var(--gf-local-text-transform)` where --gf-local-* reads
	   --gf-ctrl-btn-text-transform. A direct text-transform rule here ties its
	   (0,4,0) and loses on load order; the variable just works. */
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-letter-spacing: 0.2px;

	/* Secondary button role — GF puts `gform-theme-button--secondary` on the
	   multi-step "Back" control and drives it from a PARALLEL set of
	   *-secondary variables. Styling it through the primary set (or through a
	   direct .gform_previous_button rule) does nothing: measured, it kept
	   GF's own neutral border and ink. Outline pill in Georgia Blue, so Back
	   reads as secondary next to the filled Next. */
	--gf-ctrl-btn-bg-color-secondary: transparent;
	--gf-ctrl-btn-bg-color-hover-secondary: var(--blg-color-primary);
	--gf-ctrl-btn-bg-color-focus-secondary: var(--blg-color-primary);
	--gf-ctrl-btn-border-color-secondary: var(--blg-color-primary);
	--gf-ctrl-btn-border-color-hover-secondary: var(--blg-color-primary);
	--gf-ctrl-btn-border-width-secondary: 1.5px;
	--gf-ctrl-btn-border-style-secondary: solid;
	--gf-ctrl-btn-color-secondary: var(--blg-color-primary);
	--gf-ctrl-btn-color-hover-secondary: var(--blg-color-base);
	--gf-ctrl-btn-color-focus-secondary: var(--blg-color-base);

	/* GF derives several accents from these two. */
	--gf-color-primary: var(--blg-color-primary);
	--gf-color-secondary: var(--blg-color-base);
}

/* ── wpautop debris ───────────────────────────────────────────────────────
   WordPress runs wpautop over the shortcode's output, which injects stray
   <br> and empty <p> elements into Gravity Forms' own markup — including
   inside `.gform_footer`, right alongside the submit button and its hidden
   inputs.

   Harmless while that footer is a block container. NOT harmless once it is a
   flex row: each <br> becomes a 20px flex item and each empty <p> stretches to
   the row height, which is what turned the footer Subscribe button into a
   111x140px slab (measured, on the dark footer where the form is laid out
   inline). Neutralised for every GF instance rather than only the one that
   showed the symptom — the same debris is in all of them, just not currently
   visible.

   `:empty` is deliberate: it only catches the generated blanks, never a <p>
   GF renders with real content (a field description, a validation message). */
.gform_wrapper form > br,
.gform_wrapper form > p:empty,
.gform_wrapper .gform_footer > br,
.gform_wrapper .gform_page_footer > br,
/* NOT `p:empty` inside the footers: wpautop leaves a newline inside some of
   the paragraphs it generates, so they are whitespace-only rather than empty
   and :empty does not match them — one such <p> was still stretching the
   footer to 140px after the first pass. GF's own footer markup contains the
   submit button, hidden inputs and the ajax spinner; it never emits a
   paragraph, so hiding every direct <p> child there is safe. */
.gform_wrapper .gform_footer > p,
.gform_wrapper .gform_page_footer > p {
	display: none !important;
}

/* Belt and braces: even with the debris gone, keep the footer's own items
   centred rather than stretched, so the button is sized by its content. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	align-items: center;
}

/* ── Direct-selector overrides ────────────────────────────────────────────
   Three things the --gf-* variables genuinely cannot do. Measured, not
   assumed: each was verified as still wrong via computed styles AFTER the
   variables were set.

   1. The field border. `--gf-ctrl-border-color/width` are set above, but the
      shared assets/css/forms.css puts `border: 2px solid <Georgia Blue>`
      DIRECTLY on `input[type="text"]:not(…)` at (0,3,1) — it never reads GF's
      variable, so no amount of variable-setting reaches it. (Computed before
      this rule: 1.71px solid rgb(0,119,182). Expected: 1px neutral-300.)
      Selector below threads five class-level parts to (0,5,1) and wins.
   2. The textarea radius — a 100px pill bows a multi-line box's corners into
      the text, and GF exposes no separate textarea radius variable.
   3. (was: the uppercase button label — RESOLVED via the
      --gf-ctrl-btn-text-transform variable instead, see the wrapper block
      above. Left numbered so the two remaining items keep their reasoning.)
   ─────────────────────────────────────────────────────────────────────── */

.blg-form-card .gform_wrapper .gfield .ginput_container input[type="text"],
.blg-form-card .gform_wrapper .gfield .ginput_container input[type="email"],
.blg-form-card .gform_wrapper .gfield .ginput_container input[type="tel"],
.blg-form-card .gform_wrapper .gfield .ginput_container input[type="url"],
.blg-form-card .gform_wrapper .gfield .ginput_container input[type="number"],
.blg-form-card .gform_wrapper .gfield .ginput_container select {
	border: 1px solid var(--blg-color-neutral-300);
	border-radius: var(--blg-radius-pill);
	background-color: var(--blg-color-base);
	padding: 0.85rem 1.5rem;
}

.blg-form-card
	.gform_wrapper
	.gfield
	.ginput_container
	input[type="text"]:focus,
.blg-form-card
	.gform_wrapper
	.gfield
	.ginput_container
	input[type="email"]:focus,
.blg-form-card .gform_wrapper .gfield .ginput_container input[type="tel"]:focus,
.blg-form-card .gform_wrapper .gfield .ginput_container input[type="url"]:focus,
.blg-form-card .gform_wrapper .gfield .ginput_container select:focus {
	border-color: var(--blg-color-accent-1);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--blg-color-accent-1) 35%, transparent);
	outline: none;
}

.blg-form-card .gform_wrapper .gfield .ginput_container textarea,
.blg-form-card .gform_wrapper .gfield textarea {
	border: 1px solid var(--blg-color-neutral-300);
	border-radius: var(--blg-radius-md); /* 12px, per spec */
	background-color: var(--blg-color-base);
	padding: 0.85rem 1.5rem;
	min-height: 9rem;
	resize: vertical;
}

/* Everything else about the buttons comes from the --gf-ctrl-btn-* variables
   set on the wrapper above — including case, which GF reads from
   --gf-ctrl-btn-text-transform. Only `cursor` is left here: GF sets it via
   --gf-local-cursor on the framework rule, which its own :where() selector
   already satisfies, but the page-footer Back/Next buttons in the multi-step
   form pick up a UA default in some states. */
.blg-form-card .gform_wrapper .gform_footer .gform_button,
.blg-form-card .gform_wrapper .gform_page_footer .gform_button,
.blg-form-card .gform_wrapper .gform_page_footer .gform_next_button,
.blg-form-card .gform_wrapper .gform_page_footer .gform_previous_button {
	cursor: pointer;
}

/* The submit keeps the DEFAULT Georgia-Blue-fill / white-text pill set on the
   wrapper above. It used to be re-pointed to the Sky Cyan "buttons-on-dark"
   role here, which was right while the band was Deep Petrol — on the Sky Tint
   ground (and inside a white card) that is the wrong role and the wrong
   contrast, so the override is gone rather than inverted. */

/* Validation + confirmation — re-typed to theme tokens. GF's error red is its
   own; ours is a palette token so it moves with the palette. */
.blg-form-card .gform_wrapper .gfield_validation_message,
.blg-form-card .gform_wrapper .validation_message {
	font-family: var(--blg-font-body);
	font-size: 0.8125rem;
	color: var(--blg-color-error);
	background: transparent;
	border: 0;
	padding: 0;
}

.blg-form-card .gform_wrapper .gform_validation_errors {
	border-radius: var(--blg-radius-md);
	box-shadow: none;
}

.blg-form-card .gform_confirmation_message {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body-lg);
	color: var(--blg-color-contrast);
	text-align: center;
	margin: 0;
}

/* On the dark band the confirmation replaces the form INSIDE the white card,
   so it stays dark-on-white — no invert needed. Stated so a future reader
   doesn't "fix" it. */

@media (max-width: 768px) {
	.blg-form-card .gform_wrapper .gform_footer .gform_button {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT FORM 7  (legacy — see the engine note in the file header)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fields — pill, neutral-300 stroke (overrides the shared forms.css
   Georgia-Blue-border default; see specificity note above) ───────────────── */

.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-text,
.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-email,
.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-tel,
.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-url,
.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-number {
	background-color: var(--blg-color-base);
	border: 1px solid var(--blg-color-neutral-300);
	border-radius: var(--blg-radius-pill);
	color: var(--blg-color-contrast);
	padding: 0.85rem 1.5rem;
	width: 100%;
}

.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-textarea {
	background-color: var(--blg-color-base);
	border: 1px solid var(--blg-color-neutral-300);
	border-radius: var(--blg-radius-md); /* 12px, per spec */
	color: var(--blg-color-contrast);
	padding: 0.85rem 1.5rem;
	min-height: 9rem;
	width: 100%;
	resize: vertical;
}

.blg-form-card .wpcf7-form .wpcf7-form-control:focus {
	border-color: var(--blg-color-accent-1);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--blg-color-accent-1) 35%, transparent);
	outline: none;
}

.blg-form-card ::placeholder {
	color: var(--blg-color-neutral-500);
	opacity: 1;
}

/* Row layout: CF7 paragraphs stack by default; a 2-up row needs the shortcode
   composition to wrap fields in a flex container (page-assembly concern, not
   this partial). Vertical rhythm between CF7's own <p> wrappers: */
.blg-form-card .wpcf7-form p {
	margin: 0 0 var(--blg-space-sm); /* 16px */
}

.blg-form-card .wpcf7-form p:last-child {
	margin-bottom: 0;
}

/* ── Submit — pill. Default: Georgia Blue fill / white text (6:1015). ────── */

.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-submit {
	display: inline-block;
	font-family: var(--blg-font-heading);
	font-size: var(--blg-size-btn);
	font-weight: var(--blg-fw-heading);
	text-transform: uppercase;
	letter-spacing: 0.2px;
	color: var(--blg-btn-fg);
	background-color: var(--blg-btn-bg);
	border: none;
	border-radius: var(--blg-radius-pill);
	padding: 0.85em 2em;
	cursor: pointer;
	width: auto;
	transition: background-color var(--blg-transition-base);
}

.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-submit:hover {
	background-color: var(--blg-btn-bg-hover);
}

/* (The CF7 submit-on-dark override that used to live here is gone with the
   band's dark ground — see the Band note at the top of this file. The
   remaining CF7 rules are inert while Gravity Forms is the engine.) */

.blg-form-band
	.blg-form-card
	.wpcf7-form
	.wpcf7-form-control.wpcf7-submit:hover {
	background-color: var(--blg-color-secondary);
	color: var(--blg-color-base);
}

/* ── CF7 validation errors/spinner — leave CF7's own markup, just align spacing ── */

.blg-form-card .wpcf7-not-valid-tip {
	font-family: var(--blg-font-body);
	font-size: 0.8125rem;
	color: var(--blg-color-error);
	margin-top: 0.35rem;
}

.blg-form-card .wpcf7-response-output {
	border-radius: var(--blg-radius-md);
	margin-top: var(--blg-space-sm);
}

/* ── Mobile (≤768px) ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.blg-form-card {
		padding: var(--blg-space-md); /* 24px */
	}

	.blg-form-card .wpcf7-form .wpcf7-form-control.wpcf7-submit {
		width: 100%;
		text-align: center;
	}
}