/**
 * tags.css — Cage & Key
 * Maps tag text slugs → colors.
 * Used for committee member tags and event type badges.
 * DO NOT put layout or component styles here — colours only.
 *
 * Slug generation (JS):
 *   text.toLowerCase().normalize('NFD')
 *        .replace(/[\u0300-\u036f]/g,'')
 *        .replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'')
 */

/* ══════════════════════════════════════════════════════════════
   COMMITTEE MEMBER TAGS   (.badge + .tag--{slug})
   ══════════════════════════════════════════════════════════════ */

/* ── Blue — roles / positions ── */
.tag--president,          /* Président / President */
.tag--vice-president,     /* Vice-Président / Vice-President */
.tag--voorzitter,
.tag--ondervoorzitter,
.tag--secretaire,
.tag--secretaris,
.tag--secretary,
.tag--communication,
.tag--communications,
.tag--communicatie,
.tag--communicatieverantwoordelijke,
.tag--tresorier,          /* Trésorier */
.tag--penningmeester,
.tag--treasurer,
.tag--community-manager {
  background: rgba(30, 114, 192, 0.18) !important;
  color: var(--blue-300) !important;
  border-color: rgba(30, 114, 192, 0.35) !important;
}

/* ── Gold — founders ── */
.tag--fondateur,
.tag--oprichter,
.tag--founder {
  background: rgba(200, 144, 24, 0.18) !important;
  color: var(--gold-300) !important;
  border-color: rgba(200, 144, 24, 0.35) !important;
}

/* ── Grey — location / other ── */
.tag--bruxelles,
.tag--brussel,
.tag--brussels {
  background: rgba(100, 116, 139, 0.15) !important;
  color: var(--text-400) !important;
  border-color: rgba(100, 116, 139, 0.25) !important;
}


/* ══════════════════════════════════════════════════════════════
   EVENT TYPE BADGES   (.event-type-badge + .event-type-badge--{slug})
   ══════════════════════════════════════════════════════════════ */

.event-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.6;
}

/* Soirée — blue */
.event-type-badge--soiree {
  background: rgba(30, 114, 192, 0.18);
  color: var(--blue-300);
  border-color: rgba(30, 114, 192, 0.35);
}

/* Workshop — gold */
.event-type-badge--workshop {
  background: rgba(200, 144, 24, 0.18);
  color: var(--gold-300);
  border-color: rgba(200, 144, 24, 0.35);
}

/* Social — pink / mauve */
.event-type-badge--social {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.3);
}

/* Virtuel — grey */
.event-type-badge--virtuel {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-400);
  border-color: rgba(100, 116, 139, 0.25);
}

/* Pride — rainbow gradient text, bold */
.event-type-badge--pride {
  background: linear-gradient(90deg,
    rgba(228,3,3,0.12),
    rgba(255,140,0,0.12),
    rgba(255,237,0,0.12),
    rgba(0,128,38,0.12),
    rgba(0,77,255,0.12),
    rgba(117,7,135,0.12)
  );
  border-image: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787) 1;
  border-width: 1px;
  border-style: solid;
  font-weight: 700;
  background-clip: padding-box;
  /* Rainbow text */
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
  -webkit-text-fill-color: transparent;
  color: transparent;
}