/* bellaward/form-enhancements.css
   ============================================================
   Companion to form-enhancements.js. Adds:
     - Sticky progress bar at top of #register_form
     - Inline validation error styling (red border + message)
     - Word counter chip below textareas
     - Subtle "you have unsaved changes" affordance (no UI; JS only)
   Drop the <link> and <script> in either form's <head> to revert.
   Loaded on:
     - bellaward/registration_form.php
     - bellaward/edit_nomination_form.php
   ============================================================ */

/* ===== Progress bar ===== */
.fe-progress {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
  border-bottom: 1px solid #e6e9ef;
  box-shadow: 0 2px 8px rgba(10,41,79,0.06);
  padding: 10px 16px;
  margin: 0 -15px 16px;          /* bleed to card edges inside .card-body */
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a2433;
}
.fe-progress__label {
  flex: 0 0 auto;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.fe-progress__bar {
  flex: 1 1 auto;
  height: 8px;
  background: #eef0f4;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.fe-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #b8964a 0%, #d4af6a 50%, #0a294f 100%);
  border-radius: 999px;
  transition: width 0.25s ease-out;
}
.fe-progress__pct {
  flex: 0 0 auto;
  font-weight: 800;
  color: #0a294f;
  min-width: 36px;
  text-align: right;
}
.fe-progress.fe-complete .fe-progress__fill {
  background: linear-gradient(90deg, #2eb872 0%, #1f9259 100%);
}
.fe-progress.fe-complete .fe-progress__pct { color: #1f9259; }

@media (max-width: 480px) {
  .fe-progress { padding: 8px 12px; gap: 10px; font-size: 11.5px; }
  .fe-progress__bar { height: 6px; }
}

/* ===== Inline validation ===== */
.fe-invalid,
input.fe-invalid,
select.fe-invalid,
textarea.fe-invalid {
  border-color: #c0392b !important;
  background-color: #fff8f7 !important;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.08) !important;
}
.fe-error-msg {
  display: block;
  color: #c0392b;
  font: 500 12px/1.4 -apple-system, sans-serif;
  margin: 4px 0 0;
  padding: 0 2px;
  letter-spacing: 0.01em;
}
.fe-error-msg::before {
  content: "⚠ ";
  font-weight: 700;
}

/* ===== Word counter ===== */
.fe-wordcount {
  display: block;
  font: 500 11px/1.3 -apple-system, sans-serif;
  color: #5a6470;
  margin-top: 4px;
  text-align: right;
  letter-spacing: 0.02em;
}
.fe-wordcount .fe-wc-num {
  font-weight: 700;
  color: #0a294f;
}
.fe-wordcount.fe-wc-low .fe-wc-num { color: #b8964a; }   /* under target */
.fe-wordcount.fe-wc-ok .fe-wc-num  { color: #1f9259; }   /* in range */
.fe-wordcount.fe-wc-over .fe-wc-num { color: #c0392b; }  /* over hard cap */
