/* ═══════════════════════════════════════════════════════════════
   QUEEN'S COLLECTION — SEO & PERFORMANCE CSS
   seo.css  |  Performance, print, accessibility polish

   Contents:
   1.  Critical Font Display
   2.  Image Lazy Load Styles
   3.  Skip Link (Accessibility)
   4.  Focus Visible Enhancements
   5.  Reduced Motion (consolidated)
   6.  High Contrast Mode
   7.  Print Styles
   8.  Mobile Safari Fixes
   9.  Scroll Behaviour
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   1. SKIP LINK (Accessibility)
   Allows keyboard users to skip to content
───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--gold);
  color: var(--black);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 1px;
  z-index: var(--z-top);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--dur-fast);
}

.skip-link:focus {
  top: var(--space-4);
}


/* ─────────────────────────────────────────
   2. LAZY LOAD IMAGE STYLES
───────────────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* Prevent layout shift — always set width/height on images */
img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ─────────────────────────────────────────
   3. ENHANCED FOCUS STYLES
   Better keyboard navigation visibility
───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* Special focus for interactive cards */
.product-card:focus-visible,
.article-card:focus-visible,
.campaign-slide:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}


/* ─────────────────────────────────────────
   4. HIGH CONTRAST MODE
───────────────────────────────────────── */
@media (forced-colors: active) {
  .btn--gold {
    border: 2px solid ButtonText;
  }

  .nav-link::after {
    background: ButtonText;
  }

  .kente-stripe,
  .footer-kente,
  .hero__kente-border {
    forced-color-adjust: none;
  }
}


/* ─────────────────────────────────────────
   5. PRINT STYLES
───────────────────────────────────────── */
@media print {
  /* Hide non-essential elements */
  .announcement-bar,
  .site-header,
  .mobile-menu,
  .hero__indicators,
  .hero__scroll-hint,
  .marquee-strip,
  .shop-look-panel,
  .lightbox,
  .sticky-cart-bar,
  .cart-drawer,
  .site-footer,
  .btn,
  .social-strip,
  .trust-bar,
  .newsletter-form,
  #reading-progress {
    display: none !important;
  }

  /* Ensure content is readable */
  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.6;
  }

  h1, h2, h3, h4 {
    color: black;
    page-break-after: avoid;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  /* Show URLs after links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  /* Avoid breaking cards across pages */
  .product-card,
  .article-card,
  .review-card {
    break-inside: avoid;
  }

  /* Show product prices clearly */
  .price {
    color: black;
    font-weight: bold;
  }
}


/* ─────────────────────────────────────────
   6. MOBILE SAFARI FIXES
───────────────────────────────────────── */

/* Prevent double-tap zoom on buttons */
button, a {
  touch-action: manipulation;
}

/* Fix momentum scrolling on iOS */
.horizontal-gallery__track,
.cart-drawer__items,
.mobile-menu,
.shop-look-panel__body {
  -webkit-overflow-scrolling: touch;
}

/* Fix 100vh on mobile browsers with address bar */
.hero, .lookbook-hero, .about-hero {
  min-height: 100svh; /* Small viewport height — modern standard */
}

/* Fallback for older browsers */
@supports not (height: 100svh) {
  .hero, .lookbook-hero, .about-hero {
    min-height: -webkit-fill-available;
  }
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fix input zoom on iOS (inputs must be ≥16px to prevent zoom) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ─────────────────────────────────────────
   7. PERFORMANCE — CONTAIN
   Reduces browser paint/layout work
───────────────────────────────────────── */
.product-card,
.article-card,
.campaign-slide,
.editorial-cell {
  contain: layout style;
}

/* GPU acceleration for animated elements */
.hero__slide,
.mobile-menu,
.cart-drawer,
.shop-look-panel,
.lightbox {
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}


/* ─────────────────────────────────────────
   8. SCROLL BEHAVIOUR
───────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 60px);
}

/* Respect reduced motion for scroll */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ─────────────────────────────────────────
   9. CONTENT VISIBILITY (modern perf trick)
   Defers off-screen rendering
───────────────────────────────────────── */
@supports (content-visibility: auto) {
  .social-strip,
  .bts-strip,
  .press-section,
  .related-section,
  .reviews-section,
  .related-posts-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
  }
}