/*
 * assets/css/badge_early_creator.css
 * Early Creator Badge – NOIRLY
 *
 * Include in profile, post-author, and creator-list layouts.
 * The badge is read-only and cosmetic. It grants no UI controls.
 */

/* ── Base badge ─────────────────────────────────────────────── */
.badge--early-creator {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         2px 9px;
    border-radius:   12px;
    border:          1px solid gold;
    background:      linear-gradient(135deg, #1a1500 0%, #2b2200 100%);
    color:           gold;
    font-size:       0.72rem;
    font-weight:     700;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    white-space:     nowrap;
    cursor:          default;
    user-select:     none;
    vertical-align:  middle;
    position:        relative;   /* needed for tooltip positioning */
    text-decoration: none;
}

.badge--early-creator .badge__icon {
    flex-shrink:  0;
    margin-top:   -1px;  /* optical alignment */
}

/* ── Tooltip (pure CSS, no JS) ──────────────────────────────── */
.badge--early-creator::after {
    content:       attr(title);
    position:      absolute;
    bottom:        calc(100% + 8px);
    left:          50%;
    transform:     translateX(-50%);
    background:    #1a1a1a;
    color:         #ddd;
    border:        1px solid #3a3a3a;
    border-radius: 4px;
    padding:       5px 10px;
    font-size:     0.69rem;
    font-weight:   400;
    letter-spacing: 0;
    text-transform: none;
    white-space:   nowrap;
    pointer-events: none;
    opacity:       0;
    transition:    opacity 0.15s ease;
    z-index:       50;
}

.badge--early-creator:hover::after,
.badge--early-creator:focus-visible::after {
    opacity: 1;
}

/* ── Size variants ──────────────────────────────────────────── */

/* Profile header – larger */
.badge--early-creator--lg {
    font-size:    0.82rem;
    padding:      4px 12px;
    border-width: 1px;
    gap:          5px;
}

.badge--early-creator--lg .badge__icon {
    width:  15px;
    height: 15px;
}

/* Post author line – compact */
.badge--early-creator--sm {
    font-size: 0.66rem;
    padding:   1px 6px;
    gap:       3px;
}

.badge--early-creator--sm .badge__icon {
    width:  11px;
    height: 11px;
}

/* ── Creator list / search result card ──────────────────────── */
.creator-card .badge--early-creator {
    margin-top: 4px;
}

/* ── Example: profile header layout ────────────────────────────
 *
 * <div class="profile-header">
 *   <h1 class="profile-username">@janedoe</h1>
 *   <?php if ((int)$creator['early_creator'] === 1): ?>
 *     <?php $badgeClass = 'badge--early-creator--lg';
 *           include 'views/partials/badge_early_creator.php'; ?>
 *   <?php endif; ?>
 * </div>
 *
 * Example: post author line layout
 *
 * <span class="post__author">
 *   @janedoe
 *   <?php if ((int)$post['author_early_creator'] === 1): ?>
 *     <?php $badgeClass = 'badge--early-creator--sm';
 *           include 'views/partials/badge_early_creator.php'; ?>
 *   <?php endif; ?>
 * </span>
 */