/* MVN professional public navigation */

:root{
    --mvn-menu-dark:#052d28;
    --mvn-menu-dark-light:#08493f;
    --mvn-menu-green:#9ed95d;
    --mvn-menu-green-light:#dcf4b2;
    --mvn-menu-border:rgba(255,255,255,.11);
}

.mvn-v2-header{
    position:sticky;
    top:0;
    z-index:9000;
    width:100%;
    border-bottom:1px solid var(--mvn-menu-border);
    background:
        linear-gradient(
            110deg,
            rgba(5,45,40,.98),
            rgba(7,62,53,.97)
        );
    box-shadow:0 12px 35px rgba(3,35,31,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.mvn-v2-header:after{
    content:"";
    position:absolute;
    right:0;
    bottom:-1px;
    left:0;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(158,217,93,.55),
            transparent
        );
}

.mvn-v2-header-shell{
    width:min(1440px,100%);
    min-height:78px;
    margin:auto;
    padding:0 28px;
    display:flex;
    align-items:center;
    gap:28px;
}

.mvn-v2-brand{
    flex:none;
    display:flex;
    align-items:center;
    gap:13px;
    color:#fff;
    text-decoration:none;
}

.mvn-v2-brand-mark{
    position:relative;
    width:50px;
    height:48px;
    flex:none;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:14px;
    color:var(--mvn-menu-dark);
    background:
        linear-gradient(
            135deg,
            var(--mvn-menu-green-light),
            var(--mvn-menu-green)
        );
    box-shadow:
        0 12px 25px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.65);
}

.mvn-v2-brand-mark:before{
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid rgba(5,45,40,.14);
    border-radius:10px;
}

.mvn-v2-brand-mark:after{
    content:"";
    position:absolute;
    width:30px;
    height:80px;
    top:-15px;
    left:-45px;
    transform:rotate(30deg);
    background:rgba(255,255,255,.28);
    animation:mvnMenuLogoShine 7s ease-in-out infinite;
}

.mvn-v2-brand-mark span{
    position:relative;
    z-index:2;
    font-size:14px;
    font-weight:950;
    letter-spacing:1px;
}

.mvn-v2-brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.mvn-v2-brand-copy strong{
    color:#fff;
    font-size:15px;
    font-weight:850;
    letter-spacing:.05px;
}

.mvn-v2-brand-copy small{
    margin-top:6px;
    color:#a9c9c1;
    font-size:9px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:1.15px;
}

.mvn-v2-menu{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}

.mvn-v2-navigation{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
}

.mvn-v2-nav-link{
    position:relative;
    padding:12px 11px;
    border-radius:10px;
    color:#c9dfda;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    text-decoration:none;
    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.mvn-v2-nav-link:after{
    content:"";
    position:absolute;
    right:13px;
    bottom:6px;
    left:13px;
    height:2px;
    transform:scaleX(0);
    border-radius:999px;
    background:var(--mvn-menu-green);
    transition:transform .2s ease;
}

.mvn-v2-nav-link:hover,
.mvn-v2-nav-link.is-active{
    color:#fff;
    background:rgba(255,255,255,.075);
}

.mvn-v2-nav-link:hover:after,
.mvn-v2-nav-link.is-active:after{
    transform:scaleX(1);
}

.mvn-v2-actions{
    flex:none;
    display:flex;
    align-items:center;
    gap:10px;
}

.mvn-v2-language{
    position:relative;
}

.mvn-v2-language label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

.mvn-v2-language select{
    min-width:104px;
    height:42px;
    padding:0 31px 0 12px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    color:#e6f0ed;
    background:rgba(255,255,255,.065);
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.mvn-v2-language select:focus{
    outline:none;
    border-color:rgba(158,217,93,.58);
    box-shadow:0 0 0 3px rgba(158,217,93,.10);
}

.mvn-v2-language option{
    color:#163630;
    background:#fff;
}

.mvn-v2-portal-button{
    min-height:42px;
    padding:10px 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:11px;
    color:var(--mvn-menu-dark);
    background:
        linear-gradient(
            135deg,
            var(--mvn-menu-green-light),
            var(--mvn-menu-green)
        );
    box-shadow:0 10px 25px rgba(0,0,0,.17);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    text-decoration:none;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.mvn-v2-portal-button:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 30px rgba(0,0,0,.22);
}

.mvn-v2-portal-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:rgba(5,45,40,.10);
    font-size:12px;
}

.mvn-v2-menu-toggle{
    display:none;
    width:44px;
    height:42px;
    margin-left:auto;
    padding:0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:11px;
    background:rgba(255,255,255,.065);
    cursor:pointer;
}

.mvn-v2-menu-toggle span{
    width:20px;
    height:2px;
    margin:4px auto;
    display:block;
    border-radius:999px;
    background:#fff;
    transition:
        transform .24s ease,
        opacity .24s ease;
}

.mvn-v2-menu-toggle.is-open span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.mvn-v2-menu-toggle.is-open span:nth-child(2){
    opacity:0;
}

.mvn-v2-menu-toggle.is-open span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}

.mvn-v2-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:8980;
    opacity:0;
    visibility:hidden;
    background:rgba(3,28,25,.56);
    backdrop-filter:blur(4px);
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.mvn-v2-menu-backdrop.is-visible{
    opacity:1;
    visibility:visible;
}

#purpose,
#platform,
#journey,
#service,
#trust,
#portal-registration{
    scroll-margin-top:96px;
}

@keyframes mvnMenuLogoShine{
    0%,72%,100%{
        left:-45px;
    }

    84%{
        left:72px;
    }
}

@media(max-width:1200px){
    .mvn-v2-brand-copy small{
        display:none;
    }

    .mvn-v2-navigation{
        gap:0;
    }

    .mvn-v2-nav-link{
        padding-right:8px;
        padding-left:8px;
        font-size:11px;
    }
}

@media(max-width:1020px){
    .mvn-v2-header-shell{
        min-height:72px;
        padding:0 19px;
    }

    .mvn-v2-menu-toggle{
        display:block;
    }

    .mvn-v2-menu{
        position:fixed;
        z-index:8990;
        top:72px;
        right:12px;
        left:12px;
        max-height:calc(100dvh - 88px);
        padding:16px;
        overflow-y:auto;
        display:block;
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px) scale(.985);
        border:1px solid rgba(255,255,255,.12);
        border-radius:18px;
        background:
            linear-gradient(
                145deg,
                #06372f,
                #052a26
            );
        box-shadow:0 28px 70px rgba(0,0,0,.30);
        transition:
            opacity .24s ease,
            visibility .24s ease,
            transform .24s ease;
    }

    .mvn-v2-menu.is-open{
        opacity:1;
        visibility:visible;
        transform:translateY(0) scale(1);
    }

    .mvn-v2-navigation{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .mvn-v2-nav-link{
        min-height:47px;
        padding:12px 14px;
        display:flex;
        align-items:center;
        border:1px solid rgba(255,255,255,.08);
        background:rgba(255,255,255,.045);
        font-size:12px;
    }

    .mvn-v2-nav-link:after{
        display:none;
    }

    .mvn-v2-actions{
        margin-top:14px;
        padding-top:14px;
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        border-top:1px solid rgba(255,255,255,.10);
    }

    .mvn-v2-language select,
    .mvn-v2-portal-button{
        width:100%;
    }

    body.mvn-v2-menu-open{
        overflow:hidden;
    }
}

@media(max-width:600px){
    .mvn-v2-brand-mark{
        width:44px;
        height:42px;
        border-radius:12px;
    }

    .mvn-v2-brand-copy strong{
        max-width:190px;
        overflow:hidden;
        font-size:13px;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .mvn-v2-navigation{
        grid-template-columns:1fr;
    }

    .mvn-v2-actions{
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce){
    .mvn-v2-header *,
    .mvn-v2-header *:before,
    .mvn-v2-header *:after{
        animation:none!important;
        transition:none!important;
    }
}
