/* ============================================
   Giving Naam — Custom Fixes
   Replaces WPBakery & Grve JS-dependent
   animations with immediate visible states.
   Injected sitewide via Netlify snippet.
   Last updated: April 10, 2026
   ============================================ */


/* ----------------------------
   1. WPBAKERY ANIMATION RESET
   Make all WPBakery-animated elements
   immediately visible in final position.
   ---------------------------- */

.wpb_animate_when_almost_visible,
.wpb_fadeInUp,
.wpb_fadeInUpBig,
.wpb_slideInUp,
.wpb_slideInDown,
.wpb_appear,
.wpb_start_animation {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}


/* ----------------------------
   2. GRVE ANIMATED ITEMS RESET
   Make all scroll-triggered animated
   elements immediately visible.
   ---------------------------- */

.grve-animated-item,
.grve-animated,
.grve-fade-in-up,
.grve-fade-in,
.grve-fade-in-down {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}


/* ----------------------------
   3. CLIPPING ANIMATION RESET
   Disable all JS-driven clipping/sliding
   reveals. Show content immediately.
   ---------------------------- */

.grve-clipping-animation,
.grve-clipping-left,
.grve-colored-clipping,
.grve-colored-clipping-up {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  overflow: visible !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  left: auto !important;
}

/* Reset inner content of clipping elements */
.grve-clipping-animation .grve-clipping-content,
.grve-clipping-left .grve-clipping-content,
.grve-clipping-animation .grve-image-wrapper,
.grve-clipping-left .grve-column-wrapper {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  left: auto !important;
}

/* Fix left slide — override even when JS adds grve-clipping-animated */
.grve-clipping-animation.grve-clipping-animated.grve-clipping-left .grve-clipping-wrapper,
.grve-clipping-animation.grve-clipping-animated.grve-clipping-left .grve-clipping-content {
  animation: none !important;
  transform: translateX(0) !important;
  transition: none !important;
}

/* Fix color overlay — push above image ONLY before JS fires.
   Once JS adds grve-clipping-animated, the theme animation runs normally */
.grve-clipping-animation:not(.grve-clipping-animated) .grve-clipping-overlay {
  transform: translateY(-100%) !important;
  transition: none !important;
  animation: none !important;
}

/* Ensure photo content is always visible */
.grve-clipping-animation.grve-colored-clipping .grve-clipping-content,
.grve-clipping-animation.grve-clipping-show-content.grve-colored-clipping .grve-clipping-content {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ----------------------------
   4. MOBILE FIXES (max 767px)
   ---------------------------- */

@media only screen and (max-width: 767px) {

  /* Show/hide mobile GIVE NOW button correctly */
  .show-on-mob {
    display: flex !important;
    justify-content: center;
    margin: auto;
  }

  .Hide-on-mob .grve-btn {
    display: none !important;
  }

  /* 3 panels — center buttons on mobile */
  .three-boxes .grve-align-left {
    text-align: center;
  }

  /* Center icons and LEARN MORE buttons in banner sections —
     theme normally does this via JS-added grve-animated class */
  .homepage-additional-banner .icon-image,
  .homepage-additional-banner .give-now-btn {
    display: flex !important;
    justify-content: center !important;
  }

  /* Support section text swap */
  .support-text {
    display: none;
  }

  .mobile-text {
    display: block !important;
  }

  /* Naam Angels heading */
  .revive-heading {
    display: none;
  }

  .revive-heading.mobile-heading-revive {
    display: block !important;
    font-size: 33px;
    letter-spacing: 0px;
  }

  /* Support section sizing */
  .supprt-heading {
    font-size: 21px;
    margin-bottom: 30px;
    text-transform: none !important;
    padding: 0px 7px !important;
  }

  .support-new-sec p {
    padding: 0px 8px 30px;
  }

  .support-new-sec.grve-align-center {
    padding: 30px 0px !important;
  }

}