/*==================================================
WILDSTYLE HEADER v4
PART 2
==================================================*/

:root{

    --ws-bg:#0d0818;
    --ws-panel:#171127;

    --ws-pink:#ff2a6d;
    --ws-blue:#6d6cff;

    --ws-text:#ffffff;
    --ws-muted:#b8b4c8;

    --ws-border:rgba(255,255,255,.08);

}

/*==================================================
HEADER
==================================================*/

.ws-header{

    position:sticky;

    top:0;

    z-index:5000;

    height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 24px;

    background:rgba(13,8,24,.96);

    backdrop-filter:blur(16px);

    border-bottom:1px solid var(--ws-border);

}

.ws-left{

    display:flex;
    align-items:center;

    gap:18px;

}

/*==================================================
BURGER
==================================================*/

.ws-burger{

    display:none;

    width:48px;
    height:48px;

    border:none;

    background:none;

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    transition:.25s;

}

.ws-burger:hover{

    color:var(--ws-pink);

}

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

.ws-logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

}

.ws-logo-image{

    width:44px;
    height:44px;

    object-fit:contain;

}

.ws-logo-text{

    display:flex;
    flex-direction:column;

}

.ws-logo-text strong{

    color:#fff;

    font-family:Oswald,sans-serif;

    font-size:1.35rem;

    line-height:1;

}

.ws-logo-text span{

    color:var(--ws-muted);

    font-size:.72rem;

    margin-top:4px;

}

/*==================================================
DESKTOP NAV
==================================================*/

.ws-nav{

    display:flex;

    align-items:center;

    gap:30px;

}

.ws-nav a{

    position:relative;

    color:var(--ws-muted);

    text-decoration:none;

    transition:.25s;

}

.ws-nav a:hover{

    color:#fff;

}

.ws-nav a.active{

    color:var(--ws-pink);

}

.ws-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        var(--ws-pink),
        var(--ws-blue)
    );

    transition:.25s;

}

.ws-nav a:hover::after,
.ws-nav a.active::after{

    width:100%;

}

/*==================================================
LISTEN BUTTON
==================================================*/

.ws-live{

    display:flex;

    align-items:center;

    gap:10px;

    padding:11px 22px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(
        90deg,
        var(--ws-pink),
        #d60066
    );

    box-shadow:0 0 20px rgba(255,42,109,.35);

}

.ws-live:hover{

    transform:translateY(-2px);

}

.ws-live .dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#fff;

    animation:livePulse 1.2s infinite;

}

@keyframes livePulse{

    0%,100%{

        opacity:1;
        transform:scale(1);

    }

    50%{

        opacity:.45;
        transform:scale(.65);

    }

}

/*==================================================
OVERLAY
==================================================*/

.ws-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.ws-overlay.show{

    opacity:1;

    visibility:visible;

}

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

.ws-mobile{

    position:fixed;

    top:0;
    left:-320px;

    width:290px;

    max-width:86vw;

    height:100vh;

    background:linear-gradient(
        180deg,
        #1a1330,
        #0d0818
    );

    display:flex;

    flex-direction:column;

    transition:left .35s ease;

    z-index:9999;

    box-shadow:18px 0 45px rgba(0,0,0,.55);

}

.ws-mobile.open{

    left:0;

}

/*==================================================
HEADER V4 - PART 3
==================================================*/

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

.ws-mobile-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:22px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.ws-brand{

    display:flex;
    align-items:center;

    gap:14px;

}

.ws-brand-logo{

    width:54px;
    height:54px;

    border-radius:14px;

    object-fit:cover;

    box-shadow:0 0 18px rgba(255,42,109,.25);

}

.ws-brand-text{

    display:flex;
    flex-direction:column;

}

.ws-brand-text strong{

    color:#fff;

    font-family:Oswald,sans-serif;

    font-size:1.15rem;

}

.ws-brand-text span{

    color:#9e96b6;

    font-size:.72rem;

    margin-top:4px;

}

#wsClose{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:1.5rem;

    cursor:pointer;

    transition:.25s;

}

#wsClose:hover{

    background:#ff2a6d;

}

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

.ws-mobile-links{

    flex:1;

    padding:18px 0;

}

.ws-mobile-links a{

    display:flex;
    align-items:center;

    gap:16px;

    padding:16px 24px;

    color:#d7d3e3;

    text-decoration:none;

    font-size:1rem;

    border-left:4px solid transparent;

    transition:.25s;

}

.ws-mobile-links a:hover{

    background:rgba(255,42,109,.10);

    border-left-color:#ff2a6d;

    color:#fff;

    padding-left:30px;

}

.ws-mobile-links a.active{

    color:#ff2a6d;

    font-weight:600;

    background:rgba(255,42,109,.12);

    border-left-color:#ff2a6d;

}

/*=========================================
SOCIAL
=========================================*/

.ws-social{

    padding:20px 24px;

    border-top:1px solid rgba(255,255,255,.08);

}

.ws-social h4{

    color:#fff;

    font-size:.82rem;

    letter-spacing:1px;

    margin-bottom:14px;

}

.ws-social a{

    display:block;

    padding:10px 0;

    color:#a9a3bd;

    text-decoration:none;

    transition:.25s;

}

.ws-social a:hover{

    color:#fff;

    padding-left:6px;

}

/*=========================================
BOTTOM BUTTON
=========================================*/

.ws-mobile-footer{

    padding:20px;

}

.ws-live.mobile{

    width:100%;

    justify-content:center;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:900px){

    .ws-burger{

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

    }

    .ws-nav{

        display:none;

    }

}

@media(min-width:901px){

    .ws-mobile,
    .ws-overlay{

        display:none;

    }

}

@media(max-width:600px){

    .ws-logo-text span{

        display:none;

    }

}

@media(max-width:520px){

    .ws-logo-text{

        display:none;

    }

    .ws-live{

        display:none;

    }

}

/*=========================================
SMOOTH TRANSITIONS
=========================================*/

.ws-header,
.ws-mobile,
.ws-overlay,
.ws-live,
.ws-nav a,
.ws-mobile-links a{

    transition:all .25s ease;

}

/*=========================================
ACCESSIBILITY
=========================================*/

.ws-burger:focus,
#wsClose:focus,
.ws-nav a:focus,
.ws-mobile-links a:focus{

    outline:2px solid #ff2a6d;

    outline-offset:3px;

}