/* ============================================================
   Rolling Announcement Banner — module.css
   ============================================================ */
/* ---- Outer wrapper from utility macro ---- */
.hs-rolling-banner-wrap {
  position: relative;
  z-index: 10;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}
@supports not (overflow-x: clip) {
  .hs-rolling-banner-wrap {
    overflow-x: hidden;
  }
}

/* Stop the wide rotated strip from creating horizontal page scroll.
   Applied to html (always wins for page scroll) and body (some
   themes set overflow on body explicitly).                        */
html:has(.hs-rolling-banner-wrap),
body:has(.hs-rolling-banner-wrap) {
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html:has(.hs-rolling-banner-wrap),
  body:has(.hs-rolling-banner-wrap) {
    overflow-x: hidden;
  }
}
/* ---- Stage: minimal box, just hosts the strip + polygon ---- */
.hs-rolling-banner-stage {
  position: relative;
  height: var(--rb-height);
  /* Vertical shift moves the entire banner up/down freely without
     affecting surrounding section spacing                        */
  transform: translateY(var(--rb-shift, 0));
}

/* On mobile, switch to the mobile shift value */
@media (max-width: 767px) {
  .hs-rolling-banner-stage {
    transform: translateY(var(--rb-shift-mobile, 0));
  }
}
/* ---- Decorative polygon (subtle depth shape — peeks out at strip edges) ---- */
.hs-rolling-banner__polygon {
  position: absolute;
  top: 50%;
  left: -30vw;
  width: calc(100% + 60vw);
  height: calc(var(--rb-height) + var(--rb-overlay-extra-h, 14px));
  background-color: var(--rb-overlay-color);
  opacity: var(--rb-overlay-opacity);
  transform: translateY(-50%) rotate(var(--rb-overlay-angle, -3.2deg));
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
}
/* ---- The diagonal strip ---- */
.hs-rolling-banner {
  position: absolute;
  top: 50%;
  left: -30vw;
  width: calc(100% + 60vw);
  height: var(--rb-height);
  margin-top: calc(var(--rb-height) / -2); /* center vertically */
  background-color: var(--rb-bg);
  transform: rotate(var(--rb-angle));
  transform-origin: center center;
  overflow: hidden;
  pointer-events: all;
  z-index: 1;
}
/* ---- Track wrapper ---- */
.hs-rolling-banner__track-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 1;
}
/* Pause on hover (only when enabled via field) */
.hs-rolling-banner[data-pause-hover="true"]:hover .hs-rolling-banner__track {
  animation-play-state: paused;
}
/* ---- The scrolling track ---- */
.hs-rolling-banner__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: rb-scroll linear infinite;
  animation-duration: var(--rb-duration, 20s);
  will-change: transform;
}
@keyframes rb-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--rb-distance, -50%)); }
}
/* ---- Pass containers ---- */
.hs-rolling-banner__pass {
  display: inline-flex;
  align-items: center;
}
/* ---- Individual text item ---- */
.hs-rolling-banner__item {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  line-height: 1;
  flex-shrink: 0;
  color: #e3e6ec;
}
/* ---- Separator icon ---- */
.hs-rolling-banner__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rb-sep-size);
  height: var(--rb-sep-size);
  flex-shrink: 0;
  margin: 0 28px;
}
.hs-rolling-banner__separator svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* ---- CTA button ---- */
.hs-rolling-banner__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 100;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1.2;
  margin: 0 16px 0 8px;
  background-color: var(--rb-btn-bg);
  color: var(--rb-btn-color);
  border: 2px solid var(--rb-btn-border);
  /* Smooth all the things on hover */
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    transform 0.4s ease;
}

/* Hover state: invert fill, keep border visible, slight scale */
.hs-rolling-banner__btn:hover,
.hs-rolling-banner__btn:focus-visible {
  background-color: transparent;
  color: var(--rb-btn-bg);
  border-color: var(--rb-btn-bg);
  text-decoration: none;
  transform: scale(1.08);
}
.hs-rolling-banner__btn:active {
  transform: scale(1.0);
}