/* ===========================
   FEEDBACK 5 CRITICAL FIXES
   Vista Arenal Adventure Park Website
   Round 5 - Urgent Mobile & Footer Issues
   =========================== */

/* ===========================
   1. FOOTER LOGO CRITICAL FIX
   Issue: Logo completely white and unreadable
   Cause: feedback-4-improvements.css applying brightness(0) invert(1)
   Solution: Restore original logo appearance with proper contrast
   =========================== */

.footer-brand img {
  /* OVERRIDE: Remove the problematic white filter */
  filter: none !important;
  
  /* Restore proper logo visibility with subtle enhancements */
  filter: 
    contrast(1.2)
    saturate(1.1)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
  
  /* Maintain size improvements from feedback 4 */
  width: 180px !important;
  height: auto !important;
  max-width: 220px;
  min-width: 160px;
  
  /* Smooth transitions */
  transition: all var(--transition-base);
}

/* Enhanced hover effect for footer logo (non-invasive) */
.footer-brand:hover img {
  filter: 
    contrast(1.3)
    saturate(1.15)
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)) !important;
  
  transform: translateY(-1px);
}

/* Remove any interfering background text/elements */
.footer-brand::before,
.footer-brand::after {
  display: none !important;
}

/* Ensure footer background provides sufficient contrast */
.site-footer {
  /* Maintain the existing dark background for proper contrast */
  background: var(--earth-brown) !important;
  position: relative;
  z-index: 1;
}

/* Remove any text elements that might be behind the logo */
.footer-brand * {
  position: relative;
  z-index: 2;
}

/* ===========================
   2. MOBILE BACKGROUND CONSISTENCY FIX
   Issue: Real phones show dark/darkish background vs lighter desktop simulation
   Solution: Ensure consistent light background across all devices
   =========================== */

/* Force consistent background for mobile devices */
@media (max-width: 768px) {
  body {
    /* Ensure light background on mobile */
    background-color: var(--cloud-white) !important;
    background: var(--cloud-white) !important;
  }
  
  /* Ensure hero background isn't too dark on mobile */
  .hero-background::after {
    background: linear-gradient(
      135deg,
      rgba(0, 168, 89, 0.1) 0%,
      rgba(93, 64, 55, 0.08) 30%,
      rgba(2, 119, 189, 0.06) 60%,
      rgba(255, 111, 0, 0.05) 100%
    ) !important;
  }
  
  /* Ensure sections have proper light backgrounds */
  .adventures-section,
  .about-section,
  .gallery-section,
  .testimonials-section,
  .contact-section {
    background-color: var(--cloud-white) !important;
  }
  
  /* Reduce any dark overlays that might be causing dark appearance */
  .texture-overlay::after,
  .canopy-texture::after,
  .water-ripple::after {
    opacity: 0.3 !important;
  }
}

/* ===========================
   3. HERO SCROLL TEXT BLUR FIX
   Issue: "Scroll to Explore" text is blurred on mobile, black shadow above icon
   Solution: Remove problematic blur effects, remove black shadow, improve text clarity
   =========================== */

.hero-scroll-indicator {
  /* Remove any backdrop filters that might cause blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Enhance text clarity - NO BLACK SHADOW */
  text-shadow: none !important;

  /* Ensure proper positioning */
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  /* Remove any backgrounds that might create shadows */
  background: transparent !important;
  box-shadow: none !important;
}

.scroll-text {
  /* Enhanced readability - NO BLACK SHADOW */
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--cloud-white) !important;
  text-shadow: none !important;
  letter-spacing: 1px !important;

  /* Remove any blur-causing filters */
  filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.scroll-arrow {
  /* Enhance arrow visibility - NO BLACK SHADOW */
  border-color: var(--cloud-white) !important;
  border-width: 2px !important;
  box-shadow: none !important;

  /* Remove any blur effects and shadows */
  filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  text-shadow: none !important;
}

.scroll-chevron {
  /* Ensure the chevron icon has no black shadow */
  color: var(--cloud-white) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* ===========================
   4. ABOUT SECTION IMAGE LOADING FIX
   Issue: Image below "About Vista Arenal" section not loading on mobile
   Solution: Improve image loading and fallbacks
   =========================== */

.about-image picture,
.about-image img {
  /* Ensure images load properly on all devices */
  width: 100% !important;
  height: auto !important;
  display: block !important;
  
  /* Add loading optimization */
  image-rendering: auto !important;
  
  /* Ensure proper object fit */
  object-fit: cover !important;
  object-position: center !important;
}

/* Add explicit fallback for WebP images */
.about-image source[type="image/webp"] {
  /* Ensure WebP sources are properly handled */
  display: block;
}

/* Fallback styling in case images fail to load */
.about-image {
  min-height: 300px !important;
  background-color: var(--warm-sand) !important;
  background-image: linear-gradient(
    135deg,
    var(--primary-green) 0%,
    var(--secondary-green) 100%
  ) !important;
  background-size: cover !important;
  border-radius: var(--radius-md) !important;
  position: relative !important;
}

/* Add loading indicator for images */
.about-image::before {
  content: "Loading..." !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: var(--cloud-white) !important;
  font-family: var(--heading-font) !important;
  z-index: 1 !important;
}

.about-image img[src] + ::before {
  display: none !important;
}

/* ===========================
   5. HERO SECTION MOBILE LAYOUT IMPROVEMENTS
   Issue: Hero layout and readability needs improvement on mobile
   Solution: Optimize spacing, typography, and layout
   =========================== */

@media (max-width: 768px) {
  /* HERO BACKGROUND IMAGE - MOBILE ZOOM OPTIMIZADO */
  .hero-background {
    height: 100vh !important;
    overflow: hidden !important;
  }

  .hero-background img {
    /* Ampliada y completa en mobile - zoom moderado */
    object-fit: cover !important;
    object-position: 50% 40% !important;
    width: 100% !important;
    height: 100% !important;
    /* transform: scale(1.25) translateZ(0) !important; */
    min-height: 100vh !important;
  }

  /* BLUR SOLO EN EL CONTENIDO DEL HERO */
  .hero-content {
    /* Improve mobile layout */
    padding: var(--space-xl) var(--space-md) !important;
    /* max-width: 95% !important; */
    margin: 0 auto !important;
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: var(--radius-lg) !important;
  }

  .hero-title {
    /* Better mobile typography */
    margin-bottom: var(--space-lg) !important;
    text-align: center !important;
  }

  .hero-subtitle {
    /* Enhanced mobile subtitle */
    font-size: clamp(1.1rem, 3vw, 1.5rem) !important;
    margin-bottom: var(--space-sm) !important;
    line-height: 1.3 !important;
  }

  .hero-main-title {
    /* Improved mobile main title */
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--space-md) !important;
  }

  .hero-description {
    /* Better mobile description */
    font-size: clamp(1rem, 2.5vw, 1.125rem) !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin: 0 auto var(--space-lg) !important;
    padding: 0 var(--space-sm) !important;
  }

  .hero-stats {
    /* Optimized mobile stats layout */
    gap: var(--space-md) !important;
    margin-bottom: var(--space-lg) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .stat-item {
    /* Better mobile stat items */
    min-width: 80px !important;
    padding: var(--space-xs) !important;
  }

  /* BOTONES ESTILO DESKTOP - HORIZONTALES */
  .hero-cta {
    /* Layout horizontal como desktop */
    display: flex !important;
    flex-direction: row !important;
    gap: var(--space-sm) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .btn-adventure,
  .btn-nature {
    /* Botones estilo desktop en mobile */
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: var(--space-sm) var(--space-lg) !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }
}

/* ===========================
   6. MOBILE-SPECIFIC OPTIMIZATIONS
   Address mobile device differences vs desktop simulation
   =========================== */

/* Force hardware acceleration for smoother mobile performance */
@media (max-width: 768px) {
  .hero,
  .hero-background,
  .hero-content,
  .footer-brand img {
    transform: translateZ(0) !important;
    will-change: transform !important;
  }
  
  /* Reduce complex effects on mobile for better performance */
  .hero-background {
    transform: none !important;
  }
  
  /* Ensure proper mobile viewport handling */
  .hero {
    min-height: 100vh !important;
    min-height: 100svh !important; /* Use small viewport height for modern browsers */
  }
}

/* ===========================
   7. RESPONSIVE ADJUSTMENTS
   Ensure fixes work across all screen sizes
   =========================== */

@media (max-width: 480px) {
  /* Extra small mobile refinements */
  .footer-brand img {
    width: 140px !important;
    min-width: 120px !important;
  }
  
  .hero-content {
    padding: var(--space-lg) var(--space-sm) !important;
  }
  
  .hero-scroll-indicator {
    bottom: var(--space-lg) !important;
  }
  
  .scroll-text {
    font-size: 0.8rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet-specific adjustments */
  .footer-brand img {
    width: 160px !important;
  }
  
  .hero-scroll-indicator {
    display: block !important;
  }
}

/* ===========================
   8. ACCESSIBILITY IMPROVEMENTS
   Ensure all fixes maintain accessibility standards
   =========================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .footer-brand img {
    filter: contrast(1.5) !important;
  }
  
  .scroll-text {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-indicator {
    animation: none !important;
  }
  
  .footer-brand img,
  .hero-content {
    transition: none !important;
  }
}

/* Focus improvements */
.footer-brand:focus img {
  outline: 3px solid var(--primary-green) !important;
  outline-offset: 4px !important;
}

/* ===========================
   9. PERFORMANCE OPTIMIZATIONS
   Ensure smooth performance on mobile devices
   =========================== */

/* Optimize critical elements for mobile performance */
@media (max-width: 768px) {
  /* Reduce GPU-intensive effects on mobile */
  * {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Optimize animations for mobile */
  .hero-scroll-indicator {
    animation-duration: 2s !important;
    animation-timing-function: ease-in-out !important;
  }
  
  /* Reduce complex filters on mobile */
  .footer-brand img {
    filter: contrast(1.15) saturate(1.05) !important;
  }
}

/* ===========================
   10. IMPORTANT OVERRIDES
   Ensure these fixes take precedence
   =========================== */

/* Critical footer fix - highest specificity */
.site-footer .footer-content .footer-brand img {
  filter: contrast(1.2) saturate(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
  background: none !important;
  -webkit-filter: contrast(1.2) saturate(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Critical mobile background fix */
@media (max-width: 768px) {
  html, body {
    background: var(--cloud-white) !important;
    background-color: var(--cloud-white) !important;
  }
}

/* Critical hero scroll fix */
.hero .hero-scroll-indicator .scroll-text {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}