/**
 * Styles for the "Founder Member" badge shown at the bottom-left corner of a
 * member's photo, wherever that photo appears on the front end: the single
 * profile (single-members.php), the archive/term-archive grids
 * (archive-members.php, taxonomy-member-types.php), and the
 * [members-recent] / [members-recent-rows] shortcodes (class-shortcodes.php).
 *
 * Enqueued conditionally from Frontend_Assets::enqueue_founder_badge_style().
 *
 * Deliberately self-contained (no --estmjs-* custom properties) because,
 * unlike single-members.css / archive-members.css, this stylesheet can also
 * load on an ordinary page or post that merely hosts one of the shortcodes
 * above and never defines those properties.
 */

/* Wraps whatever element tightly bounds the photo (an <img>, a placeholder
 * <div>, or the <a> around either) so the badge below can be positioned
 * against it. display:block guards against the default inline box model of
 * an <a>, which would otherwise leave the badge mispositioned. */
.estmjs-member-badge-wrap {
  position: relative;
  display:  block;
}

.estmjs-member-badge {
  position:         absolute;
  bottom:           0.5rem;
  left:             0.5rem;
  z-index:          2;
  display:          inline-flex;
  align-items:      center;
  padding:          0.25rem 0.6rem;
  background-color: #0A848F;
  color:            #FFFFFF;
  font-size:        0.7rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.04em;
  line-height:      1;
  border-radius:    999px;
  box-shadow:       0 2px 6px rgba( 0, 0, 0, 0.25 );
  pointer-events:   none;
}

.estmjs-member-badge::before {
  content:      '\2605'; /* ★ */
  margin-right: 0.3em;
  font-size:    0.85em;
  line-height:  1;
}

@media ( prefers-reduced-motion: reduce ) {
  .estmjs-member-badge {
    transition: none !important;
  }
}