/* style.css - Documentation Style (SPA-like) */

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: #202122;
    background-color: #f8f9fa;
    height: 100%; /* Обеспечиваем 100% высоты для html и body */
    overflow: hidden; /* Убираем основной скролл у body */
}

.wrapper {
    display: flex;
    height: 100%; /* Обертка занимает 100% высоты родителя (body) */
    width: 100%;
}

/* --- Стили боковой панели --- */
.sidebar {
    width: 280px;
    background-color: #e9ecef;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Не сжимается */
    overflow-y: auto; /* ДОБАВЛЯЕМ СВОЙ СКРОЛЛ */
    padding: 20px; /* Переносим padding из body */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* Скрываем скроллбар для Webkit (Chrome, Safari) */
.sidebar::-webkit-scrollbar {
    width: 0; /* Ширина скроллбара */
}
/* Скрываем скроллбар для Firefox */
.sidebar {
    scrollbar-width: none; /* Убирает стандартный скроллбар */
}
/* Скрываем скроллбар для IE и Edge (старые версии) */
.sidebar {
    -ms-overflow-style: none;
}


.sidebar .site-title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 30px 0; /* Убираем верхний margin */
    color: #0056b3;
    padding-bottom: 10px; /* Отступ под заголовком сайта */
    border-bottom: 1px solid #ccc; /* Линия под заголовком сайта */
}

.sidebar h2 {
    color: #333;
    margin-top: 0;
    margin-bottom: 15px; /* Уменьшаем отступ после H2 в сайдбаре */
    border-bottom: none; /* Убираем линию под H2 в сайдбаре */
    padding-bottom: 0;
}

.sidebar .nav-list {
    list-style: none;
    padding: 0;
}

.sidebar .nav-list li {
    margin-bottom: 2px; /* Меньший отступ между пунктами меню для компактности */
}

.sidebar .nav-list li a {
    display: block;
    padding: 8px 10px;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Добавляем data- атрибут для JS, чтобы знать оригинальный href */
}

.sidebar .nav-list li a:hover {
    background-color: #d0d9e2;
    color: #000; /* Чуть темнее текст при наведении */
    text-decoration: none;
}

.sidebar .nav-list li a:visited {
    color: #333; /* Не меняем цвет после посещения в меню */
}

/* СТИЛЬ ДЛЯ АКТИВНОГО ПУНКТА МЕНЮ */
.sidebar .nav-list li.active a {
    background-color: #007bff; /* Синий фон для активной ссылки */
    color: #fff; /* Белый текст */
    font-weight: bold;
}
.sidebar .nav-list li.active a:hover {
     background-color: #0056b3; /* Чуть темнее синий при наведении на активную ссылку */
     color: #fff;
}
.sidebar .nav-list li.active a:visited {
     color: #fff; /* Белый текст даже если посещено */
}


/* --- Стили основного контента (правая колонка) --- */
.content-area {
    flex-grow: 1; /* Занимает оставшееся место */
    overflow-y: auto; /* ДОБАВЛЯЕМ СВОЙ СКРОЛЛ */
    padding: 20px 40px; /* Отступы */
    background-color: #fff;
    box-shadow: inset 1px 0 3px rgba(0,0,0,0.05); /* Легкая внутренняя тень слева */
    box-sizing: border-box; /* Учитываем padding в размерах */
}

/* Контейнер для центрирования контента внутри скроллящейся области */
.inner-content {
    max-width: 900px; /* Ограничиваем ширину контента */
    margin: 0 auto; /* Центрируем контент */
    /* padding-bottom: 50px; /* Дополнительный отступ снизу, чтобы контент не прилипал к краю */
}


/* --- Общие стили для содержимого (используются в .inner-content) --- */
/* Эти стили будут применяться к HTML, который загружается */

h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #eee;
}

h1 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 30px;
    text-align: left;
}

p {
    margin-bottom: 1em;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
     color: #6610f2;
}

/* Блоки заметок */
.note-block, .info-block, .warning-block {
    padding: 15px;
    margin: 1em 0;
    border-radius: 5px;
    border-left: 5px solid;
    position: relative;
    /* Добавляем иконку или текст "Note:" в начало контента внутри блока HTML файла */
}

.note-block {
    background-color: #e9ecef;
    border-left-color: #007bff;
    color: #004085;
}

/* Блоки кода */
pre {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 15px;
    overflow-x: auto;
    margin: 1em 0;
    white-space: pre-wrap; /* Перенос строк в коде */
    word-wrap: break-word;
}

code {
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
}

pre code {
    display: block;
    padding: 0;
}

/* Хлебные крошки */
.breadcrumbs {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.breadcrumbs a {
    color: #555;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs span {
    margin: 0 5px;
    color: #aaa;
}

/* Ссылка "Вернуться к списку" */
.back-link {
    display: block;
    margin-top: 40px;
    text-align: center;
    font-size: 0.9em;
    color: #555;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.back-link a {
     color: #555;
     text-decoration: none;
}
.back-link a:hover {
    text-decoration: underline;
    color: #333;
}
.back-link a:visited {
    color: #777;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        max-height: 200px; /* Ограничиваем высоту сайдбара */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

     /* Скроллбар может понадобиться на мобильных */
     .sidebar::-webkit-scrollbar {
         width: 8px;
     }
     .sidebar {
         scrollbar-width: auto;
         -ms-overflow-style: auto;
     }

    .content-area {
         padding: 15px; /* Меньше отступы на мобильных */
         /* box-shadow: none; /* Убираем тень слева на мобильных */
    }

     .inner-content {
         max-width: none; /* Снимаем ограничение ширины на мобильных */
     }
}