/* Page-specific rules for the RecruiterSimulator.ai landing page.
   Sits on top of the Nocturne design-system stylesheet (styles.css). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent); }

/* Sound-toggle icon swap (replaces the sc-if runtime binding). */
.sound-toggle .icon-on { display: none; }
.sound-toggle.is-unmuted .icon-on { display: block; }
.sound-toggle.is-unmuted .icon-off { display: none; }

/* Step highlight (replaces the ref-driven inline style writes). */
.rs-step {
  display: flex; gap: 16px; padding: 10px 12px; margin: -10px -12px;
  border-radius: var(--radius-md); transition: background 0.25s ease;
  background: transparent;
}
.rs-step.is-active { background: color-mix(in srgb, var(--color-accent-800) 45%, transparent); }
.rs-step-badge {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  background: var(--color-accent-800); color: var(--color-accent-100);
  font-weight: 500; font-size: 14px; display: inline-flex;
  align-items: center; justify-content: center; transition: background 0.25s ease;
}
.rs-step.is-active .rs-step-badge { background: var(--color-accent); }

@media (max-width: 720px) {
  .rs-navlinks, .rs-float { display: none !important; }
}
@media (max-width: 860px) {
  .rs-cols-2 { grid-template-columns: 1fr !important; }
  .rs-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
  .rs-steps-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .rs-cols-4 { grid-template-columns: 1fr !important; }
  .rs-cols-3 { grid-template-columns: 1fr !important; }
}