/**
 * VISTA ARENAL ADVENTURE PARK
 * Feedback 3 Improvements - Critical Fixes
 * 
 * Issues addressed:
 * 1. Footer logo size (extremely small)
 * 2. WhatsApp phone number line break
 * 3. Simplified WhatsApp icon (remove phone)
 * 4. Footer bottom background consistency
 * 5. CRITICAL: Mobile hero section background coverage and text contrast
 */

/* ================================================
   1. FOOTER LOGO SIZE IMPROVEMENT
   ================================================ */

.footer-brand .img-responsive img {
  width: 180px !important;
  height: auto !important;
  max-width: 220px;
  min-width: 160px;
}

@media (max-width: 768px) {
  .footer-brand .img-responsive img {
    width: 150px !important;
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .footer-brand .img-responsive img {
    width: 130px !important;
    min-width: 110px;
  }
}

/* ================================================
   2. WHATSAPP PHONE NUMBER LINE BREAK FIX
   ================================================ */

.footer-column a[href*="wa.me"] {
  white-space: nowrap !important;
  display: inline-block;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Ensure contact section has proper spacing */
.footer-column ul li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* ================================================
   3. FOOTER BOTTOM BACKGROUND CONSISTENCY
   ================================================ */

.footer-bottom {
  background: transparent !important;
  background-color: inherit !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

.footer-bottom p {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit;
}

/* ================================================
   4. SIMPLIFIED WHATSAPP ICON (MOBILE SOCIAL)
   ================================================ */

/* Updated WhatsApp icon - clean logo without phone */
.social-links a[href*="wa.me"] .social-icon svg {
  /* Replace the existing WhatsApp icon with a cleaner version */
}

.social-links a[href*="wa.me"] .social-icon svg path {
  /* Clean WhatsApp logo path - will be updated with simpler design */
  d: path("M12.031 6.172c-3.181 0-5.767 2.586-5.767 5.766 0 1.101.365 2.126 1.006 2.94l.142.209-.58 2.125 2.158-.567.204.121c.784.462 1.697.709 2.635.709 3.18 0 5.767-2.586 5.767-5.766 0-3.18-2.588-5.766-5.767-5.766zm3.392 8.244c-.144.405-.837.771-1.163.798-.297.024-.677.025-1.097-.069-.253-.056-.576-.132-.989-.231-1.739-.415-2.874-2.163-2.961-2.263-.085-.099-.693-.924-.693-1.762s.42-1.265.578-1.435c.133-.14.291-.175.388-.175s.194.001.279.006c.089.006.209-.034.327.249.119.288.401.978.437 1.049.036.071.06.154.013.249-.047.095-.071.154-.142.238-.07.085-.147.189-.21.255-.071.071-.145.147-.062.287.082.14.365.601.783.973.537.479 .989.627 1.129.698.14.07.223.059.305-.036.082-.095.354-.412.449-.554.095-.142.189-.119.318-.071.131.047.832.393.975.465.142.071.237.107.272.166.036.06.036.342-.108.747z");
}

/* ================================================
   5. CRITICAL: MOBILE HERO SECTION FIXES
   ================================================ */

/* Mobile Hero Section Background Coverage and Contrast */
@media (max-width: 768px) {
  .hero {
    position: relative;
    background-size: cover !important;
    background-position: center 40% !important; /* Optimized for mobile - focus on main subject */
    background-repeat: no-repeat !important;
    min-height: 100vh;
    background-attachment: scroll; /* Better performance on mobile */
  }

  /* Ensure background image covers full hero area - REDUCED BLUR */
  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(34, 139, 34, 0.15) 0%,
      rgba(255, 140, 0, 0.1) 50%,
      rgba(34, 139, 34, 0.2) 100%
    );
    z-index: 1;
    backdrop-filter: blur(0px) !important; /* No blur */
  }

  /* Additional overlay for better text contrast - LIGHTER */
  .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15); /* Much lighter overlay */
    z-index: 2;
    backdrop-filter: none !important; /* No blur */
  }

  /* Optimize hero-background element for mobile */
  .hero-background {
    background-position: center 40% !important;
    background-size: cover !important;
  }

  .hero-background img {
    object-position: center 40% !important; /* Focus on key area of image */
    object-fit: cover !important;
  }

  /* Ensure hero content is above overlays */
  .hero-content {
    position: relative;
    z-index: 3;
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }

  /* Enhanced text contrast for mobile */
  .hero h1,
  .hero .hero-title {
    color: #ffffff !important;
    text-shadow: 
      2px 2px 4px rgba(0, 0, 0, 0.8),
      1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    font-weight: 700;
    line-height: 1.2;
  }

  .hero p,
  .hero .hero-subtitle {
    color: #ffffff !important;
    text-shadow: 
      1px 1px 3px rgba(0, 0, 0, 0.8),
      0px 0px 2px rgba(0, 0, 0, 0.9) !important;
    font-weight: 500;
    line-height: 1.4;
  }

  /* Hero buttons - UPDATED: Maintain desktop styling in mobile */
  .hero .btn-adventure {
    background: linear-gradient(135deg, var(--sunset-orange), #FF8F00) !important;
    color: var(--cloud-white) !important;
    box-shadow: var(--shadow-md) !important;
    border: none !important;
    text-shadow: none !important;
  }

  .hero .btn-nature {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--cloud-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    text-shadow: none !important;
  }

  .hero .btn-adventure:hover {
    background: linear-gradient(135deg, #FF8F00, var(--sunset-orange)) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 111, 0, 0.4) !important;
  }

  .hero .btn-nature:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.7) !important;
  }

  /* Stats section mobile contrast - UPDATED: Remove green background, reduce blur */
  .hero-stats {
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0;
    padding: 1rem;
    margin-top: 1rem;
    border: none !important;
  }

  .hero-stats .stat-number {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }

  .hero-stats .stat-label {
    color: #f0f0f0 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
}

/* ================================================
   6. TABLET HERO IMPROVEMENTS
   ================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .hero::before {
    background: linear-gradient(
      135deg,
      rgba(34, 139, 34, 0.3) 0%,
      rgba(255, 140, 0, 0.2) 50%,
      rgba(34, 139, 34, 0.4) 100%
    );
  }

  .hero h1,
  .hero .hero-title {
    text-shadow: 
      2px 2px 4px rgba(0, 0, 0, 0.7),
      1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  }

  .hero p,
  .hero .hero-subtitle {
    text-shadow: 
      1px 1px 3px rgba(0, 0, 0, 0.7),
      0px 0px 2px rgba(0, 0, 0, 0.8) !important;
  }
}

/* ================================================
   7. ADDITIONAL MOBILE OPTIMIZATIONS
   ================================================ */

@media (max-width: 480px) {
  /* Extra small mobile devices */
  .hero {
    min-height: 100vh;
  }

  .hero-content {
    padding: 1.5rem 0.75rem;
  }

  .hero h1,
  .hero .hero-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .hero p,
  .hero .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  /* Enhanced button visibility on small screens */
  .hero .btn,
  .hero .btn-primary,
  .hero .hero-cta {
    padding: 12px 24px;
    font-size: 1rem;
    border-width: 2px;
    min-width: 200px;
  }
}

/* ================================================
   8. HIGH CONTRAST MODE SUPPORT
   ================================================ */

@media (prefers-contrast: high) {
  .hero::after {
    background: rgba(0, 0, 0, 0.5) !important;
  }

  .hero h1,
  .hero .hero-title,
  .hero p,
  .hero .hero-subtitle {
    text-shadow: 
      3px 3px 6px rgba(0, 0, 0, 1),
      2px 2px 4px rgba(0, 0, 0, 1) !important;
  }

  .hero .btn,
  .hero .btn-primary,
  .hero .hero-cta {
    border-width: 3px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
  }
}

/* ================================================
   9. PERFORMANCE OPTIMIZATIONS
   ================================================ */

/* Optimize background image rendering */
.hero {
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero .btn,
  .hero .btn-primary,
  .hero .hero-cta {
    transition: none;
  }

  .hero .btn:hover,
  .hero .btn-primary:hover,
  .hero .hero-cta:hover {
    transform: none;
  }
}

/* ================================================
   10. FALLBACK FOR OLDER BROWSERS
   ================================================ */

/* CSS Grid fallback */
@supports not (backdrop-filter: blur(10px)) {
  .hero-stats {
    background: rgba(0, 0, 0, 0.8) !important;
  }
}

/* Flexbox fallback */
@supports not (display: flex) {
  .hero-content {
    display: block;
    text-align: center;
    padding-top: 25vh;
  }
}