/**
 * TAGSIA Badge System — tagsia-badges.css
 * Upload to: /wp-content/themes/YOUR-THEME/tagsia-badges.css
 * (or /wp-content/uploads/tagsia-badges.css if theme editing is restricted)
 * Enqueued via functions.php — do NOT paste into page editors
 * Version: 1.0
 */

/* ── BADGE BLOCK CONTAINER ── */
.tg-pb {
  font-family: 'Inter', sans-serif;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 24px;
  border-left-width: 4px;
  border-left-style: solid;
  border-top: 0.5px solid #e2e8f0;
  border-right: 0.5px solid #e2e8f0;
  border-bottom: 0.5px solid #e2e8f0;
  background: #f8fafc;
}

/* ── TOP ROW: phase pill + audience pill ── */
.tg-pb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Phase pill */
.tg-ph {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
}

/* Audience pill */
.tg-au {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.tg-au-all {
  background: #E1F5EE;
  color: #085041;
  border: 1px solid #5DCAA5;
}
.tg-au-e26 {
  background: #E6F1FB;
  color: #0C447C;
  border: 1px solid #85B7EB;
}

/* ── SATISFIES ROW ── */
.tg-rl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tg-rl-lbl {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-right: 2px;
}

/* ── REGULATORY BADGE PILLS ── */
.tg-b {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}

/* E26 — blue */
.tg-b-e26 {
  background: #E6F1FB;
  color: #0C447C;
  border-color: #85B7EB;
}

/* E27 — purple */
.tg-b-e27 {
  background: #EEEDFE;
  color: #3C3489;
  border-color: #AFA9EC;
}

/* IMO / ISM — green */
.tg-b-imo {
  background: #EAF3DE;
  color: #27500A;
  border-color: #97C459;
}

/* IEC 62443 — amber */
.tg-b-iec {
  background: #FAEEDA;
  color: #633806;
  border-color: #EF9F27;
}

/* BIMCO — grey */
.tg-b-bimco {
  background: #F1EFE8;
  color: #444441;
  border-color: #B4B2A9;
}

/* All vessels — teal */
.tg-b-all {
  background: #E1F5EE;
  color: #085041;
  border-color: #5DCAA5;
}

/* ── PHASE COLOUR OVERRIDES ── */
/* Applied via inline style on .tg-pb and .tg-ph */
/* Identify  — #0891b2  bg: #f0f9ff */
/* Protect   — #0a2239  bg: #f8fafc */
/* Detect    — #d97706  bg: #fffbeb */
/* Respond   — #c01e1e  bg: #fef2f2 */
/* Recover   — #16a34a  bg: #f0fdf4 */
/* Vault     — #444441  bg: #f8f7f4 */

/*
 * ── FUTURE: TWO-TIER EXPANDABLE BADGES (stubbed, not yet active) ──
 *
 * .tg-pb-expanded { ... }
 * .tg-b-expand-btn { ... }
 * .tg-b-description-panel { ... }
 *
 * When Group E two-tier system is activated, the pills gain a
 * click handler that reveals the plain-English description of
 * each section reference in a collapsible panel below the row.
 * The CSS and JS will be added here without touching page content.
 */