/* ---------------------------------------------------------------- */
/* HEADLINE TICKER (ticker.css)                                      */
/* The scrolling strip of newest headlines on the right side of the  */
/* header (markup in template-parts/header/ticker.php). The track    */
/* holds the headline list twice; the animation slides it left by    */
/* one copy's width, then restarts, so the loop looks endless.       */
/* assets/js/ticker.js sets the speed. The LIVE and Breaking News    */
/* tags inside it are styled in tags.css.                            */
/* ---------------------------------------------------------------- */

/* The whole ticker: a dark rounded strip with the "LATEST" tag on its left end */
.rsn-ticker {
    display: flex; /* Lay the "LATEST" tag and the scrolling window side by side */
    align-items: stretch; /* Make the tag and the window the same full height */
    flex: 1 1 0; /* Take up all the header space left over to the right of the logo */
    min-width: 0; /* Lets the ticker shrink below its content's width; without this the long headline row would push the header wider than the screen */
    max-width: 680px; /* On wide screens, stop the strip short of the full width so it doesn't crowd the logo */
    margin-left: auto; /* Push the ticker to the header's right edge */
    height: 36px; /* A slim strip, a little shorter than the 44px logo beside it */
    background-color: var(--rsn-depth); /* Depth — the same card surface as the banner and menu bar */
    border-radius: 6px; /* Same rounded corners as the banner and menu bar */
    overflow: hidden; /* Clip the tag's square corners to the strip's rounded ones */
}

/* The fixed "LATEST" tag on the left end of the strip */
.rsn-ticker-label {
    display: flex; /* Flexbox makes it easy to center the word vertically */
    align-items: center; /* Center the word vertically inside the full-height tag */
    flex: none; /* Never shrink or grow; the tag stays exactly as wide as its word */
    padding: 0 12px; /* Room on either side of the word */
    font-family: var(--rsn-font-dm-mono); /* Data role: DM Mono, the spec lists "tickers" as a Data use case */
    font-weight: var(--rsn-type-data-weight); /* 500 weight, per the Data row of the type spec */
    font-size: var(--rsn-type-data-size); /* 12px, the middle of the Data role's 11–14px range */
    text-transform: uppercase; /* All caps reads as a label */
    letter-spacing: 0.08em; /* Slight letter spacing keeps small uppercase text legible */
    color: var(--rsn-deep); /* Deep text on Signal, the same pairing as the category tags */
    background-color: var(--rsn-signal); /* Signal — brand accent marks the start of the strip */
}

/* The visible scrolling area to the right of the tag */
.rsn-ticker-window {
    flex: 1 1 auto; /* Fill the rest of the strip */
    min-width: 0; /* Allow it to be narrower than the headline row inside it */
    overflow: hidden; /* Hide the headlines that have scrolled outside the strip */
    display: flex; /* Lets the track inside center vertically */
    align-items: center; /* Center the headline row vertically in the strip */
    /* Fade the headlines out at both ends instead of cutting them off with a hard edge. The mask is */
    /* see-through (transparent) at the very edges and fully visible (black) from 20px in. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); /* Older Safari/Chrome name for the same property */
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

/* The moving row holding both copies of the headline list */
.rsn-ticker-track {
    display: flex; /* Put the two copies side by side in one long row */
    width: max-content; /* Make the row exactly as wide as its contents, so -50% below equals one copy's width */
    /* --rsn-ticker-duration is set by assets/js/ticker.js so the scroll speed stays the same */
    /* no matter how long the headlines are; 40s is the fallback if JavaScript doesn't run */
    animation: rsn-ticker-scroll var(--rsn-ticker-duration, 40s) linear infinite; /* linear = steady speed, infinite = loop forever */
}

/* Pause the scrolling while the mouse is over the ticker or a headline link has keyboard focus, */
/* so visitors can actually read and click a headline */
.rsn-ticker:hover .rsn-ticker-track,
.rsn-ticker:focus-within .rsn-ticker-track {
    animation-play-state: paused; /* Freeze the animation exactly where it is */
}

/* The scroll animation: slide the row left by half its width, i.e. exactly one copy of the list */
@keyframes rsn-ticker-scroll {
    from {
        transform: translateX(0); /* Start with the first copy's first headline at the left edge */
    }
    to {
        transform: translateX(-50%); /* End with the second copy's first headline at the left edge, which looks identical to the start */
    }
}

/* Each copy of the headline list */
.rsn-ticker-list {
    display: flex; /* Headlines in one horizontal row */
    list-style: none; /* Remove the default bullet points */
}

/* One headline in the strip */
.rsn-ticker-item {
    display: flex; /* Line up the separator dot, any Breaking News tag and the headline */
    align-items: center; /* Center them vertically on one line */
    white-space: nowrap; /* Keep every headline on a single line */
    padding-left: 20px; /* Space before each item's separator dot */
}

/* A small Signal dot before every headline, separating it from the one before. Every item gets one */
/* (including the first), so both copies of the list are identical and the loop point is invisible. */
.rsn-ticker-item::before {
    content: '\2022'; /* Unicode bullet (•) */
    color: var(--rsn-signal); /* Signal — brand accent */
    margin-right: 20px; /* Space between the dot and the headline */
}

/* The headline links */
.rsn-ticker-item a {
    color: var(--rsn-ice); /* Ice — primary text color on the dark strip */
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, readable at small sizes */
    font-size: 14px; /* Bottom of the Body role's 14–16px range, compact enough for a slim strip */
    text-decoration: none; /* Remove the default underline */
    transition: color 0.2s ease; /* Smoothly animate the hover color change below */
}

/* Headline hover/focus state, matching the other links in the theme */
.rsn-ticker-item a:hover,
.rsn-ticker-item a:focus {
    color: var(--rsn-signal); /* Signal — the theme's link hover/active color */
    text-decoration: underline; /* Underline confirms it's clickable */
}

/* A smaller version of the red Breaking News tag, sized to fit inside the slim strip */
.rsn-ticker .rsn-breaking-badge {
    font-size: var(--rsn-type-label-size); /* 10px instead of 12px, so the tag fits the 36px-tall strip */
    padding: 2px 6px; /* Tighter padding than the full-size tag */
    margin: 0 8px 0 0; /* No space below (it sits beside the headline, not above it); a little space to its right */
}

/* Visitors who have asked their device for less motion get a still ticker instead of a scrolling one */
@media (prefers-reduced-motion: reduce) {
    .rsn-ticker-track {
        animation: none; /* Turn the scrolling off completely */
    }
    .rsn-ticker-window {
        overflow-x: auto; /* Let them scroll the headlines sideways themselves instead */
    }
    .rsn-ticker-list[aria-hidden="true"] {
        display: none; /* Hide the duplicate copy, which is only needed for the endless-loop effect */
    }
}

/* Phones and small tablets: the header stacks vertically, so the ticker gets its own full-width row */
@media (max-width: 768px) {
    .rsn-ticker {
        flex: none; /* Stop sharing a row; take the size set below */
        width: 100%; /* Span the full header width under the logo */
        max-width: none; /* Drop the desktop width cap */
        margin-left: 0; /* No need to push it right when it has its own row */
    }
}



/* Ticker items with no link are plain text; give them the same look as the linked headlines */
.rsn-ticker-text {
    color: var(--rsn-ice); /* Ice — primary text color on the dark strip */
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, matching the linked headlines */
    font-size: 14px; /* Same size as the linked headlines */
}