/* bnav.css (mobile menu) */
:root{
    --bnav-h: 64px;
    --bnav-bg: #00303C;
    --bnav-btn-bg: #7ecbd9;
    --bnav-btn-bg-active: #6bbfcf;
    --bnav-text: rgba(255,255,255,.92);
    --bnav-line: rgba(255,255,255,.22);
}

/* default hidden on desktop */
.bnav,
.bnav-overlay,
.bnav-drawer{display:none;}

@media (max-width: 992px){
    /* Hide existing desktop header blocks on mobile */
    .head,
    .head_s,
    #m-space,
    #mfixon{display:none !important;}

    body{padding-top: var(--bnav-h);}

    /* Top bar */
    .bnav{
        display:block;
        position:fixed;
        inset:0 0 auto 0;
        height:var(--bnav-h);
        background:var(--bnav-bg);
        z-index:10030;
    }
    .bnav-bar{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }
    .bnav-brand{
        height:100%;
        display:flex;
        align-items:center;
        padding:0 14px;
        text-decoration:none;
    }
    .bnav-brand-img{
        height:28px;
        width:auto;
        display:block;
    }

    /* Square button (height 100% of bar) */
    .bnav-toggle{
        height:100%;
        width:var(--bnav-h);
        border:0;
        padding:0;
        background:var(--bnav-btn-bg);
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:background .15s ease;
    }
    .bnav-toggle:hover{background:var(--bnav-btn-bg-active);}
    .bnav-toggle:active{background:var(--bnav-btn-bg-active);}
    html.bnav-open .bnav-toggle{background:var(--bnav-btn-bg-active);}

    /* Hamburger / X */
    .bnav-ico{
        position:relative;
        width:22px;
        height:2px;
        background:#fff;
        border-radius:2px;
        transition:background .15s ease;
    }
    .bnav-ico:before,
    .bnav-ico:after{
        content:"";
        position:absolute;
        left:0;
        width:22px;
        height:2px;
        background:#fff;
        border-radius:2px;
        transition:transform .2s ease, top .2s ease;
    }
    .bnav-ico:before{top:-7px;}
    .bnav-ico:after{top:7px;}

    html.bnav-open .bnav-ico{background:transparent;}
    html.bnav-open .bnav-ico:before{top:0; transform:rotate(45deg);}
    html.bnav-open .bnav-ico:after{top:0; transform:rotate(-45deg);}

    /* Overlay must cover full screen */
    .bnav-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.35);
        opacity:0;
        pointer-events:none;
        z-index:10010;
        transition:opacity .18s ease;
    }
    html.bnav-open .bnav-overlay{
        opacity:1;
        pointer-events:auto;
    }

    /* Fullscreen drawer (100vw/100vh) */
    .bnav-drawer{
        display:block;
        position:fixed;
        inset:0;
        width:100vw;
        height:100vh;
        background:var(--bnav-bg);
        transform:translateX(100%);
        transition:transform .22s ease;
        z-index:10020;
        overflow:auto;
        -webkit-overflow-scrolling:touch;
    }
    html.bnav-open .bnav-drawer{transform:translateX(0);}

    /* Lock page scroll when open */
    html.bnav-open{overflow:hidden;}
    html.bnav-open body{overflow:hidden;}

    /* Content (pure text list, white lines) */
    .bnav-drawer-inner{
        min-height:100%;
        padding:calc(var(--bnav-h) + 18px) 18px 26px;
    }
    .bnav-title{
        margin:0 0 12px;
        color:#fff;
        font-size:18px;
        font-weight:700;
    }
    .bnav-section{
        padding:16px 0;
        border-top:1px solid var(--bnav-line);
    }
    .bnav-section:first-child{border-top:0; padding-top:0;}
    .bnav-hd{
        margin:0 0 10px;
        color:rgba(255,255,255,.95);
        font-size:14px;
        font-weight:700;
    }
    .bnav-list{
        list-style:none;
        margin:0;
        padding:0;
        border-top:1px solid rgba(255,255,255,.14);
    }
    .bnav-item{border-bottom:1px solid rgba(255,255,255,.14);}
    .bnav-link{
        display:block;
        padding:14px 2px;
        color:var(--bnav-text)!important;
        text-decoration:none;
        font-size:15px;
        line-height:1.2;
    }
    .bnav-link:active{background:rgba(255,255,255,.08);}
}