/* ============================================================
   sbor/ka — Hover color mapping (pairwise, bidirectional)
   ------------------------------------------------------------
   For clickable elements with a colored fill:
     yellow      ⇄ bronze
     coral (pink)⇄ red
     periwinkle  ⇄ sky
     teal        ⇄ mint
   Loaded last so it overrides per-element :hover rules.
   ============================================================ */

/* ───── YELLOW ⇒ BRONZE ───── */
.btn.yellow-cta:hover,
.btn.outline:hover,
.lvl.yellow:hover,
.art-card.yellow:hover,
.event-card.yellow:hover,
.jp-svc.tone-1:hover .jp-svc-body {
  background: var(--sb-bronze) !important;
  color: var(--sb-ink) !important;
}

/* ───── BRONZE ⇒ YELLOW ───── */
.btn.bronze:hover,
.lvl.bronze:hover,
.art-card.bronze:hover,
.event-card.bronze:hover {
  background: var(--sb-yellow) !important;
  color: var(--sb-ink) !important;
}

/* ───── CORAL (pink) ⇒ RED ───── */
.lvl.coral:hover,
.art-card.coral:hover,
.event-card.coral:hover,
.jp-svc.tone-2:hover .jp-svc-body {
  background: var(--sb-red) !important;
  color: var(--sb-bone) !important;
}

/* ───── RED ⇒ CORAL (pink) ───── */
.btn.red:hover,
.hero-ctas .cta.secondary:hover,
.lvl.red:hover,
.art-card.red:hover,
.event-card.red:hover {
  background: var(--sb-coral) !important;
  color: var(--sb-ink) !important;
}

/* ───── PERIWINKLE (blue) ⇒ SKY ───── */
.lvl.peri:hover,
.art-card.peri:hover,
.event-card.peri:hover {
  background: var(--sb-sky) !important;
  color: var(--sb-ink) !important;
}

/* ───── SKY ⇒ PERIWINKLE (blue) ───── */
.lvl.sky:hover,
.art-card.sky:hover,
.event-card.sky:hover {
  background: var(--sb-periwinkle) !important;
  color: var(--sb-ink) !important;
}

/* ───── TEAL (green) ⇒ MINT ───── */
.lvl.teal:hover,
.art-card.teal:hover,
.event-card.teal:hover {
  background: var(--sb-mint) !important;
  color: var(--sb-ink) !important;
}

/* ───── MINT ⇒ TEAL (green) ───── */
.lvl.mint:hover,
.art-card.mint:hover,
.event-card.mint:hover {
  background: var(--sb-teal) !important;
  color: var(--sb-bone) !important;
}

/* ───── jur-help service hover icon/arrow inherits color ───── */
.jp-svc.tone-1:hover .more,
.jp-svc.tone-2:hover .more { color: var(--sb-ink) !important; }