/* =========================================================
       FIVE FM – GLOBAL HEADER V3
    ========================================================= */

    :root{

        --fivefm-blue:#168cff;
        --fivefm-blue-dark:#0e5ca8;

        --fivefm-header-bg-1:#07345f;
        --fivefm-header-bg-2:#0a4b82;
        --fivefm-header-bg-3:#0b2d50;

        --fivefm-dark:#050d18;

    }


    /* =========================================================
       GLOBAL SAFETY
    ========================================================= */

    html,
    body{

        max-width:100%;

    }


    body{

        padding-top:112px;

    }



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

    #fivefm-global-header{

        position:fixed;

        top:0;
        left:0;
        right:0;

        z-index:99990;

        width:100%;
        max-width:100%;

        padding:
            18px 22px;

        pointer-events:none;

        transition:
            padding .25s ease,
            background .25s ease,
            box-shadow .25s ease;

    }


    #fivefm-global-header.is-scrolled{

        padding-top:10px;
        padding-bottom:10px;

        background:
            rgba(4,11,20,.80);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);

        box-shadow:
            0 12px 40px
            rgba(0,0,0,.24);

    }



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

    .fivefm-header-shell{

        width:100%;
        max-width:1280px;

        min-height:78px;

        margin:0 auto;

        padding:
            0 22px;

        display:flex;

        align-items:center;

        gap:22px;

        border:
            1px solid
            rgba(22,140,255,.55);

        border-radius:12px;

        background:
            linear-gradient(
                110deg,
                #07335d 0%,
                #0c4f87 47%,
                #092f55 100%
            );

        box-shadow:
            0 12px 38px
            rgba(0,0,0,.28),

            0 0 28px
            rgba(22,140,255,.08),

            inset 0 1px 0
            rgba(255,255,255,.05);

        pointer-events:auto;

    }



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

    .fivefm-header-logo{

        flex:
            0 0 120px;

        width:120px;
        height:70px;

        display:flex;

        align-items:center;

        justify-content:center;

        padding-right:20px;

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

        text-decoration:none !important;

    }


    .fivefm-header-logo img{

        display:block;

        width:auto;
        max-width:105px;

        height:auto;
        max-height:62px;

        margin:0 !important;

        object-fit:contain;

        filter:
            drop-shadow(
                0 0 9px
                rgba(22,140,255,.18)
            );

    }



    /* =========================================================
       LISTEN LIVE
    ========================================================= */

    .fivefm-header-listen{

        flex:
            0 0 auto;

        height:44px;

        padding:
            0 18px;

        display:inline-flex;

        align-items:center;

        justify-content:center;

        gap:9px;

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

        border-radius:24px;

        background:#02060b;

        color:#ffffff !important;

        box-shadow:
            0 7px 20px
            rgba(0,0,0,.30);

        font-family:
            Montserrat,
            Arial,
            sans-serif;

        font-size:10px;

        font-weight:800;

        letter-spacing:.7px;

        text-decoration:none !important;

        white-space:nowrap;

        transition:
            transform .2s ease,
            background .2s ease,
            box-shadow .2s ease;

    }


    .fivefm-header-listen:hover{

        transform:
            translateY(-2px);

        background:#07111d;

        box-shadow:
            0 10px 25px
            rgba(0,0,0,.34);

    }


    .fivefm-header-play{

        width:23px;
        height:23px;

        display:flex;

        align-items:center;

        justify-content:center;

        flex:
            0 0 23px;

        border-radius:50%;

        background:#ffffff;

        color:#06111e;

        font-size:9px;

        padding-left:2px;

    }



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

    .fivefm-header-nav{

        min-width:0;

        flex:1;

        display:flex;

        align-items:center;

        justify-content:flex-end;

        gap:5px;

    }


    .fivefm-header-nav a{

        position:relative;

        min-height:76px;

        padding:
            0 13px;

        display:flex;

        align-items:center;

        justify-content:center;

        color:
            rgba(255,255,255,.91) !important;

        font-family:
            Montserrat,
            Arial,
            sans-serif;

        font-size:12px;

        font-weight:700;

        line-height:1;
		
		word-spacing: 0px;

        white-space:nowrap;

        text-decoration:none !important;

        transition:
            color .2s ease,
            background .2s ease;

    }


    .fivefm-header-nav a::after{

        content:"";

        position:absolute;

        left:50%;
        bottom:13px;

        width:0;
        height:3px;

        border-radius:3px;

        background:#168cff;

        transform:
            translateX(-50%);

        opacity:0;

        transition:
            width .2s ease,
            opacity .2s ease;

    }


    .fivefm-header-nav a:hover{

        color:#ffffff !important;

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

    }


    .fivefm-header-nav a:hover::after{

        width:22px;

        opacity:.65;

    }


    .fivefm-header-nav a.is-active{

        color:#ffffff !important;

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

    }


    .fivefm-header-nav a.is-active::after{

        width:28px;

        opacity:1;

    }



    /* =========================================================
       HAMBURGER
    ========================================================= */

    .fivefm-header-toggle{

        display:none;

        flex:
            0 0 46px;

        width:46px;
        height:46px;

        margin-left:auto;

        padding:0;

        align-items:center;

        justify-content:center;

        flex-direction:column;

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

        border-radius:8px;

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

        cursor:pointer;

        position:relative;

        z-index:5;

        box-shadow:none;

    }


    .fivefm-header-toggle span{

        display:block;

        width:20px;
        height:2px;

        flex:
            0 0 2px;

        margin:3px 0;

        border-radius:2px;

        background:#ffffff;

        transition:
            transform .25s ease,
            opacity .25s ease;

    }


    .fivefm-header-toggle.is-open span:nth-child(1){

        transform:
            translateY(8px)
            rotate(45deg);

    }


    .fivefm-header-toggle.is-open span:nth-child(2){

        opacity:0;

    }


    .fivefm-header-toggle.is-open span:nth-child(3){

        transform:
            translateY(-8px)
            rotate(-45deg);

    }



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

    .fivefm-mobile-menu{

        display:none;

        width:100%;
        max-width:1280px;

        margin:
            8px auto 0;

        padding:
            0 14px;

        pointer-events:auto;

    }


    .fivefm-mobile-inner{

        overflow:hidden;

        border:
            1px solid
            rgba(22,140,255,.28);

        border-radius:10px;

        background:
            rgba(5,15,27,.985);

        box-shadow:
            0 22px 48px
            rgba(0,0,0,.34);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

    }


    .fivefm-mobile-inner a{

        min-height:54px;

        padding:
            0 18px;

        display:flex;

        align-items:center;

        justify-content:
            space-between;

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

        color:#ffffff !important;

        font-family:
            Montserrat,
            Arial,
            sans-serif;

        font-size:12px;

        font-weight:700;

        text-decoration:none !important;

    }


    .fivefm-mobile-inner a:last-child{

        border-bottom:0;

    }


    .fivefm-mobile-inner b{

        color:#168cff;

        font-size:14px;

        font-weight:700;

    }



    /* =========================================================
       MID DESKTOP
    ========================================================= */

    @media(max-width:1280px){


        .fivefm-header-shell{

            gap:15px;

            padding:
                0 16px;

        }


        .fivefm-header-logo{

            flex:
                0 0 100px;

            width:100px;

            padding-right:14px;

        }


        .fivefm-header-logo img{

            max-width:88px;
            max-height:56px;

        }


        .fivefm-header-listen{

            padding:
                0 14px;

            font-size:9px;

        }


        .fivefm-header-nav{

            gap:1px;

        }


        .fivefm-header-nav a{

            padding:
                0 9px;

            font-size:9px;

        }


    }



    /* =========================================================
       TABLET
    ========================================================= */

    @media(max-width:1024px){


        body{

            padding-top:92px;

        }


        #fivefm-global-header{

            padding:
                11px 12px;

        }


        .fivefm-header-shell{

            width:100%;

            max-width:100%;

            min-height:66px;

            padding:
                0 12px;

            gap:12px;

            overflow:visible;

        }


        .fivefm-header-nav{

            display:none;

        }


        .fivefm-header-toggle{

            display:flex;

        }


        .fivefm-header-logo{

            flex:
                0 0 92px;

            width:92px;
            height:60px;

        }


        .fivefm-header-logo img{

            max-width:80px;
            max-height:52px;

        }


        .fivefm-mobile-menu.is-open{

            display:block;

            animation:
                fivefmMobileMenuIn
                .22s ease;

        }


    }



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

    @media(max-width:600px){


        body{

            padding-top:82px;

        }


        #fivefm-global-header{

            width:100%;

            max-width:100%;

            padding:
                8px;

        }


        .fivefm-header-shell{

            width:100%;
            max-width:100%;

            min-height:62px;

            padding:
                0 9px;

            gap:7px;

            border-radius:9px;

            overflow:visible;

        }



        /* LOGO */

        .fivefm-header-logo{

            flex:
                0 0 68px;

            width:68px;
            height:52px;

            padding-right:8px;

            flex-shrink:0;

        }


        .fivefm-header-logo img{

            width:auto;

            max-width:60px;
            max-height:45px;

        }



        /* LISTEN */

        .fivefm-header-listen{

            flex:
                0 0 auto;

            flex-shrink:0;

            height:36px;

            padding:
                0 10px;

            gap:6px;

            font-size:7px;

            letter-spacing:.45px;

        }


        .fivefm-header-play{

            width:19px;
            height:19px;

            flex:
                0 0 19px;

            font-size:7px;

        }



        /* HAMBURGER */

        .fivefm-header-toggle{

            display:flex;

            flex:
                0 0 40px;

            flex-shrink:0;

            width:40px;
            min-width:40px;

            height:40px;

            margin-left:auto;

            padding:0;

            position:relative;

            right:auto;
            left:auto;

            transform:none;

            z-index:20;

        }



        /* MOBILE MENU */

        .fivefm-mobile-menu{

            width:100%;
            max-width:100%;

            padding:
                0 8px;

            margin-top:6px;

        }


        .fivefm-mobile-inner a{

            min-height:50px;

            padding:
                0 16px;

            font-size:11px;

        }


    }



    /* =========================================================
       414px / 430px MOBILE FIX
    ========================================================= */

    @media(max-width:440px){


        #fivefm-global-header{

            padding:
                7px;

        }


        .fivefm-header-shell{

            min-height:60px;

            padding:
                0 8px;

            gap:6px;

        }


        .fivefm-header-logo{

            flex-basis:62px;

            width:62px;

            height:50px;

            padding-right:6px;

        }


        .fivefm-header-logo img{

            max-width:55px;
            max-height:42px;

        }


        .fivefm-header-listen{

            height:35px;

            padding:
                0 9px;

            gap:5px;

        }


        .fivefm-header-listen-text{

            font-size:7px;

            letter-spacing:.3px;

        }


        .fivefm-header-play{

            width:18px;
            height:18px;

            flex-basis:18px;

            font-size:7px;

        }


        .fivefm-header-toggle{

            flex-basis:38px;

            width:38px;
            min-width:38px;

            height:38px;

        }


        .fivefm-header-toggle span{

            width:18px;

        }


    }



    /* =========================================================
       VERY SMALL MOBILE
    ========================================================= */

    @media(max-width:360px){


        .fivefm-header-shell{

            gap:4px;

            padding:
                0 6px;

        }


        .fivefm-header-logo{

            flex-basis:55px;

            width:55px;

            padding-right:5px;

        }


        .fivefm-header-logo img{

            max-width:49px;

        }


        .fivefm-header-listen{

            height:34px;

            padding:
                0 7px;

        }


        .fivefm-header-listen-text{

            font-size:6.5px;

        }


        .fivefm-header-toggle{

            flex-basis:36px;

            width:36px;
            min-width:36px;

            height:36px;

        }


    }



    /* =========================================================
       MOBILE MENU ANIMATION
    ========================================================= */

    @keyframes fivefmMobileMenuIn{


        from{

            opacity:0;

            transform:
                translateY(-7px);

        }


        to{

            opacity:1;

            transform:
                translateY(0);

        }


    }

/* =========================================================
   FIVE FM – DEFINITIVE MOBILE HEADER FIX
========================================================= */

@media(max-width:600px){

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }


    #fivefm-global-header{
        left:0 !important;
        right:0 !important;

        width:100vw !important;
        max-width:100vw !important;

        padding:7px !important;

        overflow:visible !important;
    }


    /*
     * Important:
     * hamburger is positioned independently
     * from logo + Listen Live.
     */

    .fivefm-header-shell{
        position:relative !important;

        width:100% !important;
        max-width:100% !important;

        min-width:0 !important;
        min-height:60px !important;

        padding:
            0 56px
            0 8px !important;

        display:flex !important;

        flex-wrap:nowrap !important;

        align-items:center !important;

        gap:6px !important;

        overflow:visible !important;
    }


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

    .fivefm-header-logo{
        flex:
            0 0 58px !important;

        width:58px !important;
        min-width:58px !important;

        height:50px !important;

        padding-right:6px !important;

        margin:0 !important;
    }


    .fivefm-header-logo img{
        display:block !important;

        width:auto !important;
        max-width:52px !important;

        height:auto !important;
        max-height:42px !important;

        margin:0 !important;
    }


    /* =====================================================
       LISTEN LIVE
    ===================================================== */

    .fivefm-header-listen{
        flex:
            0 0 auto !important;

        width:auto !important;
        max-width:120px !important;

        height:35px !important;

        margin:0 !important;

        padding:
            0 9px !important;

        gap:5px !important;

        white-space:nowrap !important;
    }


    .fivefm-header-listen-text{
        font-size:7px !important;

        letter-spacing:.25px !important;

        white-space:nowrap !important;
    }


    .fivefm-header-play{
        width:18px !important;
        height:18px !important;

        min-width:18px !important;

        flex:
            0 0 18px !important;

        font-size:7px !important;
    }


    /* =====================================================
       DESKTOP NAV MUST NEVER EXIST ON MOBILE
    ===================================================== */

    .fivefm-header-nav{
        display:none !important;
    }


    /* =====================================================
       HAMBURGER
       ABSOLUTELY LOCKED TO RIGHT SIDE
    ===================================================== */

    .fivefm-header-toggle{
        display:flex !important;

        position:absolute !important;

        top:50% !important;
        right:9px !important;
        left:auto !important;

        transform:
            translateY(-50%) !important;

        width:40px !important;
        min-width:40px !important;

        height:40px !important;
        min-height:40px !important;

        margin:0 !important;
        padding:0 !important;

        flex:
            none !important;

        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;

        visibility:visible !important;
        opacity:1 !important;

        z-index:999 !important;
    }


    .fivefm-header-toggle span{
        display:block !important;

        width:19px !important;
        height:2px !important;

        min-width:19px !important;

        margin:3px 0 !important;

        padding:0 !important;

        background:#ffffff !important;

        border:0 !important;

        border-radius:10px !important;

        opacity:1;

        flex:
            0 0 2px !important;
    }


    /*
     * Hamburger → X
     */

    .fivefm-header-toggle.is-open span:nth-child(1){
        transform:
            translateY(8px)
            rotate(45deg) !important;
    }


    .fivefm-header-toggle.is-open span:nth-child(2){
        opacity:0 !important;
    }


    .fivefm-header-toggle.is-open span:nth-child(3){
        transform:
            translateY(-8px)
            rotate(-45deg) !important;
    }


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

    .fivefm-mobile-menu{
        width:100% !important;
        max-width:100% !important;

        margin:
            6px 0 0 !important;

        padding:
            0 !important;
    }


    .fivefm-mobile-menu.is-open{
        display:block !important;
    }


    .fivefm-mobile-inner{
        width:100% !important;
        max-width:100% !important;

        border-radius:9px !important;
    }

}



/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:360px){

    .fivefm-header-shell{
        padding-right:
            52px !important;
    }


    .fivefm-header-logo{
        flex-basis:
            52px !important;

        width:52px !important;
        min-width:52px !important;
    }


    .fivefm-header-logo img{
        max-width:
            47px !important;
    }


    .fivefm-header-listen{
        height:33px !important;

        padding:
            0 7px !important;
    }


    .fivefm-header-listen-text{
        font-size:
            6.3px !important;
    }


    .fivefm-header-toggle{
        right:7px !important;

        width:37px !important;
        min-width:37px !important;

        height:37px !important;
        min-height:37px !important;
    }

}



/* =========================================================
   WORDPRESS ADMIN BAR FIX
========================================================= */

body.admin-bar
#fivefm-global-header{
    top:32px !important;
}


@media(max-width:782px){

    body.admin-bar
    #fivefm-global-header{
        top:46px !important;
    }

}

    
/* Native WordPress menu structure; preserve the original anchor styling. */
#fivefm-global-header, #fivefm-global-header * { box-sizing:border-box; }
.fivefm-header-nav ul,.fivefm-header-nav li,.fivefm-mobile-inner ul,.fivefm-mobile-inner li {
    display:contents; margin:0; padding:0; list-style:none;
}
.fivefm-mobile-inner a::after { content:"→"; color:#168cff; font-size:14px; }
.fivefm-header-nav li.current-menu-item > a,
.fivefm-header-nav li.current-menu-ancestor > a { color:#fff !important; background:rgba(255,255,255,.045); }
.fivefm-header-nav li.current-menu-item > a::after,
.fivefm-header-nav li.current-menu-ancestor > a::after { width:28px; opacity:1; }
.fivefm-mobile-inner li.current-menu-item > a { background:rgba(22,140,255,.14); }
#fivefm-global-header a:focus-visible,#fivefm-global-header button:focus-visible {
    outline:2px solid #fff; outline-offset:3px;
}
.fivefm-mobile-inner { max-height:calc(100dvh - 150px); overflow-y:auto; }
@media(prefers-reduced-motion:reduce) {
    #fivefm-global-header,#fivefm-global-header * { animation:none !important; transition:none !important; }
}