/* Updated CSS - multi-color support + underline that matches text/gradient */
.rb-card-hover {
  position: relative;
  cursor: pointer;
  text-decoration: none;            /* we'll draw our own underline */
  transition: transform 0.2s ease;
  text-shadow: 0 0 0.6px rgba(255,255,255,0.2); /* subtle pop on dark bg */
}

.rb-card-hover:hover {
  text-decoration: none !important;
  transform: scale(1.02);
}

.rb-card-hover.multi-color {
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Single-color underline: dashed, uses the --rb-underline custom property */
.rb-card-hover:not(.multi-color) {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--rb-underline, currentColor);
  text-underline-offset: 3px;
}

/* Multi-color underline: gradient bar as a pseudo-element */
.rb-card-hover.multi-color::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;              /* adjust if your line-height differs */
  height: 2px;
  background: var(--rb-underline-gradient, var(--rb-underline, #ddd));
  border-radius: 2px;        /* soft ends */
}

/* Keep underline stable on hover */
.rb-card-hover:hover::after {
  transform: none;
}

/* Popup */
#rb-card-popup {
  position: fixed;           /* use viewport coords from getBoundingClientRect() */
  z-index: 10000;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: none !important;
}

#rb-card-popup img {
  display: block;
  max-width: 200px;
  height: auto;
  border-radius: 4px;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) or not (-webkit-background-clip: text) {
  .rb-card-hover.multi-color {
    color: var(--rb-underline, #e0292e) !important; /* use first color as fallback */
    background: none;
  }
}