/**
 * Form Band — full-bleed tinted band wrapping a Gravity Form.
 *
 * The shared shape for every sign-up/application page (volunteer, partner,
 * contact, event submission…). Built as its own partial rather than page CSS
 * so all of them inherit one band. Add the `kd-form-band` class to the
 * section wrapping the Gravity Form.
 *
 * Field layout is NOT done here — the design uses separate labelled fields
 * (First Name | Last Name side by side, City | State | Zip three-up), which is
 * GF's 12-column `layoutGridColumnSpan` per field, configured on the form
 * itself. Do not try to recreate that grid in CSS.
 *
 * Visual styling of the controls comes from assets/css/forms-gravity.css
 * (the design-token bridge). This file only handles the BAND.
 */

/* ── Flush to the hero ───────────────────────────────────────────────────────
   global.css gives the first block after an interior hero a --kd-section-gap
   top margin (120px desktop). The form band is a full-bleed tinted section that
   must butt the hero, so that rhythm is cancelled for this band only.

   Specificity (0,4,1) deliberately beats global.css's
   `main:has(.kd-hero-interior) .entry-content > :first-child` at (0,3,1).
   Same technique as the link-band pattern (link-band.css) — mirror it, don't
   invent a new one. */
main:has(.kd-hero-interior) .entry-content > .kd-form-band:first-child {
	margin-block-start: 0;
}

/* ── The band itself ─────────────────────────────────────────────────────────
   `.kd-section` zeroes vertical padding (plain sections rely on the margin
   rhythm), but a tinted full-bleed band needs its own internal breathing room —
   otherwise the form's last control lands hard against the footer, which has no
   padding-top of its own. --kd-band-pad-y is the token banded sections use. */
.kd-form-band {
	padding-block: var(--kd-band-pad-y);
}

/* ── The form column ─────────────────────────────────────────────────────────
   The field column is ~595px, far narrower than the 1224 content container.
   --kd-measure-form carries that width. Do not borrow --kd-measure-intro
   (574px): a multi-step wizard's step row needs ~582px for three steps plus
   two 24px gaps, so at 574px the last step label wraps to a second line and
   the row doubles in height.
   ⚠️ Headroom is only ~13px. Longer step names, or a fourth step, will wrap
   it again; re-measure the row if the step labels change. */
.kd-form-band .gform_wrapper,
.kd-form-band .kd-form-band__lead {
	max-width: var(--kd-measure-form);
	margin-inline: auto;
}

/* `.kd-form-band__lead` = the optional intro paragraph between the band heading
   and the form (e.g. an event-submission page). Same measure as the form column so
   the two read as one block — left to itself it ran the full 1224px container. */

/* ── Section headers ─────────────────────────────────────────────────────────
   GF draws a 1px rule under a section field ("Your Information"). The design
   has no rule — the label alone separates the group. */
.kd-form-band .gform_wrapper .gfield--type-section {
	border-bottom: 0;
	padding-bottom: 0;
}

/* ── Submit ──────────────────────────────────────────────────────────────────
   Right-aligned per the design. GF's footer is a plain block, so this switches
   it to flex rather than relying on text-align (the button is not inline). */
.kd-form-band .gform_wrapper .gform_footer {
	display: flex;
	justify-content: flex-end;
}

/* ── Wizard chrome spacing ────────────────────────────────────────────────────
   GF gives both the step row and the page footer a flat 24px of separation, so
   the progress indicator sits as close to the first field as the fields sit to
   each other, and the Next button crowds the last field's description. Neither
   reads as a boundary between "where am I" / "the form" / "move on".

   Both move a step up the theme scale — --kd-space-md (24px) to --kd-space-lg
   (40px). Using the existing token rather than a literal keeps the wizard on
   the same rhythm as everything else in the band.

   Scoped to .kd-form-band: these are the only forms with a step wizard, and a
   global change would also move single-page forms that have no steps at all.
   Repeating .gform-theme--framework takes this to (0,4,0), above GF's own. */
.kd-form-band .gform_wrapper.gform-theme--framework .gf_page_steps {
	margin-block-end: var(--kd-space-lg);
}

.kd-form-band .gform_wrapper.gform-theme--framework .gform_page_footer {
	margin-block-start: var(--kd-space-lg);
}