/**
 * Sliding announcement bar — pushes fixed header below ticker.
 *
 * Built by Rank Ray — https://rankray.com
 */

html {
  --jc-announcement-height: 0px;
}

.jc-announcement,
.justccell-announcement {
  position: fixed;
  top: var(--jc-admin-bar, 0px);
  left: 0;
  right: 0;
  z-index: 1001;
  width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.jc-announcement__viewport {
  overflow: hidden;
}

.jc-announcement__track {
  display: flex;
  width: max-content;
  animation: jc-announcement-scroll var(--jc-announcement-duration, 30s) linear infinite;
}

.jc-announcement__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.55rem 0;
  white-space: nowrap;
}

.jc-announcement__group + .jc-announcement__group {
  padding-left: 2rem;
}

.jc-announcement__sep {
  padding-inline: 0.75rem;
  opacity: 0.85;
}

@keyframes jc-announcement-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

body.jc-has-announcement nav.show_nav {
  top: calc(var(--jc-admin-bar, 0px) + var(--jc-announcement-height, 0px));
}

body.jc-has-announcement .p-product,
body.jc-has-announcement .a-page,
body.jc-has-announcement .why-page,
body.jc-has-announcement .c-listing,
body.jc-has-announcement .j3,
body.jc-has-announcement .jc-contact,
body.jc-has-announcement .laser-page,
body.jc-has-announcement .jc-location,
body.jc-has-announcement .d-discover,
body.jc-has-announcement .site-main:has(> .jc-hero-banner) {
  padding-top: calc(var(--navh, var(--jc-header-h, 100px)) + var(--jc-announcement-height, 0px));
}

body.jc-has-announcement {
  scroll-padding-top: calc(
    var(--navh, var(--jc-header-h, 100px)) + var(--jc-announcement-height, 0px) + 0.5rem
  );
}

@media (prefers-reduced-motion: reduce) {
  .jc-announcement__track {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .jc-announcement__group + .jc-announcement__group {
    display: none;
  }

  .jc-announcement__group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.75rem;
    padding: 0.65rem 1rem;
    white-space: normal;
    text-align: center;
  }

  .jc-announcement__sep {
    display: none;
  }
}

@media (max-width: 768px) {
  .jc-announcement,
  .justccell-announcement {
    font-size: 0.6875rem;
  }

  .jc-announcement__group {
    padding-block: 0.5rem;
  }
}
