/* ============================================================
   HireJuno — icon system, stars and the Juno Promise mark.
   Pairs with js/hj-icons.js (window.HJIcons) and
   /assets/icons/hj-sprite.svg (<use href="…#hj-i-name">).

   Tuning hooks (inherit, so set them on any ancestor):
     --hj-icon-duo       soft-fill opacity           default .16
     --hj-icon-accent    soft-fill colour            default currentColor
     --hj-star           star fill                   default #F2AE1C
     --hj-star-track     empty star                  default #E3DCCD
   ============================================================ */

.hj-icon {
  display: inline-block;
  flex: none;
  vertical-align: -0.2em;
  overflow: visible;
}
/* brand.css sets svg { display:block } — icons inside running text stay inline */
:where(p, li, span, a, button, label, dd, td) > .hj-icon { display: inline-block; }

/* On dark surfaces the soft fill needs a touch more presence. */
.hj-on-dark, .section--dark, .hj-section--inverse { --hj-icon-duo: .26; --hj-star-track: rgb(255 255 255 / .22); }

/* ---------- icon tile: the rounded "bubbly" chip used on cards ---------- */
.hj-icon-tile {
  --hj-tile: 48px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--hj-tile); height: var(--hj-tile);
  border-radius: calc(var(--hj-tile) * .3);
  background: var(--hj-accent-soft, #E9F5EC);
  color: var(--hj-accent-strong, #1F6B33);
  --hj-icon-duo: .2;
}
.hj-icon-tile .hj-icon { width: 55%; height: 55%; }
.hj-icon-tile--sm { --hj-tile: 36px; }
.hj-icon-tile--lg { --hj-tile: 64px; }
.hj-icon-tile--gold { background: #FFF3D6; color: #8A5A0A; --hj-icon-accent: #F2AE1C; --hj-icon-duo: .45; }
.hj-icon-tile--navy { background: #E8EDF5; color: var(--hj-fg, #1B2A41); }

/* ---------- stars ---------- */
.hj-stars {
  display: inline-flex; align-items: center; gap: .4em;
  line-height: 1; vertical-align: middle;
}
.hj-stars__svg { display: block; flex: none; }
.hj-stars__value {
  font-family: var(--hj-font-display, 'Outfit', system-ui, sans-serif);
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: inherit;
}

/* ---------- the Juno Promise mark ---------- */
.hj-promise { display: inline-block; flex: none; vertical-align: middle; }
img.hj-promise { height: auto; }