/* ============================================================================
   Minimalist Journeys — Review Stars (Headings + Summary)
   File:   /css/minjourneys-reviews.css
   What:   Pure-CSS 5-star overlay for headings + a summary line. No JS/icons.
           Supports 0–5 with one decimal. Stars scale with surrounding text.
   Scope:
     • Headings: [minjourneys_h3]  → real H3 (inherits theme H3)
               : [minjourneys_h2]  → visual H2 (DIV with role="heading")
     • Summary : [minjourneys_summary] → Quicksand Bold + #355c7d, TOC-safe
     • Star colours: filled var(--star-color, #F64658); empty #3C3C3C
   Notes:
     • No pac-dtocm include/exclude classes are used anywhere.
   Added/Updated by Paul Ryken on 13-Jan-2026
   ========================================================================== */

/* ---------------------------
   Headings (H3 + H2-look)
   --------------------------- */
.minjourneys-rated-h3,
.minjourneys-rated-heading{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-wrap:wrap;
}

/* ensure the H3 text inherits theme H3 typography explicitly */
.minjourneys-rated-h3,
.minjourneys-rated-h3 .minjourneys-h3-text{
  font:inherit;
  color:inherit;
}

.minjourneys-h3-text,
.minjourneys-h-text{ display:inline; }

/* ---------------------------
   Star widget (shared)
   --------------------------- */
.minjourneys-rated-h3 .minjourneys-stars,
.minjourneys-rated-heading .minjourneys-stars,
.minjourneys-summary-rating .minjourneys-stars{
  position:relative;
  display:inline-block;
  font-size:var(--star-size, 1em); /* scales with heading/summary */
  line-height:1;
  letter-spacing:0;                /* keep decimals accurate */
  font-kerning:none;
  font-feature-settings:"liga" 0;
}

/* Base layer: 5 empty stars */
.minjourneys-rated-h3 .minjourneys-stars::before,
.minjourneys-rated-heading .minjourneys-stars::before,
.minjourneys-summary-rating .minjourneys-stars::before{
  content:"★★★★★";
  color:#3C3C3C;
}

/* Overlay: filled stars clipped to rating% width */
.minjourneys-rated-h3 .minjourneys-stars::after,
.minjourneys-rated-heading .minjourneys-stars::after,
.minjourneys-summary-rating .minjourneys-stars::after{
  content:"★★★★★";
  color:var(--star-color, #F64658);   /* override per instance via shortcode */
  position:absolute;
  inset:0 auto 0 0;
  width:calc((var(--rating, 4) / 5) * 100%);
  overflow:hidden;
  white-space:nowrap;
}

/* Visible “X out of 5 stars” beside headings */
.minjourneys-rated-h3 .minjourneys-rating-text,
.minjourneys-rated-heading .minjourneys-rating-text{
  margin-left:0.35rem;
  font-size:0.6em;
  font-weight:600;
  opacity:.9;
}

/* ---------------------------
   Summary line (TOC-safe, styled like a heading)
   Added/Updated by Paul Ryken on 13-Jan-2026
   --------------------------- */
.minjourneys-summary-rating{
  display:flex;
  align-items:baseline;   /* better vertical rhythm when wrapping */
  flex-wrap:wrap;         /* allow wrapping on small screens */
  column-gap:.6rem;       /* spacing between items in a row */
  row-gap:.25rem;         /* spacing when items wrap to a new line */
  margin:.25rem 0 1rem;
}

/* Force Quicksand Bold + brand colour on all summary text parts */
.minjourneys-summary-rating,
.minjourneys-summary-rating .minjourneys-summary-label,
.minjourneys-summary-rating .minjourneys-summary-numeric,
.minjourneys-summary-rating .minjourneys-summary-x,
.minjourneys-summary-rating .minjourneys-summary-outof,
.minjourneys-summary-rating .minjourneys-summary-suffix{
  font-family:'Quicksand', sans-serif !important;
  font-weight:700 !important;
  color:#355c7d !important;
}

/* centring helper */
.minjourneys-summary--center{
  width:100%;
  justify-content:center;
  text-align:center;
}

/* XL summary size (reduced ~15% to avoid wrapping on narrow rows) */
.minjourneys-summary--xl{ font-size:1.7em; }
.minjourneys-summary--xl .minjourneys-stars{ font-size:1em; } /* stars scale with text */

/* Numeric “X out of 5 stars” grouping */
.minjourneys-summary-numeric{
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
}
.minjourneys-summary-x{ line-height:1; }
.minjourneys-summary-outof{ opacity:.9; }
.minjourneys-summary-label{ }

/* Heading-look helpers (visual only; not real H tags) */
.minjourneys-summary--h2look{
  line-height:1.25;
  font-size:clamp(1.6rem, 2.5vw, 2.1rem);
}
.minjourneys-summary--h3look{
  line-height:1.3;
  font-size:clamp(1.35rem, 2.1vw, 1.75rem);
}

/* ---------------------------
   Accessibility helper
   --------------------------- */
.minjourneys-visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; border:0;
  white-space:nowrap;
  clip-path:inset(50%);
  clip:rect(0 0 0 0);
}