/**
 * Pattern: Certification Help — Intake Form  (patterns/cert-help-form.php)
 *
 * The band reuses `.blg-form-band` + `.blg-form-card` from form-band.css
 * (Deep Petrol band, white H2, Sky Tint lead, white radius-16 card, and the
 * Gravity Forms skin). This partial only adds what the MULTI-STEP form needs:
 * the steps indicator and the Back/Next footer, neither of which appears on
 * any other form on the site.
 *
 * History: this pattern first shipped the form inside a native <dialog> behind
 * a button. That was reverted — see the pattern PHP header for why (the inline
 * opener script never attached its listeners, and the full form is wanted on
 * the page). The dialog CSS lived here and is in git history at 72518e9.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* The light-band treatment this partial used to carry is now the DEFAULT in
   form-band.css — both form bands are closing sections against the same dark
   footer, so the override was the rule wearing a disguise. Deleted rather than
   left as a redundant duplicate: two places setting the same thing is how the
   heading/lead/submit trio drifts apart again. */

/* ── Steps indicator (GF pagination type "steps") ─────────────────────────── */

.blg-cert-form .gform_wrapper .gf_progressbar_wrapper,
.blg-cert-form .gform_wrapper .gf_page_steps {
	margin: 0 0 var(--blg-space-lg); /* 40px → first field */
	padding: 0;
}

.blg-cert-form .gform_wrapper .gf_step {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	color: var(--blg-color-neutral-700);
}

/* Current step — Georgia Blue, the same "you are here" role the breadcrumb
   current-item uses. GF marks it with .gf_step_active. */
.blg-cert-form .gform_wrapper .gf_step.gf_step_active .gf_step_label,
.blg-cert-form .gform_wrapper .gf_step.gf_step_active {
	color: var(--blg-color-primary);
	font-weight: 700;
}

.blg-cert-form .gform_wrapper .gf_step.gf_step_completed .gf_step_label {
	color: var(--blg-color-neutral-700);
}

/* ── Back / Next footer ───────────────────────────────────────────────────
   GF renders page buttons in .gform_page_footer. Both get the theme pill; the
   PREVIOUS button is demoted to an outline so the pair reads as
   secondary-then-primary rather than two equal calls to action. */

.blg-cert-form .gform_wrapper .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--blg-space-sm); /* 16px */
	margin-top: var(--blg-space-lg);
	border: 0;
	padding: 0;
}

.blg-cert-form .gform_wrapper .gform_page_footer .gform_next_button,
.blg-cert-form .gform_wrapper .gform_page_footer .gform_button {
	order: 2;
}

/* Back only needs its ORDER here — its outline-pill look comes from the
   --gf-ctrl-btn-*-secondary variables in form-band.css. GF tags it
   `gform-theme-button--secondary` and drives that role from a parallel
   variable set; a direct rule at this specificity was measured losing to
   GF's own secondary styling (it kept a neutral border and dark ink). */
.blg-cert-form .gform_wrapper .gform_page_footer .gform_previous_button {
	order: 1;
}

/* ── Mobile (≤768px) — stack the step buttons full width ──────────────────── */

@media (max-width: 768px) {
	.blg-cert-form .gform_wrapper .gform_page_footer {
		flex-direction: column-reverse; /* primary (Next) ends up on top */
		align-items: stretch;
	}

	.blg-cert-form .gform_wrapper .gform_page_footer .gform_next_button,
	.blg-cert-form .gform_wrapper .gform_page_footer .gform_previous_button,
	.blg-cert-form .gform_wrapper .gform_page_footer .gform_button {
		width: 100%;
	}
}