/*
 Theme Name:   Twenty Twenty-Five Child - Eco
 Theme URI:    
 Description:  Eco outdoors  a Child theme for Twenty Twenty-Five
 Author:       Justin M
 Template:     twentytwentyfive
 Version:      1.0.0
*/
/* 

Ah, gotchas! 
when styling with the wordpress site editor - it will set css inline. 
so when animating things it was causing issues. 
*/
/* Base: hide until JS triggers visibility */
/* helper for slide-in animations (avoid scrollbar flashes) */
body {
  /* Some of these images are too small so when at a smaller column count the radius doesn't work. */
  /*     .wp-block-gallery .wp-block-image img {
        border-radius: 0px;
    } */
  /* Header */
  /*   
    header .phone-num {

    } */
  /* Home page */
  /* When admin is logged in we need to give this 32px because of the black admin bar! */
  /*
        To contain an animation that uses transform, apply overflow: hidden to the nearest parent container
        that is responsible for its layout (e.g., the display: flex or display: grid parent)

        fix for transform values temporarily pushing the elements outside the viewport - 
        we could also set this on the body but not sure if we have scrollable content.
        
        in console you can set * {outline: 1px solid red;} and see.  */
  /* I believe we are just using animate-wrapper but double check soon! */
  /*         @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            60% {
                opacity: 1;
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        .animate-fade-in-scale {
            opacity: 0;
            animation: fadeInBounce 1s forwards;
        }
        .animate-fade-in-scale.visible {
            opacity: 1;
        } */
}

body a {
  text-decoration: none;
}

body .wp-block-image img {
  border-radius: 15px;
}

body .main-cta-btn a {
  /* background: #1bb600; */
  background: #168200;
  transition: .3s all ease-in-out;
  box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid #177d03;
  font-size: 22px;
  padding: 12px 30px;
}

body .main-cta-btn a:hover {
  background: green;
  box-shadow: 6px 6px 10px 3px rgba(0, 0, 0, 0.5);
  background: none;
  border-color: white;
}

body :where(.wp-block-button__link) {
  border-radius: 15px;
}

body .scroll-sentinel {
  position: absolute;
  /* Place it at the point where you want the shrink to trigger.
        If your header is 70px tall, placing it at 70px means the
        shrink happens as soon as the header finishes scrolling up. */
  top: 100px;
  height: 1px;
  width: 100%;
  /* Hide it from view */
  z-index: -1;
}

body header.wp-block-template-part {
  box-shadow: 0px 3px 11px 8px rgba(0, 0, 0, 0.5);
  /* position: relative; */
  background: white;
  /* .phone-num {
                margin: 0;
            } */
}

body header.wp-block-template-part .inner-header {
  padding: 20px 0;
  transition: all 0.3s ease-in-out;
}

body header.wp-block-template-part .inner-header .phone-num {
  transition: all 0.3s ease-in-out;
}

body header.wp-block-template-part .wp-block-image img {
  transition: all 0.3s ease-in-out;
}

body header .shrink .wp-block-image img {
  transform: scale(0.75);
  padding-bottom: 0;
}

body header .shrink .inner-header {
  padding: 2px;
}

body header .shrink .inner-header .phone-num {
  margin: 0;
}

body .hero .main-cta-btn {
  margin-top: 30px;
}

body main {
  margin-block-start: 0rem;
  /*  .review-con > .slick-initialized {
            min-width: 0;
        }  */
}

body main .mid-con h2 {
  font-weight: bold;
}

body main .about-con h2 {
  font-weight: bold;
}

body main .services {
  background: linear-gradient(180deg, #f5f0e1 0%, #ffffff 100%);
}

body main .gallery {
  background: linear-gradient(180deg, #ffffff 0%, #f5f0e1 100%);
}

body main .styled-heading-1 {
  text-align: center;
  position: relative;
  font-weight: bold;
}

body main .styled-heading-1:after {
  content: "";
  display: block;
  width: 60px;
  height: 6px;
  background: #1db500;
  /* brand color */
  background: linear-gradient(90deg, #2d8a4e, #1db500);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

body main .box {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
  padding: 0px;
  border: 2px solid transparent;
}

body main .box .box-content {
  padding: 20px;
  margin: 0;
}

body main .box .box-content h3 {
  font-weight: 600;
  color: #333;
}

body main .box .box-content p {
  color: #665;
  margin-top: 2px;
}

body main .box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: #1cb600;
}

body main .review-con {
  /* .review-slider {
                width: 100%;
            }
            .slider-column-fix {
                min-width: 0;
            } */
}

body main .review-con .slick-initialized .slick-slide {
  display: flex !important;
}

body main .gallery {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
}

body main blockquote cite {
  font-size: 22px !important;
  font-style: italic !important;
}

body.admin-bar header.wp-block-template-part {
  top: 32px;
}

body footer {
  margin-block-start: 0;
}

body .overflow-hidden,
body .animated-content,
body .animate-wrapper {
  overflow: hidden;
}

body .animate-left, body .animate-right, body .animate-fade-in {
  opacity: 0;
  transition: opacity 1s, transform 1s;
  transition-delay: 0.2s;
}

body .animate-left {
  transform: translateX(-50px);
}

body .animate-right {
  transform: translateX(50px);
}

body .animate-fade-in-top {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 0.3s;
}

body .animate-fade-in-bottom {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 0.2s;
}

@keyframes fadeInBounce {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

body .animate-fade-in-bounce {
  opacity: 0;
}

body .animate-fade-in-bounce.visible {
  animation: fadeInBounce 1s forwards;
  opacity: 1;
}

body .animate-left.visible, body .animate-right.visible, body .animate-fade-in.visible {
  opacity: 1;
  transform: translateX(0);
}

body .animate-fade-in-top.visible, body .animate-fade-in-bottom.visible {
  opacity: 1;
  transform: translateY(0);
}

/* If for some reason the no script tag falls - or we want to style the no-js differently - no-js is set on html with JS*/
.no-js .animate-left, .no-js .animate-right {
  opacity: 1 !important;
  transform: none !important;
}