/* Megastore76 Reading Experience Kit — front-end styles.
 *
 * Written to sit inside a theme rather than on top of it: no font is set, no
 * colour is assumed, and the only sizes are relative ones. A theme that
 * already looks right should still look right with the reading kit switched
 * on, which is the hardest thing to get out of a plugin like this and the
 * only thing worth trying for.
 */

/* ---------------------------------------------------------------------------
   Reading progress bar
   --------------------------------------------------------------------------- */

.mrx-progress-bar {
	position: fixed;
	left: 0;
	width: 100%;
	height: var( --mrx-bar-height, 4px );
	background: transparent;
	z-index: 99999;
	pointer-events: none;
}

.mrx-progress-bar.mrx-position-top {
	top: 0;
}

.mrx-progress-bar.mrx-position-bottom {
	bottom: 0;
}

.mrx-progress-bar-fill {
	height: 100%;
	width: 0%;
	background-color: var( --mrx-bar-color, #2271b1 );
	transition: width 0.1s ease-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.mrx-progress-bar-fill {
		transition: none;
	}
}

/* Logged-in readers have the WordPress admin bar fixed across the top of the
   window. At `top: 0` the bar would be underneath it and never seen, which
   looks exactly like the plugin not working. */
body.admin-bar .mrx-progress-bar.mrx-position-top {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .mrx-progress-bar.mrx-position-top {
		top: 46px;
	}
}

/* ---------------------------------------------------------------------------
   Table of contents
   --------------------------------------------------------------------------- */

.mrx-toc {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 6px;
	background: rgba( 0, 0, 0, 0.02 );
}

.mrx-toc-summary {
	cursor: pointer;
	font-weight: 600;
	list-style: revert;
	outline-offset: 2px;
}

.mrx-toc-summary:focus-visible {
	outline: 2px solid currentColor;
}

/* Only present while the box is open — the browser hides everything but the
   summary on a closed <details>, so there is no display rule to keep in step
   with the `open` attribute. */
.mrx-toc-nav {
	margin-top: 0.75em;
}

.mrx-toc-list {
	margin: 0;
	padding-left: 1.25em;
	list-style: disc;
}

.mrx-toc-item {
	margin: 0.35em 0;
}

/* A step in from its parent, so a sub-heading reads as belonging to the
   heading above it rather than as another one of them. */
.mrx-toc-item--sub {
	margin-left: 1em;
	list-style: circle;
}

.mrx-toc-item a {
	text-decoration: none;
}

.mrx-toc-item a:hover,
.mrx-toc-item a:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Estimated reading time
   --------------------------------------------------------------------------- */

.mrx-read-time-badge {
	display: inline;
	font-size: 0.85em;
	font-weight: 400;
	white-space: nowrap;
	opacity: 0.72;
}

/* Beside a title. The badge is inside the heading element, so it inherits the
   heading's size and weight — both have to be taken back off it, or "6 min
   read" arrives as a second headline. */
.mrx-read-time-wrap {
	white-space: nowrap;
}

.mrx-read-time-wrap .mrx-read-time-badge {
	font-size: 0.55em;
	letter-spacing: 0.02em;
}

/* At the top of the article, inside a paragraph, where the surrounding text is
   already body-sized. */
.mrx-read-time-line {
	margin: 0 0 1.25em;
}

.mrx-read-time-line .mrx-read-time-badge {
	font-size: 0.9em;
}