/* ================================================================= */
/* TAGS AND STATUS BADGES (tags.css)                                 */
/* The small colored labels used across the site. Each tag has one   */
/* base rule here; a component that needs a resized version (e.g.    */
/* the ticker or the slider) adjusts it in its own file.             */
/* ================================================================= */

/* ---------------------------------------------------------------- */
/* BREAKING NEWS TAG                                                 */
/* Printed by rsn_breaking_news_badge() in inc/breaking-news.php,    */
/* and only for the first 3 hours after a post marked "Breaking      */
/* News" is published. Appears on homepage slides, article cards,    */
/* the post listing fallback, the header ticker, and above the       */
/* headline on a single post.                                        */
/* ---------------------------------------------------------------- */

/* The red tag itself, styled to match the blue category tag on the slider so the two look like a set */
.rsn-breaking-badge {
    display: inline-block; /* Lets the tag take padding/background while staying only as wide as its text */
    align-self: flex-start; /* Inside the flex-column cards, stop the tag stretching across the whole card width */
    font-family: var(--rsn-font-dm-mono); /* Data role: DM Mono — the spec lists "tags" 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 an urgent label rather than a sentence */
    letter-spacing: 0.08em; /* Slight letter spacing keeps small uppercase text legible */
    color: var(--rsn-deep); /* Deep text on Alert passes the 4.5:1 contrast minimum for small text; white on Alert does not */
    background-color: var(--rsn-alert); /* Alert — the palette reserves this red for breaking news tags specifically */
    padding: 3px 8px; /* A little room around the text inside the tag, same as the category tag */
    border-radius: 3px; /* Same small rounded corners as the category tag */
    margin-bottom: 10px; /* Space between the tag and the headline below it */
}

/* ---------------------------------------------------------------- */
/* LIVE TAG (header ticker)                                          */
/* Shown on Ticker Items that have "Show the green LIVE tag" ticked   */
/* in wp-admin (see rsn_get_ticker_entries() in inc/ticker-items.php). */
/* ---------------------------------------------------------------- */

/* The green tag itself, built like the Breaking News tag so the two read as a matching set */
.rsn-live-badge {
    display: inline-flex; /* Lines up the pulsing dot and the word side by side */
    align-items: center; /* Center the dot vertically against the word */
    gap: 5px; /* Space between the dot and the word */
    font-family: var(--rsn-font-dm-mono); /* Data role: DM Mono, the spec lists "tags" and "tickers" as Data use cases */
    font-weight: var(--rsn-type-data-weight); /* 500 weight, per the Data row of the type spec */
    font-size: var(--rsn-type-label-size); /* 10px, the same small size as the Breaking News tag in the ticker */
    text-transform: uppercase; /* All caps reads as a status label */
    letter-spacing: 0.08em; /* Slight letter spacing keeps small uppercase text legible */
    color: var(--rsn-deep); /* Deep text on the bright green is easy to read (white on this green would not be) */
    background-color: var(--rsn-live); /* Live — the palette reserves this green for live indicators only */
    padding: 2px 6px; /* Same padding as the Breaking News tag in the ticker */
    border-radius: 3px; /* Same small rounded corners as the other tags */
    margin-right: 8px; /* Space between the tag and the ticker text */
}

/* The small dot before the word LIVE, the classic "on air" indicator */
.rsn-live-badge::before {
    content: ''; /* An empty box; the size and color below turn it into a dot */
    width: 6px; /* Dot width */
    height: 6px; /* Dot height (same as width, so it's a circle) */
    border-radius: 50%; /* Fully rounded corners make the square a circle */
    background-color: var(--rsn-deep); /* Deep dot on the green tag, matching the text color */
    animation: rsn-live-pulse 1.4s ease-in-out infinite; /* Gently blink forever, signalling "happening now" */
}

/* The dot's blink: fade out to 25% and back to full */
@keyframes rsn-live-pulse {
    0%, 100% {
        opacity: 1; /* Fully visible at the start and end of each blink */
    }
    50% {
        opacity: 0.25; /* Faded at the midpoint */
    }
}

/* Visitors who have asked their device for less motion get a steady dot instead of a blinking one */
@media (prefers-reduced-motion: reduce) {
    .rsn-live-badge::before {
        animation: none; /* Turn the blink off */
    }
}

/* ---------------------------------------------------------------- */
/* GENERAL-PURPOSE ALERT BADGE AND LIVE DOT                         */
/* ---------------------------------------------------------------- */

/* Badge for breaking news / urgent tags, using the Alert semantic color. */
/* Not yet used in markup — add class="rsn-badge-alert" to an element when needed. */
.rsn-badge-alert {
    background-color: var(--rsn-alert); /* Alert — reserved strictly for breaking/urgent tags, used sparingly */
    color: var(--rsn-ice); /* Ice text stays readable against the Alert red background */
    font-size: 0.75rem; /* Small badge-style text */
    font-weight: bold; /* Bold so the tag reads as urgent/important */
    padding: 3px 8px; /* Compact padding so it reads as a small tag, not a block */
    border-radius: 4px; /* Slightly rounded corners to match the card style */
    text-transform: uppercase; /* Uppercase reinforces the "alert" urgency */
    letter-spacing: 0.5px; /* Small letter spacing for readability at uppercase/small size */
}

/* Small dot indicator for "live" games/scores, using the Live semantic color. */
/* Not yet used in markup — add class="rsn-live-dot" to an inline element (e.g. a <span>) when needed. */
.rsn-live-dot {
    display: inline-block; /* Allows width/height to apply to what is otherwise an inline element */
    width: 8px; /* Small dot width */
    height: 8px; /* Small dot height, matching width for a circle */
    border-radius: 50%; /* Rounds the square box into a circle */
    background-color: var(--rsn-live); /* Live — reserved strictly for live game/score indicators, never decorative */
}