/*====================================================
MOBILE HEADER BASE
====================================================*/

.mobile-header{

    display:none;
}

.mobile-nav{

    position:fixed;
    inset:0;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    display:flex;

    flex-direction:column;

    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    width:100vw;
    height:var(--hh24-mobile-vh, 100vh);
    max-height:var(--hh24-mobile-vh, 100vh);
    min-height:var(--hh24-mobile-vh, 100vh);
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
    overscroll-behavior:contain;

    background:#000;

    z-index:2147483647 !important;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(-100%, 0, 0);
    transition:transform .35s ease, opacity .25s ease, visibility .25s ease;
}

body.mobile-menu-open{
    padding-bottom:0 !important;
}

body.mobile-menu-open .mobile-header{
    opacity:0;
    pointer-events:none;
}

.mobile-nav-top{

    position:sticky;

    top:0;

    z-index:1000;

    display:grid;

    grid-template-columns:80px 1fr 80px;

    align-items:center;

    height:64px;

    padding:0 16px;

    background:#000;

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

.mobile-submit-music{

    width:auto;

    height:34px;

    padding:0 6px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.88);

    background:transparent;

    color:#fff;

    text-decoration:none;

    font-size:8px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    white-space:nowrap;
}

body.mobile-menu-open .hh24-bottom-sticky-ad{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(105%) !important;
}

body.mobile-menu-open{
    --hh24-bottom-ad-height:0px !important;
}

.mobile-nav-logo{

    display:flex;

    justify-content:center;
}

.mobile-nav-logo img{

    width:87px;

    height:auto;

    display:block;
}

.mobile-menu-close{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    background:none;

    border:0;

    padding:0;

    cursor:pointer;
}

.mobile-menu-close img{

    width:22px;

    height:22px;

    display:block;
}

.mobile-social{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

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

.mobile-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;
}

.mobile-social img{

    width:22px;

    height:22px;

    display:block;

    filter:brightness(0) invert(1);
}

.mobile-nav.active{

    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0, 0, 0);
}

.mobile-menu{

    margin:0;

    padding:20px 0;

    list-style:none;
}

.mobile-menu li{

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

.mobile-menu a{

    display:block;

    padding:16px 20px;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    text-transform:uppercase;
}

.mobile-menu a:hover{

    background:#dd111a;
}

.submenu-arrow{

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    cursor:pointer;
}

.submenu-arrow img{

    width:14px;

    height:14px;

    display:block;

    filter:brightness(0) invert(1);
}

.mobile-menu .sub-menu{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
        max-height .35s ease,
        opacity .25s ease;
}

.mobile-menu .submenu-open > .sub-menu{

    max-height:500px;

    opacity:1;
}

/*====================================================
NEWSLETTER
====================================================*/

.mobile-newsletter{

    padding:16px 20px calc(32px + env(safe-area-inset-bottom, 0px));

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

.mobile-newsletter h3{

    margin:0 0 6px;

    color:#fff;

    font-size:16px;

    font-weight:700;
}

.mobile-newsletter p{

    margin:0 0 10px;

    color:#bcbcbc;

    font-size:12px;

    line-height:1.45;
}

.mobile-newsletter-message{

    width:84%;

    margin:0 0 10px;

    padding:10px 12px;

    border:1px solid rgba(255,255,255,.12);

    font-size:12px;

    line-height:1.45;

    box-sizing:border-box;
}

.mobile-newsletter-message--success{

    background:rgba(18,142,86,.14);

    border-color:rgba(40,194,120,.45);

    color:#dff7ea;
}

.mobile-newsletter-message--error{

    background:rgba(221,17,26,.14);

    border-color:rgba(221,17,26,.42);

    color:#ffe5e7;
}

.mobile-newsletter input{

    width:84%;

    height:40px;

    padding:0 12px;

    background:#1a1a1a;

    border:1px solid #333;

    border-radius:4px;

    color:#fff;

    font-size:16px;
    line-height:1.2;

    box-sizing:border-box;

    margin-bottom:10px;
}

.mobile-newsletter-btn{

    width:84%;

    height:34px;

    border:1px solid rgba(255,255,255,.85);

    border-radius:0;

    background:transparent;

    color:#fff;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    cursor:pointer;

    transition:.25s;
}

.mobile-newsletter-btn:hover{

    background:#dd111a;
    border-color:#dd111a;
}

.mobile-signin-icon{

    width:12px;

    height:12px;

    display:block;
}

/*====================================================
DESKTOP DROPDOWN MENU
====================================================*/

@media (min-width:769px){

    .header-menu > li{

        position:relative;
    }

    .header-menu > li > a{

        display:flex;

        align-items:center;

        gap:6px;
    }

    .header-menu .menu-item-has-children > a::after{

        content:"";

        width:10px;

        height:10px;

        display:block;

        background:url("https://24hip-hop.com/wp-content/uploads/2026/07/down-svg.svg") center center/contain no-repeat;

        filter:brightness(0) invert(1);

        transition:transform .25s ease;
    }

    .header-menu > li:hover > a::after{

        transform:rotate(180deg);
    }

    .header-menu > li > .sub-menu{

        position:absolute;

        top:67px;

        left:0;

        min-width:190px;

        background:#000;

        padding:12px 0;

        margin:0;

        list-style:none;

        display:none;

        z-index:99999;
    }

    .header-menu > li:hover > .sub-menu{

        display:block;
    }

    .header-menu .sub-menu li{

        height:auto;
    }

    .header-menu .sub-menu a{

        display:block;

        padding:12px 24px;

        color:#fff;

        font-size:15px;

        font-weight:700;

        text-transform:uppercase;

        text-decoration:none;

        white-space:nowrap;
    }

    .header-menu .sub-menu a:hover{

        color:#dd111a;
    }
}

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

@media (max-width:1500px){

    .header-container{

        padding:0 20px;
    }

    .header-left{

        margin-left:90px;

        gap:34px;
    }

    .header-menu{

        gap:22px;
    }

    .header-menu a{

        font-size:15px;
    }

    .header-search{

        width:208px;
    }
}

@media (max-width:1350px){

    .header-menu{

        gap:18px;
    }

    .header-left{

        margin-left:52px;

        gap:28px;
    }

    .header-logo{

        width:170px;

        height:40px;
    }

    .header-menu a{

        font-size:14px;
    }

    .header-search{

        width:186px;
    }
}

@media (max-width:1200px){

    .header-menu{

        gap:14px;
    }

    .header-left{

        margin-left:24px;

        gap:22px;
    }

    .header-logo{

        width:170px;

        height:40px;
    }

    .header-menu a{

        font-size:13px;
    }

    .header-search{

        width:164px;
    }

    .account-btn{

        min-width:82px;

        font-size:12px;
    }
}

@media (max-width:1024px){

    .header-container{

        padding:0 16px;
    }

    .header-left{

        margin-left:0;

        gap:16px;
    }

    .header-logo{

        width:170px;

        height:40px;
    }

    .header-menu{

        gap:10px;
    }

    .header-menu a{

        font-size:12px;
    }

    .header-search{

        width:144px;
    }

    .account-btn{

        min-width:74px;

        font-size:12px;
    }
}

@media (max-width:768px){

    .site-header{

        display:none !important;
    }

        .mobile-header{

        display:block !important;

        position:sticky;

        top:0;

        z-index:99999;

        width:100%;

        height:54px;

        background:#000000;

        border-bottom:1px solid rgba(255,255,255,.08);
    }    .mobile-header-inner{

        width:100%;

        height:54px;

        padding:0 16px;

        display:grid;

        position:relative;

        grid-template-columns:40px 1fr 30px 40px;

        gap:8px;

        align-items:center;

        box-sizing:border-box;
    }    .mobile-menu-toggle{

        width:40px;
        height:54px;

        grid-column:1;

        display:flex;

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

        padding:0;

        background:none;
        border:0;

        cursor:pointer;
    }

    .mobile-menu-toggle img,
    .mobile-menu-toggle svg{

        width:24px !important;
        height:24px !important;

        min-width:24px;

        display:block;

        object-fit:contain;

        filter:brightness(0) invert(1);
    }

    .mobile-logo{

        display:flex;

        width:87px;

        height:40px;

        position:absolute;

        left:50%;

        top:50%;

        transform:translate(-50%, -50%);

        justify-content:center;

        align-items:center;

        margin:0 auto;
    }

    .mobile-logo img{
        width:100%;
        height:auto;
        object-fit:contain;
    }

    .mobile-charts-link{

        width:30px;

        height:54px;

        grid-column:3;

        display:flex;

        align-items:center;

        justify-content:center;

        justify-self:end;

        filter:brightness(0) invert(1);

    }

    .mobile-charts-link img{
        width:23px;
        height:23px;
        display:block;
        object-fit:contain;
    }

    .mobile-play{

        width:40px;

        height:54px;

        grid-column:4;

        display:flex;

        align-items:center;

        justify-content:flex-end;

        justify-self:end;

        filter:brightness(0) invert(1);

    }

    .mobile-play img{
        width:22px;
        height:22px;
        display:block;
        object-fit:contain;
    }

.mobile-search{

        position:relative;

        margin:20px;

        height:46px;
    }

    .mobile-search input{

        width:100%;

        height:46px;

        background:#0a0a0a;

        border:1px solid #2c2c2c;

        color:#fff;

        border-radius:0;

        font-size:16px;

        -webkit-appearance:none;

        appearance:none;

        padding:0 50px 0 16px;

        box-sizing:border-box;

        outline:none;
    }

    .mobile-search input::placeholder{

        color:#d0d0d0;
    }

    .mobile-search button{

        position:absolute;

        right:14px;

        top:50%;

        transform:translateY(-50%);

        width:22px;

        height:22px;

        background:none;

        border:0;

        padding:0;

        cursor:pointer;
    }

    .mobile-search button img{

        width:20px;

        height:20px;

        display:block;
    }

    .mobile-menu{

        margin:0;

        padding:0;

        list-style:none;
    }

    .mobile-menu > li{

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

        position:relative;
    }

    .mobile-menu > li > a{

        display:flex;

        align-items:center;

        justify-content:space-between;

        min-height:58px;

        padding:0 20px;

        color:#ffffff;

        text-decoration:none;

        font-size:17px;

        font-weight:700;

        letter-spacing:.3px;

        text-transform:uppercase;
    }

    .mobile-menu li ul{

        display:none;

        margin:0;

        padding:0;

        list-style:none;

        background:#070707;
    }

    .mobile-menu li ul li a{

        display:block;

        padding:14px 34px;

        color:#f1f1f1;

        text-decoration:none;

        font-size:15px;

        text-transform:none;
    }

    .mobile-menu li ul li a:hover{

        color:#fff;
    }

    .mobile-menu .submenu-open > ul{

        display:block;
    }
}