/* =========================================================
   THE WOUNDED LEGACY
   SIDEBAR PÚBLICA
========================================================= */

:root {
    --sidebar-width: 190px;

    --sidebar-dark: #0B0E1A;
    --sidebar-dark-2: #101321;

    --sidebar-gold: #B29758;
    --sidebar-cream: #E8E2D5;
    --sidebar-text: #CBC6BD;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            var(--sidebar-dark),
            var(--sidebar-dark-2)
        );

    border-right:
        1px solid
        rgba(178,151,88,.16);
}


.sidebar-main {
    min-width: 0;
}


/* =========================================================
   LOGO
========================================================= */

.logo-link {
    display: block;
}


.logo-block {
    padding:
        20px
        12px
        17px;

    text-align: center;

    border-bottom:
        1px solid
        rgba(178,151,88,.11);
}


.logo-title {
    margin: 0;

    color:
        var(--sidebar-gold);

    font-family:
        'Cinzel Decorative',
        serif;

    font-size:
        30px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        2px;

    animation:
        sidebarGoldPulse
        3.2s
        ease-in-out
        infinite;
}


.logo-subtitle {
    margin-top:
        7px;

    color:
        var(--sidebar-cream);

    font-family:
        'Cinzel',
        serif;

    font-size:
        8.5px;

    line-height:
        1.5;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


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

.sidebar-menu {
    padding:
        16px
        10px
        18px;
}


.sidebar-label {
    margin:
        0 0 8px;

    padding:
        0 5px;

    color:
        rgba(178,151,88,.68);

    font-family:
        'Cinzel',
        serif;

    font-size:
        8.5px;

    letter-spacing:
        1.3px;
}


/* =========================================================
   USUÁRIO LOGADO
========================================================= */

.sidebar-userbox {
    margin-bottom:
        10px;

    padding:
        10px;

    border:
        1px solid
        rgba(178,151,88,.14);

    background:
        rgba(255,255,255,.012);
}


.sidebar-userbox small {
    display:
        block;

    margin-bottom:
        4px;

    color:
        rgba(203,198,189,.46);

    font-size:
        7.5px;
}


.sidebar-userbox strong {
    display:
        block;

    color:
        var(--sidebar-gold);

    font-family:
        'Cinzel',
        serif;

    font-size:
        10px;

    font-weight:
        500;
}


/* =========================================================
   LINKS
========================================================= */

.sidebar-nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.sidebar-link {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px
        8px;

    color:
        #DDD4C4;

    border:
        1px solid
        transparent;

    transition:
        color .24s ease,
        border-color .24s ease,
        background .24s ease,
        transform .24s ease;
}


.sidebar-link:hover {
    color:
        var(--sidebar-gold);

    border-color:
        rgba(178,151,88,.17);

    background:
        rgba(178,151,88,.045);

    transform:
        translateX(2px);
}


.sidebar-link svg {
    width:
        16px;

    height:
        16px;

    flex:
        0 0 16px;

    fill:
        currentColor;
}


.sidebar-link span {
    font-size:
        10px;
}


/* =========================================================
   DISCORD
========================================================= */

.sidebar-bottom {
    margin-top:
        12px;

    padding:
        12px
        0
        2px;

    display:
        flex;

    justify-content:
        center;

    border-top:
        1px solid
        rgba(178,151,88,.11);
}


.discord-link {
    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(178,151,88,.28);

    border-radius:
        50%;

    color:
        var(--sidebar-gold);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.discord-link:hover {
    transform:
        translateY(-2px)
        scale(1.05);

    border-color:
        rgba(178,151,88,.55);

    background:
        rgba(178,151,88,.06);
}


.discord-link svg {
    width:
        19px;

    height:
        19px;

    fill:
        currentColor;
}


/* =========================================================
   ANIMAÇÃO
========================================================= */

@keyframes sidebarGoldPulse {

    0%,
    100% {

        text-shadow:
            0 0 5px
            rgba(178,151,88,.10),
            0 0 12px
            rgba(178,151,88,.04);
    }

    50% {

        text-shadow:
            0 0 9px
            rgba(178,151,88,.27),
            0 0 18px
            rgba(178,151,88,.10);
    }

}


/* =========================================================
   ATÉ 1500px
========================================================= */

@media (max-width: 1500px) {

    :root {
        --sidebar-width:
            170px;
    }

}


/* =========================================================
   ATÉ 1200px
========================================================= */

@media (max-width: 1200px) {

    :root {
        --sidebar-width:
            145px;
    }

}


/* =========================================================
   ATÉ 900px
========================================================= */

@media (max-width: 900px) {

    :root {
        --sidebar-width:
            72px;
    }


    .logo-title {
        font-size:
            19px;
    }


    .logo-subtitle,
    .sidebar-label,
    .sidebar-userbox,
    .sidebar-link span {
        display:
            none;
    }


    .sidebar-menu {
        padding:
            10px
            4px;
    }


    .sidebar-link {
        justify-content:
            center;
    }


    .sidebar-link svg {
        width:
            15px;

        height:
            15px;
    }


    .sidebar-bottom {
        margin-top:
            10px;

        padding:
            10px
            0
            2px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .sidebar {
        display:
            block;

        width:
            100%;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(178,151,88,.15);
    }


    .logo-title {
        font-size:
            21px;
    }


    .logo-subtitle,
    .sidebar-label,
    .sidebar-userbox,
    .sidebar-link span {
        display:
            block;
    }


    .sidebar-menu {
        padding:
            10px
            14px;
    }


    .sidebar-nav {
        max-width:
            360px;

        margin:
            0 auto;

        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );

        gap:
            5px;
    }


    .sidebar-link {
        justify-content:
            center;

        text-align:
            center;
    }


    .sidebar-bottom {
        max-width:
            360px;

        margin:
            12px auto 0;

        padding:
            12px
            0
            2px;
    }

}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 430px) {

    .sidebar-nav {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   FULL HD
========================================================= */

@media
(min-width: 1600px)
and (min-height: 900px) {

    :root {
        --sidebar-width:
            205px;
    }

}