/* ============================================
   MOBILE NAVIGATION FIX - SIMPLE & WORKING
   Desktop nav stays visible, mobile gets FAB
   ============================================ */

/* DESKTOP: Hamburger always hidden */
.hamburger {
  display: none !important;
}

/* MOBILE ONLY: Hide desktop nav, show FAB */
@media (max-width: 768px) {
  /* Hide desktop nav on mobile */
  header nav {
    display: none !important;
  }
  
  /* Mobile header adjustments */
  header {
    padding: 0.5rem 1rem;
  }
  
  header .logo img {
    max-height: 40px;
  }
}

/* Hero animations disabled on mobile */
@media (max-width: 768px) {
  /* Safari iOS viewport rendering fix */
  body {
    -webkit-overflow-scrolling: touch !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
  
  .hero *,
  .hero [data-aos] {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  
  /* CRITICAL: Ensure hero backgrounds show on mobile */
  .hero,
  .hero-about,
  .hero-services,
  .hero-ignition,
  .hero-kairos,
  .hero-consulting,
  .hero-vgl,
  .hero-blog,
  .hero-contact {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Safari iOS rendering fix - force GPU acceleration */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    
    /* Force immediate paint */
    min-height: 100vh !important;
    position: relative !important;
  }
  
  /* Make gradient overlay much lighter on mobile so background is visible */
  .hero::before {
    opacity: 0.3 !important; /* Very light so background shows */
    background: radial-gradient(circle at 50% 50%, rgba(0, 26, 77, 0.3) 0%, transparent 70%) !important;
  }
  
  /* Lighten the after overlay too */
  .hero::after {
    opacity: 0.3 !important;
  }
}