.unm-legend-widget {
  /* ---- Brand palette (brand.unm.edu), scoped to this widget ---- */
  --unm-cherry:        #ba0c2f;
  --unm-turquoise:     #007a86;
  --unm-silver:        #a7a8aa;
  --unm-lobo-gray:     #63666a;
  --unm-high-noon:     #ffc600;
  --unm-sandia-sunset: #ed8b00;
  --unm-terra:         #c05131;
  --unm-mesa:          #d6a461;
  --unm-green-chile:   #a8aa19;
  --unm-deep-dusk:     #8a387c;

  /* ---- Widget container ---- */
  box-sizing: border-box;
  padding: 2rem 1rem;
  background-color: #f8f9fa;
  color: var(--unm-lobo-gray);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Reset box-sizing only for elements inside this widget —
   never applied globally, so it can't touch the rest of the page. */
.unm-legend-widget, .unm-legend-widget *, .unm-legend-widget *::before, .unm-legend-widget *::after {
  box-sizing: border-box;
}

.unm-legend-widget .unm-legend-title {
  margin: 0 0 1.5rem;
  font-weight: 700;
  color: var(--unm-cherry);
  border-bottom: 3px solid var(--unm-silver);
  padding-bottom: .5rem;
}

/* ---- Grid layout (replaces Bootstrap row/col) ---- */
.unm-legend-widget .unm-legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .unm-legend-widget .unm-legend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .unm-legend-widget .unm-legend-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Legend item ---- */
.unm-legend-widget .unm-legend-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  height: 100%;
}

.unm-legend-widget .unm-legend-swatch {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .375rem;   /* use 50% for circular swatches */
  border: 1px solid rgba(0, 0, 0, .15);
}

.unm-legend-widget .unm-legend-label {
  font-weight: 600;
  line-height: 1.2;
  font-size: 19px;
}

.unm-legend-widget .unm-legend-hex {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--unm-lobo-gray);
  opacity: .85;
}

/* ---- Swatch color utilities ---- */
.unm-legend-widget .unm-bg-cherry        { background-color: var(--unm-cherry); }
.unm-legend-widget .unm-bg-turquoise     { background-color: var(--unm-turquoise); }
.unm-legend-widget .unm-bg-silver        { background-color: var(--unm-silver); }
.unm-legend-widget .unm-bg-lobo-gray     { background-color: var(--unm-lobo-gray); }
.unm-legend-widget .unm-bg-high-noon     { background-color: var(--unm-high-noon); }
.unm-legend-widget .unm-bg-sandia-sunset { background-color: var(--unm-sandia-sunset); }
.unm-legend-widget .unm-bg-terra         { background-color: var(--unm-terra); }
.unm-legend-widget .unm-bg-mesa          { background-color: var(--unm-mesa); }
.unm-legend-widget .unm-bg-green-chile   { background-color: var(--unm-green-chile); }
.unm-legend-widget .unm-bg-deep-dusk     { background-color: var(--unm-deep-dusk); }