/**
 * @file
 * Стили для мобильного меню (работает только на экранах <= 767px)
 */

@media (max-width: 767px) {
    /* ===== Контейнер меню ===== */
    #menu-container nav {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    /* ===== Основной список ===== */
    #menu-container #sf-menu {
        display: block;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* ===== Пункты меню (родительские) ===== */
    #menu-container #sf-menu > li {
        margin-bottom: 6px;
        background-color: #f5f5f5;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e8e8e8;
    }

    /* ===== Родительские пункты ВСЕХ УРОВНЕЙ — жирные ===== */
    #menu-container #sf-menu li.has-submenu > a,
    #menu-container #sf-menu li.has-submenu > .is-active {
        font-weight: 600;
        background-color: #f0f0f0;
    }

    /* ===== Вложенные пункты ===== */
    #menu-container #sf-menu ul.submenu li {
        margin: 0;
        border: 0 none;
        border-radius: 0;
        background-color: transparent;
        border-bottom: 1px solid #f0f0f0;
    }

    #menu-container #sf-menu ul.submenu li:last-child {
        border-bottom: 0 none;
    }

    /* ===== Ссылки и активные пункты ===== */
    #menu-container #sf-menu a,
    #menu-container #sf-menu .is-active {
        display: block;
        width: 100%;
        font-size: 16px;
        line-height: 1.4;
        padding: 14px 16px;
        text-decoration: none;
        word-wrap: break-word;
        white-space: normal;
        cursor: pointer;
        box-sizing: border-box;
        color: #111;
        transition: background-color 0.2s ease;
    }

    #menu-container #sf-menu a:active {
        background-color: #e8e8e8;
    }

    /* ===== Активный пункт ===== */
    #menu-container #sf-menu .is-active {
        font-weight: 600;
        color: #911504;
        cursor: default;
    }

    /* ===== Пункты с подменю ===== */
    #menu-container #sf-menu li.has-submenu > a,
    #menu-container #sf-menu li.has-submenu > .is-active {
        padding-right: 44px;
        position: relative;
    }

    /* ===== Стрелка для пунктов с подменю ===== */
    #menu-container #sf-menu li.has-submenu > a::after,
    #menu-container #sf-menu li.has-submenu > .is-active::after {
        content: "";
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23911504'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.3s ease;
    }

    /* ===== Стрелка раскрытого пункта ===== */
    #menu-container #sf-menu li.has-submenu.is-open > a::after,
    #menu-container #sf-menu li.has-submenu.is-open > .is-active::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* ===== Подменю (скрыто по умолчанию) ===== */
    #menu-container #sf-menu .submenu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding-left: 0;
        margin: 0;
        list-style: none;
        background-color: #fafafa;
    }

    /* ===== Раскрытое подменю ===== */
    #menu-container #sf-menu .submenu.is-open {
        max-height: 2000px;
        padding: 4px 0;
    }

    /* ===== Вложенные подменю (глубина 3+) ===== */
    #menu-container #sf-menu .submenu .submenu {
        background-color: #ffffff;
    }

    #menu-container #sf-menu .submenu .submenu .submenu {
        background-color: #fcfcfc;
    }

    /* ===== Заголовки-разделители (скрываем на мобильных) ===== */
    #menu-container #sf-menu li.container-title {
        display: none;
    }

    /* ===== Дочерние пункты (первый уровень вложенности) — обычный шрифт ===== */
    #menu-container #sf-menu .submenu > li:not(.has-submenu) > a,
    #menu-container #sf-menu .submenu > li:not(.has-submenu) > .is-active,
    #menu-container #sf-menu .submenu > li.has-submenu > a,
    #menu-container #sf-menu .submenu > li.has-submenu > .is-active {
        font-weight: 400;
        padding-left: 24px;
        font-size: 15px;
        background-color: transparent;
    }

    /* ===== Дочерние пункты (второй уровень вложенности) — обычный шрифт ===== */
    #menu-container #sf-menu .submenu .submenu > li:not(.has-submenu) > a,
    #menu-container #sf-menu .submenu .submenu > li:not(.has-submenu) > .is-active,
    #menu-container #sf-menu .submenu .submenu > li.has-submenu > a,
    #menu-container #sf-menu .submenu .submenu > li.has-submenu > .is-active {
        font-weight: 400;
        padding-left: 32px;
        font-size: 14px;
        background-color: transparent;
    }

    /* ===== Третий уровень вложенности ===== */
    #menu-container #sf-menu .submenu .submenu .submenu > li:not(.has-submenu) > a,
    #menu-container #sf-menu .submenu .submenu .submenu > li:not(.has-submenu) > .is-active,
    #menu-container #sf-menu .submenu .submenu .submenu > li.has-submenu > a,
    #menu-container #sf-menu .submenu .submenu .submenu > li.has-submenu > .is-active {
        font-weight: 400;
        padding-left: 40px;
        font-size: 13px;
        background-color: transparent;
    }

    /* ===== Индикатор уровня вложенности (точки) ===== */
    #menu-container #sf-menu .submenu a::before,
    #menu-container #sf-menu .submenu .is-active::before {
        content: "•";
        display: inline-block;
        margin-right: 8px;
        color: #bbb;
        font-size: 12px;
    }

    /* ===== Скролл внутри меню ===== */
    #menu-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* ===== Затемнение фона при открытом меню ===== */
    body.menu-is-open {
        overflow: hidden;
    }
}