/**
 * Menu Designer
 * Mobile Styles
 *
 * @package MenuDesigner
 */

/*==================================================
Mobile Toggle
==================================================*/

.md-mobile-toggle{

    display:none;

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

    width:48px;
    height:48px;

    padding:0;

    margin:0;

    cursor:pointer;

    border:none;
    outline:none;

    background:transparent;

    color:inherit;

    transition:opacity .25s ease;

}

.md-mobile-toggle:hover{

    opacity:.8;

}

.md-mobile-toggle:focus{

    outline:2px solid #2271b1;
    outline-offset:2px;

}

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

.md-mobile-toggle span{

    display:block;

    width:24px;
    height:2px;

    background:currentColor;

    position:relative;

    transition:all .25s ease;

}

.md-mobile-toggle span::before,
.md-mobile-toggle span::after{

    content:"";

    position:absolute;
    left:0;

    width:24px;
    height:2px;

    background:currentColor;

    transition:all .25s ease;

}

.md-mobile-toggle span::before{

    top:-7px;

}

.md-mobile-toggle span::after{

    top:7px;

}

/*==================================================
Open State
==================================================*/

.md-mobile-open .md-mobile-toggle span{

    background:transparent;

}

.md-mobile-open .md-mobile-toggle span::before{

    top:0;
    transform:rotate(45deg);

}

.md-mobile-open .md-mobile-toggle span::after{

    top:0;
    transform:rotate(-45deg);

}

/*==================================================
Mobile Navigation, Submenus, and the mdFade-in
animation are all breakpoint-dependent, so they are
generated dynamically (using the actual configured
"Mobile Breakpoint" setting) rather than hardcoded
here — see MenuDesigner\Frontend\CSS::build().
==================================================*/

/*==================================================
Submenu Open Indicator

The expand/collapse arrow is the same .md-arrow icon
already rendered server-side inside the link (see
Walker.php) — no separate toggle element is created.
Rotating it on .md-open gives the same open/closed
feedback the old +/− button used to provide.
==================================================*/

.md-menu li.md-has-children > a .md-arrow svg{

    transition:transform .2s ease;

}

.md-menu > ul > li.md-open > a .md-arrow svg{

    transform:rotate(180deg);

}

.md-menu .sub-menu li.md-open > a .md-arrow svg{

    transform:rotate(90deg);

}

/*==================================================
Animation
==================================================*/

@keyframes mdFade{

    from{

        opacity:0;
        transform:translateY(-8px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

/*==================================================
Accessibility
==================================================*/

.md-mobile-toggle{

    -webkit-tap-highlight-color:transparent;

}

.md-mobile-toggle:focus-visible{

    outline:2px solid #2271b1;
    outline-offset:2px;

}