/* HWF Form Polish — Tier 1
 * Scoped to .hwf-polished-form. Apply this class to any GF form that should
 * inherit the HWF polish layer (type, focus states, progress bar, page-transition
 * animations, etc.). The form's own identifier class (e.g. .grant-application,
 * .hwf-employer-signup) lives alongside it for form-specific overrides.
 * Companion to hwf-form-polish.php. Bump version in PHP on changes.
 *
 * Sections:
 *   1. Tokens at form scope
 *   2. Form container + typography baseline
 *   3. Progress bar redesign
 *   4. Section heads
 *   5. Field labels + descriptions + required asterisk
 *   6. Inputs (text, email, tel, number, date, textarea, select)
 *   7. Focus state
 *   8. Buttons
 *   9. Validation errors
 *  10. File upload area
 *  11. Page entry animation
 *  12. Mobile adjustments
 */

/* ─── 1. Tokens at form scope ─────────────────────────────────────────── */

.hwf-polished-form {
  /* Brand */
  --hwf-blue:        #1E94D2;
  --hwf-blue-dark:   #156A99;
  --hwf-blue-tint:   #DCEEF8;

  /* Neutrals */
  --hwf-ink:         #0F172A;
  --hwf-ink-muted:   #475569;
  --hwf-ink-quiet:   #94A3B8;
  --hwf-rule:        #E2E8F0;       /* light — for section dividers, dashed borders */
  --hwf-rule-strong: #9CA3AF;       /* ~25% darker — for input/control borders */
  --hwf-bg-soft:     #F8FAFC;

  /* Semantic */
  --hwf-required:    #9D2235;        /* sophisticated burgundy — strong accent, not "internet red" */
  --hwf-error:       #DC2626;

  /* Motion */
  --hwf-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --hwf-fast:        140ms;
  --hwf-med:         220ms;

  /* Override Orbital theme tokens at form scope.
     Critical: --gf-ctrl-size + --gf-ctrl-line-height drive Orbital's control
     sizing. Default Orbital sets line-height to a fixed pixel height (38px),
     which clips Plus Jakarta Sans content. Set line-height to a unitless
     multiplier so element height = font + padding + padding. */
  --gf-ctrl-border-color:           var(--hwf-rule-strong);
  --gf-ctrl-border-color-focus:     var(--hwf-blue);
  --gf-ctrl-color-primary:          var(--hwf-blue);
  --gf-color-primary:               var(--hwf-blue);
  --gform-theme-control-border-color-focus: var(--hwf-blue);

  --gf-ctrl-line-height:            1.45;
  --gf-ctrl-font-size:              0.9375rem;     /* 15px */
  --gf-ctrl-padding-y:              0.5rem;        /* 8px */
  --gf-ctrl-padding-x:              0.75rem;       /* 12px */
  --gf-ctrl-size:                   auto;

  /* Field-to-field vertical spacing — matches Dan's previous --gf-form-gap-y */
  --gf-form-gap-y:                  20px;
}

/* ─── 2. Form container + typography baseline ─────────────────────────── */

.hwf-polished-form,
.hwf-polished-form input,
.hwf-polished-form select,
.hwf-polished-form textarea,
.hwf-polished-form button,
.hwf-polished-form label,
.hwf-polished-form legend,
.hwf-polished-form h3 {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';
}

.hwf-polished-form {
  color: var(--hwf-ink);
  font-size: 16px;
  line-height: 1.55;
}

/* ─── 3. Progress bar redesign ────────────────────────────────────────── */

.hwf-polished-form .gf_progressbar_wrapper {
  margin: 0 0 2.75rem;
  padding: 0;
  min-height: 0;
  height: auto;
  display: block;
}

.hwf-polished-form p.gf_progressbar_title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--hwf-ink-muted);
  letter-spacing: 0.01em;
  margin: 0 0 0.625rem;
  padding: 0;
  height: auto;
  min-height: 0;
}

.hwf-polished-form .gf_step_current_page,
.hwf-polished-form .gf_step_page_count {
  font-weight: 700;
  color: var(--hwf-ink);
  font-variant-numeric: tabular-nums;
}

.hwf-polished-form .gf_progressbar,
.hwf-polished-form div.gf_progressbar.gf_progressbar_blue {
  background: var(--hwf-rule);
  height: 8px;
  min-height: 8px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: none;
  border: 0;
  padding: 0;
}

.hwf-polished-form .gf_progressbar_percentage,
.hwf-polished-form div.gf_progressbar_percentage.percentbar_blue {
  background: linear-gradient(90deg, var(--hwf-blue) 0%, var(--hwf-blue-dark) 100%);
  height: 100%;
  min-height: 8px;
  border-radius: 999px;
  transition: width var(--hwf-med) var(--hwf-ease);
  box-shadow: none;
  padding: 0;
}

.hwf-polished-form .gf_progressbar_percentage span {
  display: none;            /* hide the inline "16%" — the bar + step counter say it */
}

/* ─── 4. Section heads ────────────────────────────────────────────────── */

.hwf-polished-form .gsection {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
}

.hwf-polished-form .gsection_title {
  font-size: 1.875rem;       /* ~30px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--hwf-ink);
  margin: 0 0 0.5rem;
}

.hwf-polished-form .gsection_description {
  font-size: 1rem;
  color: var(--hwf-ink-muted);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hwf-rule);
}

/* ─── 5. Field labels + descriptions + required asterisk ──────────────── */

.hwf-polished-form .gfield_label,
.hwf-polished-form legend.gfield_label {
  font-size: 0.9375rem;       /* ~15px */
  font-weight: 600;
  color: var(--hwf-ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.5rem;
  transition: color var(--hwf-fast) var(--hwf-ease);
}

.hwf-polished-form .gfield_required,
.hwf-polished-form .gfield_required.gfield_required_asterisk,
.hwf-polished-form .gform_required_legend,
.hwf-polished-form .gform_required_legend .gfield_required {
  color: var(--hwf-required) !important;
}

.hwf-polished-form .gfield_required.gfield_required_asterisk {
  font-weight: 400;
  margin-left: 0.25em;
}

.hwf-polished-form .gform_required_legend {
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0 0 1.5rem;
}

.hwf-polished-form .gfield_description {
  font-size: 0.8125rem;       /* ~13px */
  color: var(--hwf-ink-muted);
  line-height: 1.5;
  margin-top: 0.5rem;
}

.hwf-polished-form .gfield_description.instruction {
  color: var(--hwf-ink-quiet);
  font-style: italic;
}

/* Sub-labels (First, Last, Street, City, ZIP, etc.) */
.hwf-polished-form .gform-field-label--type-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--hwf-ink-quiet);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 0.375rem;
}

/* ─── 6. Inputs ───────────────────────────────────────────────────────── */

.hwf-polished-form input[type="text"],
.hwf-polished-form input[type="email"],
.hwf-polished-form input[type="tel"],
.hwf-polished-form input[type="number"],
.hwf-polished-form input[type="url"],
.hwf-polished-form input[type="password"],
.hwf-polished-form select,
.hwf-polished-form select.gfield_select,
.hwf-polished-form select.large,
.hwf-polished-form textarea {
  width: 100%;
  font-size: 0.9375rem;          /* 15px — matches Dan's prior density */
  font-weight: 400;
  line-height: 1.45;
  height: auto;
  min-height: 0;
  color: var(--hwf-ink);
  background-color: #fff;
  border: 1px solid var(--hwf-rule-strong);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;       /* 8px / 12px */
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  box-sizing: border-box;
  transition:
    border-color var(--hwf-fast) var(--hwf-ease),
    box-shadow var(--hwf-fast) var(--hwf-ease),
    background-color var(--hwf-fast) var(--hwf-ease);
}

.hwf-polished-form textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.55;
}

.hwf-polished-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

.hwf-polished-form input::placeholder,
.hwf-polished-form textarea::placeholder {
  color: var(--hwf-ink-quiet);
  opacity: 1;
}

.hwf-polished-form option.gf_placeholder {
  color: var(--hwf-ink-quiet);
}

/* ─── 7. Focus state ──────────────────────────────────────────────────── */

.hwf-polished-form input[type="text"]:focus,
.hwf-polished-form input[type="email"]:focus,
.hwf-polished-form input[type="tel"]:focus,
.hwf-polished-form input[type="number"]:focus,
.hwf-polished-form input[type="url"]:focus,
.hwf-polished-form input[type="password"]:focus,
.hwf-polished-form select:focus,
.hwf-polished-form select.gfield_select:focus,
.hwf-polished-form select.large:focus,
.hwf-polished-form textarea:focus,
.hwf-polished-form input.large:focus,
.hwf-polished-form input.datepicker:focus {
  outline: 0;
  border-color: var(--hwf-blue) !important;
  box-shadow:
    0 0 0 3px var(--hwf-blue-tint),
    0 1px 0 rgba(15, 23, 42, 0.02) !important;
  background-color: #fff;
}

/* Belt-and-suspenders for selects: Orbital's compound focus rules can land
   harder than ours despite specificity. The !important above on shorthand
   plus this dedicated select-only rule guarantees the focus state lands. */
.hwf-polished-form select:focus,
.hwf-polished-form select:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* Lift the label on focus-within for that focused-affordance moment */
.hwf-polished-form .gfield:focus-within .gfield_label {
  color: var(--hwf-blue-dark);
}

/* Datepicker input keeps its calendar-icon space */
.hwf-polished-form input.datepicker {
  background-position: right 0.875rem center;
}

/* Checkbox + radio choices spacing */
.hwf-polished-form .gfield_checkbox .gchoice,
.hwf-polished-form .gfield_radio .gchoice {
  margin-bottom: 0.625rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

/* Custom checkbox (replaces browser default — gives us a visible unchecked
   border in our brand instead of the inconsistent system rendering) */
.hwf-polished-form input[type="checkbox"].gfield-choice-input,
.hwf-polished-form input[type="radio"].gfield-choice-input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0.1875rem 0 0 0;
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid var(--hwf-ink-quiet);
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color var(--hwf-fast) var(--hwf-ease),
    background-color var(--hwf-fast) var(--hwf-ease),
    box-shadow var(--hwf-fast) var(--hwf-ease);
  position: relative;
}

.hwf-polished-form input[type="radio"].gfield-choice-input {
  border-radius: 50%;
}

.hwf-polished-form input[type="checkbox"].gfield-choice-input:hover,
.hwf-polished-form input[type="radio"].gfield-choice-input:hover {
  border-color: var(--hwf-blue);
}

.hwf-polished-form input[type="checkbox"].gfield-choice-input:focus,
.hwf-polished-form input[type="radio"].gfield-choice-input:focus {
  outline: 0 !important;
}

.hwf-polished-form input[type="checkbox"].gfield-choice-input:focus-visible,
.hwf-polished-form input[type="radio"].gfield-choice-input:focus-visible {
  outline: 0 !important;
  border-color: var(--hwf-blue) !important;
  box-shadow: 0 0 0 3px var(--hwf-blue-tint) !important;
}

.hwf-polished-form input[type="checkbox"].gfield-choice-input:checked {
  background-color: #fff;
  border-color: var(--hwf-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.5L5 9.5L10 3.5' stroke='%231E94D2' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.hwf-polished-form input[type="radio"].gfield-choice-input:checked {
  background-color: #fff;
  border-color: var(--hwf-blue);
  border-width: 5px;
}

.hwf-polished-form .gform-field-label--type-inline {
  font-weight: 400;
  color: var(--hwf-ink);
  cursor: pointer;
  line-height: 1.5;
  padding-top: 0.0625rem;
}

/* ─── 8. Buttons (imported from CS Theme Options 2026-05-05) ─────────── */
/* Brand button language: classic uppercase, tight padding, dark border.
   Uses theme-level CSS vars (--link, --link-interaction) defined globally
   via Cornerstone Theme Options. Selector kept as .gform_wrapper so when
   the plugin generalizes to all forms (Path B) these naturally apply. */

.gform_wrapper input[type="button"],
.gform_wrapper .gform_drop_area button,
.gform_wrapper input[type="submit"]{
  background: var(--link) !important;
  text-shadow: none;
}
.gform_wrapper input[type="button"]:hover,
.gform_wrapper .gform_drop_area button:hover,
.gform_wrapper input[type="submit"]:hover{
  background: var(--link-interaction) !important;
}

/* Form buttons only — sizing, color, border (drop-area button skips these) */
.gform_wrapper input[type="button"],
.gform_wrapper input[type="submit"]{
  min-width: 100px !important;
  color: rgb(255 255 255) !important;
  height: auto !important;
  font-size: 0.8rem !important;
  padding: 0.15rem 2rem 0.15rem 2rem !important;
  text-transform: uppercase !important;
  border: 1px solid rgb(9 44 62) !important;
}

/* Focus state — match the brand-blue halo from form fields. Kills the
   browser's default fat outline on all button-like surfaces. */
.gform_wrapper input[type="button"]:focus,
.gform_wrapper input[type="submit"]:focus,
.gform_wrapper .gform_drop_area button:focus,
.gform_wrapper .gform_button_select_files:focus {
  outline: 0 !important;
}

/* Buttons sit on dark/branded backgrounds — the light tint halo (used on
   white-bg fields/checkboxes) was lost in the color relationships. Use the
   vivid brand blue here for contrast. */
.gform_wrapper input[type="button"]:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible,
.gform_wrapper .gform_drop_area button:focus-visible,
.gform_wrapper .gform_button_select_files:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--hwf-blue) !important;
}

.hwf-polished-form .gform-page-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hwf-rule);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ─── 9. Validation errors ────────────────────────────────────────────── */

.hwf-polished-form .gfield_error input[type="text"],
.hwf-polished-form .gfield_error input[type="email"],
.hwf-polished-form .gfield_error input[type="tel"],
.hwf-polished-form .gfield_error input[type="number"],
.hwf-polished-form .gfield_error select,
.hwf-polished-form .gfield_error textarea,
.hwf-polished-form input[aria-invalid="true"],
.hwf-polished-form select[aria-invalid="true"],
.hwf-polished-form textarea[aria-invalid="true"] {
  border-color: var(--hwf-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.hwf-polished-form .gfield_validation_message,
.hwf-polished-form .validation_message {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hwf-error);
  background: transparent;
  border: 0;
  padding: 0;
}

/* ─── 10. File upload area ────────────────────────────────────────────── */

.hwf-polished-form .gform_drop_area {
  background: var(--hwf-bg-soft);
  border: 1.5px dashed var(--hwf-rule);
  border-radius: 10px;
  padding: 1.75rem 1.25rem;
  color: var(--hwf-ink-muted);
  font-size: 0.9375rem;
  text-align: center;
  transition: border-color var(--hwf-fast) var(--hwf-ease), background-color var(--hwf-fast) var(--hwf-ease);
}

.hwf-polished-form .gform_drop_area:hover {
  border-color: var(--hwf-blue);
  background: #fff;
}

.hwf-polished-form .gform_drop_instructions {
  color: var(--hwf-ink-muted);
  font-size: 0.9375rem;
}

.hwf-polished-form .gform_fileupload_rules {
  font-size: 0.75rem;
  color: var(--hwf-ink-quiet);
  margin-top: 0.5rem;
  display: block;
}

/* Imported from CS Theme Options 2026-05-05: per-file upload progress bar
   (the per-file bar inside the drop area, distinct from the multi-page form
   progress bar) + drop-area icon color. */
.gform_wrapper .gfield_fileupload_progressbar_progress {
  background-color: var(--brand-secondary) !important;
}

.gform_wrapper .gform_drop_area::before {
  color: var(--brand-secondary) !important;
}

/* ─── 11. Page transitions (AJAX-driven, choreographed) ──────────────── */
/*
 * Form is in AJAX mode (CS form-integration AJAX = true). hwf-form-polish.js
 * adds .hwf-leaving-{direction} to the current page on Next/Previous click,
 * then .hwf-entering-{direction} to the new page after gform_post_render.
 * Direction = forward (Next) or backward (Previous).
 *
 * Progress bar morph is JS-driven (width transition); existing transition
 * declaration on .gf_progressbar_percentage in section 3 handles the easing.
 *
 * Honors prefers-reduced-motion: animations only apply when the user hasn't
 * opted out.
 */

/* Page-level animations */
@keyframes hwf-slide-out-forward {
  from { transform: translateX(0);      opacity: 1; }
  to   { transform: translateX(-40px);  opacity: 0; }
}

@keyframes hwf-slide-out-backward {
  from { transform: translateX(0);      opacity: 1; }
  to   { transform: translateX(40px);   opacity: 0; }
}

@keyframes hwf-page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Field-level cascade — fades up, slight rise. The page enter is a fast
   container fade; fields stagger inside it. Net effect: page container
   "appears", then fields cascade in over ~700ms. */
@keyframes hwf-field-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Page leave — directional slide out, slower than v1.6 (320ms) */
  .hwf-polished-form .gform_page.hwf-leaving-forward {
    animation: hwf-slide-out-forward 320ms var(--hwf-ease) both;
  }
  .hwf-polished-form .gform_page.hwf-leaving-backward {
    animation: hwf-slide-out-backward 320ms var(--hwf-ease) both;
  }

  /* Page enter — fast container fade so the field cascade is the star */
  .hwf-polished-form .gform_page.hwf-entering-forward,
  .hwf-polished-form .gform_page.hwf-entering-backward {
    animation: hwf-page-fade-in 220ms var(--hwf-ease) both;
  }

  /* Field cascade inside entering page — honeypot field excluded so it
     doesn't waste a stagger slot. nth-child indexes count all siblings,
     so on page 1 (which has a honeypot at child 1) the visible cascade
     starts at child 2; on other pages at child 1. */
  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:not(.gfield--type-honeypot),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:not(.gfield--type-honeypot) {
    animation: hwf-field-rise 380ms var(--hwf-ease) both;
    opacity: 0;
  }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(1),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(1) { animation-delay: 50ms; }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(2),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(2) { animation-delay: 140ms; }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(3),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(3) { animation-delay: 230ms; }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(4),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(4) { animation-delay: 320ms; }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(5),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(5) { animation-delay: 410ms; }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(6),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(6) { animation-delay: 500ms; }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(7),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(7) { animation-delay: 590ms; }

  .hwf-polished-form .gform_page.hwf-entering-forward .gfield:nth-child(8),
  .hwf-polished-form .gform_page.hwf-entering-backward .gfield:nth-child(8) { animation-delay: 680ms; }
}

/* ─── 12. Mobile adjustments ──────────────────────────────────────────── */

@media (max-width: 720px) {
  .hwf-polished-form .gsection_title {
    font-size: 1.5rem;
  }

  .hwf-polished-form input[type="text"],
  .hwf-polished-form input[type="email"],
  .hwf-polished-form input[type="tel"],
  .hwf-polished-form input[type="number"],
  .hwf-polished-form select,
  .hwf-polished-form textarea {
    font-size: 1rem;            /* keeps iOS from auto-zooming on focus */
    padding: 0.75rem 0.875rem;
  }

  .hwf-polished-form .gform-page-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.625rem;
  }

  .hwf-polished-form .gform_next_button,
  .hwf-polished-form .gform_previous_button,
  .hwf-polished-form .gform_button {
    width: 100%;
    text-align: center;
  }

  .hwf-polished-form .gform_drop_area {
    padding: 1.25rem 1rem;
  }
}