/* =========================================================================
   Garman Built - Global custom CSS
   Loaded site-wide via wp-content/novamira-sandbox/garman-custom-loader.php
   Assets (arrow.png) live in this same folder.
   ========================================================================= */

/* =========================================================================
   Elementor "Call to Action" widgets (cover skin) - What We Do section
     1) description hidden by default, revealed on hover
     2) permanent bottom gradient (#0000001A -> #000000E5); extra #00000080
        overlay layered on top on hover (gradient always stays)
     3) glass arrow badge, top-right
     4) badge turns blue (#006AC8) on hover
     5) on hover only the arrow rotates (up-right to right); box stays put
   ========================================================================= */
.elementor-widget-call-to-action .elementor-cta{
  position: relative;
  overflow: hidden;
}

.elementor-widget-call-to-action .elementor-cta__bg-overlay{
  background-color: transparent !important;
  background-image: linear-gradient(to bottom, #0000001A, #000000E5) !important;
  opacity: 1 !important;
}
.elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__bg-overlay{
  background-color: transparent !important;
}

.elementor-widget-call-to-action .elementor-cta__bg-wrapper::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-color: #00000080;
  opacity: 0;
  transition: opacity .35s ease;
}
.elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__bg-wrapper::before{
  opacity: 1;
}

.elementor-widget-call-to-action .elementor-cta__content{
  position: relative;
  z-index: 4;
}

.elementor-widget-call-to-action .elementor-cta__description{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .35s ease, max-height .4s ease;
}
.elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__description{
  opacity: 1;
  max-height: 260px;
}

.elementor-widget-call-to-action .elementor-cta::after{
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.85);
  background-color: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color .3s ease, border-color .3s ease;
  pointer-events: none;
}
.elementor-widget-call-to-action .elementor-cta:hover::after{
  background-color: #006AC8;
  border-color: #006AC8;
}

.elementor-widget-call-to-action .elementor-cta::before{
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 6;
  width: 50px;
  height: 50px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: transform .35s ease;
  pointer-events: none;
}
.elementor-widget-call-to-action .elementor-cta:hover::before{
  transform: rotate(-45deg);
}

/* =========================================================================
   .img-slash - parallelogram (slanted) image. Same 13deg slant as btn-slash.
   ========================================================================= */
.img-slash{
  display: inline-block;
  overflow: hidden;
  transform: skewX(-13deg);
}
.img-slash img{
  display: block;
  transform: skewX(13deg) scale(1.3);
}

/* =========================================================================
   .gb-arrow-box - same glass arrow badge + hover as the CTA boxes, for the
   "Selected Work" CONTAINER boxes. These are Elementor containers whose
   ::before pseudo is already used by the background overlay, so the badge is
   built from the box's own icon widget instead of container pseudo-elements:
     - the icon widget becomes the glass badge box (turns blue on hover)
     - its inner .elementor-icon becomes the arrow (rotates alone on hover)
   The original combined SVG inside the icon is hidden and replaced by
   arrow.png so the arrow can rotate independently of the box.
   ========================================================================= */
.gb-arrow-box{
  position: relative;
}

/* icon widget -> glass badge box, pinned top-right */
.gb-arrow-box .elementor-widget-icon{
  position: absolute !important;
  top: 20px;
  right: 20px;
  z-index: 6;
  width: 50px;
  height: 50px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.85);
  background-color: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color .3s ease, border-color .3s ease;
  pointer-events: none;
}
.gb-arrow-box:hover .elementor-widget-icon{
  background-color: #006AC8;
  border-color: #006AC8;
}

/* wrappers fill the badge, no default spacing */
.gb-arrow-box .elementor-widget-icon .elementor-icon-wrapper,
.gb-arrow-box .elementor-widget-icon .elementor-icon{
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hide the original combined SVG/img badge */
.gb-arrow-box .elementor-widget-icon .elementor-icon svg,
.gb-arrow-box .elementor-widget-icon .elementor-icon img{
  display: none !important;
}

/* .elementor-icon -> arrow glyph layer (rotates alone).
   The arrow image sits on a ::after pseudo, NOT on the element itself,
   because Elementor's lazy-load feature injects
   `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * { background-image:none !important }`
   which nukes background images on descendant ELEMENTS (pseudos are safe). */
.gb-arrow-box .elementor-widget-icon .elementor-icon{
  position: relative;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: transform .35s ease;
}
.gb-arrow-box .elementor-widget-icon .elementor-icon::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.gb-arrow-box:hover .elementor-widget-icon .elementor-icon{
  transform: rotate(-45deg);
}