.menuv-wrapper ul li {
    width: 100%;
}

.menuv-wrapper ul li ul.sub-menu,
.menuv-wrapper ul li .ah-elementor-submenu-wrapper {
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    position: relative;
    display: none;
    visibility: visible;
    opacity: 1;
    float: none;
    transition: none;
}

.menuv-wrapper .menu-location-wrap ul {
    padding: 0;
    margin: 0;
    background-color: transparent;
    box-shadow: none;
}

/* The menu shares the header markup (.topmenu, li.mega_menu), so undo the header's
   desktop dropdown and mega menu layout: fixed panel size, card style and item columns. */
.menuv-wrapper .topmenu li.menu-item > ul.sub-menu {
    top: 0;
    right: 0;
    left: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.menuv-wrapper .topmenu li.menu-item > ul.sub-menu > li {
    display: block;
    width: 100%;
}

.menuv-wrapper ul li ul.sub-menu:after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

/* Open submenus (the script toggles menuv-open on the parent item). Before the script runs,
   the current page's submenus are shown when "Open Current Submenu" is on. */
.menuv-wrapper .menu-location-wrap ul li.menuv-open > ul,
.menuv-wrapper .menu-location-wrap ul li.menuv-open > .sub-menu.ah-elementor-submenu-wrapper,
.ahura-menuv-open-current-yes .menuv-element:not(.menuv-ready) .menu-location-wrap ul li.current-menu-ancestor > ul,
.ahura-menuv-open-current-yes .menuv-element:not(.menuv-ready) .menu-location-wrap ul li.current-menu-ancestor > .sub-menu.ah-elementor-submenu-wrapper {
    display: block;
}

/*
 * Modern style.
 * Selectors stay below the widget's style controls (which start with the element ID) so those still win.
 */
.ahura-menuv-style-modern {
    --ahura-menuv-accent: var(--mw_primary_color, #2563eb);
    --ahura-menuv-muted: #5e5e5e;
    --ahura-menuv-muted: color-mix(in srgb, var(--ahura-c-text-primary, #191919) 70%, transparent);
}

.ahura-menuv-style-modern .menuv-wrapper :is(.topmenu, ul.sub-menu) > .menu-item > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    line-height: 1.5;
    text-align: start;
    color: var(--ahura-c-text-primary, #191919);
    transition: background-color .2s ease, color .2s ease;
}

.ahura-menuv-style-modern .menuv-wrapper ul.sub-menu > .menu-item > a {
    padding: 8px 12px;
    color: var(--ahura-menuv-muted);
}

/* Hover, parent and current states: top level and submenus are written separately so each one sits
   just above the Normal controls and below the Hover/Active controls of the same level. */
.ahura-menuv-style-modern .menuv-wrapper .topmenu > .menu-item > a:hover,
.ahura-menuv-style-modern .menuv-wrapper .topmenu > .menu-item > a:focus-visible,
.ahura-menuv-style-modern .menuv-wrapper .topmenu ul.sub-menu > .menu-item > a:hover,
.ahura-menuv-style-modern .menuv-wrapper .topmenu ul.sub-menu > .menu-item > a:focus-visible {
    background-color: rgba(37, 99, 235, .08);
    background-color: color-mix(in srgb, var(--ahura-menuv-accent) 8%, transparent);
    color: var(--ahura-menuv-accent);
}

.ahura-menuv-style-modern .menuv-wrapper .menu-location-wrap .topmenu > .current-menu-ancestor > a,
.ahura-menuv-style-modern .menuv-wrapper .menu-location-wrap .topmenu ul.sub-menu > .current-menu-ancestor > a {
    color: var(--ahura-menuv-accent);
}

.ahura-menuv-style-modern .menuv-wrapper .menu-location-wrap .topmenu > .current-menu-item > a,
.ahura-menuv-style-modern .menuv-wrapper .menu-location-wrap .topmenu ul.sub-menu > .current-menu-item > a {
    background-color: rgba(37, 99, 235, .12);
    background-color: color-mix(in srgb, var(--ahura-menuv-accent) 12%, transparent);
    color: var(--ahura-menuv-accent);
}

.ahura-menuv-style-modern .menuv-wrapper .menu-location-wrap :is(.topmenu, ul.sub-menu) > .current-menu-item > a::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background-color: var(--ahura-menuv-accent);
}

.ahura-menuv-style-modern .menuv-wrapper .menu-item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .05);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Arrows sit at the end of the row and point down on every level. The Spacing control of the
   Submenu Icons section still wins over the auto margin of a picked icon. */
.ahura-menuv-style-modern .menuv-wrapper .ah-submenu-icon {
    margin-inline-start: auto;
    opacity: .6;
}

.ahura-menuv-style-modern .menuv-wrapper .menu-location-wrap li > a > .ah-submenu-icon {
    position: static;
    transform: none;
}

.ahura-menuv-style-modern .menuv-wrapper .topmenu li.menu-item-has-children > a::after {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    margin-inline-start: auto;
    opacity: .6;
    transform: none;
    -webkit-mask-image: url("../../img/icons/chevron-down.svg");
    mask-image: url("../../img/icons/chevron-down.svg");
}

/* Each submenu level: indented, with a thin guide line on its start side and no item separators. */
.ahura-menuv-style-modern .menuv-wrapper .topmenu li.menu-item > ul.sub-menu {
    width: auto;
    margin-block: 4px;
    margin-inline-start: 20px;
    border-inline-start: 1px solid rgba(0, 0, 0, .08);
    border-inline-start-color: color-mix(in srgb, var(--ahura-c-text-primary, #191919) 12%, transparent);
}

.ahura-menuv-style-modern .menuv-wrapper .topmenu ul.sub-menu > li.menu-item {
    border-bottom: 0;
}
