/*--------------------------------------------------------------
# Reading Progress Bar
--------------------------------------------------------------*/
.bpmb-reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--bpmb-progress-track);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bpmb-reading-progress-container.is-visible {
    opacity: 1;
}

.bpmb-reading-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--bpmb-primary, #2468c6) 0%, #4a8fe8 50%, var(--bpmb-primary, #2468c6) 100%);
    background-size: 200% 100%;
    border-radius: 0 2px 2px 0;
    transition: width 0.1s ease-out;
    position: relative;
}

/* Shimmer effect */
.bpmb-reading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    animation: bpmb-shimmer 2s infinite;
}

@keyframes bpmb-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Pulse glow when reading */
.bpmb-reading-progress-bar::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #4a8fe8;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px #4a8fe8;
    transition: opacity 0.3s ease;
}

.bpmb-reading-progress-container.is-reading .bpmb-reading-progress-bar::before {
    opacity: 1;
    animation: bpmb-pulse 1.5s ease-in-out infinite;
}

@keyframes bpmb-pulse {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 8px #4a8fe8;
    }

    50% {
        transform: translateY(-50%) scale(1.3);
        box-shadow: 0 0 16px #4a8fe8;
    }
}

/* Complete state */
.bpmb-reading-progress-container.is-complete .bpmb-reading-progress-bar {
    background: linear-gradient(90deg, var(--bpmb-success, #28a745) 0%, #34ce57 100%);
}

.bpmb-reading-progress-container.is-complete .bpmb-reading-progress-bar::before {
    background: #34ce57;
    box-shadow: 0 0 8px #34ce57;
    opacity: 0;
}

/* Admin bar offset */
.admin-bar .bpmb-reading-progress-container {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .bpmb-reading-progress-container {
        top: 46px;
    }
}

/*--------------------------------------------------------------
# Reading Info Bar
--------------------------------------------------------------*/
.bpmb-reading-info {
    margin-top: var(--bpmb-space-2xl, 32px);
    padding: var(--bpmb-space-sm, 12px) 0;
    border-top: 1px solid var(--bpmb-border-color, #e0e0e0);
}

.bpmb-reading-info-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--bpmb-space-md, 16px);
}

.bpmb-info-item {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-xs, 6px);
    font-size: var(--bpmb-font-size-md, 14px);
    color: var(--bpmb-text-secondary, #666);
    opacity: 0;
    transform: translateY(10px);
    animation: bpmb-fade-in-up 0.5s ease forwards;
}

.bpmb-info-item:nth-child(1) {
    animation-delay: 0.1s;
}

.bpmb-info-item:nth-child(3) {
    animation-delay: 0.2s;
}

.bpmb-info-item:nth-child(5) {
    animation-delay: 0.3s;
}

@keyframes bpmb-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bpmb-info-item svg {
    width: 16px;
    height: 16px;
    color: var(--bpmb-primary, #2468c6);
    flex-shrink: 0;
}

.bpmb-info-value {
    font-weight: 600;
    color: var(--bpmb-text-primary, #333);
}

.bpmb-info-separator {
    width: 4px;
    height: 4px;
    background: var(--bpmb-border-color-dark, #ccc);
    border-radius: 50%;
    opacity: 0;
    animation: bpmb-fade-in 0.3s ease forwards;
    animation-delay: 0.15s;
}

.bpmb-info-separator:nth-child(4) {
    animation-delay: 0.25s;
}

@keyframes bpmb-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*--------------------------------------------------------------
# Dark Mode
--------------------------------------------------------------*/
.dark-mode .bpmb-reading-progress-container,
.dark-scheme .bpmb-reading-progress-container {
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .bpmb-reading-info,
.dark-scheme .bpmb-reading-info {
    border-color: var(--bpmb-border-color, #444);
}

.dark-mode .bpmb-info-item,
.dark-scheme .bpmb-info-item {
    color: var(--bpmb-text-secondary, #aaa);
}

.dark-mode .bpmb-info-value,
.dark-scheme .bpmb-info-value {
    color: var(--bpmb-text-primary, #e0e0e0);
}

.dark-mode .bpmb-info-item svg,
.dark-scheme .bpmb-info-item svg {
    color: #4a8fe8;
}

.dark-mode .bpmb-info-separator,
.dark-scheme .bpmb-info-separator {
    background: var(--bpmb-border-color-dark, #555);
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
    .bpmb-reading-info-inner {
        gap: 8px;
    }

    .bpmb-info-item {
        font-size: var(--bpmb-font-size-xs, 12px);
    }

    .bpmb-info-item svg {
        width: 14px;
        height: 14px;
    }
}
/* ==========================================================================
   Images inside a post

   The editor's image tool offers the member Stretch / Border / Background. The HTML converter
   used to read only the URL and the caption, so every one of those was silently discarded on
   save — a member toggled Stretch, pressed Publish, and their choice evaporated. The converter
   now carries them through as classes; these are the rules that make them mean something.
   ========================================================================== */

.bpmb-image-block {
	margin: var(--bpmb-space-lg) 0;
}

.bpmb-image-block img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bpmb-radius-md);
}

.bpmb-image-block figcaption {
	margin-block-start: var(--bpmb-space-sm);
	color: var(--bpmb-text-secondary);
	font-size: var(--bpmb-font-size-sm);
	text-align: center;
}

/* Stretch: break out of the content column, up to the viewport. Capped at 100vw and centred with
   a negative inline margin so it does not create a horizontal scrollbar — which is what a naive
   `width: 100vw` does on every page that has one. */
.bpmb-image-block.is-stretched img {
	max-width: 100vw;
	width: 100vw;
	margin-inline-start: 50%;
	transform: translateX(-50%);
	border-radius: 0;
}

.bpmb-image-block.has-border img {
	border: 1px solid var(--bpmb-border-color);
}

.bpmb-image-block.has-background {
	padding: var(--bpmb-space-lg);
	background: var(--bpmb-bg-secondary);
	border-radius: var(--bpmb-radius-lg);
}

.bpmb-image-block.has-background img {
	max-width: 60%;
	margin-inline: auto;
}

@media screen and (max-width: 640px) {
	/* A stretched image on a phone is already full-bleed; the negative margin would only push it
	   off-screen. And a backgrounded image at 60% is a thumbnail nobody can see. */
	.bpmb-image-block.is-stretched img {
		width: 100%;
		margin-inline-start: 0;
		transform: none;
	}

	.bpmb-image-block.has-background {
		padding: var(--bpmb-space-md);
	}

	.bpmb-image-block.has-background img {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * The engagement bar under the article: clap, and save-for-later.
 *
 * The BUTTONS are already styled in bpmb-ui.css (.bpmb-clap-btn/.bpmb-bookmark-btn),
 * where they `all: unset` and rebuild themselves, so no theme's button reset can
 * reach them. This is only the bar that holds them.
 *
 * EVERY value bottoms out in a literal, exactly like the rest of the design system:
 * `var(--bpmb-border-color, #e2e8f0)`. The plugin must look right on a theme that
 * defines nothing at all -- so the token is an OPPORTUNITY for the theme to restyle
 * us, never a REQUIREMENT that it must. Logical properties throughout, so it mirrors
 * itself in RTL with no second rule.
 * ------------------------------------------------------------------------- */
.bpmb-single-engagement {
	display: flex;
	align-items: center;
	gap: var( --bpmb-space-md, 1rem );
	flex-wrap: wrap;
	margin-block: var( --bpmb-space-xl, 1.5rem ) 0;
	padding-block: var( --bpmb-space-md, 1rem );
	border-block-start: 1px solid var( --bpmb-border-color, #e2e8f0 );
}

/* A guest, and the post's own author, see the clap COUNT with no button beside it.
 * Left bare in the flex row it reads as a stray number, so give it a button's
 * vertical rhythm. */
.bpmb-single-engagement .bpmb-claps--readonly {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	font-size: var( --bpmb-font-size-md, 0.9375rem );
	color: var( --bpmb-text-secondary, #6b7280 );
}

@media ( max-width: 480px ) {
	.bpmb-single-engagement {
		gap: var( --bpmb-space-sm, 0.75rem );
	}
}