/**
 * Hello Middleton - Trust Level Badges
 * Visual indicators for myCred trust point tiers.
 *
 * Tiers:
 *   New      (0-24)   — neutral gray
 *   Bronze   (25-99)  — warm orange
 *   Silver   (100-249) — cool gray
 *   Gold     (250+)   — rich amber
 *
 * @requires tokens.css
 * @version 1.0.0
 */

/* ==========================================================================
   INLINE BADGE — Sits beside member names
   ========================================================================== */

.hm-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: uppercase;
}

.hm-trust-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* --- Tier: New --- */
.hm-trust-badge--new {
    background: var(--hm-trust-new-light);
    color: var(--hm-trust-new);
    border: 1px solid var(--hm-neutral-200);
}

/* --- Tier: Bronze --- */
.hm-trust-badge--bronze {
    background: var(--hm-trust-bronze-light);
    color: var(--hm-trust-bronze, var(--hm-primary-hover));
    border: 1px solid rgba(146, 64, 14, 0.2);
}

/* --- Tier: Silver --- */
.hm-trust-badge--silver {
    background: var(--hm-trust-silver-light);
    color: var(--hm-trust-silver);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

/* --- Tier: Gold --- */
.hm-trust-badge--gold {
    background: var(--hm-trust-gold-light);
    color: var(--hm-trust-gold);
    border: 1px solid rgba(217, 119, 6, 0.2);
}

/* ==========================================================================
   PROFILE HEADER BADGE — Larger display on profile pages
   ========================================================================== */

.hm-trust-badge--profile {
    font-size: 0.75rem;
    padding: 3px 10px;
    margin-top: 4px;
}

.hm-trust-badge--profile svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   CONTEXT-SPECIFIC TWEAKS
   ========================================================================== */

/* Activity feed: inline after action text */
.activity-header .hm-trust-badge {
    margin-left: 6px;
    position: relative;
    top: -1px;
}

/* Member directory: below the member name */
.bp-member-dir-badge {
    display: block;
    margin-top: 4px;
}

/* BuddyPress profile header */
.bp-profile-badge {
    display: block;
    margin-top: 6px;
}

/* Community board (bbPress / BuddyPress activity) */
.activity-content .hm-trust-badge {
    margin-left: 4px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 479px) {
    .hm-trust-badge {
        font-size: 0.65rem;
        padding: 1px 6px;
    }

    .hm-trust-badge svg {
        width: 10px;
        height: 10px;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hm-trust-badge {
        transition: none;
    }
}

/* High contrast mode */
@media (forced-colors: active) {
    .hm-trust-badge {
        border: 1px solid CanvasText;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .hm-trust-badge {
        border: 1px solid #000;
        color: #000 !important;
        background: #fff !important;
    }
}