/**
 * Charter Member Badge
 *
 * Inline pill, dune (gold) accent. Marks Season Pass holders — the founding
 * cohort who took the £5 launch offer.
 *
 * Lives in the theme (not the plugin) because the badge appears in
 * theme-owned chrome (the app header) and we want it loaded on every
 * page that has the header, including pages with no plugin view.
 *
 * The badge component HTML is rendered by the plugin
 * (`plugin/src/Views/components/charter-badge.php`) — keep markup + classes
 * here in sync with that file.
 *
 * Learning Notes:
 * - The star glyph (✦) is Unicode "four-pointed black star" — no SVG needed.
 *   It's wrapped in aria-hidden so screen readers don't read "star".
 * - Tooltip lives in the `title` attribute. Native browser tooltip is
 *   fine for now; if we want richer hover content later we'd swap in a
 *   JS tooltip component.
 * - The block variant is for places where the badge stands alone (e.g.
 *   the subscription page hero) — bigger glyph, more padding.
 */

.charter-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: linear-gradient(135deg, var(--color-dune) 0%, #f59e0b 100%);
    color: var(--color-dark);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.charter-badge__glyph {
    color: var(--color-blueberry);
    font-size: 1em;
}

.charter-badge--inline {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: var(--space-2);
}

.charter-badge--block {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Reserve a little breathing room when the inline badge sits next to
   a username in the app header. */
.app-header__user-block {
    display: inline-flex;
    align-items: center;
}