/* /home/to_denis_moroz/oksana/oksana/static/css/components/mobile_menu.css  */
/* =========== MOBILE MENU =========== */

/* Burger menu styles */
.burger-checkbox {
    display: none;
}

.burger {
    display: none;
    width: 24px;
    height: 18px;
    position: relative;
    cursor: pointer;
    z-index: 1010;
}

.burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #25324A;
    /* Тёмные линии */
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transition: .25s ease-in-out;
}

.burger span:nth-child(1) {
    top: 0;
}

.burger span:nth-child(2) {
    top: 8px;
}

.burger span:nth-child(3) {
    top: 16px;
}

/* Mobile styles */
@media (max-width: 768px) {

    /* Отступ для body, чтобы учесть фиксированное меню */
    body {
        padding-top: 70px;
        /* Должно соответствовать высоте site-header */
    }

    /* Предотвращаем автоматическое открытие мобильного меню */
    /* Принудительно закрываем бургер-меню по умолчанию */
    #burger-checkbox:not(:checked)~.main-nav {
        display: none !important;
    }

    /* Явно переопределяем поведение меню - показываем только при активном чекбоксе */
    #burger-checkbox:checked~.main-nav {
        display: block !important;
    }

    /* Убеждаемся, что меню не открывается автоматически */
    .main-nav {
        display: none !important;
    }

    /* Только когда чекбокс активен - показываем меню */
    input#burger-checkbox:checked~.main-nav {
        display: block !important;
    }

    /* Mobile menu header */
    .site-header {
        background-color: #FFFFFF;
        /* Белый фон */
        color: #25324A;
        /* Тёмный текст */
        padding: 10px 15px;
    }

    /* Show burger button on mobile */
    .burger {
        display: block;
    }

    /* Mobile navigation styling */
    .main-nav {
        position: fixed;
        top: 70px;
        /* Высота header */
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #FFFFFF;
        /* Белый фон */
        display: none;
        overflow-y: auto;
        z-index: 999;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    /* Сбрасываем стили списка навигации */
    .main-nav ul {
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-nav ul li {
        width: 100%;
        border-bottom: 1px solid #E5E7EB;
        /* Серый разделитель */
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-nav ul li a {
        padding: 16px 20px;
        line-height: normal;
        font-size: 15px;
        color: #1F2937;
        /* Тёмный текст */
        border-left: 4px solid transparent;
        /* Для активных пунктов */
        display: block;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
    }

    .main-nav ul li a:hover {
        background-color: #F9FAFB;
        color: #10B981;
        /* Зелёный текст при наведении */
    }

    /* Стили кнопок авторизации для мобильного меню */
    .auth-buttons {
        display: flex;
        flex-direction: row;
        padding: 16px 20px;
        gap: 10px;
        border-top: 1px solid #E5E7EB;
        justify-content: space-between;
    }

    .btn-auth {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        width: calc(50% - 5px);
        text-align: center;
        white-space: nowrap;
    }

    .btn-sign-in {
        color: #1F2937;
        background-color: #FFFFFF;
        border: 1px solid #D1D5DB;
    }

    .btn-sign-in:hover,
    .btn-sign-in:active {
        background-color: #F9FAFB;
    }

    .btn-get-started {
        color: #FFFFFF;
        background-color: #10B981;
        border: 1px solid #10B981;
    }

    .btn-get-started:hover,
    .btn-get-started:active {
        background-color: #0EA271;
        border-color: #0EA271;
    }

    /* Burger animation */
    .burger-checkbox:checked~.burger span:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }

    .burger-checkbox:checked~.burger span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }

    .burger-checkbox:checked~.burger span:nth-child(3) {
        top: 8px;
        transform: rotate(-45deg);
    }

    /* Стилизация подменю */
    .has-submenu>a {
        position: relative;
    }

    .has-submenu>a i {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }

    /* Стиль для подменю Settings - теперь белый фон и тёмный текст */
    .submenu {
        display: none;
        background-color: #FFFFFF !important;
        /* Белый фон как в основном меню */
    }

    .submenu li {
        border-bottom: 1px solid #E5E7EB !important;
        /* Такой же разделитель как в основном меню */
    }

    .submenu li a {
        color: #1F2937 !important;
        /* Тёмный текст как в основном меню */
        padding: 16px 20px 16px 40px !important;
        /* Больше отступа слева */
        font-weight: normal !important;
        /* Обычный шрифт */
        font-size: 15px !important;
    }

    .submenu li a:hover {
        background-color: #F9FAFB !important;
        /* Такой же hover как в основном меню */
    }

    /* Плавное открытие/закрытие подменю */
    .has-submenu .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .has-submenu.active .submenu {
        display: block;
        max-height: 500px;
        /* Достаточно большое значение, чтобы вместить все пункты */
    }

    /* Поворот галочки */
    .has-submenu.active>a i {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Language selector in mobile menu */
    .lang-select {
        margin: 0;
        padding: 16px 20px;
        border-top: 1px solid #E5E7EB;
        /* Серый разделитель */
        display: block;
        width: 100%;
        box-sizing: border-box;
        list-style: none;
    }

    /* Убираем стиль ссылки для селектора языка */
    .main-nav ul li.lang-select {
        border-bottom: none;
    }

    /* Сбрасываем padding/margin для селектора языка */
    .main-nav ul li.lang-select a {
        padding: 0;
        margin: 0;
        border-bottom: none;
    }

    .lang-select select {
        width: 100%;
        padding: 10px;
        border: 1px solid #D1D5DB;
        border-radius: 4px;
        background-color: #F9FAFB;
        color: #1F2937;
        /* Тёмный текст */
        font-size: 14px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }
}

/* 
* ВАЖНО: Все стили для мобильного меню теперь унифицированы в этом файле.
* Специфические стили для страницы knowledge_base (MyWiki) перенесены сюда 
* для обеспечения единого поведения меню на всех страницах.
* 
* Ранее стили мобильного меню для страницы knowledge_base были в отдельном файле
* mobile_knowledge_base.css, который сейчас переименован в diagram_page.css 
* и содержит только стили для элементов страницы диаграммы, но не для меню.
*/