/* =========================================================
 * GN Mobile Homepage Scroll Stability v2
 * Purpose: stop touch/scroll shakiness, black overlay blockage,
 * and mobile first-render jank on the homepage only.
 * ======================================================= */

@media (max-width: 782px) {
  html,
  body.home,
  body.front-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    scroll-behavior: auto !important;
    -webkit-text-size-adjust: 100% !important;
    touch-action: pan-y !important;
  }

  body.home,
  body.front-page {
    position: relative !important;
    min-height: 100dvh !important;
    background-attachment: scroll !important;
  }

  /* Fixed pseudo backgrounds + background-attachment: fixed are common causes of
     mobile paint thrashing and the dark layer that appears to block scrolling. */
  body.home::before,
  body.home::after,
  body.front-page::before,
  body.front-page::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.home *,
  body.home *::before,
  body.home *::after,
  body.front-page *,
  body.front-page *::before,
  body.front-page *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, opacity, box-shadow !important;
    scroll-behavior: auto !important;
  }

  /* Disable transform-based hover/touch effects on mobile. Touch devices can keep
     :hover active during scroll, which caused the page to shake and ignore scroll. */
  body.home :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit),
  body.home :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit):hover,
  body.home :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit):focus,
  body.home :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit):active,
  body.front-page :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit),
  body.front-page :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit):hover,
  body.front-page :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit):focus,
  body.front-page :is(.card, .col.card, .page-card, .search-post, button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .cta-button, .custom-logo, .search-form, .search-submit):active {
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  body.home :is(.animate-on-scroll, .visible, .scale-up, .scale-down, .rotate, .move-left, .move-right, .move-up, .move-down),
  body.front-page :is(.animate-on-scroll, .visible, .scale-up, .scale-down, .rotate, .move-left, .move-right, .move-up, .move-down) {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Mobile Safari/Chrome can jank badly when large containers use backdrop-filter
     while scrolling. Keep the same light design but remove live blur on phones. */
  body.home :is(header.site-header, .site-header, main, main.container, #content, .site-content, .container, .hero, .about, .services, .why-choose-us, .testimonials, .contact, .card, .col.card, footer.site-footer, .site-footer),
  body.front-page :is(header.site-header, .site-header, main, main.container, #content, .site-content, .container, .hero, .about, .services, .why-choose-us, .testimonials, .contact, .card, .col.card, footer.site-footer, .site-footer) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    contain: none !important;
  }

  body.home main.container,
  body.front-page main.container {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 16px auto 0 !important;
    padding: 14px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.home .hero,
  body.home .about,
  body.home .services,
  body.home .why-choose-us,
  body.home .testimonials,
  body.home .contact,
  body.front-page .hero,
  body.front-page .about,
  body.front-page .services,
  body.front-page .why-choose-us,
  body.front-page .testimonials,
  body.front-page .contact {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
  }

  body.home .services .row,
  body.home .testimonials .row,
  body.front-page .services .row,
  body.front-page .testimonials .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  body.home .services .card,
  body.home .testimonials .card,
  body.front-page .services .card,
  body.front-page .testimonials .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin-inline: 0 !important;
  }

  /* Keep mobile homepage ads enabled, but reserve a stable box and delay
     AdSense execution through gn-mobile-homepage-adsense-delay-v3.js. */
  body.home .ah-adsense-slot--mobile-home-deferred,
  body.front-page .ah-adsense-slot--mobile-home-deferred {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 118px !important;
    margin: 18px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    clear: both !important;
    position: relative !important;
    z-index: 0 !important;
    contain: layout paint !important;
    isolation: isolate !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;
  }

  body.home .ah-adsense-slot--front-page-bottom.ah-adsense-slot--mobile-home-deferred,
  body.front-page .ah-adsense-slot--front-page-bottom.ah-adsense-slot--mobile-home-deferred {
    min-height: 128px !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
  }

  body.home .ah-adsense-slot--mobile-home-deferred ins.adsbygoogle,
  body.front-page .ah-adsense-slot--mobile-home-deferred ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: inherit !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;
  }

  body.home .ah-adsense-slot--mobile-home-deferred iframe,
  body.front-page .ah-adsense-slot--mobile-home-deferred iframe {
    max-width: 100% !important;
    border: 0 !important;
  }

  /* Defensive overlay cleanup for any late-injected element that tries to cover
     the viewport on the homepage. Keep normal header/nav/footer untouched. */
  body.home > :where(div, section, aside):not(.site-header):not(header):not(main):not(.container):not(.site-footer):not(footer),
  body.front-page > :where(div, section, aside):not(.site-header):not(header):not(main):not(.container):not(.site-footer):not(footer) {
    max-width: 100% !important;
  }
}