/* ==========================================================================
   THE AMERICA AWARDS 2026 — Apply / Nominate pages
   Page-specific styles only. Extends the existing token/base/component
   system (tokens.css, base.css, components.css) — never overrides them.
   Shared by apply.html and nominate.html.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * ANTI-SPAM HONEYPOT — off-screen (not display:none) so most bots still
 * fill it in; hidden from sighted and screen-reader users.
 * ---------------------------------------------------------------------- */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------- *
 * HERO
 * ---------------------------------------------------------------------- */
.frm-hero {
  padding: calc(var(--space-2xl) + 70px) 0 var(--space-2xl);
  text-align: center;
  background: var(--graphite-950);
  color: var(--ink-on-dark);
}
.frm-hero__inner { max-width: 680px; margin-inline: auto; }
.frm-hero h1 { font-size: var(--step-5); text-wrap: balance; }
.frm-hero__sub {
  margin-top: var(--space-sm);
  font-size: var(--step-1);
  color: var(--ink-on-dark-muted);
  max-width: 58ch;
  margin-inline: auto;
}
.frm-hero__sub + .frm-hero__sub { margin-top: var(--space-sm); }
.frm-hero__deadline {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: 0.55em 1.2em;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--gold);
}
.frm-hero__trust {
  margin-top: var(--space-md);
  font-size: var(--step--2);
  color: var(--ink-on-dark-faint);
  max-width: 56ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------- *
 * TOP INTRO — reassurance line near the top of the page, pointing to the
 * other flow (Apply <-> Nominate) for anyone on the wrong page.
 * ---------------------------------------------------------------------- */
.frm-top-note {
  text-align: center;
  padding: var(--space-md);
  background: var(--graphite-900);
  border-top: 1px solid var(--graphite-line);
  border-bottom: 1px solid var(--graphite-line);
}
.frm-top-note p { font-size: var(--step-0); color: var(--ink-on-dark); }
.frm-top-note__switch { margin-top: 0.4em; font-size: var(--step--1); color: var(--ink-on-dark-faint); }
.frm-top-note__switch a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.15em; margin-left: 0.4em; }
.frm-top-note__switch a:hover { color: var(--ink-on-dark); }

/* ---------------------------------------------------------------------- *
 * FORM SECTION STEP LABEL — small eyebrow-style tag identifying each
 * step/section (e.g. "STEP 2", "SECTION A") ahead of its heading.
 * ---------------------------------------------------------------------- */
.form-section__step {
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin-bottom: 0.4em;
}

/* ---------------------------------------------------------------------- *
 * STRONG SECTION DIVIDER — marks the transition between two distinct
 * parties in a form (e.g. the nominator vs. the nominee on nominate.html).
 * ---------------------------------------------------------------------- */
.form-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
}
.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--gold);
  opacity: 0.5;
}

/* ---------------------------------------------------------------------- *
 * ROUTE SELECTION
 * ---------------------------------------------------------------------- */
.route-section { max-width: 760px; margin-inline: auto; text-align: center; }
.route-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.route-card {
  display: block;
  width: 100%;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid rgba(23,23,26,0.22);
  border-radius: var(--radius-md);
  /* Explicit light-surface background + dark text for the default/unselected
     state. The previous `background: transparent` + `color: var(--text-primary)`
     (ivory, meant for dark backgrounds) meant an unselected card showed
     near-white text directly against the light section behind it. */
  background: #fff;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  color: var(--ink-on-light);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.route-card:hover { border-color: var(--gold-strong); background: var(--gold-soft); }
.route-card.is-selected { background: var(--gold); border-color: var(--gold); color: var(--graphite-950); }
.route-card__hint {
  display: block;
  margin-top: 0.4em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.01em;
  /* Explicit colors for both states — no reliance on inherited color + opacity. */
  color: var(--text-secondary-muted);
}
.route-card.is-selected .route-card__hint { color: rgba(11, 11, 13, 0.72); }

/* ---------------------------------------------------------------------- *
 * FORM STRUCTURE
 * ---------------------------------------------------------------------- */
.app-form { max-width: 860px; margin-inline: auto; }
.form-section { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(23,23,26,0.12); }
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.form-section__title { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: 0.3em; }
.form-section__note { margin-bottom: var(--space-md); font-size: var(--step--1); color: var(--text-secondary-muted); max-width: 65ch; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.field { display: flex; flex-direction: column; gap: 0.45em; }
.field--full { grid-column: 1 / -1; }

.field label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.01em; color: var(--text-secondary); }
.field .optional-tag {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  color: var(--text-secondary-muted);
  margin-left: 0.4em;
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: 0.75em 0.9em;
  border: 1px solid rgba(23,23,26,0.22);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-strong);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Text inputs / textareas — same issue as the select below: the shared rule
   above sets color to --text-primary (ivory, meant for dark backgrounds),
   nearly invisible against these fields' white background. Override with
   dark-charcoal text to match the contrast standard used for the select. */
.field input,
.field textarea {
  color: var(--ink-on-light);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-secondary-muted);
}
.field input:disabled,
.field textarea:disabled {
  color: var(--text-secondary-muted);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Category select — the shared `.field select` rule above sets color to
   --text-primary (ivory, meant for dark backgrounds), which is nearly
   invisible on this field's white background. Override with real
   light-surface contrast: dark charcoal once a category is chosen, medium
   grey for the placeholder (native "requires a value" state via :invalid),
   a firmer border, and a visible custom arrow. */
.field select {
  color: var(--ink-on-light);
  border-color: rgba(23,23,26,0.32);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2317171A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 6 5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 14px;
  padding-right: 2.4em;
}
.field select:invalid { color: var(--text-secondary-muted); }
.field select option { color: var(--ink-on-light); background: #fff; }
.field select option:disabled { color: var(--text-secondary-muted); }
.field select:disabled { color: var(--text-secondary-muted); }
.field-hint { font-size: var(--step--2); color: var(--text-secondary-muted); }
.field-error { font-size: var(--step--2); color: var(--form-danger); display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--form-danger); }
.field.has-error .field-error { display: block; }

/* ---------------------------------------------------------------------- *
 * ACKNOWLEDGMENTS
 * ---------------------------------------------------------------------- */
.check-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: var(--step--1);
  color: var(--text-secondary);
  line-height: 1.5;
}
.check-item input[type="checkbox"] {
  margin-top: 0.25em;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--gold-strong);
}
.check-item a { color: var(--gold-strong); text-decoration: underline; text-underline-offset: 0.15em; }
.check-item.has-error { color: var(--form-danger); }

/* ---------------------------------------------------------------------- *
 * SUBMIT / STATUS
 * ---------------------------------------------------------------------- */
.form-submit { margin-top: var(--space-xl); text-align: center; }
.form-submit__note {
  margin-top: var(--space-sm);
  font-size: var(--step--2);
  color: var(--text-secondary-muted);
  max-width: 52ch;
  margin-inline: auto;
}
.form-status {
  display: none;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--step--1);
  max-width: 60ch;
  margin-inline: auto;
  text-align: left;
}
.form-status.is-visible { display: block; }
.form-status--info { background: var(--gold-soft); border: 1px solid var(--border-gold); color: var(--gold-strong); }
.form-status--error { background: rgba(162,59,46,0.08); border: 1px solid rgba(162,59,46,0.35); color: var(--form-danger); }

/* ---------------------------------------------------------------------- *
 * DATES / STEPS — reuse .process-facts / .process-steps from components.css
 * ---------------------------------------------------------------------- */
.frm-dates.process-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--content-max); margin-inline: auto; }
.frm-steps.process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.frm-steps .process-step__num { color: var(--gold); }
.section .frm-steps .process-step p { color: var(--ink-on-dark-muted); }

/* ---------------------------------------------------------------------- *
 * CROSS-LINK
 * ---------------------------------------------------------------------- */
.cross-link { text-align: center; max-width: var(--content-narrow); margin-inline: auto; }
.cross-link p { margin-bottom: var(--space-sm); color: var(--ink-on-dark-muted); font-size: var(--step-0); }

@media (max-width: 900px) {
  .frm-dates.process-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frm-steps.process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .field-grid { grid-template-columns: 1fr; }
  .route-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .frm-dates.process-facts { grid-template-columns: 1fr; text-align: left; }
  .frm-steps.process-steps { grid-template-columns: 1fr; }
}