/**
 * Sunsetting Badge
 *
 * Red pill marking a user whose subscription is winding down. Sits in
 * the same slots as the Charter Member badge (app header user-block,
 * dashboard hero) and replaces it when the user has cancelled —
 * charter-badge early-returns when `is_sunsetting` is true.
 *
 * Mirrors charter-badge.css structure so the two stay visually
 * comparable: same pill shape, same size variants, same shadow weight.
 * Only the colour story changes — red instead of dune-gold — and the
 * badge is a real <a> link (Charter is decorative; Sunsetting is the
 * teacher's reactivation path, so it has to be clickable).
 *
 * The component HTML is rendered by the plugin
 * (`plugin/src/Views/components/sunsetting-badge.php`) — keep markup +
 * classes here in sync with that file.
 */

.sunsetting-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sunsetting-badge:hover,
.sunsetting-badge:focus-visible {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    color: #fff;
    text-decoration: none;
}

.sunsetting-badge:focus-visible {
    outline: 2px solid var(--color-primary, #00abc8);
    outline-offset: 2px;
}

.sunsetting-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);
}

.sunsetting-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);
}

/* Stacked header context — same zero-margin treatment as charter-badge
   so the badge sits flush under the username instead of indented from
   it. See charter-badge.css for the rationale. */
.app-header__user-block .sunsetting-badge--inline {
    margin-left: 0;
}

/* Hide on very small screens, mirroring charter-badge. The badge is a
   status signal; the user still has the /account/subscription page if
   they need the action surface on mobile. */
@media screen and (max-width: 400px) {
    .app-header__inner .sunsetting-badge.sunsetting-badge--inline {
        display: none;
    }
}