/* =========================================================
   Franchise CSS
   Romm Coffee — franchise process steps.

   Numbered, auto-generated step markers (decimal-leading-zero)
   in the teal brand, laid out as a responsive grid. Content is
   the real 8-step process from the franchise file.

   Works with:
   - Pages/Franchise.cshtml (.franchise-steps)
   - Models/RommFranchise.cs
========================================================= */

.franchise-steps {
  counter-reset: fstep;
  margin: var(--space-8, 3rem) 0 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: var(--space-6, 2rem);
}

@media (min-width: 640px) {
  .franchise-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

@media (min-width: 1000px) {
  .franchise-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.franchise-step {
  counter-increment: fstep;
  padding-top: var(--space-4, 1rem);
  border-top: 2px solid var(--color-secondary, #649ea1);
}

.franchise-step::before {
  content: counter(fstep, decimal-leading-zero);

  display: block;
  margin-bottom: var(--space-3, 0.75rem);

  font-family: var(--font-heading);
  font-size: var(--text-xl, 1.5rem);
  font-weight: var(--weight-bold, 700);
  line-height: 1;
  color: var(--color-secondary-dark, #3f7b7e);
}

.franchise-step-title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-family: var(--font-heading);
  font-size: var(--text-lg, 1.25rem);
  line-height: var(--line-snug, 1.3);
  color: var(--color-text, #12292d);
  text-wrap: balance;
}

.franchise-step-text {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--line-relaxed, 1.7);
  color: var(--color-text-muted, #5f7a7d);
  text-wrap: pretty;
}

/* =========================================================
   Franchise application form states
========================================================= */

/* Honeypot — off-screen, not for real users. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  display: block;
  margin-top: var(--space-1, 0.25rem);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-danger, #b42318);
}

.form-error-summary:not(:empty) {
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-danger, #b42318);
  background: var(--color-danger-light, #feeceb);
  border-radius: var(--radius-sm, 0.5rem);
}

.form-error-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Invalid field highlight (jquery-validation adds .input-validation-error). */
.form-control-custom.input-validation-error,
.form-textarea-custom.input-validation-error {
  border-color: var(--color-danger, #b42318);
}

.form-success {
  padding: var(--space-6, 2rem);
  background: var(--color-success-light, #e7f6ed);
  border: 1px solid
    color-mix(in srgb, var(--color-success, #2f7d4f) 30%, transparent);
  border-radius: var(--radius-lg, 1rem);
  color: var(--color-secondary-dark, #3f7b7e);
}

.form-success strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-heading);
  font-size: var(--text-lg, 1.25rem);
  color: var(--color-success, #2f7d4f);
}