/* Rantey responsive navigation v1 */
.rnav-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #dfc5b4;
    border-radius:12px;
    background:#fff7f1;
    color:#6f2d27;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    box-shadow:0 5px 14px rgba(84,34,30,.08);
}
.rnav-toggle span{
    display:block;
    width:21px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
}
.rnav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.rnav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.rnav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (min-width:1181px){
    .rnav{
        align-items:flex-start!important;
        gap:18px!important;
    }
    .rnav-menu{
        max-width:calc(100% - 190px);
        row-gap:4px!important;
        column-gap:2px!important;
    }
    .rnav-link,.rnav-logout button{
        min-height:37px!important;
        padding:6px 8px!important;
        font-size:.82rem!important;
        border-radius:9px!important;
    }
    .rnav-icon{
        width:22px!important;
        height:22px!important;
        flex-basis:22px!important;
        font-size:.72rem!important;
    }
}

@media (min-width:721px) and (max-width:1180px){
    .rnav{
        flex-direction:row!important;
        align-items:flex-start!important;
        gap:18px!important;
    }
    .rnav-menu{
        display:flex!important;
        width:auto!important;
        flex:1 1 auto;
        justify-content:flex-end!important;
        align-content:flex-start;
        flex-wrap:wrap!important;
        row-gap:4px!important;
    }
    .rnav-link,.rnav-logout button{
        min-height:37px!important;
        padding:6px 8px!important;
        font-size:.8rem!important;
    }
    .rnav-icon{display:none!important}
}

@media (max-width:720px){
    .rnav{
        width:calc(100% - 28px)!important;
        min-height:64px!important;
        padding:10px 0!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center!important;
        gap:10px!important;
    }
    .rnav-brand{min-width:0}
    .rnav-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .rnav-toggle{display:inline-flex}
    .rnav-menu{
        grid-column:1 / -1;
        width:100%!important;
        max-height:0;
        padding:0!important;
        margin:0;
        display:grid!important;
        grid-template-columns:1fr 1fr;
        gap:7px!important;
        overflow:hidden!important;
        opacity:0;
        visibility:hidden;
        transform:translateY(-6px);
        transition:max-height .28s ease,opacity .2s ease,transform .2s ease,padding .2s ease,visibility .2s;
        scrollbar-width:none;
    }
    .rnav-menu.is-open{
        max-height:calc(100dvh - 96px);
        padding:7px 2px calc(16px + env(safe-area-inset-bottom))!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
    .rnav-link,.rnav-logout,.rnav-logout button{
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
    }
    .rnav-link,.rnav-logout button{
        min-height:44px!important;
        padding:9px 10px!important;
        justify-content:flex-start!important;
        border:1px solid #ecd8ca!important;
        border-radius:11px!important;
        background:#fffaf6!important;
        font-size:.82rem!important;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .rnav-link:hover,.rnav-logout button:hover{transform:none!important}
    .rnav-signup{background:#853a32!important;color:#fff!important;border-color:#853a32!important}
    .rnav-member{grid-column:1 / -1}
    .rnav-member-name{max-width:none!important;overflow:hidden;text-overflow:ellipsis}
    .rnav-message-badge{margin-left:auto}
    .rnav-logout{margin:0!important}
    body.rnav-menu-open{overflow:hidden}
}

@media (max-width:430px){
    .rnav-menu{grid-template-columns:1fr}
}
