/*
Theme Name: IDv4 Official
Theme URI: https://greenclosetcreative.com/
Author: AnnMarie DeVito - Technical Lead @ Green Closet Creative
Author URI: https://greenclosetcreative.com/team/annmarie-devito/
Description: A custom curated, yet flexible, WordPress theme brought to you by Green Closet Creative.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.0
Version: 4.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: idv4-official
Tags: 



/* Header Styles ---------------------------------------------------------- */
.wp-site-blocks { position: relative; }
/* transparent header - add class to header .transparent-header */
header.transparent-header {
    position: absolute;
    z-index: 99;
    width: 100%;
}
header.transparent-header + main #hero {
    padding-top: 175px !important;
}

@media screen and (max-width: 781px) {
    header { padding-top: 50px !important; }
    header .wp-block-buttons {
        position: absolute;
        top: -38px;
    }
}
@media screen and (max-width: 381px) {
    header .wp-block-buttons .wp-block-button__link {
        font-size: 11px !important;
    }
}

/* Hover Styles ---------------------------------------------------------- */
/* .hover-grow - makes image/background scale on hover. Add class to image block */
.hover-grow {
    transition: transform 0.3s ease-in-out;
}
.hover-grow:hover {
    transform: scale(1.05);
}


/* Pattern Styles ---------------------------------------------------------- */
/* Home Page Hero Pattern Styles */
@media screen and (max-width: 1279px) {
    .home-hero-four-images,
    .home-hero-five-images {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home-hero-four-images > .wp-block-cover:first-child,
    .home-hero-five-images > .wp-block-cover {
        grid-column: span 1;
    }
}
@media screen and (max-width: 1023px) {
    .home-hero-four-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-hero-four-images > .wp-block-cover {
        grid-column: span 1;
        grid-row: span 1;
    }

    .home-hero-five-images {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .home-hero-five-images > .wp-block-cover {
        grid-column: span 2;
        grid-row: span 1;
    }
    .home-hero-five-images > .wp-block-cover:first-child,
    .home-hero-five-images > .wp-block-cover:nth-child(2) {
        grid-column: span 3;
        grid-row: span 1;
    } 
}

@media screen and (max-width: 781px) {
    .home-hero-two-images,
    .home-hero-three-images,
    .home-hero-four-images,
    .home-hero-five-images {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Scope all heroes */
:where(.home-hero-one-image,
       .home-hero-two-images,
       .home-hero-three-images,
       .home-hero-four-images,
       .home-hero-five-images) .wp-block-cover {
  overflow: hidden; /* so the zoom doesn't spill outside */
}

/* Transition on the actual background image element (img or span pattern) */
:where(.home-hero-one-image,
       .home-hero-two-images,
       .home-hero-three-images,
       .home-hero-four-images,
       .home-hero-five-images)
  .wp-block-cover :is(.wp-block-cover__image-background,
                      .wp-block-cover__image-background img) {
  display: block; /* guards against inline/strange display from plugins */
  transition: transform .3s ease-in-out;
  will-change: transform;
  transform-origin: center center;
}

/* Hover zoom */
:where(.home-hero-one-image,
       .home-hero-two-images,
       .home-hero-three-images,
       .home-hero-four-images,
       .home-hero-five-images)
  .wp-block-cover:hover :is(.wp-block-cover__image-background,
                            .wp-block-cover__image-background img) {
  transform: scale(1.1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.home-hero-one-image,
         .home-hero-two-images,
         .home-hero-three-images,
         .home-hero-four-images,
         .home-hero-five-images)
    .wp-block-cover :is(.wp-block-cover__image-background,
                        .wp-block-cover__image-background img) {
    transition: none;
  }
}


/* alternating loop helper */
.alternating-h-loop > ul > li:nth-child(odd) .is-vertical {
    flex-direction: column-reverse;
}

.alternating-v-loop > ul > li:nth-child(even) .wp-block-columns {
    flex-direction: row-reverse;
}



/* Special Styles ----------------------------------------------------------- */


/* Testing Image Swap */
/* Hide ALL paragraphs by default */
.wp-block-column:first-child 
> .wp-block-group 
> .wp-block-group:not(:first-child) p {
  opacity: 0;
  transform: translateY(10px);
  max-height: 0;
  overflow: hidden;
  transition: 
    opacity 0.3s ease,
    transform 0.3s ease,
    max-height 0.3s ease;
}


/* Show ONLY on hover */
.wp-block-column:first-child 
> .wp-block-group 
> .wp-block-group:not(:first-child):hover p {
  opacity: 1;
  transform: translateY(0);
  max-height: 100px; /* enough to fit your text */
}

#industry-image {
  position: relative;
  overflow: hidden;
}

#industry-image::before {
  background-image: var(--bg-image);
}
/* Put background layer above the img */
#industry-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  opacity: 0;

  transition: 
    opacity 0.4s ease,
    transform 0.6s ease;

  z-index: 2;
}

/* Active state */
#industry-image.is-swapping::before {
  opacity: 1;
}

/* Keep original img underneath */
#industry-image img {
  display: block;
}