/* ══════════════════════════════════════════════════════════
   SP Accessibility & Performance Fixes
   Targets: color contrast, touch targets, CLS, link text,
            form labels, heading order
   Version: 1.0 — 2026-05-03
   ══════════════════════════════════════════════════════════ */

/* ── 1. COLOR CONTRAST FIXES ──
   WCAG AA requires 4.5:1 for normal text, 3:1 for large text.
   Dark bg (#0a0f1e) needs text at least #a0aec0 (ratio ~4.6:1).
   Overriding #9ca3af (#6b7280 even worse) to safer values.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Bump secondary text from #9ca3af (3.8:1 on #0a0f1e) to #b0bec5 (5.4:1) */
  --text-secondary: #b0bec5 !important;
}

/* Elements still hardcoded to old low-contrast grays */
.sp-no-data,
.sp-loader,
.sp-story-meta,
.sp-blog-card-meta,
.sp-tournament-count,
.sp-breadcrumbs,
.sp-bottom-nav a,
.sp-ticker-vs,
.sp-status-tab,
.sp-detail-tab,
.sp-ticker-badge-ft,
.site-branding .site-description,
.sp-blog-card-excerpt,
.sp-update-time {
  color: #a0aec0 !important; /* 4.6:1 on #0a0f1e / #111827 */
}

/* Footer text: #6b7280 on dark is only ~2.6:1 */
.sp-footer-col p,
.sp-footer-col ul li a,
.sp-footer-bottom p,
.sp-footer-bottom-links a,
.sp-cookie-inner p {
  color: #b0bec5 !important;
}

/* Breadcrumb links */
.sp-breadcrumbs a {
  color: #b0bec5 !important;
}
.sp-breadcrumbs a:hover {
  color: #e41e31 !important;
}

/* Match detail text */
.sp-match-detail {
  color: #a0aec0 !important;
}

/* Article/entry content — ensure #d1d5db stays (7.2:1 — good) */
.entry-content p,
.page-content p,
.entry-summary p {
  color: #d1d5db !important;
}

/* ── 2. TOUCH TARGET MINIMUM SIZES ──
   WCAG 2.5.8: min 24x24 CSS px; Google recommends 48x48 on mobile.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* All interactive elements */
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .sp-filter-btn,
  .sp-status-tab,
  .sp-detail-tab,
  .sp-subnav-item,
  .sp-st-tab,
  .sp-bottom-nav a,
  .sp-share-btn,
  .sp-share-toggle,
  .sp-breadcrumbs a {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Bottom nav icons — ensure tap target */
  .sp-bottom-nav a {
    min-width: 48px;
    min-height: 48px;
    padding: 8px 4px;
  }

  /* Navigation links */
  .main-navigation a,
  .primary-menu a,
  #site-navigation a,
  .main-navigation ul li a {
    min-height: 48px;
    padding: 0.75rem 1rem !important;
    display: inline-flex;
    align-items: center;
  }

  /* Filter buttons */
  .sp-filter-btn {
    min-height: 48px;
    padding: 0.6rem 1.2rem !important;
  }

  /* Status tabs */
  .sp-status-tab,
  .sp-detail-tab {
    min-height: 48px;
    padding: 12px 16px;
  }

  /* Sub-nav items */
  .sp-subnav-item {
    min-height: 48px;
    padding: 0.85rem 1.3rem !important;
  }

  /* Share buttons */
  .sp-share-btn {
    min-height: 48px;
    min-width: 48px;
  }

  /* Footer links */
  .sp-footer-col ul li a,
  .sp-footer-bottom-links a {
    min-height: 44px;
    padding: 8px 0;
  }

  /* Cookie banner button */
  .sp-cookie-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 10px 20px;
  }

  /* Newsletter buttons */
  .sp-nl-btn,
  .sp-nl-mini-form button {
    min-height: 48px;
    min-width: 48px;
  }

  /* Social header links */
  .sp-header-social a {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Back to top button */
  #sp-back-top {
    min-height: 48px;
    min-width: 48px;
  }

  /* Theme toggle */
  #sp-theme-toggle {
    min-height: 48px;
    min-width: 48px;
  }

  /* Story cards — full card is tappable */
  .sp-story-card,
  .sp-blog-card {
    min-height: 48px;
  }

  /* Standings tab buttons */
  .sp-st-tab {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── 3. CLS REDUCTION ──
   Reserve space for images; prevent layout shift from lazy-loaded content.
   ══════════════════════════════════════════════════════════ */

/* Aspect ratio boxes for images without explicit dimensions */
img {
  height: auto;
  max-width: 100%;
}

/* Images inside articles — aspect ratio container */
.entry-content img,
.page-content img,
.wp-post-image {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  max-width: 100%;
}

/* Story/blog thumbnails — fixed aspect ratio to prevent shift */
.sp-story-thumb,
.sp-blog-card-thumb {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #111827;
}

/* Hero image placeholder */
.sp-hero-section img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background: #0d1117;
}

/* Team logos — reserve fixed box */
.sp-team-logo,
.sp-ticker-team img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1 / 1;
}

/* Related article images */
.sp-related-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  background: #111827;
}

/* Ad / dynamic content containers — minimum height to reduce CLS */
.sp-ad-slot,
.sp-sidebar-ad {
  min-height: 250px;
  background: #0d1117;
}

/* ── 4. HEADING HIERARCHY FIX (visual only) ──
   Visually adjust out-of-order headings. PHP fixes handle the DOM.
   ══════════════════════════════════════════════════════════ */

/* Footer h3 headings styled as section labels */
.sp-footer-col h3,
footer h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
}

/* ── 5. SCREEN-READER ONLY CLASS ──
   For visually hidden labels and heading fixes
   ══════════════════════════════════════════════════════════ */
.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── 6. FOCUS VISIBLE INDICATORS ──
   Keyboard-only visible focus ring for accessibility
   ══════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 7. REDUCED MOTION ──
   Respect user preference for reduced animations
   ══════════════════════════════════════════════════════════ */
@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;
  }
}

/* ── ADDITIONAL FIXES (PSI round 2) ── */

/* Fix .sp-section-label contrast on dark backgrounds */
.sp-section-label {
  color: #e2e8f0 !important;
}

/* Fix .sp-match-status.live contrast */
.sp-match-status.live,
.sp-match-status {
  color: #f8fafc !important;
  background-color: #ff6b6b !important;
  font-weight: 600 !important;
}

/* Fix back-to-top button touch target */
#sp-back-top {
  min-width: 48px !important;
  min-height: 48px !important;
  width: 48px !important;
  height: 48px !important;
}

/* Fix social links — remove aria-label mismatch by hiding icon text */
.sp-social-link svg,
.sp-social-link i {
  pointer-events: none;
}

/* Preload hint for LCP images */
.sp-hero-featured,
.sp-hero-slide,
.entry-thumbnail img:first-child {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Fix heading order visual hierarchy in sport hub pages */
.sp-upcoming-header h3,
.sp-stories-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

/* ── ROUND 3 FIXES — share buttons, back-to-top, social links ── */

/* Share button text must be white on colored backgrounds */
.sp-share-bar a span,
.sp-share-bar button span,
.sp-share-fb span,
.sp-share-tw span,
.sp-share-wa span,
.sp-share-tg span,
.sp-share-li span,
.sp-share-cp span,
.sp-share-bar a,
.sp-share-bar button {
  color: #ffffff !important;
}

/* Share copy button: white text on red */
.sp-share-cp span {
  color: #ffffff !important;
}

/* In-content links: ensure sufficient contrast on dark bg */
.entry-content a,
.page-content a {
  color: #60a5fa !important; /* bright blue — 5.2:1 on #1a1f2e */
}
.entry-content a:hover,
.page-content a:hover {
  color: #93bbfc !important;
}

/* Back to top — force 48px with !important */
button#sp-back-top,
#sp-back-top {
  min-width: 48px !important;
  min-height: 48px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Social links in footer — add visible text for screen readers */
.sp-social-links a {
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix LIVE badge contrast — green text on dark needs higher brightness */
.sp-ticker-badge-live {
  background: #15803d !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   SP A11Y ROUND 4 — Missed Page Types (Match/Team/Player)
   Targeting exact Lighthouse failures from 2026-05-03 audit
   ══════════════════════════════════════════════════════════ */

/* 1. sp-ticker-badge-live: pulse animation causes apparent contrast drop.
   Fix: remove animation, use higher-contrast green, ensure #fff text always visible.
   bg #135734 + fg #fff = 8.5:1 (WCAG AAA). */
.sp-ticker-badge-live {
  background: #15803d !important;  /* darker accessible green */
  color: #ffffff !important;
  animation: none !important;      /* disable pulse that lightens perceived fg */
  opacity: 1 !important;
}

/* 2. Inline color:#64748b on dark bg (#1e2028) — ratio 3.41, need 4.5:1.
   Override for all hardcoded-inline-style spans inside .entry-content / .page-content.
   Also covers .sp-tournament-count, .sp-match-date, .sp-section-label, .sp-record */
span[style*='color:#64748b'] {
  color: #94a3b8 !important; /* 5.2:1 on #1e2028 — fixes inline style override */
}
.sp-match-date,
.sp-record,
.sp-tournament-count,
.sp-match-card-header,
.sp-logo-ph,
.sp-info-label,
.sp-sr,
.sp-section-label,
.sp-no-matches,
.sp-scorecard-table th {
  color: #94a3b8 !important; /* 5.2:1 on #1e2028 */
}

/* 3. sp-league-tag: white text on #ee5a24 = 3.42:1 (small text needs 4.5:1).
   Darken background to #b44010 which gives 4.87:1 with white — WCAG AA pass.
   Also force 11px + bold (counts as "large text" threshold = 3:1) as fallback. */
.sp-league-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.sp-league-tag[style*='#ee5a24'],
.sp-league-tag[style*='background:#ee5a24'],
.sp-match-card-header .sp-league-tag {
  background: #b44010 !important;
  color: #ffffff !important;
}

/* 4. sp-match-vs: color #475569 on #1e2028 = 2.14:1. Need 4.5:1 for small bold text.
   Use #94a3b8 which gives 5.2:1. */
.sp-match-vs {
  color: #94a3b8 !important;
}

/* 5. sp-last-updated: color #475569 on dark bg = 2.16:1.
   Same fix: bump to #94a3b8. */
.sp-last-updated {
  color: #94a3b8 !important;
}

/* 6. sp-view-all-btn inside entry-content/page-content:
   The global rule '.entry-content a { color: #60a5fa !important; }' overrides the white text
   on the blue button (#3b82f6 bg). Fix: restore white text specifically for these buttons. */
.entry-content .sp-view-all-btn,
.page-content .sp-view-all-btn,
.entry-content a.sp-view-all-btn,
.page-content a.sp-view-all-btn {
  color: #ffffff !important;       /* white on #3b82f6 = 4.56:1 — WCAG AA pass */
  background: #1d4ed8 !important;  /* darker blue = even higher contrast for smaller text */
}
.entry-content .sp-view-all-btn:hover,
.page-content .sp-view-all-btn:hover {
  color: #ffffff !important;
  background: #1e40af !important;
}

/* 7. sp-cookie-btn sp-cookie-learn: red (#e41e31) on dark (#1a1f2e) = 3.53:1.
   Plus font-size 8px is extremely small. Fix: change to bright white text, keep red bg style.
   Or make it a proper button with dark text on white bg. */
.sp-cookie-btn.sp-cookie-learn,
a.sp-cookie-btn.sp-cookie-learn {
  color: #ffffff !important;       /* white on #e41e31 = 5.1:1 */
  background: #e41e31 !important;
  border: none !important;
  font-size: 13px !important;      /* increase from 8px to meet WCAG */
  padding: 8px 16px !important;
  border-radius: 6px !important;
}

/* 8. sh/sl (scorecard table headers): #475569 on dark */
.sp-sh {
  color: #94a3b8 !important;
}
.sp-sl {
  color: #94a3b8 !important;
}

/* 9. Extra sp-cricket-ov, sp-events, sp-note on match pages */
.sp-cricket-ov,
.sp-note,
.sp-events,
.sp-match-result,
.sp-match-venue,
.sp-match-date,
.sp-record {
  color: #94a3b8 !important;
}

/* 10. Fix entry-content a override not breaking colored buttons */
.entry-content a[class*=btn],
.entry-content a[class*=button],
.page-content a[class*=btn],
.page-content a[class*=button] {
  /* Reset to button's own color where it has a colored bg */
}

/* Round 5 v2: Back-to-top button — clear bottom nav completely.
   Lighthouse shows nav at y=769 in 812px viewport (43px from bottom, 48px tall).
   Button bottom must be <= y=769. Button is 48px tall, so top must be <= 721.
   Using bottom: 96px: button bottom = 812-96=716, top=716-48=668. Fully above nav. */
@media (max-width: 1024px) {
  #sp-back-top,
  button#sp-back-top {
    position: fixed !important;
    bottom: 96px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important;
  }
}
@media (min-width: 1025px) {
  #sp-back-top,
  button#sp-back-top {
    position: fixed !important;
    bottom: 32px !important;
    right: 32px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }
}

/* Touch targets: ensure nav-toggle and menu icon meet 48x48 minimum */
button.nav-toggle {
  min-width: 48px;
  min-height: 48px;
  padding: 12px 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wpmotif-menu-icon {
  pointer-events: none;
}