/* ==========================================================================
   Post view counter — child theme styles.
   Follows the Blocksy entry-meta design (inherits size/colour/separators)
   and adapts the Benqu reference (eye icon + compact count + "Views").
   Loaded after dark-mode.css so it inherits the correct tokens in both modes.
   ========================================================================== */

/* The item injected into Blocksy meta <ul> lists. */
.np-post-views-item {
	display: inline-flex;
	align-items: center;
}

.np-post-views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	font-size: inherit;
	line-height: 1;
}

/* Muted icon so the number reads as the primary information. */
.np-post-views__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: inherit;
	opacity: 0.72;
}

.np-post-views__svg {
	display: block;
	flex: none;
	width: 15px;
	height: 15px;

	/* Optical alignment: the eye glyph sits ~2px higher than the digit
	   visual centre, so nudge it down to centre with the count. */
	transform: translateY(2px);
}

.np-post-views__count {
	font-variant-numeric: tabular-nums;
}

/* Compact on cards; the "Views" label is kept on single posts only. */
.entry-card .np-post-views__label,
.ct-related-posts .np-post-views__label {
	display: none;
}

/* Single post: keep the label for clarity. */
.hero-section .np-post-views__label,
.entry-header .np-post-views__label,
.entry-content .np-post-views__label {
	display: inline;
}

/* Small screens: reduce the gap and icon slightly. */
@media (max-width: 690px) {
	.np-post-views {
		gap: 4px;
	}

	.np-post-views__icon,
	.np-post-views__svg {
		width: 14px;
		height: 14px;
	}
}

/* Dark mode: the icon inherits the meta text colour, which Blocksy already
   swaps through the palette tokens — no extra rules required here. */