/* ===== Text Ticker / Marquee plugin =====
   All selectors scoped under [data-cb-type="marquee"] so nothing leaks.
   Text color inherits from the surrounding content (neutral by design);
   the gap is a CSS variable. */
[data-cb-type="marquee"] {
    display: block;
    --mq-gap: 28px;
    --mq-font-size: inherit;   /* mount sets a concrete size */
    /* --mq-color is left unset on purpose: text inherits the page color (auto
       light/dark) until "Custom Text Color" is turned on in the settings. */
}

[data-cb-type="marquee"] .mq-viewport {
    overflow: hidden;
    width: 100%;
}

[data-cb-type="marquee"] .mq-track {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    will-change: transform;
    animation-name: mq-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

[data-cb-type="marquee"] .mq-track .mq-group {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--mq-color, inherit);   /* items + separators => gets override by .is-light/dark-text * */
}

[data-cb-type="marquee"] .mq-track .mq-group .mq-item {
    padding-inline: calc(var(--mq-gap) / 2);
    font-size: var(--mq-font-size);
    color: var(--mq-color, inherit); /* prevent override */
}

[data-cb-type="marquee"] .mq-track .mq-group .mq-sep {
    opacity: 0.4;
    color: var(--mq-color, inherit); /* prevent override */
}

@keyframes mq-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Right direction plays the same loop backwards */
[data-cb-type="marquee"][data-cb-direction="right"] .mq-track {
    animation-direction: reverse;
}

/* Pause on hover */
[data-cb-type="marquee"][data-cb-pause-on-hover="true"] .mq-track:hover {
    animation-play-state: paused;
}

/* Reduced-motion / static fallback (mount adds this + makes the viewport
   scrollable so all items stay reachable) */
[data-cb-type="marquee"] .mq-track.mq-static {
    animation: none;
    transform: none;
}

/* Data list is the accessible source of truth; hidden but readable by
   assistive tech (not display:none). */
[data-cb-type="marquee"] .mq-items {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}