/* =========================================================
   NAVIGATION
   ========================================================= */

.site-navigation {
    display: flex;
    align-items: center;
    gap: 30px;
}

.site-navigation a {
    position: relative;

    color: #F5F3FF !important;

    font-size: 13px;
    font-weight: 500;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.site-navigation a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--color-primary);

    box-shadow:
        0 0 10px rgba(139, 92, 246, 0.5);

    transition: width var(--transition-base);
}

.site-navigation a:hover,
.site-navigation a:focus-visible,
.site-navigation a.is-active {
    color: #C084FC !important;
}

.site-navigation a:hover::after,
.site-navigation a:focus-visible::after,
.site-navigation a.is-active::after {
    width: 100%;
}