/* Стили для бургера */
.burger-btn {
    display: none; /* Скрыта по умолчанию */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #555;
    padding: 5px 0;
    margin-right: 10px; /* Отступ справа от бургера */
    /* Убираем order, управляем позицией через flex */
}

.burger-menu {
    display: none; /* Скрыто по умолчанию */
    position: absolute;
    top: 100%; /* Позиционируем под навигацией */
    left: 5%;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 99;
    flex-direction: column;
    padding: 10px 0;
    width: 90%; /* Занимает большую часть ширины экрана */
}

.burger-menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555;
    transition: background 0.3s;
}

.burger-menu a:hover {
    background: #f0f0f0;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column; /* Располагаем элементы вертикально */
        align-items: stretch; /* Растягиваем элементы по ширине */
        gap: 15px; /* Отступ между логотипом и меню */
    }

    .logo {
        align-self: flex-start; /* Выравнивание логотипа по левому краю */
    }

    .nav {
        display: flex;
        flex-wrap: wrap; /* Позволяем элементам переноситься */
        justify-content: center; /* Центрируем основные пункты меню */
        align-items: center; /* Выравнивание по вертикали */
        gap: 15px;
        position: relative; /* Для позиционирования бургера */
        width: 100%; /* Занимаем всю ширину */
        order: 1; /* Убедимся, что .nav идёт после .logo */
    }

    .nav a {
        font-size: 0.8rem;
        white-space: nowrap; /* Не переносить текст */
    }

    /* Скрываем все пункты меню на мобильных */
    .nav a {
        display: none;
    }

    /* Показываем только первые 3 */
    .nav a:nth-child(1),
    .nav a:nth-child(2),
    .nav a:nth-child(3) {
        display: block;
    }

    .burger-btn {
        display: block; /* Показываем кнопку бургера */
        order: -1; /* Перемещаем кнопку бургера в начало строки .nav */
    }

    .burger-menu.active {
        display: flex; /* Показываем меню при активации */
        top: calc(100% + 10px); /* С небольшим отступом от основного меню */
        left: 5%;
        width: 90%;
    }
}