/**
 * ==========================================================
 * RaFi Community
 * Module : Community Menu
 * File   : community-menu.css
 * Version: 1.0.0
 * ==========================================================
 */


/* ==========================================================
   Community Menu Card
   ========================================================== */

.rafi-community-menu {
    width: 100%;
    box-sizing: border-box;
}

.rafi-community-menu-card {
    width: 100%;
    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.05);

    overflow: hidden;
}


/* ==========================================================
   Menu Title
   ========================================================== */

.rafi-community-menu-title {
    padding: 15px 17px;

    border-bottom: 1px solid #eeeeee;

    color: #17213d;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}


/* ==========================================================
   Navigation
   ========================================================== */

.rafi-community-menu-nav {
    padding: 8px;
}


/* ==========================================================
   Menu Item
   ========================================================== */

.rafi-community-menu-item {
    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;
    min-height: 44px;

    padding: 9px 11px;
    margin: 2px 0;

    box-sizing: border-box;

    border-radius: 9px;

    color: #374151;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.12s ease;
}


/* ==========================================================
   Icon
   ========================================================== */

.rafi-community-menu-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 26px;
    min-width: 26px;
    height: 26px;

    font-size: 18px;
    line-height: 1;
}


/* ==========================================================
   Text
   ========================================================== */

.rafi-community-menu-text {
    min-width: 0;

    line-height: 1.35;
}


/* ==========================================================
   Hover
   ========================================================== */

.rafi-community-menu-item:hover {
    background: #f3f6fb;

    color: #18285c;

    text-decoration: none !important;
}


/* ==========================================================
   Active
   ========================================================== */

.rafi-community-menu-item.is-active {
    background: #eef4ff;

    color: #18285c;

    font-weight: 700;
}


/* ==========================================================
   Disabled
   ========================================================== */

.rafi-community-menu-item.rafi-community-menu-disabled {
    opacity: 0.48;

    cursor: not-allowed;
}

.rafi-community-menu-item.rafi-community-menu-disabled:hover {
    background: transparent;

    color: #374151;

    transform: none;
}


/* ==========================================================
   COMMUNITY PAGE ONLY
   IMPORTANT:
   Nothing below this point affects Home page.
   ========================================================== */

@media (min-width: 901px) {

    /* Main Community wrapper */
    body:has(.rafi-community-menu-slot) .rafi-posts-wrapper {

        width: calc(100% - 48px) !important;

        max-width: 1280px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;

        grid-template-columns:
            250px
            minmax(0, 1fr);

        gap: 24px;

        align-items: start;

        box-sizing: border-box;
    }


    /* ======================================================
       LEFT MENU
       ====================================================== */

    body:has(.rafi-community-menu-slot)
    .rafi-community-menu-slot {

        width: 250px !important;

        grid-column: 1;

        grid-row: 1 / span 50;

        position: relative !important;

        top: auto !important;
        left: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        align-self: start;
    }


    /* ======================================================
       COMPOSER
       ====================================================== */

    body:has(.rafi-community-menu-slot)
    .rafi-posts-wrapper > .rafi-post-composer,

    body:has(.rafi-community-menu-slot)
    .rafi-posts-wrapper > .rafi-login-community-message {

        grid-column: 2;

        width: 100% !important;

        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box;
    }


    /* ======================================================
       COMMUNITY FEED
       ====================================================== */

    body:has(.rafi-community-menu-slot)
    .rafi-posts-wrapper > .rafi-community-feed {

        grid-column: 2;

        width: 100% !important;

        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box;
    }


    body:has(.rafi-community-menu-slot)
    .rafi-community-feed {

        width: 100% !important;

        max-width: none !important;
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 900px) {

    body:has(.rafi-community-menu-slot)
    .rafi-community-menu-slot {

        display: none !important;
    }

}