/* static/css/custom_markdown.css */

/* --- Общие стили для всего Markdown контента --- */
/* Класс .markdown-content должен быть применен к родительскому элементу,
   в который вставляется сгенерированный HTML из Markdown. */
.markdown-content p {
    margin-bottom: 1rem; /* Стандартный отступ Bootstrap для параграфов */
    line-height: 1.6;    /* Улучшенная читаемость */
}

.markdown-content a {
    color: var(--bs-link-color); /* Цвет ссылок Bootstrap */
    text-decoration: var(--bs-link-decoration); /* Подчеркивание ссылок Bootstrap */
}

.markdown-content a:hover {
    color: var(--bs-link-hover-color); /* Цвет ссылок при наведении */
    text-decoration: var(--bs-link-hover-decoration);
}

/* --- Заголовки (h1-h6) --- */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 0.25rem; /* Отступ сверху для разделения секций */
    margin-bottom: 1.25rem; /* Отступ снизу */
    font-weight: var(--bs-font-weight-bold); /* Жирный шрифт из Bootstrap */
    color: var(--bs-dark); /* Темный цвет заголовков для контраста */
    line-height: 1.2; /* Межстрочный интервал */
}

/* Адаптивные размеры шрифтов для заголовков, как в Bootstrap */
.markdown-content h1 { font-size: calc(1.375rem + 1.5vw); }
.markdown-content h2 { font-size: calc(1.325rem + 0.9vw); }
.markdown-content h3 { font-size: calc(1.3rem + 0.6vw); }
.markdown-content h4 { font-size: calc(1.275rem + 0.3vw); }
.markdown-content h5 { font-size: 1.25rem; }
.markdown-content h6 { font-size: 1rem; }

/* --- Таблицы --- */
.markdown-content table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-body-color);
    border-collapse: separate; /* Для border-spacing и border-radius */
    border-spacing: 0; /* Убираем стандартные рамки, чтобы использовать border-radius */
    border-radius: var(--bs-border-radius); /* Скругленные углы таблицы */
    overflow: hidden; /* Обрезаем контент по скругленным углам */
    box-shadow: var(--bs-box-shadow-sm); /* Легкая тень для выделения */
}

.markdown-content table th,
.markdown-content table td {
    padding: 0.3rem 0.5rem; /* Отступы ячеек */
    vertical-align: middle;
    border: 1px solid var(--bs-body-bg); /* Рамки ячеек из Bootstrap  --bs-border-color*/
}

/* Чередование цвета строк в таблице (как table-striped) */
.markdown-content table tbody tr:nth-of-type(odd) {
    background-color: var(--bs-light); /* Светлый фон для нечетных строк */
}
.markdown-content table tbody tr:nth-of-type(even) {
    background-color: var(--bs-body-bg); /* Основной фон для четных строк */
}

/* Заголовки таблицы */
.markdown-content table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid  var(--bs-border-color);
    background-color: var(--bs-light); /* Основной цвет Bootstrap для заголовков --bs-secondary*/
    color: var(--bs-body-color); /* Белый текст на основном фоне */
    border-top: none; /* Убираем верхнюю границу для лучшего вида */
}

/* --- Списки (ul, ol) --- */
.markdown-content ul,
.markdown-content ol {
    padding-left: 2rem; /* Отступ для маркеров/номеров */
    margin-bottom: 1rem;
}

.markdown-content li {
    margin-bottom: 0.5rem; /* Отступ между элементами списка */
}

/* --- Списки определений (dl, dt, dd) - для расширения markdown.extensions.def_list --- */
.markdown-content dl dt {
    font-weight: var(--bs-font-weight-bold);
    margin-top: 0.8rem; /* Отступ сверху для каждого термина */
    color: var(--bs-primary); /* Цвет заголовка термина */
}
.markdown-content dl dd {
    margin-bottom: 0.5rem;
    margin-left: 1.5rem; /* Отступ для описания */
    color: var(--bs-secondary-color); /* Менее яркий цвет для описания */
}

/* --- Блоки цитат (blockquote) --- */
.markdown-content blockquote {
    margin-bottom: 1rem;
    border-left: 0.25rem solid var(--bs-primary); /* Цветная левая граница */
    padding: 1rem;
    background-color: rgba(var(--bs-light-rgb), 0.8); /* Светлый фон */
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
}

.markdown-content blockquote p:last-child {
    margin-bottom: 0; /* Убираем лишний отступ у последнего параграфа в цитате */
}

/* --- Блоки кода (pre, code) --- */
.markdown-content pre {
    display: block;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875em; /* Меньший шрифт для кода */
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg); /* Светлый серый фон из Bootstrap */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow-x: auto; /* Горизонтальный скролл для длинных строк кода */
}

.markdown-content pre code {
    color: inherit; /* Код наследует цвет от родителя pre */
    font-size: inherit; /* Код наследует размер от родителя pre */
}

/* Инлайн код */
.markdown-content :not(pre) > code {
    padding: 0.2em 0.4em;
    font-size: 0.875em;
    color: var(--bs-code-color); /* Специальный цвет для инлайн кода */
    background-color: var(--bs-code-bg); /* Фон для инлайн кода */
    border-radius: var(--bs-border-radius);
}

/* --- Admonition блоки (для расширения markdown.extensions.admonition) --- */
.markdown-content .admonition {
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius); /* Радиус углов из Bootstrap */
    box-shadow: var(--bs-box-shadow-sm); /* Легкая тень */
}

.markdown-content .admonition-title {
    font-weight: var(--bs-font-weight-bold);
    margin-bottom: 0.5rem;
    padding-right: 1.5rem; /* Отступ справа для потенциальной иконки */
    position: relative;
    /* Если вы будете добавлять иконки, это место для их стилизации
       Например, с помощью Bootstrap Icons и content: "\Fxxx"; */
}

/* Стили для разных типов admonition, используя Bootstrap-цвета */
.markdown-content .admonition.note {
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
}
.markdown-content .admonition.note .admonition-title {
    color: var(--bs-info-text-emphasis);
}

.markdown-content .admonition.warning {
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}
.markdown-content .admonition.warning .admonition-title {
    color: var(--bs-warning-text-emphasis);
}

.markdown-content .admonition.tip {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}
.markdown-content .admonition.tip .admonition-title {
    color: var(--bs-success-text-emphasis);
}

.markdown-content .admonition.danger {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}
.markdown-content .admonition.danger .admonition-title {
    color: var(--bs-danger-text-emphasis);
}

/* --- Изображения (если не используются напрямую Bootstrap классы через attr_list) --- */
.markdown-content img {
    max-width: 100%;
    height: auto; /* Делает изображения адаптивными по умолчанию */
    display: block; /* Убирает лишние отступы снизу */
    margin-left: auto;
    margin-right: auto; /* Центрирует изображения */
    border-radius: var(--bs-border-radius); /* Скругленные углы */
    box-shadow: var(--bs-box-shadow-sm); /* Легкая тень */
}

/* --- Горизонтальные линии (hr) --- */
.markdown-content hr {
    margin: 2rem 0;
    color: var(--bs-border-color); /* Цвет линии */
    height: 1px;
    background-color: currentColor; /* Использует цвет из color */
    border: 0;
    opacity: 0.25; /* Прозрачность */
}