/* =========================================================
   Duovly — accessibility layer.
   Loaded LAST so focus rules win over scattered outline:none.
   Token-driven. Brand/hero motion is intentionally preserved.
   ========================================================= */

/* ---- Visible keyboard focus (WCAG 2.4.7) ----
   Restores a ring over the many `outline:none` declarations.
   :focus-visible shows only on keyboard focus, never mouse/touch,
   so the resting visual stays clean. */
:focus-visible {
  outline: 2px solid var(--coral-500) !important;
  outline-offset: 2px !important;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--coral-500) !important;
  outline-offset: 2px !important;
}

/* ---- Touch targets >= 44px (WCAG 2.5.5) ----
   Keep the visual size; expand the hit area with a centered
   pseudo-element so small icon buttons stay comfortably tappable. */
.rd-cc-heart,
.dlc-heart {
  position: relative;
}
.rd-cc-heart::after,
.dlc-heart::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---- Respect reduced motion (decorative ambient loops only) ----
   Hero / brand / marquee motion is intentionally NOT suppressed. */
@media (prefers-reduced-motion: reduce) {
  .rd-sparkles i,
  .live-dot::after,
  .sb-presence.online .sb-dot::after,
  .rd-online .rd-online-dot::after,
  .rd-chip-live .d::after,
  .rd-cc-online .d::after,
  .rd-feat-presence .d::after,
  .duo-sparkle-field span {
    animation: none !important;
  }
}