/**
 * Mobile Fixes for Twins Real Estate
 * Mobile-specific fixes for hero sections and page spacing
 * @version 2.0.0
 *
 * NOTE: Navbar fixes are in navbar-global.css
 */

/* ==========================================================================
   Renovation Page Mobile Hero Fixes
   ========================================================================== */

/* Fix hero section visibility on mobile for renovations page */
@media (max-width: 768px) {
  /* Main hero container - CRITICAL FIX for navbar overlap */
  .renovation-hero-modern {
    margin-top: 0 !important;
    padding-top: 120px !important; /* Increased from 100px to ensure title is visible */
    min-height: calc(100vh + 20px) !important; /* Extra height to accommodate padding */
    z-index: 1 !important;
    position: relative !important;
  }

  /* Ensure container inside hero has proper spacing */
  .renovation-hero-modern > .container {
    padding-top: 0 !important;
  }

  /* Row alignment fix */
  .renovation-hero-modern .row {
    align-items: flex-start !important; /* Prevent vertical centering that pushes content up */
    padding-top: 20px !important;
  }

  /* Ensure hero content column is visible */
  .renovation-hero-modern .col-lg-8,
  .renovation-hero-modern .col-lg-4 {
    margin-top: 0 !important;
  }

  /* Hero content wrapper */
  .renovation-hero-modern .hero-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Hero title - MUST be visible */
  .renovation-hero-modern .hero-title {
    margin-top: 15px !important;
    padding-top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* All hero child elements */
  .renovation-hero-modern .hero-badge,
  .renovation-hero-modern .hero-title,
  .renovation-hero-modern .hero-subtitle,
  .renovation-hero-modern .hero-features,
  .renovation-hero-modern .hero-actions,
  .renovation-hero-modern .hero-stats {
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Stats cards positioning */
  .renovation-hero-modern .stat-card {
    z-index: 3 !important;
  }
}

/* ==========================================================================
   Portfolio and Stats Section Spacing Fixes
   ========================================================================== */

/* Fix overlapping sections on mobile */
@media (max-width: 768px) {
  /* Portfolio section needs clear separation */
  .portfolio-showcase {
    margin-top: 40px !important;
    padding-top: 60px !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
  }

  /* Services partnership section spacing */
  .services-partnership-section {
    margin-top: 40px !important;
    padding-top: 60px !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
  }

  /* Calculator section spacing */
  .quote-calculator-section {
    margin-top: 40px !important;
    padding-top: 60px !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
  }

  /* Trust section spacing */
  .trust-section {
    margin-top: 40px !important;
    padding-top: 60px !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
  }

  /* Final CTA section spacing */
  .final-cta-section {
    margin-top: 40px !important;
    padding-top: 60px !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
  }

  /* Ensure all sections in renovations page have proper flow */
  .renovations-page-wrapper > section,
  .renovations-page-wrapper > .container {
    position: relative !important;
    z-index: auto !important;
  }
}

/* ==========================================================================
   Mobile Viewport Height Fix
   ========================================================================== */

/* Fix for iOS viewport height issues */
@media (max-width: 768px) {
  .renovation-hero-modern,
  .hero-section {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

/* ==========================================================================
   Hero Z-Index - Ensure Below Navbar
   ========================================================================== */

/* Hero sections should be below navbar */
.renovation-hero-modern,
.hero-section,
.renovation-hero {
  z-index: 1 !important;
}

/* ==========================================================================
   Mobile Content Overflow Fix
   ========================================================================== */

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
  .renovations-page-wrapper,
  .site-main {
    overflow-x: hidden;
    width: 100%;
  }
}

/* ==========================================================================
   Footer Legal Links - Removed band-aid fix
   ========================================================================== */
   
/* Root cause fixed: Renovations CSS variables are now properly scoped
 * to .renovations-page-wrapper, preventing variable leakage to footer.
 * Footer uses global design system variables which are not affected.
 */