/* =============================================================================
 * XEGORA Configurator Xerox — Wizard Theme Overrides
 *
 * This file is intentionally minimal — the actual brand defaults live in
 * wizard-base.css (CSS variables on .xcx-wizard). This file is the
 * extension point for:
 *
 *   1. Brand-specific badge styles (Xerox / Lexmark accent colors)
 *   2. Future theme variants (e.g. "dark mode" sub-class on .xcx-wizard)
 *   3. Alternative palettes selectable from admin (Faza 8)
 *
 * Admin Settings (Faza 8) will inject overrides via wp_add_inline_style
 * AFTER this file, so any rule here loses to user-configured values.
 *
 * @package XegoraConfiguratorXerox
 * @since   0.2.0
 * ============================================================================= */

/* === Brand badges (Xerox / Lexmark differentiation) === */
.xcx-brand-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  border-radius: var(--xcx-radius-sm);
  border: 1px solid;
  background: transparent;
  white-space: nowrap;
}

.xcx-brand-xerox {
  color: var(--xcx-secondary);
  border-color: var(--xcx-secondary);
}

.xcx-brand-lexmark {
  color: var(--xcx-primary);
  border-color: var(--xcx-primary);
}

/* === Card brochure link (Step 1) === */
.xcx-card-brochure {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid var(--xcx-primary, #005D9B);
  border-radius: var(--xcx-radius-sm, 4px);
  background: var(--xcx-primary, #005D9B);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.xcx-card-brochure:hover,
.xcx-card-brochure:focus {
  background: var(--xcx-secondary, #C02222);
  border-color: var(--xcx-secondary, #C02222);
  color: #ffffff;
}

.xcx-card-brochure:focus-visible {
  outline: 2px solid var(--xcx-primary, #005D9B);
  outline-offset: 2px;
}