/**
 * File Path: assets/css/front/mbs-front-categorization.css
 * Categorization badge pills -- genre, tag, theme, content warning (UX-008, Session 115)
 * Component of mbs-front.css -- enqueued by MBS_Front_Assets dep: mbs-front.
 * Flat selectors (CSS-002 / CSS-NEST-001 compliance).
 * Targets: tab-this-book.php .mbs-categorization block.
 */

/* ==========================================================================
   Section label row
   ========================================================================== */

.mbs-cat-row {
    margin-bottom: 8px;
    line-height: 1.8;
}

.mbs-cat-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mbs-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
    vertical-align: middle;
}

/* ==========================================================================
   Shared pill base
   ========================================================================== */

.mbs-genre-link,
.mbs-tag-link,
.mbs-theme-link,
.mbs-warning-item {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    margin: 2px 3px 2px 0;
    border: 1px solid transparent;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
    vertical-align: middle;
}

/* ==========================================================================
   Genre -- teal family
   ========================================================================== */

.mbs-genre-link {
    background: var(--mbs-genre-bg, #e6f7f8);
    color: var(--mbs-genre-text, #0e7a8a);
    border-color: var(--mbs-genre-border, #a8dde3);
}

.mbs-genre-link:hover,
.mbs-genre-link:focus {
    background: var(--mbs-accent, var(--mbs-teal));
    color: #fff;
    border-color: var(--mbs-accent, var(--mbs-teal));
}

/* ==========================================================================
   Tag -- neutral gray
   ========================================================================== */

.mbs-tag-link {
    background: var(--mbs-tag-bg, #f3f4f6);
    color: var(--mbs-tag-text, #374151);
    border-color: var(--mbs-tag-border, #d1d5db);
}

.mbs-tag-link:hover,
.mbs-tag-link:focus {
    background: var(--mbs-tag-hover, #374151);
    color: #fff;
    border-color: var(--mbs-tag-hover, #374151);
}

/* ==========================================================================
   Theme -- indigo/purple family
   ========================================================================== */

.mbs-theme-link {
    background: var(--mbs-lavender-pale, #ede9fe);
    color: var(--mbs-theme-text, #5b21b6);
    border-color: var(--mbs-lavender, #c4b5fd);
}

.mbs-theme-link:hover,
.mbs-theme-link:focus {
    background: var(--mbs-theme-hover, #5b21b6);
    color: #fff;
    border-color: var(--mbs-theme-hover, #5b21b6);
}

/* ==========================================================================
   Content Warning -- amber
   ========================================================================== */

.mbs-warning-item {
    background: var(--mbs-warning-bg, #fef3c7);
    color: var(--mbs-warning-text, #92400e);
    border-color: var(--mbs-warning-border, #fcd34d);
}

/* ==========================================================================
   Focus-visible outline (shared)
   ========================================================================== */

.mbs-genre-link:focus-visible,
.mbs-tag-link:focus-visible,
.mbs-theme-link:focus-visible {
    outline: 3px solid var(--mbs-accent, var(--mbs-teal));
    outline-offset: 2px;
}