/* ===========================================================================
   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.
   =========================================================================== */

/*
  Card. The old look was one flat 30px blur at 20% opacity, which reads as a
  smudge rather than elevation -- the panel never lifted off the page. Replaced
  with a layered shadow: a tight contact shadow for the edge, a mid spread for
  the lift, and a wide soft one for ambience. Plus a hairline top highlight,
  which is what keeps a white card from disappearing into a white page.
*/
.tfc-form {
  position: relative;
  max-width: 34rem;
  padding: 38px 36px 34px;
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 10px 24px -8px rgba(16, 24, 40, 0.12),
    0 30px 60px -18px rgba(12, 80, 129, 0.16);
  color: #6b7488;
  overflow: hidden;
}

/*
  Brand bar across the top. The card was a plain white rectangle on a white
  page -- correct, and completely anonymous. Three pixels of the brand gradient
  give it an edge to start from and tie the form to the site without tinting
  anything that has to stay readable.
*/
.tfc-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #0c5081 0%, #1878b8 45%, #f05a2b 100%);
}

@media (max-width: 575px) {
  .tfc-form { padding: 28px 22px 26px; border-radius: 16px; }
}

/*
  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.
*/
/*
  The intro is a kicker, not a heading. It was 17px/600 in the same dark grey as
  the question, so the two competed and the eye had to pick. Now it reads as a
  small brand label above the thing actually being asked.
*/
.tfc-form .panel__title {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: #0c5081;
}
/* #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;
}

/*
  5px and fully rounded rather than a 3px square tick. At 3px the track read as
  a hairline rule and the completed segments were hard to tell from the empty
  ones at a glance -- which is the one job a progress bar has.
*/
.tfc-form__progress-step {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: #eef1f4;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tfc-form__progress-step[data-state="done"] { background: #0c5081; }
/* The current segment gets a soft halo so the eye lands on where you are, not
   just on how far you have come. */
.tfc-form__progress-step[data-state="current"] {
  background: #f05a2b;
  box-shadow: 0 0 0 3px rgba(240, 90, 43, 0.14);
}

.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;
}

/*
  The question is the whole screen. It was 26px/600 sitting in the same grey
  family as the label above it, so nothing announced itself as the thing being
  asked. Heavier, darker, tighter, and larger -- and the intro above it steps
  further back to make room.
*/
.tfc-step__title {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  font-size: 29px;
  font-weight: 700;
  /* 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.18;
  letter-spacing: -0.021em;
  color: #1b2130;
}

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

/*
  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;
}

/*
  Option cards. Three things dated the old version: a 6px radius on a 16px row,
  a hairline #e9ecef border that vanished against white, and no movement on
  hover so the rows never felt clickable.

  The resting state now sits on a faint tint rather than pure white, which is
  what gives the border something to be a border *of*. Hover lifts 1px and
  warms the edge; selection is unmistakable rather than a two-shade nudge.
*/
/*
  The card IS the control -- there is no radio dot.

  The <input type="radio"> is still there, still first in the DOM, still driving
  :checked and the label association; it is only visually hidden (see the rule
  above). So the semantics, keyboard navigation and screen-reader announcement
  are unchanged -- what goes away is the 20px hollow circle, which was the most
  dated thing on the screen and did the least work. A row that fills with brand
  colour says "chosen" far louder than a dot ever did.
*/
.tfc-form .options label {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 17px 20px;
  border: 1.5px solid #dfe5ec;
  border-radius: 12px;
  background: #fff;
  font-size: 16.5px;
  font-weight: 500;
  color: #333b4a;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease,
              box-shadow 0.16s ease, transform 0.16s ease;
}
.tfc-form .options label:hover {
  border-color: #0c5081;
  background: #f5f9fc;
  color: #16375f;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -5px rgba(12, 80, 129, 0.28);
}
.tfc-form .options label:active { transform: none; }

/*
  Selected: the row fills with brand blue and the label goes white.

  A solid fill rather than the previous tint. With no radio dot left to carry
  the state, the fill IS the state, and it has to be unmistakable at a glance --
  including on the pass back through the form, which is when people second-guess
  what they picked. White on #0c5081 is about 8:1, so the label gets more
  contrast selected than unselected, not less.
*/
.tfc-form .options input:checked + label,
.tfc-form .options input:checked + label:hover {
  border-color: #0c5081;
  background: #0c5081;
  color: #fff;
  font-weight: 600;
  transform: none;
  box-shadow: 0 4px 12px -4px rgba(12, 80, 129, 0.45);
}

/*
  A tick at the trailing edge of the chosen row. The radio dot alone is 20px of
  quiet signal on the left; on a step where every row looks alike, this is what
  makes the answer readable at a glance -- and on the review pass back through
  the form, which is when people second-guess what they picked.

  Drawn in CSS rather than an <i>: the markup is a Django-rendered choice list
  shared by five steps, and it should not have to know about decoration.
*/
.tfc-form .options label::after {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 9px;
  margin-left: auto;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  border-radius: 1px;
  /* Nudged up because rotating a corner shifts its optical centre below the
     text baseline it is meant to sit level with. */
  margin-bottom: 4px;
  transform: rotate(-45deg) scale(0.5);
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.tfc-form .options input:checked + label::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tfc-form .options label::after,
  .tfc-form .options input:checked + label::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tfc-form .options label,
  .tfc-form .options label:hover { transform: none; }
}
.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;
}

/*
  Inputs rest on a faint fill and go white on focus. That is the modern pattern
  and it earns its keep here: an empty white box on a white card is defined only
  by a hairline, so a column of them reads as floating labels with nothing to
  type into. The fill gives each field a footprint at rest, and dropping it on
  focus makes the active field the brightest thing in the form.
*/
.tfc-form .field input,
.tfc-form .field select,
.tfc-form .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #e6eaef;
  border-radius: 11px;
  background: #fafbfc;
  font-size: 16px;
  color: #3e4555;
  transition: border-color 0.16s ease, box-shadow 0.16s ease,
              background 0.16s ease;
}
.tfc-form .field input::placeholder { color: #a3acbb; }
.tfc-form .field input:hover,
.tfc-form .field select:hover,
.tfc-form .field textarea:hover { border-color: #d3dae2; }
.tfc-form .field input:focus,
.tfc-form .field select:focus,
.tfc-form .field textarea:focus {
  outline: none;
  border-color: #0c5081;
  background: #fff;
  box-shadow: 0 0 0 3.5px rgba(12, 80, 129, 0.13);
}
/* The invalid ring matches the focus ring's weight so a rejected email reads as
   the same kind of state, in a different colour -- not as a heavier one. */
.tfc-form .field input[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fffbfa;
}
.tfc-form .field input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3.5px rgba(192, 57, 43, 0.15);
}
.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: 9px;
  padding: 15px 32px;
  border: 1.5px solid transparent;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.002em;
  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,
              transform 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;
  /* A coloured shadow rather than a neutral one, so the button reads as lit
     from its own surface instead of pasted onto the card. */
  box-shadow: 0 2px 5px rgba(214, 71, 23, 0.24),
              0 8px 18px -6px rgba(214, 71, 23, 0.32);
}
.tfc-form .btn--primary:hover {
  background: #d64717;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(214, 71, 23, 0.28),
              0 12px 24px -8px rgba(214, 71, 23, 0.38);
}
.tfc-form .btn--primary:active {
  background: #bf3f14;
  transform: none;
  box-shadow: 0 1px 2px rgba(214, 71, 23, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .tfc-form .btn--primary:hover { transform: 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; }

/* ---------- consent boxes ----------------------------------------------- */

/*
  The SMS disclosure is long -- it has to be, it is the TCPA text -- so it is set
  small and quiet while staying above the 4.5:1 floor. The checkbox is pinned to
  the first line rather than centred, which is where the eye expects it when the
  label runs to six lines.
*/
.tfc-form__consent {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eef1f4;
}
.tfc-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #5b6475;
  cursor: pointer;
}
.tfc-form .consent:last-of-type { margin-bottom: 0; }
.tfc-form .consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  /* Nudged to sit on the first line's baseline rather than its top edge. */
  margin: 2px 0 0;
  accent-color: #0c5081;
  cursor: pointer;
}
.tfc-form .consent a { color: #0c5081; text-decoration: underline; }
.tfc-form__consent .field__error { margin: -8px 0 12px 28px; }

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