/**
 * -----------------------------------------
 * SAYR WATCHES
 * Accessibility & Focus Stylesheet
 *
 * Responsibility:
 * Skip link positioning, outline focus rings, focus-visible styling, screen reader utilities, and media queries for reduced motion.
 *
 * Dependencies:
 * css/variables.css
 *
 * Ownership Boundary:
 * Shared Core (Accessibility Layer)
 * -----------------------------------------
 */

/* ─── SKIP TO CONTENT ────────────────────────────────────────── */
.skip-to-content {
  position: absolute;
  top: -9999px;
  left: 12px;
  z-index: 9999;
  background: var(--gold);
  color: #111;
  padding: 10px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-to-content:focus { top: 12px; }

/* ─── FOCUS VISIBLE RING ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ─── REDUCED 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;
  }
  .product-card:hover, .btn-primary:hover, .btn-ghost:hover, .btn-whatsapp:hover, .cart-fab:hover, .feature-tile:hover {
    transform: none !important;
  }
  .reveal {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .modal-box, #filterDrawer, .cart-modal {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-bg       { transform: none !important; }
  .marquee-inner { animation: none !important; }
}

/* ─── MOBILE TOUCH TARGETS: 50px minimum ─────────────────────── */
@media (pointer: coarse) {
  .qty-btn,
  .card-qty-btn,
  .strap-chip,
  .modal-thumb,
  .filter-btn,
  .gender-chip,
  .cart-remove-btn,
  .fd-opt,
  .icon-close-btn,
  .modal-close-btn,
  .drawer-close-btn {
    min-height: 50px;
    min-width: 50px;
  }
  /* Expand tap area on small circular elements without cross-target collision */
  .modal-color-swatch {
    position: relative;
  }
  .modal-color-swatch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

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