/* =============================================================================
   custom-runner.css
   Any overrides for .sr-container or .sr-text specific to your site’s look.
   ============================================================================= */

/* Example: change font, color, and padding for every ticker on your site */

.sr-text {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    color: #cc007a;
    /* If you want more horizontal breathing room: */
    padding: 0.5em 2em;
    background-color: #24c0c532;
    
}

/* Example: target a specific container (#myRepeater) to set height, border, background */
#myRepeater {
    position: relative;    /* or fixed if you want it “stuck” to top */
    left: 0;
    width: 100%;           /* stretch to full viewport width */
    margin: 0;             /* remove any auto-centering */
    padding: 0;
    border: none;          /* remove borders if you don’t want them */
    /* background-color: #1476ffaf; */
        /* dark gray, for example */
    box-sizing: border-box;
    border-radius: 23px;
    
    /* If you’d like it pinned to the top of the screen: */
    /* position: fixed;
       top: 0;
       z-index: 1000; */
  }

/* =============================================================================
   string-runner.css
   Core styles for a reusable, continuously repeating text-runner (ticker).
   ============================================================================= */

/* ─── Outer Container ───────────────────────────────────────────────────────── */

/* The outer container: hides overflow, holds the scrolling block */
.sr-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* By default, fill parent’s width */
    background-color: transparent;
}

/* ─── Inner Wrapper & Text ─────────────────────────────────────────────────── */

/* The wrapper that will be animated via CSS */
.sr-text-wrapper {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    /* background-color of wrapper */
    background-color: #0c68a900;

}

/* Each individual “block” of text to be repeated */
.sr-text {
    display: inline-block;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 1rem;
    color: #333;
    padding: 0.5em 1em;
    /* horizontal padding per block */
}

/* ─── Keyframes for Continuous Scroll ──────────────────────────────────────── */

/*
    This keyframe moves the entire wrapper exactly by one block’s width.
    We rely on a CSS variable (--sr-distance) set on the wrapper to know how far (in px) to shift.
  */
@keyframes sr-scroll-continuous {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--sr-distance)));
    }
}

/* Apply continuous-scroll animation; duration is inserted via JS inline */
.sr-animate-continuous {
    animation-name: sr-scroll-continuous;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-duration: <set by JS> */
}

/* ─── Paused State ──────────────────────────────────────────────────────────── */

/* When container has .sr-paused, pause the animation */
.sr-paused .sr-text-wrapper {
    animation-play-state: paused !important;
}