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

/*==================================================
Root Variables
==================================================*/

:root{

    --md-height:60px;
    --md-font-size:16px;
    --md-submenu-font-size:15px;
    --md-font-family:inherit;
    --md-line-height:1.4;
    --md-radius:0px;
    --md-zindex:100;

    --md-bg:#222222;
    --md-color:#ffffff;

    --md-hover-bg:#0b68e9;
    --md-hover-color:#ffffff;

    --md-submenu-bg:#dddddd;
    --md-submenu-color:#222222;

    --md-submenu-hover-bg:#0b68e9;
    --md-submenu-hover-color:#ffffff;

    --md-transition:.25s ease;
    --md-shadow:0 4px 10px rgba(0,0,0,.08);

}

/*==================================================
Navigation
==================================================*/

.md-menu{

    position:relative;
    z-index:var(--md-zindex) !important;

}

.md-menu *,
.md-menu *::before,
.md-menu *::after{

    box-sizing:border-box;

}

.md-menu ul{

    list-style:none;
    margin:0;
    padding:0;

}

.md-menu li{

    position:relative;

}

/*==================================================
Defend against theme JS injecting extra elements
(e.g. Kadence's own mobile "+" dropdown-toggle button)
into menu items after our markup has rendered. Only
our own <a> and <ul class="sub-menu"> are allowed as
direct children of a menu item.
==================================================*/

.md-menu li > *:not(a):not(.sub-menu):not(.md-submenu-toggle){

    display:none !important;

}

/*==================================================
Top Level
==================================================*/

.md-menu > ul{

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    background:var(--md-bg) !important;

}

.md-menu > ul > li{

    display:flex;

}

.md-menu a{

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

    height:var(--md-height);

    padding:0 20px;

    text-decoration:none;

    color:var(--md-color) !important;

    background:transparent;

    font-family:var(--md-font-family) !important;
    font-size:var(--md-font-size) !important;
    line-height:var(--md-line-height) !important;

    transition:
        background var(--md-transition),
        color var(--md-transition);

}

.md-menu > ul > li > a{

    border-radius:var(--md-radius);

}

.md-menu li:hover > a,
.md-menu li.current-menu-item > a,
.md-menu li.current-menu-parent > a{

    background:var(--md-hover-bg) !important;
    color:var(--md-hover-color) !important;

}

/*==================================================
Submenu hover uses its own configurable colors,
independent of the top-level hover accent — set via
"Submenu Hover Background" / "Submenu Hover Text".
==================================================*/

.md-menu .sub-menu li:hover > a,
.md-menu .sub-menu li.current-menu-item > a,
.md-menu .sub-menu li.current-menu-parent > a{

    background:var(--md-submenu-hover-bg) !important;
    color:var(--md-submenu-hover-color) !important;

}

/*==================================================
Submenu
==================================================*/

.md-menu .sub-menu{

    position:absolute;

    left:0;
    top:100%;

    min-width:240px;

    display:none;

    background:var(--md-submenu-bg) !important;

    border-radius:var(--md-radius);

    border:1px solid rgba(0,0,0,.15);

    box-shadow:var(--md-shadow);

}

.md-menu li:hover > .sub-menu{

    display:block;

}

.md-menu .sub-menu li{

    width:100%;

}

.md-menu .sub-menu li:first-child > a{

    border-top-left-radius:var(--md-radius);
    border-top-right-radius:var(--md-radius);

}

.md-menu .sub-menu li:last-child > a{

    border-bottom-left-radius:var(--md-radius);
    border-bottom-right-radius:var(--md-radius);

}

.md-menu .sub-menu a{

    justify-content:flex-start;

    width:100%;

    height:auto;

    min-height:46px;

    padding:12px 18px;

    color:var(--md-submenu-color) !important;

    background:transparent;

    font-size:var(--md-submenu-font-size) !important;

    white-space:nowrap;

}

.md-menu .md-link-text{

    white-space:nowrap;

}

.md-menu .md-arrow{

    display:inline-flex;
    flex-shrink:0;

}

/*==================================================
Third Level
==================================================*/

.md-menu .sub-menu .sub-menu{

    top:0;
    left:100%;

    background:color-mix(in srgb, var(--md-submenu-bg) 82%, white) !important;

    border-left-width:0;

}

/*==================================================
Icons
==================================================*/

.md-menu svg{

    width:16px;
    height:16px;

    margin-left:8px;

    fill:currentColor;

}

/*==================================================
Transitions
==================================================*/

.md-menu .sub-menu{

    opacity:0;
    visibility:hidden;

    transform:translateY(8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

}

.md-menu li:hover > .sub-menu{

    opacity:1;
    visibility:visible;

    transform:none;

}

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

.md-menu li:focus-within > .sub-menu{

    opacity:1;
    visibility:visible;
    display:block;

    transform:none;

}

.md-menu a:focus{

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

}

/*==================================================
Utilities
==================================================*/

.md-menu img{

    max-width:100%;
    height:auto;

}

.md-menu::after{

    content:"";
    display:block;
    clear:both;

}