/*
 * Mangarama Avatar Frames - public stylesheet.
 *
 * Every rule below is scoped under .mangarama-avatar-* or
 * .mangarama-avatar-frame - no bare `img{}` or `.avatar{}`, so this cannot
 * leak into the Madara theme or any other plugin (spec section 29). The
 * base block is identical to assets/css/admin.css on purpose: the admin
 * live preview and the real frontend must render pixel-for-pixel the same.
 */

.mangarama-avatar-wrap {
    --frame-scale: 1;
    --frame-x: 0px;
    --frame-y: 0px;
    --frame-rotate: 0deg;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 0;
    max-width: 100%;
}

/* MAF_Renderer::render() owns this inner wrap and clips the avatar image to
   a circle. The two "partial/no control" render paths (frame_only_html(),
   wrap_get_avatar()) never introduce this element - they rely on the
   avatar image's own existing circular clip (every theme already applies
   one) so a frame can never end up clipped by a container it doesn't own. */
.mangarama-avatar-image-wrap {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.mangarama-avatar-image-wrap .mangarama-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mangarama-avatar-frame {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    /* Frames intentionally sit outside the avatar's circular clip and are
       allowed to overflow it - see spec section 61/62. */
    pointer-events: none;
    transform: translate(var(--frame-x), var(--frame-y)) scale(var(--frame-scale)) rotate(var(--frame-rotate));
    transform-origin: center;
    z-index: 2;
}

/* .mangarama-avatar-wrap--auto is the get_avatar-filter path: it wraps
   whatever markup it received (possibly already containing Mangarama
   Premium's own badge span) rather than rebuilding it, so it must never
   clip its contents. */
.mangarama-avatar-wrap--auto {
    overflow: visible;
}

/* The automatic get_avatar() path must derive one square from the actual
   avatar, not from a theme line box.  A block visual root removes the
   baseline/descender space that otherwise makes the 100%-high frame oval. */
.mangarama-avatar-wrap--auto > img.avatar,
.mangarama-avatar-wrap--auto > .mangarama-premium-avatar {
    display: block;
}

/* Keep Premium above the frame regardless of which get_avatar filter built
   the nested wrappers first. */
.mangarama-avatar-wrap .mangarama-premium-avatar {
    position: relative;
}
.mangarama-avatar-wrap .mangarama-premium-avatar__badge {
    z-index: 4 !important;
}

/*
 * Madara clips comment avatars to a circle on its own container, the same
 * problem Mangarama Premium's badge already had to work around. This is
 * duplicated defensively (not read from Premium) so frames render
 * correctly with or without Premium installed - spec section 16.
 */
#madara-comments .comment-avatar,
#madara-comments .comment-meta,
#madara-comments .comment-body > .block-left,
.comments-area .comment-avatar {
    overflow: visible !important;
}

#madara-comments .comment-avatar .mangarama-avatar-wrap--auto,
.comments-area .comment-avatar .mangarama-avatar-wrap--auto {
    display: inline-block !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 0 !important;
    vertical-align: top;
}

#madara-comments .comment-avatar .mangarama-avatar-wrap--auto > .mangarama-premium-avatar,
.comments-area .comment-avatar .mangarama-avatar-wrap--auto > .mangarama-premium-avatar {
    display: block !important;
    width: fit-content !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 0 !important;
}

#madara-comments .comment-avatar .mangarama-avatar-wrap--auto img.avatar,
.comments-area .comment-avatar .mangarama-avatar-wrap--auto img.avatar {
    display: block !important;
    margin: 0 !important;
}

/* Mobile: never let an oversized/asymmetric frame create horizontal scroll. */
@media (max-width: 480px) {
    .mangarama-avatar-frame {
        max-width: 220%;
    }
}