/* --- Глобальные стили для страницы --- */
body {
  /* Запрещаем выделение текста на всей странице */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* --- Фон страницы --- */
  /* Убедитесь, что файл 'background.jpg' существует в папке docs/images/ */
  /*background-image: url('../images/background.jpg');*/
  background-repeat: repeat-y;
  background-size: cover;
  background-attachment: fixed;
  background-color: #ffffff; /* Запасной фон на случай, если картинка не загрузится */
}

/* --- Стили для боковых панелей и контента --- */

/* Задаем фон для боковых панелей, используя более конкретный селектор */
[data-md-color-scheme="default"] .md-sidebar {
  background-color: #fafafa; /* Очень светлый, почти белый, серый фон */
}

/* Задаем фон и отступы для центральной колонки с текстом */
.md-content {
  background-color: white;   /* Чистый белый фон для максимальной читаемости */
  padding: 1rem 2.2rem;      /* Немного увеличим отступы для "воздуха" */
  border-radius: 4px;        /* Слегка скруглим углы блока с контентом */
}

.md-footer-meta__inner {
    display: none !important;
}

/* --- Остальные стили --- */

/* Разрешаем выделение текста внутри блоков с кодом */
pre, 
code,
pre code {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Стили для PDF-просмотрщика */
#myPdfViewer {
  border: none; 
  background-color: #E0E0E0;
  aspect-ratio: 148 / 210;
  width: 100%; 
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.pdf-loading-message {
  display: none !important;
}
/* Делаем canvas внутри PDF-просмотрщика адаптивным */
#myPdfViewer canvas {
  max-width: 100%;
  height: auto;
}

/* --- Стили для оглавления (Содержание) --- */

/* Задаем фон, отступы и скругленные углы для всего блока */
.md-nav--secondary {
  background-color: #f5f5f5; /* Очень светлый серый фон */
  padding: 1rem;             /* Внутренние отступы */
  border-radius: 4px;        /* Слегка скругляем углы */
}

/* Стиль для заголовка "Содержание" */
.md-nav--secondary .md-nav__title {
  padding-left: 0.2rem;     /* Небольшой отступ слева для заголовка */
  font-weight: 700;         /* Делаем шрифт заголовка жирнее */
  color: #333;             /* Делаем цвет текста заголовка темнее */
}

/* НОВОЕ: Выделяем активный пункт в оглавлении при прокрутке */
.md-nav--secondary .md-nav__link--active {
  font-weight: 700; /* Делаем шрифт жирным */
  color: #0052cc;    /* Меняем цвет на синий для акцента */
}

/* Базовый стиль для всех кликабельных фигур */
.clickable-shape {
    display: flex; /* Для центрирования текста */
    justify-content: center;
    align-items: center;
    width: 120px; /* Ширина фигуры */
    height: 120px; /* Высота фигуры */
    background-color: #448aff; /* Цвет фона */
    color: white; /* Цвет текста */
    font-weight: bold;
    text-align: center;
    text-decoration: none; /* Убираем подчеркивание у ссылки */
    transition: transform 0.2s ease; /* Плавная анимация при наведении */
}

/* Эффект при наведении курсора */
.clickable-shape:hover {
    transform: scale(1.05); /* Слегка увеличить фигуру */
    background-color: #2962ff; /* Сделать цвет темнее */
}

/* Стиль для круга */
.shape-circle {
    border-radius: 50%; /* Эта строка превращает квадрат в круг */
}

/* Стиль для квадрата (можно добавить скругленные углы) */
.shape-square {
    border-radius: 10px; /* Небольшое скругление углов */
}