/**
 * Reviews & Q&A — the star line alone.
 *
 * Split from reviews.css: outside product pages the module's only markup is
 * the compact star line on product cards and the product header
 * (displayProductListReviews), which needs these few rules and none of the
 * review list, histogram, form or Q&A styling. This file is registered on
 * every front controller; reviews.css and reviews.js load on product pages
 * only (see hookActionFrontControllerSetMedia in kickedreviews.php), so
 * reviews.css never loads without this file.
 *
 * THEMING CONTRACT
 * ----------------
 * Same contract as reviews.css — themes set --krv-* properties, never
 * override selectors. This file consumes the subset below; a theme that
 * declares the full set on the shared selector group covers both files.
 *
 *   --krv-muted          the review count beside the stars
 *   --krv-star           star fill
 *   --krv-star-muted     stars standing in for a rating that does not exist
 *   --krv-star-size      star glyph size
 *   --krv-star-gap       space between two stars
 *   --krv-count-display  `display` of the count; `none` where stars go alone
 *
 * KEEP THE DEFAULTS BELOW IN LOCKSTEP with the shared block at the top of
 * reviews.css — product pages load both files and must resolve identically.
 *
 * Layered for the same reason as reviews.css: layered CSS always loses to
 * unlayered CSS, so a host theme's ordinary stylesheet wins outright.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-reviews {
  /* The full selector group, not just .kicked-stars-line, so the values here
     agree with reviews.css on product pages regardless of load order. */
  .kicked-reviews,
  .kicked-stars-line,
  .kicked-qa {
    --krv-muted: #a1a1aa;
    --krv-star-muted: #d4d4d8;
    --krv-star: #eab308;
    --krv-star-size: 1rem;
    --krv-star-gap: 0.125rem;
    --krv-count-display: inline;
  }

  /* --- Screen-reader-only text --------------------------------------------
     Its own copy rather than the host theme's .visually-hidden (Bootstrap 5)
     or .sr-only (Bootstrap 4): the module cannot know which — or whether
     either — a theme ships, and a label that silently becomes visible body
     text is worse than one that was never styled at all. Lives here because
     the star line carries sr-only text and this is the file that is always
     present. */

  .kicked-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* --- Stars --------------------------------------------------------------
     Shared by the summary, each card, and the product-card snippet. */

  .kicked-stars {
    display: inline-flex;
    gap: var(--krv-star-gap);
    color: var(--krv-star);
  }

  .kicked-stars__star {
    width: var(--krv-star-size);
    height: var(--krv-star-size);
    fill: currentcolor;
  }

  .kicked-stars__star--empty {
    /* Not display:none — an empty slot still has to occupy its width, or a
       3-star row renders narrower than a 5-star row and the column ragged. */
    opacity: 0.25;
  }

  .kicked-stars-line {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
  }

  .kicked-stars-line__count {
    display: var(--krv-count-display);
    font-size: 0.8125rem;
    color: var(--krv-muted);
  }

  /* A rating line standing in for a rating nobody has given yet: the same five
     slots, drawn in the muted colour at full strength. Its own modifier rather
     than a reuse of --krv-star-muted alone, because inside a real rating the
     25% is what tells a 3-star row from a 5-star one — here there is no rating
     to read, so the row is one flat placeholder. Same pair of rules as
     .kicked-reviews__summary--empty in reviews.css, which is the same state in
     the summary card. */
  .kicked-stars-line--empty .kicked-stars {
    color: var(--krv-star-muted);
  }

  .kicked-stars-line--empty .kicked-stars__star--empty {
    opacity: 1;
  }
}