/**
 * Badges Component
 *
 * Pill badges, expertise tags, category labels,
 * status indicators and rating stars.
 *
 * @package Anna_Baylis
 * @since   1.0.0
 */

/* ── Base badge ───────────────────────────────────────────────────────────── */
.anna-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1-5);
  padding:         var(--space-1-5) var(--space-4);
  font-family:     var(--font-body);
  font-size:       var(--text-xs);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  border-radius:   var(--radius-full);
  white-space:     nowrap;
  line-height:     1.3;
}

/* ── Badge variants ───────────────────────────────────────────────────────── */
.anna-badge--primary {
  background: #edf4f1;
  color:      #2d9488;
  border:     1px solid rgba(45, 148, 136, 0.10);
}

.anna-badge--accent {
  background: rgba(76, 165, 145, 0.12);
  color:      var(--color-accent);
}

.anna-badge--soft {
  background: var(--color-bg-muted);
  color:      var(--color-text-muted);
}

.anna-badge--white {
  background: var(--color-white);
  color:      var(--color-primary);
  box-shadow: var(--shadow-xs);
}

.anna-badge--dark {
  background: var(--color-heading);
  color:      var(--color-white);
}

.anna-badge--outline {
  background:   transparent;
  color:        var(--color-primary);
  border:       1.5px solid var(--color-primary);
}

/* ── Badge sizes ──────────────────────────────────────────────────────────── */
.anna-badge--sm {
  font-size: 0.65rem;
  padding:   var(--space-1) var(--space-3);
}

.anna-badge--lg {
  font-size: var(--text-sm);
  padding:   var(--space-2-5) var(--space-6);
}

/* ── Badge dot indicator ──────────────────────────────────────────────────── */
.anna-badge--dot::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: var(--radius-full);
  background:    currentColor;
  flex-shrink:   0;
}

/* ── Expertise tag list ───────────────────────────────────────────────────── */
.anna-tag-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2-5);
  list-style: none;
  padding:   0;
  margin:    0;
}

.anna-tag-list__item .anna-badge {
  transition: background var(--transition-fast),
              color      var(--transition-fast),
              transform  var(--transition-spring);
}

.anna-tag-list__item .anna-badge:hover {
  background: var(--color-primary);
  color:      var(--color-white);
  transform:  translateY(-2px);
  cursor:pointer;
}

/* ── Star rating ──────────────────────────────────────────────────────────── */
.anna-stars {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-0-5);
  line-height: 1;
}

.anna-stars__star {
  font-size:   1.1em;
  line-height: 1;
  transition:  transform var(--transition-fast);
}

.anna-stars__star--filled {
  color: #F5A623;
}

.anna-stars__star--empty {
  color: var(--color-border);
}

.anna-stars__meter {
  /* meter is sr-only, visual is pure CSS stars */
}

/* ── Section label / eyebrow ──────────────────────────────────────────────── */
.anna-eyebrow {
    display: inline-flex !important;
    align-items: cente !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: var(--tracking-caps) !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--space-3) !important;
    font-family: var(--font-heading) !important;
}

/* On dark background */
.anna-section--primary .anna-eyebrow,
.anna-section--dark    .anna-eyebrow {
  color: rgba(255, 255, 255, 0.7);
}