/* Explicit badge styles - used across album, song, and index pages */

/* ============================================
   ALBUM PAGE (album.html) - Track Title Badge
   ============================================ */

/* Make track title container use flexbox for proper baseline alignment */
.track-title {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
}

/* Badge for album page (table rows) - clearer "E" */
.track-title .explicit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff4444;
    color: #ffffff;
    font-weight: 900;
    border-radius: 3px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.75em;
    padding: 3px 7px;
    margin-left: 8px;
    min-width: 18px;
    text-align: center;
}

/* Hover effect for album page track rows */
.track-row:hover .explicit-badge {
    background-color: #ff6666;
}

/* ============================================
   SONG PAGE (song.html) - Song Title Badge
   ============================================ */

/* Make song title container use flexbox for proper baseline alignment */
.song-title {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
}

/* Badge for song page (title header) - larger "EXPLICIT" */
.song-title .explicit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff4444;
    color: #ffffff;
    font-weight: 900;
    border-radius: 4px;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.7em;
    padding: 4px 10px;
    margin-left: 12px;
}

/* ============================================
   INDEX PAGE (index.html) - Album Item Badge
   ============================================ */

/* Make album item container use inline-flex for proper baseline alignment while maintaining layout */
.album-item {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
}

/* Badge for index page (album listing) - clearer "E" matching album.html style */
.album-item .explicit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff4444;
    color: #ffffff;
    font-weight: 900;
    border-radius: 3px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.75em;
    padding: 3px 7px;
    margin-left: 8px;
    min-width: 18px;
    text-align: center;
}