/* ================================================
   RedPhinx Mobile Flyout Navigation
   ================================================ */

.menu-toggle,
.mobile-menu-overlay,
.mobile-menu-top,
.mobile-menu-cta{
    display:none;
}


@media(max-width:980px){

    body.mobile-menu-open{
        overflow:hidden;
    }


    /* Burger */

    .menu-toggle{
        display:inline-flex !important;

        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:4px;

        width:32px;
        height:32px;

        padding:0;

        border:0;
        outline:0;

        background:transparent;

        cursor:pointer;

        position:relative;
        z-index:1003;

        -webkit-tap-highlight-color:transparent;
    }


    .menu-toggle span{

        display:block;

        width:21px;
        height:2px;

        margin:0;

        border-radius:10px;

        background:#e30613;

        transition:.25s ease;
    }


    .menu-toggle span:nth-child(2){

        width:16px;

        align-self:flex-end;

        margin-right:5px;
    }


    .menu-toggle.open{

        opacity:0;

        pointer-events:none;
    }


    /* Overlay */

    .mobile-menu-overlay{

        display:block;

        position:fixed;

        inset:0;

        z-index:1000;

        background:rgba(0,0,0,.55);

        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);

        opacity:0;
        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .28s ease,
            visibility .28s ease;
    }


    .mobile-menu-overlay.open{

        opacity:1;
        visibility:visible;

        pointer-events:auto;
    }


    /* Drawer */

    #mainNav.nav-links{

        position:fixed !important;

        top:0;
        right:0;
        bottom:0;

        width:min(84vw,340px);

        height:100dvh;

        z-index:1002;

        display:flex !important;

        flex-direction:column;

        align-items:stretch;

        justify-content:flex-start;

        gap:0;

        padding:0 22px 28px;

        margin:0;

        background:
            radial-gradient(
                circle at top right,
                rgba(227,6,19,.12),
                transparent 35%
            ),
            #0b0d10;

        border-left:1px solid rgba(255,255,255,.07);

        box-shadow:-20px 0 45px rgba(0,0,0,.35);

        transform:translateX(105%);

        visibility:hidden;

        overflow-y:auto;

        transition:
            transform .32s cubic-bezier(.22,.8,.25,1),
            visibility .32s ease;
    }


    #mainNav.nav-links.open{

        transform:translateX(0);

        visibility:visible;
    }


    /* Drawer Top */

    .mobile-menu-top{

        display:flex;

        min-height:78px;

        align-items:center;

        justify-content:space-between;

        margin-bottom:10px;

        border-bottom:1px solid rgba(255,255,255,.08);
    }


    .mobile-menu-top > span{

        color:#fff;

        font-size:13px;

        font-weight:700;

        letter-spacing:.14em;

        text-transform:uppercase;
    }


    /* Close button */

    .mobile-menu-close{

        width:34px;

        height:34px;

        position:relative;

        border:0;

        background:transparent;

        padding:0;

        cursor:pointer;
    }


    .mobile-menu-close span{

        position:absolute;

        left:7px;
        top:16px;

        width:20px;

        height:2px;

        background:#e30613;

        border-radius:10px;
    }


    .mobile-menu-close span:first-child{

        transform:rotate(45deg);
    }


    .mobile-menu-close span:last-child{

        transform:rotate(-45deg);
    }


    /* Links */

    #mainNav.nav-links > a{

        position:relative;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        width:100%;

        min-height:54px;

        padding:0 4px;

        margin:0;

        color:#f4f4f4;

        font-size:16px;

        font-weight:600;

        border-bottom:1px solid rgba(255,255,255,.07);
    }


    #mainNav.nav-links > a:after{

        content:"";

        position:absolute;

        left:auto;

        right:4px;

        bottom:auto;

        width:7px;

        height:7px;

        border-top:1.5px solid rgba(255,255,255,.55);

        border-right:1.5px solid rgba(255,255,255,.55);

        background:transparent;

        transform:rotate(45deg);
    }


    #mainNav.nav-links > a:hover{

        color:#e30613;

        padding-left:10px;
    }


    /* CTA */

    .mobile-menu-cta{

        display:flex;

        width:100%;

        min-height:49px;

        margin-top:22px;

        align-items:center;

        justify-content:center;

        border:0;

        border-radius:9px;

        background:
            linear-gradient(
                #ef111d,
                #ca000b
            );

        color:#fff;

        font-size:14px;

        font-weight:800;

        cursor:pointer;

        box-shadow:
            0 12px 28px
            rgba(227,6,19,.20);
    }

}


/* Desktop */

@media(min-width:981px){

    .menu-toggle,
    .mobile-menu-overlay,
    .mobile-menu-top,
    .mobile-menu-cta{

        display:none !important;
    }


    #mainNav.nav-links{

        transform:none !important;

        visibility:visible !important;
    }

}