/* ─── Rating (static stars) ───────────────────────────────────────────
   Read-only star row for trust / review contexts.

   STAR FILL — --rating-star-color (PF-031). Defaults to --color-warning, the
   engine's amber, so this is byte-identical to the previous hardcoded value.
   The token exists so a site can darken its stars WITHOUT moving --color-warning
   and every warning surface with it.

   ⛔ Constraint, measured, and it is the reason the token exists. Stars are
   non-text content, so WCAG 1.4.11 wants 3:1 against their background. The
   default amber #D97706 against the three light section surfaces the engine
   ships:

       --bg-page   #FFFFFF                white   3.19:1   passes, narrowly
       --bg-alt    #F9FAFB                pale    3.05:1   passes, barely
       --brand-pale (10% brand + white)   tint     2.68:1   FAILS

   So: STAR RATINGS MUST NOT SIT ON .hzo-section--tint. The tint figure was
   computed for one client's brand (#004A3C -> --brand-pale ~#E6EDEC), but
   --brand-pale is a fixed 10% mix, so ANY brand dark enough to be usable as a
   brand colour lands in the same range. The amber has ~0.19 of headroom on
   white and a 10% tint consumes all of it.

   A site that needs stars on tint must set --rating-star-color to something
   darker and re-measure; the default is not safe there and no amount of
   token indirection changes that.

   Empty stars use --border. Author renders N filled + (5−N) empty star SVGs,
   optional count after. For AT, put role="img" + aria-label="Rated 4.8 out of
   5" on the .hzo-rating container and aria-hidden on the SVGs.
   Or generate all of it: [hzo_rating value="4" count="4.0 (128 reviews)"]
   (rating.php) emits this exact contract. */
.hzo-rating { display: inline-flex; align-items: center; gap: 2px; }
.hzo-rating svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Whole-star classes — still emitted by testimonial.php's helper and by
   hand-authored markup (the [hzo_rating] shortcode now uses the fractional
   layers below). */
.hzo-rating__star { color: var(--rating-star-color, var(--color-warning)); }
.hzo-rating__star--empty { color: var(--border); }
.hzo-rating__count { margin-left: var(--space-sm); font-size: var(--fs-100); color: var(--text-muted); }

/* G42 — fractional star row (used by [hzo_rating]): a gray base row + an amber
   fill clipped to value/5, so 4.6 renders as 4.6 stars. Same two-layer clip the
   reviews widget uses; --hzo-stars-pct is set inline on the .hzo-rating root. */
.hzo-rating__stars { position: relative; display: inline-flex; line-height: 0; flex-shrink: 0; }
.hzo-rating__stars-base,
.hzo-rating__stars-fill { display: inline-flex; gap: 2px; }
.hzo-rating__stars-base { color: var(--border); }
.hzo-rating__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--hzo-stars-pct, 0%);
    overflow: hidden;
    white-space: nowrap;
    color: var(--rating-star-color, var(--color-warning));
}
/* Windows High-Contrast: clip layers collapse to system colors — keep the fill
   visible as Highlight so the rating isn't lost. */
@media (forced-colors: active) { .hzo-rating__stars-fill { color: Highlight; } }