/* ==== Compatibility & Accessibility Overrides (drop-in) ====
   This file adds cross-browser fallbacks and small fixes without
   changing your existing classes. Include AFTER your main style.css.
   -------------------------------------------------------------- */

/* 1) Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 2) Backdrop blur fallbacks (Safari/Chromium OK, Firefox needs fallback) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled,
  .btn--outline,
  .shop-item,
  .course-card-3d,
  .modal-backdrop,
  .modal-content,
  .about-experience-badge {
    background: rgba(255,255,255,0.92) !important; /* readable, neutral */
  }
}

/* 3) Ensure focus is visible for keyboard users */
:focus-visible {
  outline: 3px solid #6B8E23;
  outline-offset: 2px;
}
/* Provide fallback for browsers without :focus-visible */
:focus {
  outline-color: #6B8E23;
}

/* 4) Small-screen safety: prevent grid overflow on narrow phones */
@media (max-width: 360px) {
  .courses-grid { grid-template-columns: 1fr !important; }
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* 5) Safer select arrow spacing on Firefox/Edge */
select.form-control {
  padding-right: 2.5rem; /* ensure arrow doesn't overlap text */
  background-origin: content-box;
}

/* 6) Images: constrain to container to avoid layout shifts */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* 7) Improve color contrast on muted text (AA-ish) */
.nav-link,
.hero-subtitle,
.shop-item-description,
.course-card-features li,
.footer-description {
  color: #374151; /* slate-700-ish for better contrast */
}

/* 8) Tap target sizing on touch */
button,
.btn,
a.footer-link,
.nav-link {
  min-height: 44px;
}

/* 9) Modal: ensure it's above AOS elements, disable background scroll when open */
.modal { z-index: 2147483000 !important; } /* ultra safe */
html.modal-open,
body.modal-open { overflow: hidden !important; }

/* 10) Fix large 3D hover transforms on touch devices (prevent jank) */
@media (hover: none) and (pointer: coarse) {
  .course-card:hover,
  .course-card.featured:hover,
  .btn--primary:hover,
  .btn--outline:hover {
    transform: none !important;
  }
}

/* 11) High-contrast mode improvements */
@media (prefers-contrast: more) {
  .btn--primary { box-shadow: none !important; }
  .course-card-badge { animation: none !important; }
}