/* ========================================
   Widget Marquee - scrolling text
   ========================================
   Two identical groups side by side, each at least as wide (or tall) as
   the widget, both shifted by one group length per loop: when the first
   group has scrolled out, the copy sits exactly where it started, so the
   loop has no jump. Colours and font come from the surrounding block —
   the Designer styles the frame, the widget only moves the text.

   Theme overrides:
     --marquee-gap        space between messages (left/right)
     --marquee-line-gap   space between lines (up/down)
     --marquee-separator  mark before every message ('' to hide it)
*/
.widget-marquee {
  --marquee-gap: 2.5rem;
  --marquee-line-gap: .5rem;
  --marquee-separator: '\2022';
  --marquee-duration: 20s;
  display: flex;
  gap: var(--marquee-gap);
  overflow: hidden;
  padding-block: .5em;
  line-height: 1.5;
}

.widget-marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  min-width: 100%;
  animation: widget-marquee-x var(--marquee-duration) linear infinite;
}

.widget-marquee__item {
  flex-shrink: 0;
  white-space: nowrap;
  color: inherit;
}

.widget-marquee__item::before {
  content: var(--marquee-separator);
  margin-inline-end: .75em;
  opacity: .6;
}

a.widget-marquee__item {
  text-decoration: none;
}

a.widget-marquee__item:hover,
a.widget-marquee__item:focus-visible {
  text-decoration: underline;
}

/* Left to right — same loop played backwards */
.widget-marquee[data-direction="right"] .widget-marquee__group,
.widget-marquee[data-direction="down"] .widget-marquee__group {
  animation-direction: reverse;
}

/* Vertical: one message per line inside a window of --marquee-height */
.widget-marquee[data-direction="up"],
.widget-marquee[data-direction="down"] {
  flex-direction: column;
  gap: var(--marquee-line-gap);
  height: var(--marquee-height, 120px);
  padding-block: 0;
}

.widget-marquee[data-direction="up"] .widget-marquee__group,
.widget-marquee[data-direction="down"] .widget-marquee__group {
  flex-direction: column;
  align-items: stretch;
  gap: var(--marquee-line-gap);
  min-width: 0;
  min-height: 100%;
  animation-name: widget-marquee-y;
}

.widget-marquee[data-direction="up"] .widget-marquee__item,
.widget-marquee[data-direction="down"] .widget-marquee__item {
  white-space: normal;
}

/* Let the reader stop the text to read or click it */
.widget-marquee[data-pause="1"]:hover .widget-marquee__group,
.widget-marquee[data-pause="1"]:focus-within .widget-marquee__group {
  animation-play-state: paused;
}

@keyframes widget-marquee-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--marquee-gap)));
  }
}

@keyframes widget-marquee-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% - var(--marquee-line-gap)));
  }
}

/* No motion: show the messages as a still, wrapping list */
@media (prefers-reduced-motion: reduce) {
  .widget-marquee,
  .widget-marquee[data-direction="up"],
  .widget-marquee[data-direction="down"] {
    height: auto;
  }

  .widget-marquee__group {
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
    animation: none;
  }

  .widget-marquee__group[aria-hidden="true"] {
    display: none;
  }

  .widget-marquee__item {
    white-space: normal;
  }
}