/* ============================================
   MOBILE PERFORMANCE FIXES
   ============================================ */

/* 1. Fix background-attachment:fixed on mobile (kills GPU compositing) */
@media (max-width: 768px) {
  #colorlib-counter,
  .colorlib-counters {
    background-attachment: scroll !important;
  }
}

/* 2. Enable GPU acceleration on animated elements */
.project,
.blog-entry,
.services-wrap,
.steps,
.colorlib-feature,
.animate-box {
  will-change: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 3. Reduce animation complexity on mobile */
@media (max-width: 768px) {
  .blog-entry:hover {
    transform: none !important;
  }
  .services-wrap:hover .services-img {
    transform: none !important;
  }
  /* Faster, simpler transitions on touch */
  .project,
  .blog-entry,
  .steps,
  .colorlib-feature {
    transition-duration: 0.15s !important;
  }
}

/* 4. Prevent layout jank from sidebar on mobile */
@media (max-width: 768px) {
  #colorlib-aside {
    will-change: transform;
    -webkit-overflow-scrolling: touch;
  }
  #colorlib-main {
    will-change: transform;
  }
}

/* 5. Smooth scrolling - only on devices that can handle it */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 6. Touch target sizes - avoid tiny tap areas on mobile */
@media (max-width: 768px) {
  #colorlib-aside #colorlib-main-menu ul li a {
    padding: 16px 0 16px 14px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
  .wa-sticky {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* 7. Contain paint to avoid full-page repaints */
.colorlib-about,
.colorlib-services,
.colorlib-work,
.colorlib-blog,
.colorlib-contact,
#get-in-touch,
#colorlib-counter {
  contain: layout style;
}

/* 8. Hero slider - prevent min-height 100vh jank on mobile 
   (address bar appearing/disappearing causes relayout) */
@media (max-width: 768px) {
  #colorlib-hero .flexslider .slides li,
  #colorlib-hero {
    min-height: 100svh !important;
  }
}

/* 9. Fix buttons overflowing screen on mobile — applies to ALL pages */
@media (max-width: 768px) {
  .btn-learn,
  .btn.btn-primary.btn-learn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Ensure wrapping paragraphs don't overflow either */
  p:has(.btn-learn) {
    overflow: hidden !important;
    width: 100% !important;
  }
}