/**
 * BANNER QUALITY FIX - Force maximum sharpness
 * This file MUST be loaded AFTER all other CSS files
 * Fixes blurry banner images caused by scaling and compression
 */

/* Force natural image dimensions - no rescaling */
#banner,
#banner .banner-bg,
#banner .banner-bg-item {
  height: 100vh !important;
  min-height: 600px !important;
  max-height: none !important;
}

/* Banner item - maximum quality rendering */
#header #banner .banner-bg-item {
  /* High quality background rendering */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  
  /* CRITICAL: Prevent bilinear blur on Chrome/Safari */
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  -ms-interpolation-mode: bicubic !important;
  
  /* GPU acceleration for smooth rendering */
  -webkit-transform: translateZ(0) !important;
  -moz-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  
  /* Prevent subpixel rendering blur */
  -webkit-backface-visibility: hidden !important;
  -moz-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  
  /* Force hardware acceleration */
  -webkit-perspective: 1000px !important;
  -moz-perspective: 1000px !important;
  perspective: 1000px !important;
  
  /* Prevent any filters that could cause blur */
  -webkit-filter: none !important;
  -moz-filter: none !important;
  filter: none !important;
  
  /* Ensure crisp text and images */
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  
  /* Remove any opacity that could cause blur */
  opacity: 1 !important;
  
  /* Prevent compression artifacts */
  image-orientation: from-image !important;
}

/* Hide IMG tags completely to avoid interference */
#header #banner .banner-bg-item img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Owl carousel fixes for sharpness */
.owl-item {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* High-DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
  #header #banner .banner-bg-item {
    /* On Retina displays, use even higher quality */
    image-rendering: -webkit-optimize-contrast !important;
    -ms-interpolation-mode: bicubic !important;
  }
}

/* Responsive: maintain quality on all screen sizes */
@media (max-width: 1920px) {
  #header #banner .banner-bg-item {
    /* Ensure cover mode maintains quality */
    background-size: cover !important;
  }
}

@media (min-width: 1921px) {
  #header #banner .banner-bg-item {
    /* On large screens, prevent over-stretching */
    background-size: cover !important;
    /* Alternative: use contain to prevent stretching */
    /* background-size: contain !important; */
    /* background-color: #1a1a1a !important; */
  }
}

/* Force repaint to ensure rules are applied */
#header #banner .banner-bg-item.active {
  -webkit-transform: translateZ(0) scale(1) !important;
  transform: translateZ(0) scale(1) !important;
}