/* ========================================
   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 — unless the tag sets fontsize/color,
   which the widget writes as an inline style on .widget-marquee.

   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;
  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::before {
  content: var(--marquee-separator);
  margin-inline-end: .75em;
  opacity: .6;
}
a.widget-marquee__item {
  text-decoration: none;
}
/* A colour set on the widget wins over the theme's link colour */
.widget-marquee[data-color] a.widget-marquee__item {
  color: inherit;
}
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;
  }
}