/* ============================================
   GRIPPY SOX CLUB — Accessibility & Performance
   ============================================ */

/* ---- Skip to Main Content ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Focus Visible Enhancement ---- */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ---- High Contrast Mode Support ---- */
@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }
  .badge {
    border: 1px solid ButtonText;
  }
  .cart-count {
    border: 2px solid ButtonText;
  }
  .nav-link.active,
  .nav-link[aria-current="page"] {
    border-bottom: 3px solid LinkText;
  }
  .comparison__icon {
    border: 1px solid ButtonText;
  }
  .product-card,
  .feature-card,
  .testimonial-card,
  .blog-card {
    border: 1px solid ButtonText;
  }
}

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

.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---- ARIA Live Region ---- */
[aria-live] {
  contain: content;
}

/* ---- Back to Top Button ---- */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-lg);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---- Touch Target Minimum 44px ---- */
@media (pointer: coarse) {
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .btn--sm {
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
  }
  .size-option {
    min-width: 48px;
    min-height: 44px;
  }
  .color-swatch {
    width: 40px;
    height: 40px;
  }
  .qty-selector button {
    min-width: 44px;
    min-height: 44px;
  }
  .footer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .accordion-trigger {
    min-height: 48px;
  }
  .product-gallery__thumb {
    min-width: 60px;
    min-height: 60px;
  }
}

/* ---- Content Visibility for Performance ---- */
.section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ---- Print Styles ---- */
@media print {
  .announcement-bar,
  .site-header,
  .cart-drawer,
  .cart-overlay,
  .back-to-top,
  .menu-toggle,
  .cart-button,
  .marquee,
  .cta-section,
  .skip-link {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }
  a {
    text-decoration: underline;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  .section {
    padding: 1rem 0;
    break-inside: avoid;
  }
  .hero {
    min-height: auto;
    background: none !important;
  }
}

/* ---- Extra Small Devices (320px) ---- */
@media (max-width: 374px) {
  :root {
    font-size: 14px;
  }
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .hero__title {
    font-size: var(--text-xl);
  }
  .h1 { font-size: var(--text-xl); }
  .h2 { font-size: var(--text-lg); }
  .display { font-size: var(--text-2xl); }
  .hero__subtitle,
  .lead {
    font-size: var(--text-base);
  }
  .btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }
  .stats-row {
    grid-template-columns: 1fr;
  }
  .stat__number {
    font-size: var(--text-xl);
  }
  .trust-bar__inner {
    flex-direction: column;
    gap: var(--space-4);
  }
  .trust-item {
    flex: 0 0 100%;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }
  .hero__proof {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Small Phones (375-479px) ---- */
@media (min-width: 375px) and (max-width: 479px) {
  .hero__title {
    font-size: var(--text-2xl);
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }
}

/* ---- Medium Phones (480-639px) ---- */
@media (min-width: 480px) and (max-width: 639px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ---- Large Screens (1440px+) ---- */
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
  .hero__title {
    font-size: var(--text-6xl);
  }
  .section--lg {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }
}

/* ---- Ultra-Wide (1920px+) ---- */
@media (min-width: 1920px) {
  .container {
    max-width: 1440px;
  }
  .hero {
    min-height: 80vh;
  }
}

/* ---- RTL Support ---- */
[dir="rtl"] .hero__proof-avatar {
  margin-left: 0;
  margin-right: -8px;
}
[dir="rtl"] .hero__proof-avatar:first-child {
  margin-right: 0;
}

/* ---- Dark Mode (System Preference) ---- */
@media (prefers-color-scheme: dark) {
  /* Respect system preference but only apply if user hasn't
     overridden. For now, the site keeps its light theme as the
     brand identity relies on cream/white tones. This placeholder
     exists for future dark mode toggle implementation. */
}

/* ---- Reduced Data / Save-Data ---- */
@media (prefers-reduced-data: reduce) {
  .hero__bg-pattern,
  .marquee {
    display: none;
  }
  .hero__float-card {
    animation: none;
  }
}