/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| File    : mobile-navigation.css
| Purpose : Reusable mobile navigation
|--------------------------------------------------------------------------
*/

.hyro-mobile-toggle{
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--hyro-border);
    border-radius:12px;
    display:none;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    cursor:pointer;
}

.hyro-mobile-toggle-lines{
    width:20px;
    height:14px;
    position:relative;
}

.hyro-mobile-toggle-lines span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:999px;
    background:var(--hyro-text);
    transition:
        transform .24s ease,
        top .24s ease,
        opacity .24s ease;
}

.hyro-mobile-toggle-lines span:nth-child(1){
    top:0;
}

.hyro-mobile-toggle-lines span:nth-child(2){
    top:6px;
}

.hyro-mobile-toggle-lines span:nth-child(3){
    top:12px;
}

.hyro-mobile-toggle[aria-expanded="true"]
.hyro-mobile-toggle-lines span:nth-child(1){
    top:6px;
    transform:rotate(45deg);
}

.hyro-mobile-toggle[aria-expanded="true"]
.hyro-mobile-toggle-lines span:nth-child(2){
    opacity:0;
}

.hyro-mobile-toggle[aria-expanded="true"]
.hyro-mobile-toggle-lines span:nth-child(3){
    top:6px;
    transform:rotate(-45deg);
}

.hyro-mobile-panel{
    display:none;
}

@media(max-width:900px){

    .hyro-nav-inner{
        position:relative;
    }

    .hyro-nav .hyro-menu{
        display:none;
    }

    .hyro-nav-inner > .hyro-button{
        display:none;
    }

    .hyro-mobile-toggle{
        display:flex;
    }

    .hyro-mobile-panel{
        position:absolute;
        top:calc(100% + 10px);
        right:0;
        left:0;
        z-index:100;
        padding:12px;
        border:1px solid var(--hyro-border);
        border-radius:18px;
        background:rgba(255,255,255,.98);
        box-shadow:0 25px 70px rgba(31,41,55,.14);
        backdrop-filter:blur(18px);
    }

    .hyro-mobile-panel.is-open{
        display:block;
        animation:hyroMobileMenuOpen .22s ease;
    }

    .hyro-mobile-panel a{
        min-height:48px;
        padding:0 15px;
        border-radius:11px;
        display:flex;
        align-items:center;
        color:var(--hyro-text);
        font-size:14px;
        font-weight:700;
        text-decoration:none;
    }

    .hyro-mobile-panel a:hover{
        color:var(--hyro-primary);
        background:var(--hyro-soft-background);
    }

    .hyro-mobile-panel .hyro-mobile-primary{
        margin-top:8px;
        justify-content:center;
        color:#ffffff;
        background:var(--hyro-gradient);
    }

    .hyro-mobile-panel .hyro-mobile-primary:hover{
        color:#ffffff;
        background:var(--hyro-gradient);
    }

}

@keyframes hyroMobileMenuOpen{

    from{
        opacity:0;
        transform:translateY(-8px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@media(prefers-reduced-motion:reduce){

    .hyro-mobile-panel.is-open{
        animation:none;
    }

}