/* ==========================================================================
   Badges — shared components
   Globally enqueued layer. A page CSS may add scoped overrides but must not
   redeclare the base (.claude/rules/css-architecture.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nationally Recognised Training lockup — icon + caps label.
   Figma component: the "Nationally Recognised Wrapper" frame, drawn identically on
   several pages: Cert III course page (12030:3047, on navy and on the training card)
   and Qualifications (I11694:4603;11694:4742, on each white qualification card).

   Moved out of course-single.css on 2026-08-11, unchanged, when Qualifications became
   the second consumer. It was the same story as the form band: copying 23 lines into a
   second page CSS is how two implementations of one component drift apart. The icon
   colour is NOT part of the base — it comes from the chosen SVG file, and the label
   colour flips per context, so each consumer sets that itself.
   -------------------------------------------------------------------------- */
.course-badge {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;                  /* Figma 12030:3047 counter=CENTER */
  gap: 8px;                             /* Figma 12030:3047 itemSpacing 8 */
}

.course-badge__icon {
  flex: 0 0 auto;
  width: 29px;                          /* Figma 12030:3048 instance box 29x29 */
  height: 29px;
  display: block;
}

.course-badge__text {
  font-family: var(--font-family);
  font-weight: 700;                     /* Figma 12030:3049 FrutigerLTStd-Bold */
  font-size: 12px;                      /* Figma 12030:3049 12px */
  line-height: 1.2;                     /* Figma 12030:3049 LH 14.4 / 12 */
  letter-spacing: 0.04em;               /* Figma 12030:3049 LS 0.48 */
  color: var(--color-tangerine);        /* Figma 12030:3049 fill #ff6600 */
}