/* Your custom CSS here */

/* ========================================
   MINIMAL FIX FOR USER AVATAR OVERFLOW
   ======================================== */

/* Prevent horizontal scrolling caused by user avatars */
html, body {
    overflow-x: hidden !important;
}

#wrapper {
    overflow-x: hidden !important;
}

.main-container {
    overflow-x: hidden !important;
}

/* Fix user avatar stack to prevent page overflow */
.user-avatars-stack {
    overflow: visible !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
}

/* Disable avatar slide-in animation that causes horizontal overflow */
.user-avatars-stack .user-avatar-item {
    animation: none !important;
}

/* Fix avatar aspect ratio bug on desktop */
@media (min-width: 1200px) {
    .user-avatars-stack .user-avatar-item {
        width: 36px !important;
        height: 36px !important; /* Was 42px - now fixed to be square */
    }
}

/* Ensure hero subtitle with avatars doesn't overflow */
.hero-subtitle {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Ensure hero section doesn't cause overflow */
#homepage .intro,
#homepage .intro.hero-modern {
    overflow-x: hidden !important;
}

#homepage .hero-container {
    overflow-x: hidden !important;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}