/*!
 * Saransh Dainik — Article Reader Experience
 * Reading progress bar, article tools, font-size controls. Brand-aware (#0494b1).
 */

/* thin fixed reading progress bar at the very top (does not cover navigation) */
.article-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 10000;
	pointer-events: none;
	background: transparent;
}
.article-progress-fill {
	height: 100%;
	width: 0;
	background-color: #0494b1;
	transition: width 0.12s linear;
}

/* article utility tools (reading time + font-size) */
.article-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 10px 0;
	padding: 8px 12px;
	background-color: rgba(0, 0, 0, .02);
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 8px;
}

.article-reading-time {
	font-size: 13px;
	color: #666666;
	margin-right: auto;
	padding: 4px 0;
}

.font-size-controls {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.font-size-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;   /* comfortable mobile touch target */
	min-height: 40px;
	padding: 4px 10px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 6px;
	background-color: #ffffff;
	color: #444444;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.font-size-btn:hover,
.font-size-btn:focus-visible {
	border-color: #0494b1;
	color: #0494b1;
	outline: none;
}
.font-size-btn:focus {
	outline: 2px solid rgba(0, 0, 0, .2);
	outline-offset: 2px;
}
.font-size-btn[disabled] {
	opacity: .4;
	cursor: default;
}

/* share extra buttons (copy link / native share) keep consistent look */
.share-extra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 20px;
	background-color: #ffffff;
	color: #444444;
	font-size: 13px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.share-extra-btn:hover,
.share-extra-btn:focus-visible {
	border-color: #0494b1;
	color: #0494b1;
	outline: none;
}

/* small screens: stack tools cleanly, keep controls usable */
@media (max-width: 767px) {
	.article-tools {
		gap: 6px;
		padding: 6px 8px;
	}
	.article-reading-time {
		width: 100%;
	}
	.font-size-btn {
		min-width: 40px;
		min-height: 40px;
	}
}