/* ===================================================== */
/* FOOTER */
/* ===================================================== */

.site-footer {
    position: relative;
    background: radial-gradient(900px 500px at 20% 0%, rgba(255,255,255,.05), transparent 60%), radial-gradient(700px 400px at 85% 20%, rgba(255,255,255,.04), transparent 55%), #0b1220;
    color: rgba(255,255,255,.85);
}

.footer-title {
    font-size: .75rem;
    letter-spacing: .18em;
    font-weight: 600;
    color: #e8cc64;
}

.footer-link {
    color: rgba(226,232,240,.8);
    font-size: .85rem;
    text-decoration: none;
    transition: color .2s ease;
}

    .footer-link:hover {
        color: #ffffff;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

.footer-divider {
    height: 1px;
    background: linear-gradient( to right, transparent, rgba(255,255,255,.2), transparent );
}

.footer-bottom {
    font-size: .75rem;
    color: rgba(255,255,255,.65);
}

    .footer-bottom strong {
        color: rgba(255,255,255,.9);
        font-weight: 600;
    }

/* ===================================================== */
/* NAVIGATION – FINAL */
/* ===================================================== */

.navlink {
    position: relative;
    font-size: .95rem;
    font-weight: 500;
    color: #0f172a;
    padding: .45rem 0;
    text-decoration: none;
    transition: color .2s ease;
}

    /* Desktop underline */
    .navlink::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: linear-gradient( 90deg, #e8cc64, #f3e7a3, #e8cc64 );
        box-shadow: 0 0 10px rgba(232,204,100,.45);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s cubic-bezier(.22,1,.36,1);
    }

    .navlink:hover {
        color: #020617;
    }

        .navlink:hover::after,
        .navlink.active::after {
            transform: scaleX(1);
        }

    /* Active desktop */
    .navlink.active {
        color: #020617;
        font-weight: 600;
    }

#navShell.bg-white .navlink.active {
    color: #020617;
}

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

@media (max-width: 768px) {

    .navlink {
        font-size: 1rem;
        padding: .85rem .9rem;
        border-radius: 12px;
    }

        .navlink::after {
            display: none;
        }

        .navlink:hover {
            background: rgba(232,204,100,.12);
        }

        .navlink.active {
            background: linear-gradient( 90deg, rgba(232,204,100,.25), rgba(232,204,100,.12) );
            border-left: 4px solid #e8cc64;
            padding-left: 1rem;
            font-weight: 600;
        }
}

/* ===================================================== */
/* TOP SOCIAL LINKS */
/* ===================================================== */

.top-social {
    position: relative;
    color: #475569;
    transition: color .25s ease, transform .25s ease;
}

    .top-social::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, #e8cc64, #f3e7a3, #e8cc64 );
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
        border-radius: 2px;
    }

    .top-social:hover {
        color: #020617;
        transform: translateY(-1px);
    }

        .top-social:hover::after {
            transform: scaleX(1);
        }