/**
 * Review Stars — shared star styles.
 *
 * This stylesheet is loaded on `enqueue_block_assets` so it is available
 * on both the front end and the block editor. It styles:
 *
 *  - The Review Stars block's own wrapper (`.benchtest-stars-block`),
 *    including size and alignment variants and the optional numeric
 *    score (`.benchtest-stars__numeric`).
 *  - The bare star markup (`.benchtest-stars` / `.benchtest-star`) that
 *    NewsGrid Core's hero grid and filterable grid emit directly on
 *    their cards. Those cards do not wrap the stars in the block
 *    wrapper, so the bare star rules must stand on their own.
 *
 * All selectors are scoped to `.benchtest-stars` or `.benchtest-stars-`
 * prefixed ancestors so these rules do not fight the theme, other
 * plugins, or an Elementor canvas. No element selectors are used
 * outside a scoped ancestor.
 *
 * Tokens fall back to inline hex values so the styles still apply when
 * the theme's :root custom properties are not present (for example, in
 * an Elementor-only build).
 *
 * No animations or transitions are declared here; star state is
 * presentational and static.
 *
 * @package Review_Stars
 */

.benchtest-stars,
.benchtest-stars-block {
	--benchtest-star-filled: #d32f2f;
	--benchtest-star-empty: #cccccc;
	--benchtest-star-gap: 1px;
	--benchtest-star-size: 0.875rem;
	--benchtest-stars-numeric-color: #777777;
	box-sizing: border-box;
}

.benchtest-stars *,
.benchtest-stars *::before,
.benchtest-stars *::after,
.benchtest-stars-block *,
.benchtest-stars-block *::before,
.benchtest-stars-block *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
 * Bare star markup — used by the block AND by NewsGrid Core cards.
 * -------------------------------------------------------------------------- */

.benchtest-stars {
	display: inline-flex;
	align-items: center;
	gap: var(--benchtest-star-gap);
	font-size: var(--benchtest-star-size);
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}

.benchtest-star {
	display: inline-block;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

.benchtest-star--filled {
	color: var(--benchtest-star-filled);
}

.benchtest-star--empty {
	color: var(--benchtest-star-empty);
}

/* --------------------------------------------------------------------------
 * Block wrapper — size variants
 *
 * The wrapper drives the base star size via the shared `--benchtest-star-size`
 * token, so changing `size` in the block inspector cascades to the
 * bare `.benchtest-stars` markup inside without touching individual
 * star rules.
 * -------------------------------------------------------------------------- */

.benchtest-stars-block {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.benchtest-stars-block--size-small {
	--benchtest-star-size: 0.75rem;
	font-size: 0.75rem;
}

.benchtest-stars-block--size-medium {
	--benchtest-star-size: 0.875rem;
	font-size: 0.875rem;
}

.benchtest-stars-block--size-large {
	--benchtest-star-size: 1.25rem;
	font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
 * Block wrapper — alignment variants
 *
 * The block's `align` attribute maps to a flex `justify-content` on the
 * wrapper. Alignment is applied on the wrapper, not on the inner star
 * span, so the optional numeric score follows the stars as a unit.
 * -------------------------------------------------------------------------- */

.benchtest-stars-block--align-left {
	justify-content: flex-start;
}

.benchtest-stars-block--align-center {
	justify-content: center;
	width: 100%;
}

.benchtest-stars-block--align-right {
	justify-content: flex-end;
	width: 100%;
}

/* --------------------------------------------------------------------------
 * Numeric score — optional trailing text
 *
 * Rendered as `<span aria-hidden="true">` beside the star span; the
 * accessible label already carries the full rating string, so the
 * numeric text is intentionally hidden from assistive tech to avoid
 * duplicate announcements.
 * -------------------------------------------------------------------------- */

.benchtest-stars__numeric {
	display: inline-block;
	color: var(--benchtest-stars-numeric-color);
	font-weight: 600;
	font-size: 0.85em;
	line-height: 1;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Responsive
 *
 * On very narrow viewports the large variant is scaled down so a
 * large block does not wrap the numeric text to a new line inside a
 * tight card or column.
 * -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.benchtest-stars-block--size-large {
		--benchtest-star-size: 1.0625rem;
		font-size: 1.0625rem;
	}
}