/* ============================================
   URBot.net — Standalone WCAG 2.1 AA Fixes
   accessibility.css — safe to inject anywhere
   ============================================ */

/* ── Skip Navigation ──────────────────────────────────────── */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1a1a2e;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 100000;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  border-bottom: 2px solid #6366f1;
  border-right: 2px solid #6366f1;
  transition: top 200ms ease;
}
.skip-to-main:focus {
  top: 0;
}

/* ── Focus Indicators — keyboard users ───────────────────── */
*:focus-visible {
  outline: 3px solid #4A9EFF;
  outline-offset: 2px;
}

/* Remove focus outline for mouse users; keep for keyboard */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ── Screen-Reader Only Utility ───────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Color-contrast helpers ───────────────────────────────── */
/* Footer dim links — #888 on white fails AA; boost to #595959 */
.landing-footer a[style*="text-dim"],
.landing-footer a[style*="888"] {
  color: #595959 !important;
}

/* Nav links — #a5b4fc on rgba(18,18,26,0.95) is ~2.8:1 (FAIL).
   Boost to #c7d2fe which gives ≥4.5:1 on that dark background. */
nav[style*="rgba(18,18,26"] a {
  color: #c7d2fe !important;
}
nav[style*="rgba(18,18,26"] a:hover {
  color: #ffffff !important;
}

/* Bot card description text — #64748b on white is ~4.6:1 — just passes AA;
   flag improvement: raise to #4b5563 for AAA comfort */
.bot-card-desc {
  color: #4b5563;
}

/* ── Chat widget accessibility fixes ──────────────────────── */
/* Ensure the messages container is announced */
.urbot-chat-messages[role="log"] {
  /* already marked via JS, this ensures the live region styles are consistent */
}

/* Send button — ensure visible label area */
.urbot-chat-send {
  min-width: 60px;
}

/* ── Form label association hint ─────────────────────────── */
/* Visually hidden labels added via JS; wire styles here */
.urbot-form-label-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Tier card radio-like buttons ─────────────────────────── */
.bld-tier-card[aria-pressed="true"],
.bld-tier-card.active {
  /* Already styled via builder.css; ensure focus ring is visible */
  outline-offset: 3px;
}
.bld-tier-card:focus-visible {
  outline: 3px solid #4A9EFF;
  outline-offset: 3px;
}

/* ── Modal focus trap indicator ───────────────────────────── */
[role="dialog"]:focus {
  outline: none; /* The trap handles focus; outline on the dialog itself is noisy */
}

/* ── Bot card chat button ─────────────────────────────────── */
/* Ensure icon-only button has minimum touch target */
.bot-card-chat-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Cart close button ────────────────────────────────────── */
.bld-cart-review-close {
  min-width: 44px;
  min-height: 44px;
}

/* ── Input labels — visually hidden but associated ─────────── */
label.sr-only[for] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduce motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── High contrast mode ──────────────────────────────────── */
@media (forced-colors: active) {
  .urbot-skip-link,
  .skip-to-main {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border: 2px solid ButtonText;
  }
  button, .bld-tier-card {
    border: 1px solid ButtonText;
  }
  .bot-card {
    border: 1px solid CanvasText;
  }
}

/* ── Touch target minimum on coarse-pointer devices ─────── */
@media (pointer: coarse) {
  button, [role="button"], a.cta-btn, a.buy-btn,
  input[type="submit"], .bld-tier-card,
  .bld-add-btn, .bld-cart-buy-btn, .buy-btn {
    min-height: 44px;
    min-width: 44px;
  }
}