/**
 * SFP Page Config - Reading Time Meter + Scroll Progress Bar
 * Extracted from includes/reading-time.php (v2.5.0)
 *
 * Dynamic values injected via wp_add_inline_style():
 *   --sfp-bar-color  = the button colour of the site, from Astra.
 * --sfp-rt-accent is no longer set by the plugin (colour fields were removed
 * in 3.0.0); the meter falls back to the theme's --brand-accent.
 * Brand variables (--brand-font, --brand-main, --brand-accent) are
 * defined sitewide by the theme and used here for the read meter.
 */

/* === Reading time meter ([mijn_leestijd] shortcode) === */

.custom-read-meter {
    font-family: var(--brand-font);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 14px;
    color: var(--brand-main);
    text-align: center;
}

.custom-read-meter .tijd-getal {
    color: var(--sfp-rt-accent, var(--brand-accent));
}

/* === Scroll progress bar === */
#sfp-scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 9995;
    pointer-events: none;
}

#sfp-scroll-bar {
    height: 100%;
    width: 0;
    background: var(--sfp-bar-color, currentColor);
    transition: width 0.08s linear;
}

/* Keep progress bar below the WP admin bar on desktop. */
body.admin-bar #sfp-scroll-container {
    top: 32px;
}

@media (max-width: 782px) {
    /* Admin bar is not fixed on mobile, so reset to top: 0. */
    body.admin-bar #sfp-scroll-container {
        top: 0;
    }
}