/* GA star-rating pill — shared component (added 2026-10-18).

   One component for every score we display: BM campaign toplists (both the
   homepage tiles and the row variant), the mini-review rating tabs on operator
   reviews, and the operator-review accordion headers.

   WHY IT LIVES IN THE THEME
   The BM plugin has its own deploy cycle (note the .old-<stamp> sibling next to
   the plugin directory). Only its public/css/ files are edited on this server by
   convention, and a plugin deploy can overwrite them. Keeping the component here
   means a BM deploy cannot take the rating styling with it — the BM stylesheets
   only carry colour tokens.

   HOW THE FILL WORKS
   All five stars are always white with a 1px navy outline. They never change.
   What encodes the score is the navy bar sliding left-to-right behind them, so
   there are no half-star assets and no masks — any value to one decimal renders
   exactly. Derived from the Figma frames, which gave 1.5 -> 76px, 2.5 -> 94px,
   3.0 -> 102px, 4.0 -> 120px:

       fill = padding-left + score-width + gap + (rating / 5) * stars-width

   The leading constant covers the score text, which therefore always sits on
   navy and stays legible. 5.0 is special-cased to the full pill, rounded at both
   ends, because a bar stopping 15px short of its own container reads as a bug.

   Sizes are custom properties so the compact variant reuses one formula. */

.ga-rating {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

.ga-rating__pill {
	--ga-pad: 15px;
	--ga-score-w: 25px;
	--ga-gap: 9px;
	--ga-stars-w: 88px;
	/* leading segment = --ga-pad + --ga-score-w + --ga-gap, stated outright
	   because calc() cannot add here without tripping the minifier (see below) */
	--ga-lead: 49px;
	--ga-track: #e0e2ea;
	--ga-fill: #0d2c87;

	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 153px;
	height: 30px;
	padding: 0 var(--ga-pad);
	gap: var(--ga-gap);
	border-radius: 40px;
	background: var(--ga-track);
	/* contains the absolutely positioned fill without leaking z-index upward */
	isolation: isolate;
}

/* THE FILL, IN TWO SEGMENTS.

   The painted bar is split across ::before and ::after rather than being one
   box with a calc()'d width. That is deliberate, and it dodges two separate
   traps at once:

   1. WP Rocket's CSS minifier strips the whitespace around + and - when it
      mirrors this file into /cache/min/. In calc() those two operators are only
      valid WITH whitespace on both sides, so `calc(49px + ...)` arrived as
      `calc(49px+...)` — an invalid expression, so width fell back to auto and
      the fill collapsed to nothing. * and / carry no such requirement, so a
      calc() built only from those survives minification either way.

   2. Something earlier in the cascade forces border-box onto these
      pseudo-elements, so a padding-based version painted 70px instead of 119px
      and the bar stopped after the first star. Sizing by width alone is
      box-sizing agnostic and cannot be undone by another stylesheet's reset.

   ::before is the constant leading segment (padding + score + gap) and carries
   the left rounding. ::after begins where it ends and is the only part that
   varies, scaling linearly with the score across the star row:

       fill = --ga-lead + (rating / 5) * --ga-stars-w                        */
.ga-rating__pill::before,
.ga-rating__pill::after {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	background: var(--ga-fill);
}

.ga-rating__pill::before {
	left: 0;
	width: var(--ga-lead);
	border-radius: 40px 0 0 40px;
}

.ga-rating__pill::after {
	left: var(--ga-lead);
	width: calc((var(--ga-rating, 0) / 5) * var(--ga-stars-w));
}

/* A full score is one bar spanning the whole pill, rounded both ends; the
   variable segment is switched off so it cannot overhang the right edge. */
.ga-rating--full .ga-rating__pill::before {
	width: 100%;
	border-radius: 40px;
}

.ga-rating--full .ga-rating__pill::after {
	display: none;
}
/* score and stars paint above the fill */
.ga-rating__score,
.ga-rating__stars {
	position: relative;
	z-index: 1;
}

.ga-rating__score {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 27px;
	min-width: var(--ga-score-w);
	text-align: center;
	color: #fff;
}

.ga-rating__stars {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: var(--ga-stars-w);
	gap: 2px;
}

/* White star, navy outline. The viewBox is padded so the stroke is not clipped
   at the edges. Same star geometry already used elsewhere on the site. */
.ga-rating__star {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.7 -0.7 11.4 11.4'%3E%3Cpath d='M4.58575 0.264083C4.75045 -0.0880278 5.24955 -0.0880277 5.41425 0.264083L6.69693 3.00625L9.61101 3.45301C9.97921 3.50946 10.1296 3.9601 9.86944 4.22762L7.74569 6.41181L8.24214 9.46583C8.30364 9.84414 7.90342 10.1271 7.56911 9.94163L5 8.51656L2.43089 9.94163C2.09658 10.1271 1.69636 9.84414 1.75786 9.46583L2.25432 6.41181L0.130563 4.22762C-0.129551 3.9601 0.0207926 3.50946 0.388988 3.45301L3.30307 3.00625L4.58575 0.264083Z' fill='%23FFFFFF' stroke='%230D2C87' stroke-width='0.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- compact variant ----
   For the operator-review accordion headers, where the full 153px pill would
   force the header bar to be restructured. Same formula, smaller parts. */
.ga-rating--compact .ga-rating__pill {
	--ga-pad: 10px;
	--ga-score-w: 22px;
	--ga-gap: 6px;
	--ga-stars-w: 68px;
	--ga-lead: 38px;

	width: 116px;
	height: 24px;
}

.ga-rating--compact .ga-rating__score {
	font-size: 13px;
	line-height: 22px;
}

.ga-rating--compact .ga-rating__star {
	width: 12px;
	height: 12px;
}

/* ---- "best for" / tier label ----
   Sits above the pill. Libre Franklin has no italic face and no 800 weight on
   this site, so both are synthesised — which matches existing practice in the
   theme rather than introducing a new font file. */
.ga-rating__tier {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 800;
	line-height: 22px;
	letter-spacing: -0.01em;
	padding-bottom: 12px;
	text-align: center;
	color: #a3baff;
}

@media (max-width: 991px) {
	.ga-rating__tier {
		font-size: 11px;
	}
}