
/* ==========================================================
   EPOXYRUS — JUX ACCORDION MENU
   Светлый минимализм
   ========================================================== */

#jux_accord-menu,
#jux_accord-menu * {
    box-sizing: border-box;
}

#jux_accord-menu {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
    color: #26363c;
    text-align: left;
    font-family: inherit;
}

/* Заголовки верхнего уровня */
#jux_accord-menu .menu_head {
    position: relative;
    margin: 0 !important;
    padding: 12px 38px 12px 12px !important;
    min-height: 44px;
    border: 0 !important;
    border-bottom: 1px solid #e8eff1 !important;
    background: #fff;
    color: #135c6d;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

#jux_accord-menu .menu_head:hover {
    background: #effbfd;
    color: #104c59;
}

#jux_accord-menu .menu_head.active,
#jux_accord-menu .menu_head.open {
    background: #eafafd;
    color: #135c6d;
    box-shadow: inset 3px 0 0 #13d3e8;
}

/* Подменю — видимость контролируется скриптом */
#jux_accord-menu div.menu_body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #f7fafb;
    box-shadow: none !important;
}

/* Пункты внутри подменю */
#jux_accord-menu div.menu_body p {
    position: relative;
    display: block;
    min-height: 38px;
    height: auto;
    margin: 0 !important;
    padding: 10px 38px 10px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f3 !important;
    background: transparent;
    color: #40545b;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

#jux_accord-menu div.menu_body p:hover {
    background: #e8fafd;
    color: #135c6d;
}

/* Ссылки */
#jux_accord-menu a {
    color: inherit;
    text-decoration: none;
}

#jux_accord-menu a:hover {
    color: #087f91;
    text-decoration: none;
}

/* ==========================================================
   СТРЕЛКИ У ПУНКТОВ С ПОДМЕНЮ
   Поддерживаем исходные классы и варианты их размещения
   ========================================================== */

/* Родительские пункты — резервируем место под стрелку */
#jux_accord-menu .menu_head.havechild,
#jux_accord-menu .menu_head.havesubchild,
#jux_accord-menu p.havechild,
#jux_accord-menu .havesubchild,
#jux_accord-menu a.havechild,
#jux_accord-menu a.havesubchild {
    position: relative;
    padding-right: 40px !important;
    cursor: pointer;
}

/* Стрелка справа */
#jux_accord-menu .menu_head.havechild::after,
#jux_accord-menu .menu_head.havesubchild::after,
#jux_accord-menu p.havechild::after,
#jux_accord-menu .havesubchild::after,
#jux_accord-menu a.havechild::after,
#jux_accord-menu a.havesubchild::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border: 0;
    border-right: 2px solid #135c6d;
    border-bottom: 2px solid #135c6d;
    background: transparent !important;
    background-image: none !important;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform .22s ease, border-color .22s ease;
    pointer-events: none;
}

/* Убираем старые изображения стрелок */
#jux_accord-menu .menu_head.havechild::before,
#jux_accord-menu .menu_head.havesubchild::before,
#jux_accord-menu p.havechild::before,
#jux_accord-menu .havesubchild::before,
#jux_accord-menu a.havechild::before,
#jux_accord-menu a.havesubchild::before {
    background-image: none !important;
}

/* Подсветка стрелки */
#jux_accord-menu .menu_head.havechild:hover::after,
#jux_accord-menu .menu_head.havesubchild:hover::after,
#jux_accord-menu p.havechild:hover::after,
#jux_accord-menu .havesubchild:hover::after,
#jux_accord-menu a.havechild:hover::after,
#jux_accord-menu a.havesubchild:hover::after {
    border-color: #08a9bd;
}

/* Поворот стрелки для открытого пункта */
#jux_accord-menu .menu_head.havechild.active::after,
#jux_accord-menu .menu_head.havesubchild.active::after,
#jux_accord-menu p.havechild.active::after,
#jux_accord-menu .havesubchild.active::after,
#jux_accord-menu a.havechild.active::after,
#jux_accord-menu a.havesubchild.active::after,
#jux_accord-menu .menu_head.havechild.open::after,
#jux_accord-menu .menu_head.havesubchild.open::after,
#jux_accord-menu p.havechild.open::after,
#jux_accord-menu .havesubchild.open::after,
#jux_accord-menu a.havechild.open::after,
#jux_accord-menu a.havesubchild.open::after {
    transform: rotate(45deg);
    margin-top: -2px;
    border-color: #08a9bd;
}

/* Вложенные уровни без рамок и отступов контейнера */
#jux_accord-menu .menu_body .menu_body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #f7fafb;
    box-shadow: none !important;
}

#jux_accord-menu .menu_body .menu_body p {
    padding-left: 18px !important;
    font-size: 13px;
}

/* Списки без стандартных отступов */
#jux_accord-menu ul,
#jux_accord-menu ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* Мобильная версия */
@media (max-width: 767px) {
    #jux_accord-menu .menu_head {
        min-height: 42px;
        padding: 11px 36px 11px 10px !important;
        font-size: 14px;
    }

    #jux_accord-menu div.menu_body p {
        padding: 9px 35px 9px 14px !important;
        font-size: 13px;
    }

    #jux_accord-menu .menu_head.havechild::after,
    #jux_accord-menu .menu_head.havesubchild::after,
    #jux_accord-menu p.havechild::after,
    #jux_accord-menu .havesubchild::after,
    #jux_accord-menu a.havechild::after,
    #jux_accord-menu a.havesubchild::after {
        right: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #jux_accord-menu *,
    #jux_accord-menu *::before,
    #jux_accord-menu *::after {
        transition: none !important;
    }
}

/* ==========================================
   EPOXYRUS — исправление видимости подменю
   ========================================== */

/* Все подменю скрыты по умолчанию.
   JavaScript модуля должен открывать их по клику. */
#jux_accord-menu div.menu_body {
    display: none;
}

/* Не показываем подменю только из-за наведения */
#jux_accord-menu .menu_head:hover + div.menu_body,
#jux_accord-menu p.havechild:hover + div.menu_body,
#jux_accord-menu .havesubchild:hover + div.menu_body {
    display: none;
}

/* Стрелки остаются видимыми у пунктов с подменю */
#jux_accord-menu .menu_head.havechild::after,
#jux_accord-menu .menu_head.havesubchild::after,
#jux_accord-menu p.havechild::after,
#jux_accord-menu .havesubchild::after,
#jux_accord-menu a.havechild::after,
#jux_accord-menu a.havesubchild::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #135c6d;
    border-bottom: 2px solid #135c6d;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform .2s ease, border-color .2s ease;
    pointer-events: none;
}

/* Бирюзовая стрелка при наведении */
#jux_accord-menu .menu_head.havechild:hover::after,
#jux_accord-menu .menu_head.havesubchild:hover::after,
#jux_accord-menu p.havechild:hover::after,
#jux_accord-menu .havesubchild:hover::after,
#jux_accord-menu a.havechild:hover::after,
#jux_accord-menu a.havesubchild:hover::after {
    border-color: #13d3e8;
}
