/* Общие стили */
:root {
    --primary-color: #007bff;
    --light-gray: #f8f9fa;
    --dark-gray: #343a40;
    --text-color: #495057;
    --border-color: #dee2e6;
    /* Шрифт изменен на Montserrat */
    --font-family: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-family);
    margin: 0;
    background-color: #fff;
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Шапка */
.header {
    background-color: var(--light-gray);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    margin: 0;
    font-size: 24px;
    color: var(--dark-gray);
}

.menu-toggle {
    display: none; /* Скрыт по умолчанию на больших экранах */
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Основной контейнер */
.knowledge-base-container {
    display: flex;
    margin-top: 20px;
}

/* Боковая панель (Сайдбар) */
.sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
}

.search-bar input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-sizing: border-box; /* Чтобы padding не влиял на ширину */
    font-family: var(--font-family); /* Наследуем шрифт для поля ввода */
}

.navigation ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.nav-category > span {
    font-weight: bold;
    color: var(--dark-gray);
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
}

.nav-category ul {
    margin-top: 10px;
    padding-left: 15px;
}

.nav-link {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 5px;
    transition: background-color 0.2s;
}

.nav-link:hover {
    background-color: var(--light-gray);
}

.nav-link.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

/* Основной контент */
.content {
    width: 100%;
    padding-left: 30px;
}

.article {
    display: none; /* Все статьи скрыты по умолчанию */
}

.article.active {
    display: block; /* Показываем только активную статью */
}

.content h2 {
    font-size: 28px;
    color: var(--dark-gray);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 0;
    font-weight: 700; /* Делаем заголовки более жирными, как принято в Montserrat */
}

.content h3 {
    font-size: 22px;
    color: var(--dark-gray);
    margin-top: 30px;
    font-weight: 700;
}

.content p {
    font-size: 16px;
}

.content .intro {
    font-size: 18px;
    color: #6c757d;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-top: 15px;
    border: 1px solid var(--border-color);
}

/* Стили для удаленного блока feedback и кнопок в нем больше не нужны */

/* Адаптивность */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Показываем кнопку меню */
    }

    .knowledge-base-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        max-height: 0; /* Скрываем меню */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .sidebar.open {
       max-height: 1000px; /* Показываем меню. Значение должно быть больше возможной высоты меню */
       padding-bottom: 20px;
    }

    .content {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }
}

/* --- Обновленные стили для Хедера и Кнопки возврата --- */

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между кнопкой назад и меню */
}

/* Стиль кнопки "В конструктор" */
.btn-back {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    border: 1px solid var(--primary-color);
    padding: 8px 16px;
    border-radius: 5px;
    transition: all 0.2s ease;
    font-size: 14px;
    white-space: nowrap; /* Чтобы текст не переносился */
}

.btn-back:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Адаптив для мобильных */
@media (max-width: 480px) {
    .header h1 {
        font-size: 18px; /* Чуть уменьшаем заголовок, чтобы всё влезло */
    }
    
    .btn-back {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .btn-back span {
        display: none; /* Если нужно скрыть текст на очень маленьких экранах, но пока оставим */
    }
}