/* Nahleh promo/trust banner — static centered row on desktop,
   seamless looping marquee on mobile. */

.nh-promo {
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nh-promo .utility-bar__grid {
  padding: 0;
}

/* Desktop: centered static row */
.nh-promo__static {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.4rem;
  padding: 0.9rem 1.6rem;
  flex-wrap: wrap;
}

.nh-promo__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.nh-promo__item--link:hover {
  text-decoration: underline;
}

.nh-promo__item .svg-wrapper {
  color: var(--nh-amber);
  display: inline-flex;
  flex-shrink: 0;
}

.nh-promo__item svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
  stroke: currentColor;
}

.nh-promo__dot {
  opacity: 0.3;
}

/* Mobile: seamless marquee, hidden on desktop.
   max-width + overflow make this element the clipping window (its grid parent
   would otherwise let it grow to the track's full width), and direction: ltr
   anchors the track to the window's left edge — in the page's RTL flow the
   track anchors right, which puts the track's END on screen at the start of
   each cycle and drains it into an empty stretch as it slides left. */
.nh-promo__marquee {
  display: none;
  max-width: 100%;
  overflow: hidden;
  direction: ltr;
}

.nh-promo__marquee-track {
  display: flex;
  direction: ltr;
  width: max-content;
  gap: 2.4rem;
  padding: 0.9rem 0;
  animation: nh-marquee 22s linear infinite;
}

.nh-promo__group {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  flex: none;
}

/* The track holds 6 copies of the group (see announcement-bar.liquid), so one
   seamless loop shifts by exactly one group + one gap: a sixth of the track's
   width (-100% / 6) plus the sixth of a gap the percentage doesn't cover. */
@keyframes nh-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-16.6667% - 0.4rem));
  }
}

@media screen and (max-width: 820px) {
  .nh-promo__static {
    display: none;
  }

  .nh-promo__marquee {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nh-promo__marquee-track {
    animation: none;
  }
}