/* Mobile-Specific CSS for Background Images */
/* This file handles mobile-responsive backgrounds with device-specific optimizations */

/* Mobile Background Container */
@media screen and (max-width: 768px) {
  .bg-slideshow {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: -2 !important;
    background-color: #0a0e17 !important;
  }
  
  .bg-slideshow img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transition: opacity 2s ease-in-out !important;
    opacity: 0;
    /* Add subtle overlay for better text readability on mobile */
    filter: brightness(0.4) contrast(1.1) !important;
  }
  
  .bg-slideshow img.active {
    opacity: 0.6 !important; /* Slightly more visible for mobile */
  }
  
  /* Ensure content has better contrast on mobile */
  .flex-box {
    background: rgba(10, 14, 23, 0.85) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(154, 230, 180, 0.3) !important;
  }
  
  /* Page-specific mobile adjustments */
  
  /* Index page - balanced backgrounds for readability */
  body[data-page="index"] .bg-slideshow img.active {
    opacity: 0.5 !important;
    filter: brightness(0.3) contrast(1.2) !important;
  }
  
  /* Survival kit page - slightly more atmospheric */
  body[data-page="survival-kit"] .bg-slideshow img.active {
    opacity: 0.6 !important;
    filter: brightness(0.4) contrast(1.1) !important;
  }
  
  /* Portrait orientation - maintain full background */
  @media (orientation: portrait) {
    .bg-slideshow img {
      object-position: center center !important;
    }
    
    body {
      overflow-x: hidden !important;
      max-width: 100vw !important;
    }
    
    /* Enhanced contrast for portrait mode */
    .flex-box {
      background: rgba(10, 14, 23, 0.88) !important;
      backdrop-filter: blur(18px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    }
  }
  
  /* Landscape orientation - maintain full background */
  @media (orientation: landscape) {
    .bg-slideshow img {
      object-position: center center !important;
    }
    
    /* Slightly less backdrop blur in landscape for better visuals */
    .flex-box {
      background: rgba(10, 14, 23, 0.80) !important;
      backdrop-filter: blur(12px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    }
  }
  
  /* Content adjustments for mobile */
  main {
    position: relative !important;
    z-index: 1 !important;
    padding: 20px !important;
    border-radius: 8px !important;
  }
  
  .site-header {
    background: rgba(8, 18, 33, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* Enhanced text readability on mobile */
  h1, h2, h3, h4, h5, h6 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  }
  
  p, li {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
  }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
  .bg-slideshow img.active {
    opacity: 0.4 !important;
    filter: brightness(0.25) contrast(1.3) !important;
  }
  
  .flex-box {
    background: rgba(10, 14, 23, 0.96) !important;
    backdrop-filter: blur(5px) !important;
    margin: 8px !important;
    padding: 16px !important;
  }
}

/* High DPI mobile displays */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .bg-slideshow img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .bg-slideshow img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  
  .bg-slideshow img.active {
    opacity: 0.5 !important;
  }
  
  .flex-box {
    background: rgba(10, 14, 23, 0.88) !important;
    backdrop-filter: blur(2px) !important;
  }
}