.soapkits-nav-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.soapkits-nav-menu .soapkits-nav-menu__toggle {
    position: relative;
    display: none;
    color: currentColor;
    border: solid 1px currentColor;
    background: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 8px;
    line-height: 1;
}

.soapkits-nav-menu .soapkits-nav-menu__toggle svg {
    fill: currentColor;
}

.soapkits-nav-menu .soapkits-nav-menu__toggle.hover-gradient {
    overflow: hidden;
    position: relative;
}

.soapkits-nav-menu .soapkits-nav-menu__toggle.hover-gradient span {
    position: relative;
    z-index: 1;
}

.soapkits-nav-menu .soapkits-nav-menu__toggle.hover-gradient:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition-duration: inherit;
    transition-duration: inherit;
}

.soapkits-nav-menu .soapkits-nav-menu__toggle.hover-gradient:hover:before {
    opacity: 1;
}

.soapkits-nav-menu .soapkits-nav-menu__wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.soapkits-nav-menu .soapkits-nav-menu__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 20px;
}

.soapkits-nav-menu .soapkits-nav-menu__list > li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.soapkits-nav-menu .soapkits-nav-menu__list .soapkits-nav-menu__link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    white-space: nowrap;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
}

.soapkits-nav-menu .soapkits-nav-menu__list .soapkits-nav-menu__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 220px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.soapkits-nav-menu .soapkits-nav-menu__list .soapkits-nav-menu__submenu .soapkits-nav-menu__item {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.soapkits-nav-menu .soapkits-nav-menu__list .soapkits-nav-menu__submenu .soapkits-nav-menu__link {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.soapkits-nav-menu .soapkits-nav-menu__list .soapkits-nav-menu__submenu .soapkits-nav-menu__submenu {
    top: 0;
    left: 100%;
}

.soapkits-nav-menu .soapkits-nav-menu__list li.menu-item-has-children:hover > .soapkits-nav-menu__submenu {
    display: block;
}

.soapkits-nav-menu .soapkits-nav-menu__list li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.soapkits-nav-menu .soapkits-nav-menu__indicator {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
}

.soapkits-nav-menu .soapkits-nav-menu__indicator i,
.soapkits-nav-menu .soapkits-nav-menu__indicator svg {
    width: 12px;
    height: 12px;
}

.soapkits-nav-menu .soapkits-nav-menu__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
}

.soapkits-nav-menu .soapkits-nav-menu__identity {
    display: none;
}

.soapkits-nav-menu .soapkits-nav-menu__site-title {
    display: none;
}

.soapkits-nav-menu .soapkits-nav-menu__site-title .soapkits-nav-menu__logo {
    display: block;
}

.soapkits-nav-menu .soapkits-nav-menu__site-title .soapkits-nav-menu__logo img {
    max-width: 360px;
    height: auto;
}

.soapkits-nav-menu .soapkits-nav-menu__close {
    display: none;
}

/* Vertical direction */
.soapkits-nav-menu--vertical .soapkits-nav-menu__wrapper {
    width: auto;
}

.soapkits-nav-menu--vertical .soapkits-nav-menu__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.soapkits-nav-menu--vertical .soapkits-nav-menu__list > li > a {
    width: 100%;
}

.soapkits-nav-menu--vertical .soapkits-nav-menu__submenu {
    position: static;
    box-shadow: none;
    padding-left: 20px;
}

/* Responsive breakpoints */
@media screen and (max-width: 1024px) {
    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__toggle {
        display: inline-flex;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100%;
        z-index: 1000;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        -webkit-transition: right 0.3s ease;
        transition: right 0.3s ease;
        overflow-y: auto;
        display: block;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__wrapper.active {
        right: 0;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__wrapper.active .soapkits-nav-menu__list {
        display: block;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__list {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 20px;
        width: 100%;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__list > li > a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__submenu {
        position: static;
        box-shadow: none;
        padding-left: 20px;
        display: none;
        background: transparent;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__list li.menu-item-has-children:hover > .soapkits-nav-menu__submenu {
        display: none;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__list li.menu-item-has-children.submenu-open > .soapkits-nav-menu__submenu {
        display: block;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__identity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__site-title {
        display: block;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: solid 1px currentColor;
        color: currentColor;
        cursor: pointer;
        padding: 8px;
        width: 45px;
        border-radius: 3px;
        line-height: 1;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__close svg {
        fill: currentColor;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__overlay {
        display: block;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__wrapper.active ~ .soapkits-nav-menu__overlay {
        opacity: 1;
        visibility: visible;
    }
}

@media screen and (max-width: 768px) {
    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__toggle {
        display: inline-flex;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100%;
        z-index: 1000;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        -webkit-transition: right 0.3s ease;
        transition: right 0.3s ease;
        overflow-y: auto;
        display: block;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__wrapper.active {
        right: 0;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__wrapper.active .soapkits-nav-menu__list {
        display: block;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__list {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 20px;
        width: 100%;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__list > li > a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__submenu {
        position: static;
        box-shadow: none;
        padding-left: 20px;
        display: none;
        background: transparent;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__list li.menu-item-has-children:hover > .soapkits-nav-menu__submenu {
        display: none;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__list li.menu-item-has-children.submenu-open > .soapkits-nav-menu__submenu {
        display: block;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__identity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__site-title {
        display: block;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: solid 1px currentColor;
        color: currentColor;
        cursor: pointer;
        padding: 8px;
        width: 45px;
        border-radius: 3px;
        line-height: 1;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__close svg {
        fill: currentColor;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__overlay {
        display: block;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__wrapper.active ~ .soapkits-nav-menu__overlay {
        opacity: 1;
        visibility: visible;
    }
}

/* Submenu click on title support */
.soapkits-nav-menu.submenu-click-title .soapkits-nav-menu__list li.menu-item-has-children > a {
    cursor: pointer;
}

/* Admin bar spacing */
body.admin-bar .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__wrapper,
body.admin-bar .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__wrapper {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .soapkits-nav-menu.break-point-tablet .soapkits-nav-menu__wrapper,
    body.admin-bar .soapkits-nav-menu.break-point-mobile .soapkits-nav-menu__wrapper {
        top: 46px;
    }
}

/* Body class for menu open */
body.soapkits-nav-menu--open {
    overflow: hidden;
}