/*
Theme Name: GCC Block Theme
Theme URI: https://greenclosetcreative.com/
Author: AnnMarie DeVito - Web Developer 
Author URI: https://greenclosetcreative.com/
Description: Custom block theme created by Green Closet Creative.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 3.1.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: gcc-block-theme
*/


/* Button Styles */
/* Core WP button style reset */
.wp-block-button__link,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.menu-button > a.mega-menu-link {
  position: relative;
  z-index: 2;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

/* left bevel */
.wp-block-button__link::before,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.menu-button > a.mega-menu-link::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: -8px;
  left: -16px;            /* stick-out distance */
  width: 11px;            /* bevel thickness */
  background: #5dc5c6;
  transform: skewY(-45deg);
}

/* bottom lip */
.wp-block-button__link::after,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.menu-button > a.mega-menu-link::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: -8px;
  right: 3px;
  bottom: -15px;
  height: 10px;
  background: #2a7b80;    /* dark teal strip */
  transform: skewX(-45deg);
}

/* accessibility: visible focus */
.wp-block-button__link:focus-visible,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.menu-button > a.mega-menu-link:focus-visible {
  outline: 2px dashed #333;
  outline-offset: 4px;
}

.wp-block-button {
    position: relative;
    z-index: 0;           /* establishes a stacking context */
    isolation: isolate;   /* ensures children can't slip behind ancestors */
    overflow: visible;    /* keep the beveled/offset bits visible */
}
.wp-block-button:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    left: -10px;
    bottom: -10px;
    background: #a7a9ac;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* never steal clicks */
    filter: blur(2px);
}

/* Hover state */
.wp-block-button__link:hover,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.menu-button > a.mega-menu-link:hover {
    transform: translate(8px, -8px);   /* move up and over */
    background: #fff;                  /* white face */
    color: var(--wp--preset--color--theme-secondary);
}
.wp-block-button:hover:after {
  opacity: 1;
}


/* Form Styles */
.gform-theme--foundation .gform_fields {
  row-gap: 1em;
}
.gform-theme--framework .gfield input, .gform-theme--framework .gfield textarea {
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}


/* amination circle */
#hero figure { position: relative; z-index: 7; }
#hero figure:after {
  content: "";
  display: block;
  width: 120%;
  height: 100px;
  border-radius: 50%;
  background: var(--wp--preset--color--theme-primary-1);
  position: relative;
  bottom: 50px;
  z-index: -1;
  left: -10%;
}



/* ===== Carousel wrapper ===== */
* {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            overflow-x: hidden; /* Prevent body horizontal scroll */
        }
        
        .services-carousel {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 100vw; /* Prevent overflow */
        }
        .services-carousel:before {
            content: "";
            display: block;
            width: 75px;
            height: 500px;
            background: #ecf8f9;
            position: absolute;
            left: -10px;
            z-index: 1;
            top: 0;
        }
        
        /* Swiper overrides */
        .swiper {
            overflow: hidden;
            width: 100%;
			padding-left: 75px !important;
        }
        
        .swiper-wrapper {
            display: flex !important;
			gap: 20px;
        }
        
        .swiper-slide {
            width: 280px !important;
            margin-right: 0 !important;
            flex-shrink: 0;
        }
.swiper-slide:not(.swiper-slide-active) p { opacity: 0; }
        
        .services-card {
            width: 280px;
            min-width: 280px;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
.services-card:before {
	content: "";
	display: block;
	width: 100%;
	height: 250px;
	background: #000;
	opacity: .6;
	position: absolute;
}
        .services-card .wp-block-image,
        .services-card figure {
            margin: 0;
        }
        .services-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
        }
        .services-card h3 {
            font-size: 1.55rem;
            font-weight: 400;
            margin: 1.5rem 1.5rem 0.75rem;
            color: #fff;
            line-height: 1.3;
			text-transform: uppercase;
			position: absolute;
			display: block;
			width: calc(100% - 3rem);
			top: 150px;
			z-index: 100;
        }
        .services-card p {
            font-size: 0.9rem;
			background: #3c8180;
            color: #fff;
            margin: 0;
			padding: 0 1.5rem 2rem;
            line-height: 1.6;
        }
		.services-card p:before {
			content: "";
			display: block;
			width: 100%;
			height: 250px;
			background: #3C8180;
			background: linear-gradient(0deg,rgba(60, 129, 128, 1) 20%, rgba(60, 129, 128, 0) 100%);
			position: absolute; 
			top: 0; 
			left: 0;
			z-index: 99;
		}
.services-card p a {
	color: #fff;
}
.services-card p a:hover {
	color: #000;
}
        
        /* Custom navigation buttons */
        .swiper-button-prev,
        .swiper-button-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #2c3e50;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 20;
            transition: all 0.3s ease;
            color: #fff;
            box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
            margin: 0;
        }
        
        .swiper-button-prev:hover,
        .swiper-button-next:hover {
            background: #34495e;
            box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
            transform: translateY(-50%) scale(1.05);
        }
        
        .swiper-button-prev {
            left: 15px;
        }
        
        .swiper-button-next {
            right: 5px;
        }
        
        /* Hide default Swiper arrows */
        .swiper-button-prev:after,
        .swiper-button-next:after {
            display: none;
        }
        
        /* Custom arrow icons */
        .swiper-button-prev svg,
        .swiper-button-next svg {
            width: 22px;
            height: 22px;
        }
        
        

        .carousel-container {
            flex: 1;
            min-width: 0; /* Allow flex item to shrink */
        }
        
        /* Responsive */
        @media (max-width: 781px) {
			#hero { overflow: hidden; }
            .services-carousel {
                padding-left: 15px !important;
                padding-right: 50px;
            }
            
            .services-carousel:before {
                width: 15px;
            }
			.swiper {
				padding-left: 55px !important;
			}
            
            .swiper-button-prev {
                left: 5px;
            }
            
            .swiper-button-next {
                right: 5px;
            }
			.services-carousel:before {
				display: none;
			}
            
            
        }
        @media (max-width: 480px) {
            .services-carousel {
                padding-left: 10px !important;
                padding-right: 30px;
            }
            
            .services-carousel:before {
                width: 10px;
            }
            .swiper {
				padding-left: 0 !important;
			}
            .swiper-slide {
                width: 260px !important;
            }
            
            .services-card {
                width: 260px;
                min-width: 260px;
            }
            
            .swiper-button-prev {
                left: -5px;
            }
            
            .swiper-button-next {
                right: -5px;
            }
			.swiper-button-prev, .swiper-button-next { top: 38%; }
        }