/* ==========================================================================
   Form band — shared component
   Source: Figma 12030:2637 (Cert III "Section_Form") and 11671:8457
   (Career pathways "Section_Form Block 1") — the same band drawn twice.

   Moved out of course-single.css on 2026-08-10. Measured before moving: 28 rules,
   of which exactly one carried a page-specific value (the band background). Copying
   the other 27 into a second page CSS is how `.btn--sm` and the `.btn--link`
   underline came to disagree with Figma in two places at once, so the band lives
   here and each page overrides only its own background.

   Layout: intro column (fixed 476) + Gravity Forms card (fill), 64 gap. Below 1200
   it stacks — see the media query at the foot of this file.

   Desktop-first: the only @media is max-width and sits AFTER the desktop rules.
   ========================================================================== */

.form-band {
  padding: 112px 80px;                  /* Figma 12030:2637 padding 112 80 */
  /* No background here on purpose: it is the one page-specific value. Cert III sets
     `.form-band--course`; other pages add their own modifier. */
}

.form-band__inner {
  max-width: 1280px;                    /* Figma 12030:2638 width 1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;                            /* Figma 12030:2638 itemSpacing 64 */
  min-width: 0;
}

.form-band__intro {
  flex: 0 0 476px;                      /* Figma 12030:2639 width 476 FIXED */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;                            /* Figma 12030:2639 itemSpacing 48 */
}

.form-band__heading-wrap {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma 12030:2641 itemSpacing 36 */
}

.form-band__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma 12030:2644 FrutigerLTStd-Roman */
  font-size: 44px;                      /* Figma 12030:2644 44px */
  line-height: 1.1;                     /* Figma 12030:2644 LH 48.4 / 44 */
  letter-spacing: -0.01em;              /* Figma 12030:2644 LS -0.44 */
  color: var(--color-navy-darkest);     /* Figma 12030:2644 fill #03060c */
}

.form-band__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 12030:2646 FrutigerLTStd-Bold */
  font-size: 20px;                      /* Figma 12030:2646 20px */
  line-height: 1.3;                     /* Figma 12030:2646 LH 26 / 20 */
  color: var(--color-navy-darkest);     /* Figma 12030:2646 fill #03060c */
}

/* ---- the Gravity Form card ---------------------------------------------- */

.form-band__form {
  flex: 1 1 auto;
  min-width: 0;
  padding: 36px;                        /* Figma 12030:2648 padding 36 */
  background-color: var(--color-white); /* Figma 12030:2648 fill #ffffff */
  border-radius: var(--radius-sm);      /* Figma 12030:2648 cornerRadius 4 */
}

.form-band__form .gform_fields {
  row-gap: 24px;                        /* Figma 12030:2649 itemSpacing 24 */
  column-gap: 24px;                     /* Figma 12030:2650 row itemSpacing 24 — the paired name/contact rows */
}

.form-band__form .gform_footer {
  margin-top: 24px;                     /* Figma 12030:2649 itemSpacing 24 — last field to submit */
  padding: 0;
}

/* Both bands draw the message box at 668x180 (Figma 11671:8498 on Career pathways,
   12030:2673 on Cert III). It takes TWO things, and either alone does nothing:
   1. the field's `"size": "small"` in inc/forms/*.json — at `large` Gravity Forms sizes
      the box from a rows count (10 rows -> 288px) and ignores CSS height entirely, even
      an injected `!important` rule;
   2. this variable — once `size` is small the framework theme derives the height from
      `--gf-ctrl-textarea-height`, whose own default is 130px.
   Measured both ways round before settling on it. */
.form-band__form .gform_wrapper {
  --gf-ctrl-textarea-height: 180px;

  /* Gravity Forms' framework theme renders every label and input at 14px from its own
     `--gf-font-size-primary`; all three frames that draw this band specify 16px / LH 22.4
     (Qualifications 11694:5404 + I12030:3043;4179:9061, Cert III 12030:2652, Career pathways
     11671:8481). Nothing had ever overridden it, so the whole band ran a step small — and on
     Qualifications that made every checkbox 12-28px narrower than drawn, which let a third
     one onto a row the design wraps at two. Set on the band, not globally: the phase-08 form
     pages use a different band (.colour-form-cta) and their frames are not verified against
     this size. User decision 2026-08-11. */
     The variable names are not guessable and two plausible ones do nothing: the framework
     resolves a field label from `--gf-ctrl-label-*-primary` and an inline choice label from
     `--gf-ctrl-label-*-secondary` (`--gf-ctrl-label-font-size` alone is inert), and the choice
     box reads `--gf-ctrl-choice-size`, which GF re-declares as `var(--gf-ctrl-choice-size-md)`
     in the same block it sets on the wrapper — so overriding `-md` is what actually lands.
     Each of these was confirmed against the rendered value, not assumed. */
  --gf-ctrl-label-font-weight-primary: 400;    /* Figma 11694:5404 FrutigerLTStd-Roman */
  --gf-ctrl-label-line-height-primary: 1.4;    /* LH 22.4 / 16 */
  --gf-ctrl-label-font-size-secondary: 16px;   /* inline choice labels — Figma I12030:3043;4179:9061 */
  --gf-ctrl-label-line-height-secondary: 1.4;
  --gf-ctrl-font-size: 16px;                   /* text inputs + textarea */
  --gf-ctrl-choice-size-md: 18px;              /* Figma I12030:3043;4179:9060 box 18x18 */
  --gf-label-space-x-secondary: 8px;           /* box-to-label gap: Figma label starts at x+26 = 18 + 8 */
  /* GF ships rgba(17,35,55,0.7) — navy-tinted and darker than the design's warm 60% black.
     Both frames draw the placeholder as #0d0b00 at 60% (…;4179:9043). Raised by QA round 2 on
     Career pathways; the token already existed for the non-GF inputs (forms.css:116). */
  --gf-ctrl-placeholder-color: var(--color-dark-60);
}

/* The field label's size is the one value no variable reaches: weight and line-height from
   the `-primary` family above both land, but its `--gf-local-font-size` is fed from elsewhere
   and stays 14px. Declared outright, exactly as the site's other form band already does
   (partnerships.css:857, "QA #17"). Covers legend.gfield_label too — the checkbox group's
   label — which Figma also draws at 16px (11694:5414). */
.form-band__form .gform_wrapper .gfield_label {
  font-weight: 400;                     /* Figma 11694:5404 FrutigerLTStd-Roman — GF ships 500 */
  font-size: 16px;                      /* Figma 11694:5404 / 11694:5414 16px */
  line-height: 1.4;                     /* LH 22.4 / 16 */
}

/* Rendered when the form id cannot be resolved, so the band never collapses to an
   empty white card (cms-data.md: every dynamic source needs a defined empty state). */
.form-band__empty {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-navy);
}

/* ---- help card (phone) -------------------------------------------------- */

.help-card {
  position: relative;
  background-color: var(--color-white); /* Figma 12030:2647 fill #ffffff */
  border: 1px solid var(--color-navy-lightest); /* Figma 12030:2647 stroke #e6e7e9 */
  border-radius: var(--radius-sm);      /* Figma 12030:2647 cornerRadius 4 */
  box-shadow: var(--shadow-md);         /* Figma 12030:2647 DROP_SHADOW 0 3 16 -4 rgba(0,0,0,0.09) */
  overflow: hidden;
}

.help-card__body {
  padding: 24px;                        /* Figma I12030:2647;10503:9757 padding 24 */
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma I12030:2647;10503:9757 itemSpacing 18 */
}

/* The phone glyph sits on its OWN line above the heading, which starts back at the
   icon's left edge — Figma I12030:2647;10503:9758 is layoutMode VERTICAL, and the
   node render puts the icon at y 24..54 with the heading at y 66, sharing x. Built
   as a row first, which indented the copy into a second column. Same component and
   same layout on Career pathways (I11671:8467;10503:9758). QA 2026-08-10 #10. */
.help-card__top {
  display: flex;
  flex-direction: column;               /* Figma I12030:2647;10503:9758 VERTICAL */
  align-items: flex-start;
  gap: 12px;                            /* Figma I12030:2647;10503:9758 itemSpacing 12 */
}

.help-card__icon {
  flex: 0 0 auto;
  font-size: 30px;                      /* Figma I12030:2647;10503:9759 instance box 30x30 */
  line-height: 1;
  color: var(--color-tangerine);        /* Figma I12030:2647;10503:9759 fill #ff6600 */
}

.help-card__text {
  align-self: stretch;                  /* Figma I12030:2647;10503:9760 sizingH=FILL — the column's flex-start would otherwise shrink-wrap it */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma I12030:2647;10503:9760 itemSpacing 16 */
}

.help-card__text p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma I12030:2647;10503:9762 FrutigerLTStd-Roman */
  font-size: 14px;                      /* Figma I12030:2647;10503:9762 14px */
  line-height: 1.4;                     /* LH 19.6 / 14 */
  color: var(--color-navy);             /* Figma I12030:2647;10503:9762 fill #0b1628 */
}

.help-card__title {
  font-weight: 700 !important;          /* Figma I12030:2647;10503:9761 FrutigerLTStd-Bold */
  font-size: var(--h6-size) !important; /* 20px */
  line-height: var(--h6-lh) !important; /* LH 26 / 20 */
  letter-spacing: -0.01em;              /* LS -0.2 */
}

.help-card__actions {
  margin: 0;
}

.help-card__cta {
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma I12030:2647;10503:9764 FrutigerLTStd-Bold */
  font-size: 14px;                      /* 14px */
  line-height: 1.4;                     /* LH 19.6 / 14 */
  color: var(--color-navy);             /* Figma I12030:2647;10503:9764 fill #0b1628 */
  /* Figma 4179:8937 Style=Link, Colour=Dark carries no rule. Set to none rather than
     just dropped, because base.css:73 underlines every `a`. */
  text-decoration: none;
}

.help-card__strip {
  display: block;
  height: 6px;                          /* Figma I12030:2647;10503:9901 height 6 */
  background-color: var(--color-accent-light-orange); /* Figma I12030:2647;10503:9901 fill #ffad77 */
}

/* --------------------------------------------------------------------------
   Below 1200 the 476 + fill pair stops working — the same cutoff the pages that
   use this band apply to their own columns.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .form-band {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50, gutter 20 */
  }

  .form-band__inner {
    flex-direction: column;
    gap: 48px;
    /* The desktop `align-items: flex-start` keeps the two columns top-aligned; once
       stacked it collapses both children to their content width, which left the form
       occupying about half the band. */
    align-items: stretch;
  }

  .form-band__intro {
    flex: 0 0 auto;
  }

  .form-band__heading {
    font-size: 32px;                    /* Figma Variables mobile H2 44 -> 32 */
  }

  .form-band__copy {
    font-size: 18px;                    /* Figma Variables mobile Text Large 20 -> 18 */
  }

  .form-band__form {
    padding: 24px;                      /* inner Padding medium 36 -> 24 */
  }

  .help-card__title {
    font-size: 18px !important;         /* Figma Variables mobile H6 20 -> 18 */
  }
}