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

.mobile-menu-toggle{
    display:none;
}

@media (max-width:768px){

    /* ==========================================================
       Branding Capsule
       ========================================================== */

    header[role="banner"] nav.navbar .region-nav-branding{

    display:flex !important;
    flex-wrap:wrap !important;

    align-items:flex-start !important;
    align-content:flex-start !important;

    width:max-content !important;
    max-width:calc(100vw - 32px);

    min-height:60px;
    height:60px;

    padding:10px 18px !important;

    overflow:hidden;

    border-radius:30px !important;

    box-sizing:border-box;

    transition:
        height .45s cubic-bezier(.25,1,.5,1),
        transform .25s ease,
        border-radius .25s ease;

    }

    header[role="banner"] nav.navbar .region-nav-branding.mobile-open{

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

    }

    /* ==========================================================
       Brand
       ========================================================== */

#brand-container{

    order:1;

    display:flex;

    align-items:center;

    flex:0 0 auto;

    width:auto;

    min-width:0;

}

    /* ==========================================================
       Hamburger
       ========================================================== */

    .mobile-menu-toggle{

        display:flex !important;

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

        width:36px;
        height:36px;

        margin-left:0;
        margin-right:16px;

        padding:0;

        border:0;

        background:none;

        cursor:pointer;

        color:#111;

        order:0;

        flex-shrink:0;
        

    }

    .mobile-menu-toggle svg{

        width:20px;
        height:20px;

    }

    .mobile-menu-toggle svg path{

        stroke-linecap:round;
transform-box:fill-box;
        transform-origin:center;

        transition:
            transform .35s cubic-bezier(.25,1,.5,1),
            opacity .2s ease;

    }

    .mobile-menu-toggle.open svg path:nth-child(1){

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

    }

    .mobile-menu-toggle.open svg path:nth-child(2){

        opacity:0;

    }

    .mobile-menu-toggle.open svg path:nth-child(3){

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

    }

    /* ==========================================================
       Utilities
       ========================================================== */

    .mobile-injected-utilities{

        display:none;

        order:20;

        width:100%;

        margin-top:20px;

        flex-direction:column;

        gap:16px;

    }

    .region-nav-branding.mobile-open .mobile-injected-utilities{

        display:flex;
        margin: 70px -15px 20px 0px;

    }

    /* ==========================================================
       Navigation Container
       ========================================================== */

    #block-lumiris-main-navigation{

       display:none;

    width:100%;
    flex:0 0 100%;
       order:30; 
    }

    .region-nav-branding.mobile-open #block-lumiris-main-navigation{

         display:block;

    }
    
    
    @media (max-width:768px){
    #block-lumiris-exposedformsearch-contentpage-1,
    #block-lumiris-darkmodetoggle{
        display:none;
    }
    .region-nav-branding.mobile-open #block-lumiris-exposedformsearch-contentpage-1,
    .region-nav-branding.mobile-open #block-lumiris-darkmodetoggle{
        display:flex;
    }
}


@media (max-width:768px){
    #block-lumiris-exposedformsearch-contentpage-1,
    #block-lumiris-darkmodetoggle{

    }
}



    /* ==========================================================
       Bootstrap Reset
       ========================================================== */

    #block-lumiris-main-navigation > ul.navbar-nav{

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        width:100%;

        margin: 60px 0px !important;

        padding:0;

        gap:0;

    }

    #block-lumiris-main-navigation .nav-item{

        width:100%;

        flex:none;

        margin:0;

    }

    #block-lumiris-main-navigation .nav-link{

        display:block;

        width:100%;

    }

    html[data-bs-theme="dark"] #block-lumiris-main-navigation{

        background:transparent;

    }

}