/* yal-home-marquee (2026-05-20, rev bottom-fixed)
 * Pinned to viewport BOTTOM on home — always visible during scroll.
 * Desktop and mobile share the same horizontal strip; only sizing differs.
 * The strip lifts above the cookie banner via JS-set --yal-cookies-h.
 * Klaviyo teaser (.yal-teaser) and SCROLL cue (.yal-hero-cue) are pushed above the marquee.
 */

/* Default: hidden — only renders on home */
.yal-marquee { display: none !important; }

.yal-marquee {
  --yal-m-bg: #6B2737;
  --yal-m-bg-op: 0.85;
  --yal-m-fg: #ffffff;
  --yal-m-dur-d: 60s;
  --yal-m-dur-m: 30s;
  pointer-events: auto;
  font-family: "Montserrat", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 500 !important;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

/* ── HOME — fixed strip at viewport bottom (always visible during scroll) ── */
body.common-home .yal-marquee {
  display: flex !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--yal-cookies-h, 0);
  height: 59px;
  overflow: hidden;
  background-color: var(--yal-m-bg);
  color: var(--yal-m-fg);
  /* z above body::after curtain (60) and content blocks (70), below floating UI (9998+) */
  z-index: 80;
  font-size: 21px;
  line-height: 59px;
  letter-spacing: 2px;
  align-items: center;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 0 16px;
  transition: bottom 200ms ease-out;
}

/* Mobile — shorter strip, smaller font */
@media (max-width: 575px) {
  body.common-home .yal-marquee {
    height: 46px;
    font-size: 19px;
    line-height: 46px;
    letter-spacing: 2px;
    padding: 0 8px;
  }
}

/* Track — single, repeated content with 50%-translate seamless loop */
body.common-home .yal-marquee__track,
body.common-home .yal-marquee,
body.common-home .yal-marquee * {
  font-weight: 500 !important;
  font-family: "Montserrat", "Helvetica Neue", system-ui, sans-serif !important;
}
body.common-home .yal-marquee__track {
  display: inline-block;
  white-space: nowrap;
  animation: yal-marquee-h var(--yal-m-dur-d, 60s) linear infinite;
  will-change: transform;
}

@media (max-width: 575px) {
  body.common-home .yal-marquee__track {
    animation: yal-marquee-h var(--yal-m-dur-m, 30s) linear infinite;
  }
}

@keyframes yal-marquee-h {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause on hover (opt-in via data attribute set by template) */
body.common-home .yal-marquee[data-pause-hover="1"]:hover .yal-marquee__track {
  animation-play-state: paused;
}

/* Clickable overlay — only rendered when admin Link URL is set */
body.common-home .yal-marquee__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  /* Transparent — strip's text/bg show through */
  background: transparent;
  /* No focus outline default, but keep accessible for keyboard nav */
  text-decoration: none;
}
body.common-home .yal-marquee__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
body.common-home .yal-marquee--linked { cursor: pointer; }

/* Reduced motion: stop animation, keep one copy visible */
@media (prefers-reduced-motion: reduce) {
  body.common-home .yal-marquee__track {
    animation: none !important;
    transform: none !important;
  }
}

/* ── Push floating bottom-edge widgets above the marquee ── */

/* Klaviyo teaser (.yal-teaser) — original bottom:28px desktop / 16px mobile.
 * Bump by marquee height + breathing so the widget sits cleanly above. */
body.common-home .yal-teaser {
  bottom: 95px; /* 28 (original) + 59 (marquee) + 8 (breathing) */
}
@media (max-width: 600px) {
  body.common-home .yal-teaser {
    bottom: 70px; /* 16 (original) + 46 (marquee) + 8 (breathing) */
  }
}

/* SCROLL cue (.yal-hero-cue) — original bottom:32px, only shown when .yal-hero-cue-show */
body.common-home .yal-hero-cue {
  bottom: 99px; /* 32 (original) + 59 (marquee) + 8 (breathing) */
}
@media (max-width: 575px) {
  body.common-home .yal-hero-cue {
    bottom: 86px; /* 32 + 46 + 8 */
  }
}