/* ===========================================================================
   Native application form — styling for the legacy theme
   ===========================================================================
   The legacy site iframed this form from forms.thefundingdepartment.net, styled
   by that host's Colorlib "contact100" CSS which does not exist in this repo.
   The rebuild renders the form natively, so it needs its own styling; this
   sheet keeps it in the WrapPixel theme's idiom (brand blue #0c5081, orange
   #f05a2b, pill buttons, soft cards) rather than introducing a second look.

   Self-contained on purpose: it is the only non-legacy stylesheet loaded, so it
   must not depend on custom properties from anywhere else.

   Behaviour lives in static/js/application-form.js, which sets
   data-enhanced="true" to switch on one-step-at-a-time. Without JS every step
   renders at once and the form submits as a single page.
   =========================================================================== */

.tfc-form {
  max-width: 34rem;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(115, 128, 157, 0.2);
  color: #6b7488;
}

/*
  There was a .tfc-form--wide here for "the dedicated apply page, where the form
  is the page". It was applied nowhere and could not usefully be: the form is
  always inside a Bootstrap column (col-md-6 on apply.html, col-md-5 on
  product.html), and a ~34rem measure is what keeps the questions readable
  anyway. Removed rather than wired up.
*/

.tfc-form__intro { margin-bottom: 22px; }

/*
  The intro names the form; the step question is the thing being asked. Those
  were 22px and 20px -- close enough that neither led, so the form read as a flat
  wall. The intro steps back to a label and the question becomes the anchor.
*/
.tfc-form .panel__title {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: #3e4555;
}
/* #6b7488 rather than the theme's #8d97ad throughout: at 13-15px the lighter
   tone is about 3:1 on white, below the 4.5:1 AA wants for body text. The radio
   dot's border keeps #8d97ad -- 3:1 is the right bar for a UI component. */
.tfc-form .muted { color: #6b7488; }
.tfc-form .small { font-size: 14px; }
.tfc-form .mono { font-variant-numeric: tabular-nums; }

/* ---------- progress --------------------------------------------------- */

.tfc-form__progress {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 28px;
}

.tfc-form__progress-step {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #e9ecef;
  transition: background-color 0.25s ease;
}
.tfc-form__progress-step[data-state="done"] { background: #0c5081; }
.tfc-form__progress-step[data-state="current"] { background: #f05a2b; }

.tfc-form__progress-label {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #6b7488;
}

/* ---------- steps ------------------------------------------------------ */

.tfc-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tfc-step__title {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  font-size: 26px;
  font-weight: 600;
  /* Tighter than the body: at display size the theme's 1.3 leading opens up
     into a gap between the two lines these questions usually wrap to. */
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: #2b3140;
}

/* The form lives in a half-width column, so 26px is already large there; on a
   phone it becomes the widest thing on screen. */
@media (max-width: 575px) {
  .tfc-step__title { font-size: 22px; }
}

/*
  No-JS fallback: every step is visible and the form is one long page with a
  single submit. application-form.js sets data-enhanced="true", which is what
  switches on one-step-at-a-time.
*/
.tfc-form[data-enhanced="true"] .tfc-step { display: none; }

.tfc-form[data-enhanced="true"] .tfc-step[data-active="true"] {
  display: block;
  animation: tfc-step-in 0.25s ease;
}

.tfc-form:not([data-enhanced="true"]) .tfc-step + .tfc-step {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(120, 130, 140, 0.13);
}

@keyframes tfc-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tfc-form[data-enhanced="true"] .tfc-step[data-active="true"] { animation: none; }
  .tfc-form__progress-step { transition: none; }
}

/* ---------- radio options ---------------------------------------------- */

.tfc-form .options { margin: 0; padding: 0; list-style: none; }
.tfc-form .options li + li { margin-top: 8px; }

.tfc-form .options input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tfc-form .options label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid #e9ecef;
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  color: #3e4555;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tfc-form .options label::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 2px solid #8d97ad;
  border-radius: 50%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tfc-form .options label:hover { border-color: #0c5081; background: #f4f8fb; }
.tfc-form .options input:checked + label { border-color: #0c5081; background: #f4f8fb; }
.tfc-form .options input:checked + label::before {
  border-color: #0c5081;
  box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 1rem #0c5081;
}
.tfc-form .options input:focus-visible + label {
  outline: 3px solid rgba(12, 80, 129, 0.45);
  outline-offset: 2px;
}

/* ---------- text fields ------------------------------------------------ */

/* Stacked fields, for any .field outside the grid below. */
.tfc-form .field + .field { margin-top: 16px; }

/*
  Step 5 is a grid, not a stack: first and last name share a row so the final
  step looks shorter than five identical boxes stacked up. Everything else spans
  the full width. Single column below the Bootstrap sm breakpoint, where two
  inputs side by side would each be too narrow to type a name into.

  This block must stay AFTER the stacked rule above. Both
  `.tfc-form__fields > .field + .field` and `.tfc-form .field + .field` are three
  classes, so specificity is identical and source order decides -- with the two
  swapped, the 16px margin wins inside the grid, adds to the gap, and the rows
  drift apart.
*/
.tfc-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.tfc-form__fields > .field { grid-column: 1 / -1; }
.tfc-form__fields > .field--half { grid-column: span 1; }
.tfc-form__fields > .field + .field { margin-top: 0; }

@media (max-width: 575px) {
  .tfc-form__fields { grid-template-columns: minmax(0, 1fr); }
  .tfc-form__fields > .field--half { grid-column: 1 / -1; }
}

.tfc-form .field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  /* Was #8d97ad, which is about 3:1 on white -- under the 4.5:1 WCAG AA needs at
     this size. These are the labels on the only fields someone has to type into,
     so they should not be the faintest text in the form. */
  color: #4a5265;
}

.tfc-form .field input,
.tfc-form .field select,
.tfc-form .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #e9ecef;
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  color: #3e4555;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tfc-form .field input:focus,
.tfc-form .field select:focus,
.tfc-form .field textarea:focus {
  outline: none;
  border-color: #0c5081;
  box-shadow: 0 0 0 3px rgba(12, 80, 129, 0.15);
}
.tfc-form .field input[aria-invalid="true"] { border-color: #c0392b; }
.tfc-form .field__help { margin: 6px 0 0; font-size: 13px; color: #6b7488; }
.tfc-form .field__error { margin: 6px 0 0; font-size: 13px; color: #c0392b; }

/* ---------- errors and notices ----------------------------------------- */

.tfc-form .form-errors {
  margin: 0 0 20px;
  padding: 14px 16px;
  list-style: none;
  border-left: 3px solid #c0392b;
  border-radius: 4px;
  background: #fdf1ef;
  font-size: 15px;
  color: #8a2318;
}
.tfc-form .form-errors li + li { margin-top: 6px; }

.tfc-form .notice {
  display: none;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #f3c9c1;
  border-radius: 6px;
  background: #fdf1ef;
  font-size: 15px;
  color: #8a2318;
}
.tfc-form .notice[data-visible="true"] { display: flex; }
.tfc-form .notice i { flex: 0 0 auto; margin-top: 3px; color: #c0392b; }

/* ---------- actions ----------------------------------------------------- */

.tfc-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
/* Primary action always sits at the trailing edge. */
.tfc-form__actions .btn--primary { margin-left: auto; }

/*
  Buttons. Named with the rebuild's own classes rather than Bootstrap's so the
  form template stays independent of which theme is loaded around it. Shapes
  follow the theme's pill buttons.
*/
.tfc-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1.5px solid transparent;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
.tfc-form .btn:hover { text-decoration: none; }

/*
  Solid, not the two-stop gradient with a 14px coloured glow that was here. The
  pill shape stays -- that is the theme's idiom across the site -- but a gradient
  fading to a lighter tint plus a wide orange halo is the dated part, and it also
  weakened the button: the right half sat at #ff8a5c, where white text drops to
  roughly 2.6:1. Flat #f05a2b carries the brand and holds its contrast.
*/
.tfc-form .btn--primary {
  background: #f05a2b;
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
.tfc-form .btn--primary:hover {
  background: #d64717;
  color: #fff;
  box-shadow: 0 2px 6px rgba(214, 71, 23, 0.25);
}
.tfc-form .btn--primary:active { background: #bf3f14; box-shadow: none; }

/*
  Buttons had no focus style at all, so a keyboard user tabbing to Next saw
  nothing. The radio options already do this; the actions should match.
*/
.tfc-form .btn:focus-visible {
  outline: 3px solid rgba(12, 80, 129, 0.45);
  outline-offset: 2px;
}

.tfc-form .btn--outline {
  border-color: #e9ecef;
  background: transparent;
  color: #3e4555;
}
.tfc-form .btn--outline:hover { border-color: #0c5081; background: #f4f8fb; color: #0c5081; }

.tfc-form .btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.tfc-form .panel__note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7488;
}
.tfc-form .panel__note a { color: #0c5081; }