/*
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: 6.6.1
Requires PHP: 8.1
Version: 3.1.1
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: gcc-block-theme
*/

html, body { 
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    
}


.header-transparent {
    width: 100%;
    position: absolute;
    z-index: 999;
}

@media screen and (max-width: 959px) {
    .wp-block-site-logo {
        margin-top: 0 !important;
    }
}


/* Icon Boxes with hover */
.icon-boxes figure {
    background: #fff;
    border: 1px solid #eaeaea;
    display: block;
    width: 100%;
    height: 250px;
    position: relative;
    box-shadow: 0px 0px 15px -5px;
    transition: all 0.3s ease-in-out;
}
.icon-boxes > figure > a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.icon-boxes > figure > a > img {
    max-height: 60px;
    width: auto;
    top: 50%;
    position: relative;
    transform: translateY(-75%);
}
.icon-boxes > figure > figcaption {
    margin: 0;
    position: absolute;
    bottom: 15%;
    width: 100%;
    text-align: center;
}
.icon-boxes > figure > figcaption > a {
    font-weight: bold;
    font-size: var(--wp--preset--font-size--m);
    text-transform: uppercase;
    color: var(--wp--preset--color--theme-primary-3);
    text-decoration: none;
    line-height: 1;
}
.icon-boxes figure:hover {
    box-shadow: 0px 0px 15px -5px inset;
}

.callout-boxes > .wp-block-group {
    position: absolute; 
    width: 100%;
    z-index: 99;
    left: 0;
    right: 0;
    top: -130px;
}

@media (max-width: 1279px) {
    .callout-boxes > .wp-block-group {
        top: -100px;
    }
    .icon-boxes figure {
        height: 160px;
    }
    .icon-boxes > figure > a > img {
        max-height: 50px;
    }
} 
@media (max-width: 1079px) {
    .callout-boxes > .wp-block-group {
        position: relative;
        top: 0;
        padding: 20px !important;
    }
    .icon-boxes > figure > a > img {
        max-height: 45px;
        transform: translateY(-100%);
    }
} 
@media (max-width: 666px) {
    .callout-boxes > .wp-block-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
} 


/* Home Hero ------------------------------------------------------------- */
/* hide ONLY after JS builds the slider */
.hero-gallery.is-hidden { display: none !important; }

/* Swipers injected into .hero-swipers */
.hero-swipers { position:relative }

/* Main */
.heroMain{
  height: 855px;
  overflow: hidden;
  position: relative;
  margin-bottom: -70px;
}
.heroMain .swiper-wrapper, .heroMain .swiper-slide{ height:100% }
.slide{ position:relative; width:100%; height:100%; margin:0 }
.slide > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; opacity: .5; }

/* Big linked word */
.slide-tag{
  position:absolute;
  right: 0;
  bottom: 140px;
  font-size: clamp(2rem, -0.1127rem + 9.0141vw, 8rem);
  line-height:.75;
  font-weight:900;
  text-align: right;
  text-decoration:none;
  color: rgba(255,255,255,.95);
  letter-spacing:.01em;
  text-transform: uppercase;
  transition: all .3s ease;
  width: auto;
  max-width: calc(100% - 100px);
  opacity: .5;
}
.slide-tag:hover{ opacity: 1 }
.slide-tag:focus-visible{ outline:3px solid #fff; outline-offset:3px }

/* Arrows grouped above thumbs (left-aligned per your latest code) */
.nav{
  position:absolute;
  bottom: 165px;
  top: auto;
  transform: none;
  width:48px; height:48px; border-radius:999px; border:0; cursor:pointer;
  background: rgba(0,0,0,.35); z-index:5;
  transition: background .2s ease;
}
.nav:hover{ background: rgba(0,0,0,.55) }
.next{ left: calc(14px + 48px + 8px); }
.prev{ left: 14px; }
.nav::after{
  content:""; display:block; width:0; height:0; margin:0 auto;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.prev::after{ border-right:12px solid #fff }
.next::after{ border-left:12px solid #fff }

/* Thumbs (overlap inside right column) */
.heroThumbs{
  position:absolute !important;
  left: -40px;
  bottom: -95px;
  width: calc(100% + 40px);
  z-index: 6;
}
.heroThumbs .swiper-wrapper{ align-items:stretch }
.heroThumbs .swiper-slide{ height: 250px }
.thumb{
  position:relative; height:100%; overflow:hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter: grayscale(100%) contrast(1.05); transition: all .3s ease }
.thumb::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 60%) }
.thumb-label{ position:absolute; left:16px; bottom:14px; z-index:2; font-weight:900; letter-spacing:.04em; color:#fff; font-size: clamp(16px,2vw,26px); text-transform: uppercase; opacity:1; transition: all .3s ease }
.heroThumbs .swiper-slide-thumb-active .thumb img { filter:none }
.thumb:hover img { filter:none; transform: scale(1.1) }
.swiper-slide-thumb-active .thumb-label { opacity:0 }

/* Example: Stack below 600px instead of 782px */
@media (max-width: 959px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
    .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Example: Go from 1 → 2 columns at 1280px */
@media (min-width: 960px) {
    .wp-block-columns {
        flex-wrap: nowrap !important;
    }
    
}
/* Hide thumbs under 960px and drop tag/arrows closer to the image bottom */
@media (max-width: 959px){
    #home-hero .wp-block-cover__background {
        background: var(--wp--preset--color--theme-primary-1) !important;
    }
    #home-hero .wp-block-column:first-child > .wp-block-group { padding-bottom: 0 !important; }
    .heroMain { width: 90%; height: 600px; margin-bottom: 0; }
  .heroThumbs{ display:none !important; }

  /* place arrows near the bottom when thumbs are hidden */
  .nav{
    position:absolute;
    bottom: 14px;   /* was calc(...) tied to thumbs */
    top: auto;
    transform: none;
  }
  /* keep your left-grouped arrows */
  .prev{ left: 14px; }
  .next{ left: calc(14px + 48px + 8px); }

  /* move the big word down when there are no thumbs */
  .slide-tag{
    bottom: 16px;      /* was calc(...) tied to thumbs */
    width: 92%;
  }
}

@media (max-width: 599px){
    .heroMain { width: 90%; height: 400px; margin-bottom: 0; }
}




/* watermark --------------------------------------- */
.watermark {
    background-size: 45% auto !important;
    background-position: -120px 85px !important;
}

/* partner logos --------------------------------------- */
.partner-logos figure {
    text-align: center;
}
.partner-logos > div {
    align-items: center;
}
@media screen and (max-width: 959px) {
   .partner-logos > div {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    } 
}
@media screen and (max-width: 599px) {
   .partner-logos > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    } 
}



/* Home Blog slider ------------------------------------ */
.button-links img {
	opacity: 0.5;
	transition: all 0.3s ease-in-out;
}
.button-links img:hover {
	opacity: 1;
}
.button-links p a {
	display: inline-block;
	margin: 0 5px;
}
/* Layout & spacing */
.post-swiper { width: 100%; }
.post-swiper .swiper-slide { height: auto; }

/* Remove default list styles if any remain elsewhere */
.post-swiper .swiper-wrapper { list-style: none; margin: 0; padding: 0; }

/* Make sure card internals stretch nicely */
.post-swiper .wp-block-group { height: 100%; }

/* Keep featured images tidy inside slides */
.post-swiper .wp-block-post-featured-image {
  display: block;
  overflow: hidden;
}

.post-swiper .swiper-button-prev,
.post-swiper .swiper-button-next,
.post-swiper .swiper-pagination { display: none !important; }

.wp-block-read-more {
    color: var(--wp--preset--color--theme-primary-1);
    text-transform: uppercase;
}
.wp-block-read-more:after {
    content:"";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23003552' d='M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z'/%3E%3C/svg%3E");
    height: 20px;
    width: 20px;
    background-size: contain;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    transition: all 0.3s ease-in-out;
}
.wp-block-post:hover .wp-block-post-featured-image + div {
    background-color: var(--wp--preset--color--theme-primary-1) !important;
}
.wp-block-post:hover .wp-block-post-featured-image + div h3,
.wp-block-post:hover .wp-block-post-featured-image + div a {
    transition: all 0.3s ease-in-out;
}
.wp-block-post:hover .wp-block-post-featured-image + div h3,
.wp-block-post:hover .wp-block-post-featured-image + div a {
    color: var(--wp--preset--color--theme-white) !important;
}
.wp-block-post:hover .wp-block-post-featured-image + div .wp-block-read-more:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z'/%3E%3C/svg%3E");
}


/* Callout bars ------------------------ */
.callout-bar-left p {
    margin-left: auto !important;
    margin-right: 0 !important;
}