/**
 * 360TFT Browser Fallbacks
 *
 * Progressive enhancement CSS for older browser support.
 * These styles provide fallbacks for CSS features that aren't universally supported.
 *
 * Include this AFTER main.css
 */

/* ==========================================================================
   FLEXBOX GAP FALLBACK
   For Safari < 14.1 which doesn't support gap in flexbox
   ========================================================================== */

/* Generic gap fallback using margins */
@supports not (gap: 1px) {
  .flex-container,
  [style*="display: flex"],
  [class*="flex-"] {
    margin: -10px;
  }

  .flex-container > *,
  [style*="display: flex"] > *,
  [class*="flex-"] > * {
    margin: 10px;
  }
}

/* ==========================================================================
   BACKDROP-FILTER FALLBACK
   For browsers without backdrop-filter support
   ========================================================================== */

/* Fallback for elements using backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
  .community-stats,
  .header,
  .modal-backdrop,
  [style*="backdrop-filter"] {
    background-color: rgba(0, 0, 0, 0.9) !important;
  }

  .mobile-menu,
  .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.95) !important;
  }
}

/* ==========================================================================
   SCROLL-BEHAVIOR FALLBACK
   Smooth scrolling polyfill indicator
   For Safari < 15.4
   ========================================================================== */

@supports not (scroll-behavior: smooth) {
  /* JavaScript will handle smooth scrolling */
  /* This class indicates to JS that polyfill is needed */
  html {
    --needs-smooth-scroll-polyfill: 1;
  }
}

/* ==========================================================================
   CLAMP() FALLBACK
   For older browsers that don't support clamp()
   ========================================================================== */

/* Title fallbacks */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
  .hero-title,
  h1 {
    font-size: 2.5rem;
  }

  .section-title,
  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .hero-title,
    h1 {
      font-size: 2rem;
    }

    .section-title,
    h2 {
      font-size: 1.5rem;
    }

    h3 {
      font-size: 1.25rem;
    }
  }
}

/* ==========================================================================
   ASPECT-RATIO FALLBACK
   For browsers without aspect-ratio support
   ========================================================================== */

@supports not (aspect-ratio: 16 / 9) {
  .video-container,
  .responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
  }

  .video-container > iframe,
  .video-container > video,
  .responsive-video > iframe,
  .responsive-video > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .square-image,
  [style*="aspect-ratio: 1"] {
    position: relative;
    padding-bottom: 100%; /* 1:1 */
    height: 0;
    overflow: hidden;
  }

  .square-image > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ==========================================================================
   :FOCUS-VISIBLE FALLBACK
   For browsers without :focus-visible support
   ========================================================================== */

@supports not selector(:focus-visible) {
  /* Apply focus styles on :focus for all interactive elements */
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: 2px solid #00ff88;
    outline-offset: 2px;
  }

  /* Remove outline for mouse users (less ideal but necessary fallback) */
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible) {
    outline: 2px solid #00ff88;
  }
}

/* ==========================================================================
   POSITION: STICKY FALLBACK
   For legacy browsers
   ========================================================================== */

@supports not (position: sticky) {
  .sticky-header,
  .sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  /* Add padding to body to account for fixed header */
  body.has-sticky-header {
    padding-top: 80px;
  }
}

/* ==========================================================================
   CSS GRID FALLBACK
   For very old browsers (IE11 and below)
   ========================================================================== */

@supports not (display: grid) {
  .grid,
  [class*="grid-"] {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
  }

  .grid > *,
  [class*="grid-"] > * {
    flex: 1 1 300px;
    margin: 10px;
    min-width: 280px;
  }

  /* 2-column grid fallback */
  .grid-2 > * {
    flex: 1 1 45%;
  }

  /* 3-column grid fallback */
  .grid-3 > * {
    flex: 1 1 30%;
  }

  /* 4-column grid fallback */
  .grid-4 > * {
    flex: 1 1 22%;
  }
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES FALLBACK
   For IE11 (hardcoded values)
   ========================================================================== */

@supports not (--color: red) {
  /* Primary colors */
  .btn-primary {
    background-color: #00ff88;
    color: #000000;
  }

  .btn-secondary {
    background-color: #00d4ff;
    color: #000000;
  }

  body {
    background-color: #000000;
    color: #ffffff;
  }

  a {
    color: #00ff88;
  }

  a:hover {
    color: #00d4ff;
  }
}

/* ==========================================================================
   MOBILE SAFARI SPECIFIC FIXES
   ========================================================================== */

/* Fix for iOS Safari 100vh including address bar */
@supports (-webkit-touch-callout: none) {
  .full-height,
  .hero {
    min-height: -webkit-fill-available;
  }
}

/* Fix for iOS input zoom (prevent zoom on focus for inputs < 16px) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ==========================================================================
   PRINT STYLES
   Consistent printing across browsers
   ========================================================================== */

@media print {
  /* Remove backgrounds and shadows for printing */
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Show link URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Don't show URLs for internal links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* Page breaks */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  img, figure, table {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Hide unnecessary elements */
  nav,
  .mobile-menu,
  .social-share,
  .comments,
  footer .social-links {
    display: none !important;
  }
}

/* ==========================================================================
   HIGH CONTRAST MODE SUPPORT
   For Windows High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
  .btn-primary,
  .btn-secondary {
    border: 2px solid currentColor;
  }

  .card,
  .testimonial-card {
    border: 1px solid currentColor;
  }

  a {
    text-decoration: underline;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  .btn-primary,
  .btn-secondary,
  .btn-outline {
    border: 2px solid ButtonText;
  }

  a:focus,
  button:focus {
    outline: 2px solid Highlight;
  }
}

/* ==========================================================================
   REDUCED MOTION
   For users who prefer 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;
  }
}