/*
 * Category label — card and single post hero.
 *
 * Pill with the category colour (ACF field on the term), Instrument Sans
 * SemiBold uppercase, 0.09em tracking, navy text. Optional Iconoir icon on
 * the left (stroke 1.5), masked so it takes the text colour.
 * Proportions from the brand reference (etichette-categorie.html, in em so
 * they scale with font-size), at 13px instead of the reference 17px.
 * Markup: theme_child_category_label() in inc/blog.php.
 */

.category-label {
  align-items: center;
  background-color: var(--category-label-bg, var(--color-blue-20));
  border-radius: 9999px;
  color: var(--color-navy-80);
  display: inline-flex;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  gap: 0.65em;
  height: 2.82em;
  letter-spacing: 0.09em;
  line-height: 1;
  padding: 0 1.3em 0 0.94em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Without an icon the left padding matches the right one. */
.category-label--no-icon {
  padding-left: 1.3em;
}

.category-label__icon {
  background-color: currentColor;
  flex-shrink: 0;
  height: 1.41em;
  -webkit-mask: var(--category-icon) center / contain no-repeat;
  mask: var(--category-icon) center / contain no-repeat;
  width: 1.41em;
}

.category-label--blue-20 { --category-label-bg: var(--color-blue-20); }
.category-label--pink-50 { --category-label-bg: var(--color-pink-50); }
/* Quartz is almost the page background (#fcfbfb): a thin grey ring keeps the
   pill visible in the hero. Inset shadow, so the size matches the others. */
.category-label--quartz-50 {
  --category-label-bg: var(--color-quartz-50);
  box-shadow: inset 0 0 0 1px var(--color-quartz-60);
}
.category-label--taupe-50 { --category-label-bg: var(--color-taupe-50); }
.category-label--lime-50 { --category-label-bg: var(--color-lime-50); }