/*
 * Slim black trending bar - rendered above the TagDiv Composer header by
 * template-parts/trending-bar.php via the td_wp_body_open hook.
 *
 * The headline crossfade (desktop/tablet) is a self-contained CSS
 * animation - the @keyframes themselves are generated per-request in
 * template-parts/trending-bar.php (percentages depend on how many posts
 * actually come back), this file only sets up the .ah-trending-post
 * element's own animation property and the stacking/positioning it
 * animates within. No JavaScript is involved and nothing here depends on
 * any third-party script's runtime behavior - see that template file's
 * docblock for why an earlier version (reusing TagDiv's own "Must Read"
 * ticker engine) was replaced.
 *
 * The original white "Must Read" block (td_block_trending_now) is hidden
 * here rather than removed from the page, since removing it would require
 * editing the Composer-saved homepage content (a database change).
 *
 * Phone (<768px): every headline shown at once in a horizontally
 * scrollable row, no animation, no social icons.
 *
 * Tablet/desktop (>=768px): one headline crossfading at a time, beside
 * the label on the left; TagDiv Composer's own social icons block pinned
 * right.
 *
 * Breakpoints (767 / 1018 / 1140) mirror TagDiv Composer's own responsive
 * tiers so this bar collapses in step with the header underneath it.
 */

/* Hide the original "Must Read" ticker section below the header - the whole
   row, not just the block, so its row/column wrapper padding doesn't leave
   an empty gap behind. Its class is unique on the homepage (verified
   against the live markup). */
.tdc-content-wrap .tdc-row:has(.td_block_trending_now) {
    display: none !important;
}

.ah-trending-bar {
    background-color: #111111;
    color: #ffffff;
    position: relative;
    z-index: 1000; /* stays above the Composer header's own z-index:999 zones */
}

.ah-trending-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 34px;
}

.ah-trending-bar-headline {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.ah-trending-bar-label {
    flex: 0 0 auto;
    background-color: #dd0000;
    color: #ffffff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-right: 14px;
    white-space: nowrap;
}

/* ---- Phone: every headline visible in a scroll row, no animation ---- */
@media (max-width: 767px) {
    .ah-trending-now-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ah-trending-now-wrapper::-webkit-scrollbar {
        display: none;
    }

    .ah-trending-post {
        animation: none !important; /* overrides the inline animation set for desktop/tablet */
        opacity: 1;
        position: static;
        flex: 0 0 auto;
    }

    .ah-trending-post-title,
    .ah-trending-post-title a {
        margin: 0;
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        text-decoration: none;
        white-space: nowrap;
    }

    .ah-trending-post-title a:hover,
    .ah-trending-post-title a:focus {
        color: #ff4d4d;
    }
}

/* Social icons (reused TagDiv Composer tdm_block_socials block): phone-hidden
   to keep the slim bar uncluttered at narrow widths. */
.ah-trending-bar-social {
    display: none;
}

/* ---- Tablet/desktop: one headline crossfading at a time, socials right ---- */
@media (min-width: 768px) {
    .ah-trending-bar-inner {
        justify-content: space-between;
    }

    /*
     * flex: 1 1 auto is load-bearing, not cosmetic: .ah-trending-post
     * (below) is position:absolute, which takes it out of normal flow -
     * an absolutely-positioned element contributes nothing to its
     * parent's own size. Without an explicit flex-grow here, this
     * wrapper - a flex item of .ah-trending-bar-headline with no other
     * in-flow content to size itself from - collapses to zero (or
     * near-zero) width. Its absolutely-positioned children then have
     * max-width:100% *of that zero*, which is very likely the real cause
     * of "nothing showing at all": not a CSS animation or specificity
     * problem this time, just a plain flex-sizing bug.
     */
    .ah-trending-now-wrapper {
        position: relative;
        overflow: hidden;
        height: 18px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ah-trending-post {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0; /* pre-animation-start state; the animation itself (set inline per-post
                       in template-parts/trending-bar.php) takes over immediately on load */
        max-width: 100%;
    }

    /*
     * Static fallback, independent of the animation: guarantees the first
     * headline is visible even if the CSS animation never runs for some
     * reason (a browser/environment quirk this can't be fully verified
     * against without a real browser to test in). "Animation declarations"
     * outrank plain declarations like this one in the CSS cascade, so
     * wherever the animation *does* run, its own keyframe values still
     * govern opacity throughout the cycle as intended - this rule only
     * matters as the fallback for whichever moments (or environments) the
     * animation doesn't apply at all.
     */
    .ah-trending-post:first-child {
        opacity: 1;
    }

    .ah-trending-post-title,
    .ah-trending-post-title a {
        margin: 0;
        font-size: 12px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ah-trending-bar-social {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin-left: 20px;
    }

    /* Reused Composer social markup (.tdm-social-wrapper / .tdm-social-item):
       this is the site's real [tdm_block_socials] block, extracted from the
       live header template as-is (see template-parts/trending-bar.php), so
       its own configured icon color (#ffffff) and hover color (#ffba12) are
       already correct here - only layout/spacing is adjusted below to fit
       the slim bar. No color rules are added or overridden. */
    .ah-trending-bar-social .tdm-social-wrapper {
        float: none;
        display: flex;
        align-items: center;
    }

    .ah-trending-bar-social .tdm-social-item-wrap {
        display: flex;
    }

    .ah-trending-bar-social .tdm-social-item {
        width: auto;
        height: auto;
        margin: 0 0 0 14px;
    }

    .ah-trending-bar-social .tdm-social-item-wrap:first-child .tdm-social-item {
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1018px) {
    .ah-trending-bar-inner {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .ah-trending-bar-inner {
        height: 30px;
        padding: 0 12px;
    }

    .ah-trending-bar-label {
        font-size: 10px;
        padding: 3px 8px;
        margin-right: 10px;
    }

    .ah-trending-post-title,
    .ah-trending-post-title a {
        font-size: 11px;
    }
}