/* SEO Text Highlighter Effect - Scroll-triggered highlighting */
/* Only apply to innermost strong/b elements (not containers of other strong/b) */
#news-content b:not(:has(b)):not(:has(strong)),
#news-content strong:not(:has(b)):not(:has(strong)) {
    position: relative;
    z-index: 1;
    display: inline;
    /* Primary color with very light transparency for subtle marker effect */
    background-image: linear-gradient(to right,
    color-mix(in srgb, var(--site-primary, #dc3545) 18%, transparent) 0%,
    color-mix(in srgb, var(--site-primary, #dc3545) 18%, transparent) 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 0 1px;
    /* Smooth animation for humanized effect */
    transition: background-size 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Fallback for browsers that don't support :has() - apply to all but let JS handle filtering */
@supports not (selector(:has(*))) {

    #news-content b,
    #news-content strong {
        position: relative;
        z-index: 1;
        display: inline;
        background-image: linear-gradient(to right, rgba(220, 53, 69, 0.18) 0%, rgba(220, 53, 69, 0.18) 100%);
        background-size: 0% 100%;
        background-repeat: no-repeat;
        background-position: left center;
        border-radius: 3px;
        padding: 2px 4px;
        margin: 0 1px;
        transition: background-size 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    /* Hide background on nested elements - only innermost shows */
    #news-content b b,
    #news-content b strong,
    #news-content strong b,
    #news-content strong strong {
        background-image: none !important;
    }
}

/* Dark Mode Adjustment */
.dark #news-content b:not(:has(b)):not(:has(strong)),
.dark #news-content strong:not(:has(b)):not(:has(strong)) {
    background-image: linear-gradient(to right,
    color-mix(in srgb, var(--site-primary, #dc3545) 14%, transparent) 0%,
    color-mix(in srgb, var(--site-primary, #dc3545) 14%, transparent) 100%);
}

/* Active state - full highlight shown */
#news-content b.seo-highlight-active,
#news-content strong.seo-highlight-active {
    background-size: 100% 100% !important;
}