/*!
 * Compass Pro – Banner Rotator (vanilla)
 * No Swiper dependency.
 */

:root{
  --cpb-height: auto;           /* Desktop viewport height */
  --cpb-container: 1320px;       /* Width of inner container */
  --cpb-gap: 80px;               /* Gap between columns */

  --cpb-left-max: 640px;         /* Fixed text column */
  --cpb-right-max: 620px;        /* Fixed video column */
  --cpb-video-top: 24px;         /* Video offset from top */

  --cpb-dots-top: 640px;         /* Dots position inside 700px area */
  --cpb-arrows-top: 180px;       /* Arrows vertical position */
  --cpb-arrows-outside: 56px;    /* How far outside container arrows sit */

  --cpb-primary: #11b6f0;
}

/* Section is positioning context for external controls */
.first-block.cpb-wrap{ position: relative; margin-bottom: 48px; }

/* ===== Slider viewport ===== */
.cpb-slider{
  height: var(--cpb-height);
  position: relative;
  overflow: visible;       /* allow long text to visually overflow */
  z-index: 0;
  padding-bottom: 5px;
}
.cpb-track{
  height: 100%;
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 500ms ease;
}
.cpb-slide{
  flex: 0 0 100%;
  height: 100%;
  overflow: visible;
}
.cpb-slide.is-active{}

/* ===== Two-columns (fixed widths) ===== */
.cpb-row.cpb-slide-inner{
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cpb-gap);
  position: relative;
  z-index: 2; /* above decorative shapes */
}
.cpb-left, .cpb-right{ flex: 0 0 auto; }
.cpb-left { max-width: var(--cpb-left-max);  width: 100%; }
.cpb-right{ max-width: var(--cpb-right-max); width: 100%; padding-top: var(--cpb-video-top); }

/* Theme sometimes scales video in; keep visible */
.cpb-wrap .first-block__video{ -webkit-transform: none !important; transform: none !important; }

/* Neutralize theme hero animations inside the slider */
.cpb-wrap > .first-block__inner.block-width,
.cpb-wrap .cpb-slide-inner,
.cpb-wrap .first-block__left,
.cpb-wrap .first-block__right,
.cpb-wrap .first-block__video,
.cpb-wrap .first-block__title,
.cpb-wrap .first-block__desc,
.cpb-wrap .first-block__text,
.cpb-wrap .first-block__btn,
.cpb-wrap .cpb-slide {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  position: relative;
  z-index: 2;
}

/* The TRACK must be allowed to animate/translate */
.cpb-wrap .cpb-track {
  position: relative;
  z-index: 2;
  will-change: transform;
  transition: transform 500ms ease !important;
}

/* ===== Lite YouTube placeholder ===== */
.cpb-lite-yt{
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;     /* 16:9 */
  background: #000;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
}
.cpb-lite-yt__play{
  position: absolute; inset: 0;
  display:flex; align-items:center; justify-content:center;
  font-size: 48px; color:#fff;
}

/* ===== Dots (inside 700px area) ===== */
.cpb-pagination{
  position: absolute;
  top: var(--cpb-dots-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.cpb-pagination button{
  width: 10px; height: 10px; border-radius: 50%;
  border: 0; margin: 0 6px; background: rgba(0,0,0,.25); cursor: pointer;
}
.cpb-pagination button.is-active{ background: var(--cpb-primary); }

/* ===== Arrows (outside the 1320px container, inside section) ===== */
.cpb-arrow{
  position: absolute;
  top: var(--cpb-arrows-top);
  z-index: 999;
  width: 44px; height: 44px;
  background: transparent;
  color: var(--cpb-primary);
  border: 0; cursor: pointer;
  display: block;
}
.cpb-prev{ left:  calc(50% - (var(--cpb-container) / 2) - var(--cpb-arrows-outside)); }
.cpb-next{ right: calc(50% - (var(--cpb-container) / 2) - var(--cpb-arrows-outside)); }

/* simple chevrons */
.cpb-arrow::after{
  content:""; display:block; width:18px; height:18px; margin:13px auto;
  border-top:3px solid currentColor; border-right:3px solid currentColor;
}
.cpb-prev::after{ transform: rotate(-135deg); } /* left */
.cpb-next::after{ transform: rotate(45deg); }   /* right */

/* Single-slide mode hides controls */
.cpb-single #cpb-prev, .cpb-single #cpb-next, .cpb-single #cpb-pagination{ display:none !important; }

/* Header overlay (home only) */
/* body.home .site-header{ background: transparent !important; } */

/* ===== Responsive ===== */
@media (max-width: 1280px){
  :root{
    --cpb-left-max: 600px;
    --cpb-right-max: 560px;
    --cpb-gap: 64px;
    --cpb-dots-top: 620px;
    --cpb-arrows-top: 160px;
    --cpb-arrows-outside: 40px;
    --cpb-container: 1160px;
  }
}
@media (max-width: 1024px){
  :root{
    --cpb-height: 560px;
    --cpb-left-max: 520px;
    --cpb-right-max: 520px;
    --cpb-gap: 48px;
    --cpb-dots-top: 520px;
    --cpb-arrows-top: 140px;
    --cpb-arrows-outside: 24px;
    --cpb-container: 960px;
  }
}
@media (max-width: 980px){
  .cpb-slider{ height: auto; }
  .cpb-row.cpb-slide-inner{ flex-direction: column; gap: 24px; }
  #cpb-prev, #cpb-next{ display: none !important; }
  #cpb-pagination{ position: static; transform: none; margin-top: 12px; }
}

/* === FIX 1: hide horizontal overflow so the next slide is not visible === */
.cpb-slider{
  /* was: overflow: visible; */
  overflow-x: hidden;     /* hide the slide on the right */
  overflow-y: visible;    /* still allow tall content to overflow downward */
}

/* === FIX 2: make sure our controls can receive clicks === */
#cpb-pagination,
#cpb-prev,
#cpb-next,
.cpb-pagination button {
  pointer-events: auto;    /* ensure clickable */
}

#cpb-prev,
#cpb-next {
  z-index: 10010 !important;  /* above any decorative overlays */
}

#cpb-pagination{
  z-index: 10010 !important;
}

/* === FIX 3: put the banner content/controls above decorative shapes
   and stop those shapes from catching pointer events === */
.cpb-wrap,
.cpb-wrap .first-block__inner,
.cpb-wrap .cpb-track,
.cpb-wrap .cpb-slide,
.cpb-wrap .cpb-row {
  position: relative;
  z-index: 2;  /* our content layer */
}

/* The theme draws gradient/shape pseudo-elements; keep them under us */
.cpb-wrap::before,
.cpb-wrap::after,
.cpb-wrap .first-block__inner::before,
.cpb-wrap .first-block__inner::after {
  z-index: 1 !important;
  pointer-events: none !important;   /* cannot block clicks anymore */
}

/* Keep video visible and not intercepting clicks outside its box */
.cpb-wrap .first-block__video {
  transform: none !important;
  -webkit-transform: none !important;
}

/* Optional (defensive): prevent any overlay element inside the section from eating clicks */
.cpb-wrap *[style*="position: absolute"],
.cpb-wrap *[style*="position:absolute"] {
  /* only takes effect if a rogue overlay has pointer-events defaulting to auto */
  pointer-events: auto;
}

/* Make the CTA always clickable and above surrounding layers */
.cpb-wrap .first-block__btn,
.cpb-wrap .content-block__link,
.cpb-wrap .content-block__link * {
  pointer-events: auto !important;
}

.cpb-wrap .content-block__link {
  position: relative;
  z-index: 10020; /* above decorative overlays and the slider track */
}

/* CTA must be clickable and on top */
.cpb-wrap .first-block__btn,
.cpb-wrap .content-block__link {
  position: relative;
  z-index: 10020;
  pointer-events: auto;
  cursor: pointer;
}



/* ===== CTA spacing & sizing (Compass Pro banner only) ===== */
.cpb-wrap .first-block__btn {
  /* space above the button */
  margin-top: 18px;
}

.cpb-wrap .first-block__btn .content-block__link {
  /* bigger tap target + consistent look */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 22px;          /* adjust to taste */
  min-height: 44px;            /* a11y: comfortable tap area */
  line-height: 1.2;
  /* border-radius: 8px; */          /* optional: keep/remove if theme styles differ */

  text-decoration: none;       /* rely on hover/focus below */
  pointer-events: auto;        /* ensure clicks always work */
  position: relative;
  z-index: 10020;              /* above decorative shapes */
}

/* Subtle interactions that respect our earlier animation neutralization */
.cpb-wrap .first-block__btn .content-block__link:hover {
  text-decoration: none;
  filter: brightness(0.98);
}

.cpb-wrap .first-block__btn .content-block__link:focus-visible {
  outline: 2px solid var(--cpb-primary);
  outline-offset: 2px;
  text-decoration: none;
}

/* Mobile: slightly tighter */
@media (max-width: 980px){
  .cpb-wrap .first-block__btn { margin-top: 14px; }
  .cpb-wrap .first-block__btn .content-block__link { padding: 11px 18px; }
}

/* Move dots 25px up inside the 700px area */
.cpb-wrap #cpb-pagination { 
    /* bottom: calc(var(--cpb-dots-top) - 25px);*/ 
    margin: auto;
    max-width: 1320px;
    transform: none;
    padding-block: 20px;
    padding-inline: clamp(36px, 4vw, 60px);
    position: static;

}

/* === Dots: make inactive+active white (optional) === */
.cpb-wrap .cpb-pagination .cpb-bullet {
  background: #fff !important;  /* inactive */
}
.cpb-wrap .cpb-pagination .cpb-bullet.is-active {
  background: #0BB9EE !important;                     /* active */
}