/*
  Фирменные цвета КСИА для темы Material.

  Основной цвет взят из корпоративной презентации: #479E2C.
  Для мелкого текста используются варианты того же тона (H=106),
  затемненные или осветленные до контраста, проходящего WCAG AA:

    #3A8224  контраст 4.77 на белом      - ссылки в светлой теме
    #5FB245  контраст 6.09 на темном фоне - ссылки в темной теме

  Сам #479E2C на белом дает 3.39, поэтому он применяется только
  к крупным плоскостям (шапка), но не к тексту статей.
*/

:root {
  /* Шапка и основные элементы */
  --md-primary-fg-color:              #479E2C;
  --md-primary-fg-color--light:       #5FB245;
  --md-primary-fg-color--dark:        #3A8224;
  --md-primary-bg-color:              #FFFFFF;
  --md-primary-bg-color--light:       rgba(255, 255, 255, 0.7);

  /* Акценты: наведение, активные пункты меню, кнопки */
  --md-accent-fg-color:               #3A8224;
  --md-accent-fg-color--transparent:  rgba(58, 130, 36, 0.1);
}

/* Светлая тема */
[data-md-color-scheme="default"] {
  --md-typeset-a-color:               #3A8224;
}

/*
  Темная тема.

  Шапка здесь нейтральная, а не фирменная зеленая: крупная насыщенная
  заливка на темном фоне выглядит тяжело и перетягивает внимание с текста.
  Фирменный цвет уходит в мелкие элементы - ссылки, активные пункты меню,
  где он читается как акцент, а не как фон.
*/
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:              #262A34;
  --md-primary-bg-color:              #E6E8EC;
  --md-accent-fg-color:               #5FB245;
  --md-accent-fg-color--transparent:  rgba(95, 178, 69, 0.1);
  --md-typeset-a-color:               #5FB245;
}

/*
  Размер картинок в тексте.

  Ограничение по max-width, а не width: оно ужимает только то, что шире
  предела, и не трогает мелкие иконки внутри строк (их в документации
  около 75 штук, все уже 200px).

  Значение min(100%, ...) не дает картинке вылезти за колонку на узких
  экранах. Чтобы поменять размер по всему порталу, правится одна строка ниже.

  Картинку можно показать во всю ширину колонки: ![](img.png){: .wide }
*/
:root {
  --ksia-image-max-width: 800px;
}

.md-typeset img {
  max-width: min(100%, var(--ksia-image-max-width));
}

.md-typeset img.wide {
  max-width: 100%;
}

/*
  Единый вид таблиц.

  По умолчанию Material подгоняет таблицу под содержимое, поэтому соседние
  таблицы получаются разной ширины и страница выглядит неровно. Растягиваем
  все на ширину колонки.

  Если содержимое шире колонки (много столбцов), таблица не сожмется в кашу,
  а получит горизонтальную прокрутку - за это отвечает обертка .md-typeset__table.
*/
.md-typeset__table {
  width: 100%;
}

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
}