/* ============================================================================
   SUPPORTER AVATAR BADGE
   ============================================================================
   Canonical styles for the curved-SUPPORTER-arc avatar wrapper injected by
   /js/comment-js/comment-supporter-badge.js.

   Previously inlined inside comment-system.ftlh, chat.ftlh, and
   board-post-card.ftlh — but the messages page also loads the JS without
   the styles, which let the SVG inflate to fill its message-bubble
   container. Extracted to a shared file so every template that renders
   supporter avatars stays sized.

   Required by any page that calls SupporterBadgeGenerator.generate(...),
   renders <@supporterBadge.arc/> server-side, or loads the
   comment-supporter-badge.js MutationObserver:
   - messages-page.ftlh
   - comment-system.ftlh (and any embedder)
   - community/chat.ftlh
   - community/board-macros/board-post-card.ftlh
   - community/post-view.ftlh (server-rendered byline arc, size-44)

   SupporterArcCssLinkContractTest derives that list from the templates
   themselves and fails when a new consumer forgets the link.
============================================================================ */

/* Supporter avatar container - wraps avatar + SVG badge.
   Larger than avatar column — overflows visually but doesn't affect layout. */
.supporter-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* Size variants — natural size for SVG ring, centered in avatar column */
.supporter-avatar-wrapper.size-50 {
    width: 70px;
    height: 70px;
    margin: -8px -8px -8px -8px;
}

/* Post byline (community/post-view.ftlh). The byline avatar is 44px and is
   NOT resized to fit this component, so the wrapper is drawn around it:
   62px box (44 x 1.4, the same wrapper-to-avatar ratio as size-50 and
   size-40), margin -7px so the laid-out footprint is 48px = avatar + 4px,
   which is what the other two variants reserve. Arc geometry and the
   arithmetic behind it live next to the other two in
   /js/comment-js/comment-supporter-badge.js; SupporterArcGeometryContractTest
   fails if a variant here has no arc there. */
.supporter-avatar-wrapper.size-44 {
    width: 62px;
    height: 62px;
    margin: -7px -7px -7px -7px;
}

.supporter-avatar-wrapper.size-40 {
    width: 56px;
    height: 56px;
    margin: -6px -6px -6px -6px;
}

/* The actual avatar image inside — same size as regular avatars */
.supporter-avatar-wrapper .comment-avatar-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-circle);
    overflow: hidden;
    border: 1.5px solid var(--comment-primary, #3498db);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), height var(--transition-normal), transform var(--transition-normal), width var(--transition-normal);
}

.supporter-avatar-wrapper.size-50 .comment-avatar-img {
    width: 50px;
    height: 50px;
}

.supporter-avatar-wrapper.size-40 .comment-avatar-img {
    width: 40px;
    height: 40px;
}

/* size-44 wraps a bare <img> the PAGE owns rather than a .comment-avatar-img
   div, so this rule centres it and deliberately sets NO width/height: the
   byline avatar is 44px and the page shrinks it to 32px at 768px, and the
   wrapper follows with its own breakpoint below. Setting a size here would
   outrank the page's media query (three classes beats one) and strand the
   avatar at 44px on phones. */
.supporter-avatar-wrapper.size-44 .author-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.supporter-avatar-wrapper .comment-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover effect on avatar */
.supporter-avatar-wrapper:hover .comment-avatar-img {
    transform: translate(-50%, -50%) scale(1.05);
    border-color: var(--supporter-color-1, #8B5CF6);
    box-shadow: var(--lift-purple);
}

/* SVG badge layer — explicit size so the SVG never inflates to its
   container when no width/height attributes are set on the element. */
.supporter-badge-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Text styling */
.supporter-badge-text {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: var(--weight-bold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.supporter-avatar-wrapper.size-50 .supporter-badge-text {
    font-size: 0.4375rem;
    letter-spacing: 1.5px;
}

.supporter-avatar-wrapper.size-40 .supporter-badge-text {
    font-size: 0.375rem;
    letter-spacing: 1px;
}

/* Interpolated on ARC LENGTH, not on avatar size: size-40's arc runs 67.5
   user units and carries 6px/1px, size-50's runs 84.4 and carries 7px/1.5px,
   and size-44's runs 75.7, which is 48.5% of the way between them. */
.supporter-avatar-wrapper.size-44 .supporter-badge-text {
    font-size: 0.40625rem;
    letter-spacing: 1.25px;
}

/* Text group - hover transform (translate down) */
.supporter-text-group {
    transition: transform var(--dur-slow) var(--ease-spring);
}

.supporter-avatar-wrapper:hover .supporter-text-group {
    transform: translateY(2px);
}

/* Reduced motion. The arc is an identity mark, so it stays and it keeps the
   author's colours - only its movement stops. The hover nudge is the one piece
   of motion CSS owns here; the looping gradient and the hover shimmer are rAF
   loops, gated the same way inside comment-supporter-badge.js.

   Deliberately a DESCENDANT selector, not the bare `.supporter-text-group`
   the rule above uses. The comment system inlines its own copy of that bare
   rule into the head of every page that imports it, AFTER this file's <link>,
   so an equal-specificity `transition: none` would tie and lose on source
   order — silently, on exactly the pages that carry the most arcs. Two
   classes outrank one whatever the load order turns out to be. */
@media (prefers-reduced-motion: reduce) {
    .supporter-avatar-wrapper .supporter-text-group {
        transition: none;
    }
}

/* Keep existing avatar badges working on supporter avatars */
.supporter-avatar-wrapper .avatar-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 5;
}

.supporter-avatar-wrapper.size-40 .avatar-badge {
    top: 4px !important;
    left: 4px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 7px !important;
}

/* Mobile responsive — shrink badge proportionally */
@media (max-width: 768px) {
    .supporter-avatar-wrapper.size-50 {
        width: 56px;
        height: 56px;
        margin: -6px;
    }

    .supporter-avatar-wrapper.size-50 .comment-avatar-img {
        width: 40px;
        height: 40px;
    }

    .supporter-avatar-wrapper.size-40 {
        width: 46px;
        height: 46px;
        margin: -5px;
    }

    .supporter-avatar-wrapper.size-40 .comment-avatar-img {
        width: 32px;
        height: 32px;
    }

    /* The post byline shrinks its own avatar to 32px here, so the wrapper
       shrinks by the SAME factor and the arc keeps its distance: 62 x 32/44
       = 45px, which puts the arc 4.65px below a 32px avatar (14.5%, the
       same band as the other two). margin -4.5px keeps the footprint at
       avatar + 4px. No .author-avatar rule: the page owns that size. */
    .supporter-avatar-wrapper.size-44 {
        width: 45px;
        height: 45px;
        margin: -4.5px;
    }
}