/* =============================================================
   ClarityNCLEX — Editorial Design System (indigo accent)
   Inherits base from ../styles.css — overrides accent to indigo
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── NCLEX Indigo Token Overrides ─────────────────────────── */
:root {
  --accent:        #4f46e5;
  --accent-light:  #e0e7ff;
  --accent-dark:   #3730a3;
  --accent-subtle: rgba(79,70,229,0.06);

  /* Override teal → indigo for NCLEX */
  --teal:        #4f46e5;
  --teal-light:  #e0e7ff;
  --teal-dark:   #3730a3;

  /* Keep correct/incorrect from base */
}

/* ── Nav accent ───────────────────────────────────────────── */
.nav-logo .accent,
.logo-nclex em {
  color: var(--accent);
}

/* ── Hero indigo glow ─────────────────────────────────────── */
.hero::before {
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(79,70,229,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(217,119,6,0.04) 0%, transparent 60%);
}

/* ── Buttons — indigo ─────────────────────────────────────── */
.btn-primary,
.btn-cta {
  background: var(--accent);
  color: #ffffff;
}

.btn-primary:hover,
.btn-cta:hover {
  background: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(79,70,229,0.25);
}

.btn-outline {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Answer options — indigo hover ───────────────────────── */
.answer-option:hover,
.answer-btn:hover,
.choice:hover {
  border-color: var(--accent);
  border-left: 4px solid var(--accent);
  background: var(--accent-subtle);
}

.answer-option.selected,
.answer-btn.selected {
  border-color: var(--accent);
  border-left: 4px solid var(--accent);
  background: var(--accent-subtle);
}

/* ── Progress — indigo fill ───────────────────────────────── */
.progress-fill,
.progress {
  background: var(--accent);
}

/* ── Score / results — indigo ─────────────────────────────── */
.results-score,
.score-display {
  color: var(--accent);
}

/* ── Question meta label ──────────────────────────────────── */
.question-number,
.question-meta {
  color: var(--accent);
}

.explanation-title,
.rationale-title {
  color: var(--accent);
}

/* ── Section label ────────────────────────────────────────── */
.section-label { color: var(--accent); }

/* ── Badge ────────────────────────────────────────────────── */
.hero-badge {
  background: var(--accent-light);
  color: var(--accent);
}

.badge-teal,
.badge-accent {
  background: var(--accent-light);
  color: var(--accent);
}

.category-tag {
  background: var(--accent-light);
  color: var(--accent);
}

/* ── Category cards — indigo selected ────────────────────── */
.category-card:hover,
.category-option:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.category-card.selected,
.category-option.selected {
  border-color: var(--accent);
  background: rgba(79,70,229,0.06);
}

/* ── Pricing featured — indigo ────────────────────────────── */
.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79,70,229,0.15), var(--shadow-md);
}

.pricing-badge {
  background: var(--accent);
}

.pricing-features li::before {
  color: var(--accent);
}

/* ── Next / submit buttons ────────────────────────────────── */
#next-btn,
.btn-next,
#submit-btn,
.btn-submit {
  background: var(--accent);
}

#next-btn:hover,
.btn-next:hover {
  background: var(--accent-dark);
}

/* ── NCLEX-specific: Next Generation section headers ─────── */
.ngn-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── NCLEX matrix / multi-select variants ─────────────────── */
.answer-option.multi-select:hover {
  border-color: var(--accent);
}

.answer-option.multi-select.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* ── Stat card accent ─────────────────────────────────────── */
.stat-card.accent-teal {
  border-top-color: var(--accent);
}

/* ── ECG line — indigo tint ───────────────────────────────── */
.hero-ecg {
  opacity: 0.12;
  filter: hue-rotate(170deg);
}