/* Custom CSS for Hero Background Image */
/* Add web_background.jpg to /assets/ folder */

/* Target the hero section using multiple selectors for reliability */
section.hero-with-background::before,
section[class*="min-h-screen"]::before,
body > div#root > div > section:first-child::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/assets/web_background.jpg') !important;
  background-size: 120% !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  filter: blur(2px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 768px) {
  section.hero-with-background::before,
  section[class*="min-h-screen"]::before,
  body > div#root > div > section:first-child::before {
    filter: blur(1.5px) !important;
    background-size: cover !important;
    background-position: center right !important;
  }
}

section.hero-with-background::after,
section[class*="min-h-screen"]::after,
body > div#root > div > section:first-child::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  section.hero-with-background::after,
  section[class*="min-h-screen"]::after,
  body > div#root > div > section:first-child::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)) !important;
  }
}

/* Reduce existing dark gradient overlays that block the background */
section.hero-with-background > div.bg-gradient-to-br,
section[class*="min-h-screen"] > div[class*="bg-gradient-to-br"],
body > div#root > div > section:first-child > div[class*="bg-gradient-to-br"] {
  opacity: 0.2 !important;
  z-index: 1 !important;
}

/* Ensure other overlays stay above background */
section.hero-with-background > div[class*="absolute"]:not([class*="bg-gradient-to-br"]),
section[class*="min-h-screen"] > div[class*="absolute"]:not([class*="bg-gradient-to-br"]),
body > div#root > div > section:first-child > div[class*="absolute"]:not([class*="bg-gradient-to-br"]) {
  position: relative !important;
  z-index: 2 !important;
}

/* Fix white line glitch - ensure smooth transition between sections */
section {
  position: relative;
}

/* Ensure navigation is transparent initially and smooth transition */
nav.fixed {
  background-color: transparent !important;
  transition: background-color 0.3s ease !important;
}

nav.fixed[class*="bg-black"] {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Fix any white gaps between sections */
body > div#root > div {
  background-color: #000 !important;
}

/* Ensure smooth scrolling without white flashes */
html {
  background-color: #000 !important;
}