/* Page-specific finish for the Quick Articles pages. Load after main-home-theme.css. */

.mode-overview-box { overflow: hidden; }
.mode-overview-header .mode-overview-icon {
  color: #fff;
}

.mode-overview-section-title.what-it-does,
.mode-overview-section-title.what-it-does i { color: var(--accent); }
.mode-overview-section-title.when-to-use,
.mode-overview-section-title.when-to-use i { color: #9f4b36; }
.mode-overview-section-title.why-use-it,
.mode-overview-section-title.why-use-it i { color: #aa6940; }
.mode-overview-section p,
.mode-overview-section ul { color: var(--text-soft); }

/* The wizard has its own controls, outside the shared .btn styles. */
.wizard-container {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.step-title { color: var(--text); letter-spacing: -.025em; }
.step-description { color: var(--muted); }
.step-bullet {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--muted);
}
.step-bullet.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.step-bullet.completed {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff;
}
.step-connector,
.progress-container { background: var(--border); }
.progress-bar { background: var(--accent-grad); }
.progress-text { color: var(--muted); }
.step-bullet:focus-visible,
.option-card:focus-visible,
.btn-wizard-prev:focus-visible,
.btn-wizard-next:focus-visible,
.btn-wizard-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.question-box,
.feature-toggle {
  background: #fff7f3;
  border-left-color: var(--accent);
  color: var(--text-soft);
}
.tip-box { background: #fff3e9; border-left-color: #b5693d; color: var(--text); }
.example-box { background: #fffaf8; border-color: var(--border); border-left-color: var(--accent); }
.feature-main-box,
.feature-options { background: #fffaf8; border-color: var(--border); }
.feature-explanation h4,
.feature-explanation li,
.options-title { color: var(--text); }
.option-card { border-color: var(--border); border-radius: 12px; background: #fff; }
.option-card:hover { border-color: var(--accent-line); background: #fffaf8; }
.option-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.option-card-icon { color: var(--accent); }
.option-card-title { color: var(--text); }
.option-card-description { color: var(--text-soft); }
.btn-wizard-prev,
.btn-wizard-next,
.btn-wizard-submit { border-radius: 9px; font-weight: 700; }
.btn-wizard-prev { background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text-soft); }
.btn-wizard-prev:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.btn-wizard-next,
.btn-wizard-submit { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 18px rgba(127, 29, 29, .2); }
.btn-wizard-next:hover,
.btn-wizard-submit:hover { background: var(--accent-press); box-shadow: 0 9px 22px rgba(127, 29, 29, .27); }
.btn-wizard-disabled,
.btn-wizard-disabled:hover { background: var(--surface-3); border-color: var(--border); color: var(--muted-2); box-shadow: none; }

/* WordPress Bulk has a separate summary banner and site selection cards. */
.total-articles-banner { background: var(--accent-grad); }
.site-selection-card,
.title-batch-card { border-color: var(--border); }
.site-selection-card:hover,
.title-batch-card:hover { border-color: var(--accent-line); }
.selected-site-info,
.batch-summary { background: var(--accent-soft); border-color: var(--accent-line); }
.batch-number { color: var(--accent); }

/* Keep blue utility buttons and inline icons in the article forms on brand. */
.app-content .btn-outline-info { color: var(--accent); border-color: var(--accent-line); }
.app-content .btn-outline-info:hover { background: var(--accent-soft); }
.app-content :is(i, a, small)[style*="color: #007bff"],
.app-content :is(i, a, small)[style*="color:#0f4deb"],
.app-content :is(i, a, small)[style*="color: #0f4deb"],
.app-content :is(i, a, small)[style*="color:#0d6efd"] { color: var(--accent) !important; }

@media (max-width: 768px) {
  .wizard-container { padding: 20px 16px; }
  .step-bullet { flex-shrink: 0; }
}

@media (max-width: 960px) {
  .quick-articles-wizard .step-indicator {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  .quick-articles-wizard .step-bullet { flex: 0 0 auto; margin: 0 6px; }
  .quick-articles-wizard .step-connector { display: none; }
}