/* Custom News Ticker CSS for GridMode Child Theme */

/*
 * Ensure the main container for the ticker items has proper overflow and whitespace handling.
 * This is the parent of the individual news items.
 */
.gridmode-trending-news-items {
    white-space: nowrap; /* Keeps all text on a single line */
    overflow: hidden;    /* Hides content that overflows the container */
    display: inline-block; /* Helps in measuring scrollWidth correctly for the content */
    /* Add any other styling for layout if necessary, like padding or margin */
}

/*
 * The element that will be animated (the one we added 'js-custom-scroller' to).
 * This class should be applied to the direct container of your news items.
 */
.js-custom-scroller {
    display: inline-block; /* Essential for horizontal scrolling of its children */
    animation-name: customScrollLeft;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 60s; /* Adjust this value (e.g., 60s) to control the speed.
                                The longer the duration, the slower the scroll.
                                You might need to experiment with this based on your content length. */
}

/*
 * Keyframe animation for continuous horizontal scrolling.
 * This starts the content off-screen to the right, and moves it fully off-screen to the left.
 * For a truly seamless loop, the content width should be effectively doubled.
 * The `gridmode-trending-news-items` should ideally contain enough items to fill more than
 * twice the visible width for the `translateX(100%)` and `translateX(-100%)` to work
 * seamlessly in a loop. If your content is very short, you might need to manually
 * duplicate items in your PHP output (but only if needed for *visual* looping,
 * not because the plugin is duplicating it).
 */
@keyframes customScrollLeft {
    0% {
        transform: translateX(100%); /* Start completely off-screen to the right */
    }
    100% {
        transform: translateX(-100%); /* Move completely off-screen to the left */
    }
}

/* Optional: Pause animation on hover */
/* Apply this to the outer wrapper of your news ticker, if you have one.
   For example, if '.gridmode-trending-news' is the outer container. */
.gridmode-trending-news:hover .js-custom-scroller {
    animation-play-state: paused;
}

/* Adjustments for individual news items within the ticker if needed */
.gridmode-trending-news-items .single-news-item { /* Replace with your actual item selector */
    display: inline-block;
    margin-right: 20px; /* Adjust gap between items as desired */
}

.gridmode-trending-news-items {
    white-space: nowrap;
    overflow: hidden;
    display: block;           /* Better than inline-block for full width */
    width: 100%;              /* Ensure it occupies full horizontal space */
    position: relative;       /* For safety */
}

.js-custom-scroller {
    display: inline-block;
    min-width: 200%;          /* This makes sure it scrolls */
    animation-name: customScrollLeft;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 200s;
}