/* ============================================================
   AXIS WEBPRO | PAGES/AUDIT.CSS
   References tokens.css + base.css + components.css.
   ============================================================ */

.hero-audit {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  text-align: center;
}

.hero-audit .eyebrow {
  color: var(--color-accent);
}

.hero-audit h1 {
  color: var(--color-text-on-primary);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  max-inline-size: 22ch;
  margin-inline: auto;
}

.hero-audit .hero-lede {
  color: var(--color-text-on-primary);
  opacity: 0.92;
  font-size: var(--fs-h4);
  max-inline-size: 50ch;
  margin-inline: auto;
}

/* Quiz app */
.audit-app {
  background: var(--color-surface);
}

.audit-step {
  background: var(--color-base);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  max-inline-size: 56rem;
  margin-inline: auto;
  box-shadow: var(--shadow-2);
}

.audit-step h3 {
  font-size: var(--fs-h3);
}

.audit-step p {
  color: var(--color-text-muted);
}

/* Lead capture form (reuses .form-row from contact.css patterns) */
.audit-lead-form {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.audit-lead-form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.audit-lead-form .form-row-honeypot {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.audit-lead-form .form-actions {
  margin-block-start: var(--space-3);
}

/* Progress bar */
.audit-progress {
  block-size: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-block-end: var(--space-3);
}

.audit-progress-bar {
  block-size: 100%;
  inline-size: var(--audit-progress, 10%);
  background: var(--color-accent);
  transition: inline-size var(--motion-duration-base) var(--motion-easing);
}

.audit-progress-label {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
}

/* Question host */
.audit-question {
  border: none;
  padding: 0;
  margin: 0;
}

.audit-question-prompt {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  margin-block-end: var(--space-5);
  padding: 0;
}

.audit-options {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

.btn-audit-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  inline-size: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-body);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--motion-duration-base) var(--motion-easing),
              background-color var(--motion-duration-base) var(--motion-easing),
              transform var(--motion-duration-base) var(--motion-easing);
  min-block-size: var(--touch-default);
}

@media (hover: hover) {
  .btn-audit-option:hover {
    border-color: var(--color-accent);
    background: var(--color-base);
  }
}

.btn-audit-option:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Result step */
.audit-score-display {
  text-align: center;
  margin-block: var(--space-6);
}

.audit-score-number {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: 1;
}

.audit-score-out {
  font-size: var(--fs-h2);
  color: var(--color-text-muted);
  margin-inline-start: var(--space-1);
}

.audit-tier {
  margin-block-start: var(--space-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

/* Tier color map. Slugs were renamed from a/b/c/d to semantic
   cold/warm/hot/ready at the 2026-05-20 audit-restore pass.
   Highest tier reads as secondary (blue), middles trend warmer,
   lowest stays in the accent family but at the lowest engagement. */
.audit-tier[data-tier="ready"] { color: var(--color-secondary); }
.audit-tier[data-tier="hot"]   { color: var(--color-primary); }
.audit-tier[data-tier="warm"]  { color: var(--color-accent); }
.audit-tier[data-tier="cold"]  { color: var(--color-text-muted); }

.audit-result-note {
  text-align: center;
  font-size: var(--fs-body);
  margin-block-end: var(--space-5);
}

/* Visually hidden utility */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}