/*!* Orbitron 600 *!*/
/*@font-face {*/
/*    font-family: 'Orbitron';*/
/*    src: url('/static/fonts/Orbitron-SemiBold.ttf') format('truetype');*/
/*    font-weight: 600;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*!* Exo 2 400 *!*/
/*@font-face {*/
/*    font-family: 'Exo 2';*/
/*    src: url('/static/fonts/Exo2-Regular.ttf') format('truetype');*/
/*    font-weight: 400;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*!* Exo 2 600 *!*/
/*@font-face {*/
/*    font-family: 'Exo 2';*/
/*    src: url('/static/fonts/Exo2-SemiBold.ttf') format('truetype');*/
/*    font-weight: 600;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/


/* Обнуляем html и body, чтобы сделать стартовую точку максимально "чистой" и одинаковой во всех браузерах. */
html, body {
    margin      : 0;                    /* это отступы между блоками на странице, 0 = убираем не наши отступы, чтобы дальше задать свои. */
    padding     : 0;                    /* отступ внутри блоков (между краем блока и его содержимым) */
    font-family : 'Exo 2';              /* Задаем шрифт Exo 2, если он загружен. Если нет — резервный шрифт sans-serif */
    font-weight : 400;                  /* жирность шрифта = 400 (или normal, это дефолтное состояние, можно не указывать явно, можно указывать) */
    font-size   : 16px;                 /* или 1rem - это дефолтное значение в 16 пикселей, можно переопределить при необходимости, rem — это "root em", единица, основанная на размере шрифта корневого тега (html) */
    text-align  : center;               /* выравнивание текста по центру внутри его контейнера по горизонтали. */
  }

/* Общие стили для тела страницы */
body {
    visibility  : hidden;   /* сначала загрузить шрифты и только потом отображать */
    background  : #fff;     /* Устанавливает белый фон страницы. */
    color       : #111;     /* основной цвет текста */
    overflow-x  : hidden;   /* Запрещает горизонтальную прокрутку (если элементы «вылезают» за границу экрана по ширине, они не будут создавать скролл). */
}




/* ===== ШАПКА САЙТА ===== */
.site-header {  /* в CSS точка (.) перед названием означает, что ты обращаешься к классу */
    background      : #f2f2f2;                      /* Цвет фона шапки */
    padding         : 16px 0;                       /* внутренний отступ для элементв сверху и снизу (16 пикселей), слева и справа — 0 */
    border-bottom   : 1px solid #ccc;               /* Тонкая нижняя граница */
    box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень под шапкой над контентом */
    position        : sticky;                       /* Шапка прилипает при прокрутке (relative - чтобы не прилипала) */
    top             : 0;                            /* «прилипание» должно происходить к самому верху окна. */
    z-index         : 1000;                         /* приоритет отображения. Чем больше число — тем выше над другими такими же прилипшими элементами. */
}

/* Контейнер, ограничивающий ширину страницы и выравнивающий содержимое */
.container-page {           /* .container — это класс-контейнер, который часто используется в вёрстке, чтобы ограничить ширину контента и выравнивать его по центру. */
    max-width   : 1200px;   /* Контент внутри контейнера не растянется больше 1200 пикселей по ширине, даже если экран шире. */
    margin      : 0 auto;   /* Отступ сверху и снизу — 0, а по бокам — auto, то есть браузер автоматически центрирует блок по горизонтали. */
    padding     : 0 24px;   /* Внутренний отступ по бокам (слева и справа) — 24 пикселя, сверху и снизу — 0. */
    display     : flex;     /* Включает флексбокс, чтобы удобно выравнивать элементы внутри по горизонтали (в одну строку). */
    align-items : center;   /* Выравнивает вложенные элементы по вертикали по центру (в пределах строки). */
    z-index     : 1;        /* контейнер должен быть выше, чем псевдоэлементы типа ::after с z-index. (у них будет значение 0) */
}




/* ===== ЛОГОТИП И НАЗВАНИЕ САЙТА ===== */

/* Обертка логотипа и текста */
.container-icon-text {
    display         : flex;     /* Включает флексбокс, чтобы элементы внутри (img, div, текст и т.д.) шли в одну строку по горизонтали (по умолчанию flex-direction: row). */
    justify-content : center;   /* Выравнивает по горизонтали содержимое блока — по центру. */
    align-items     : center;   /* Выравнивает по вертикали — то есть логотип (например, иконка и название) будут стоять ровно по центру по высоте. */
}

/* Иконка сайта (слева от названия) */
.site-logo {
    width       : 40px; /* ширина иконки (или изображения) в 40 пикселей. */
    height      : 40px; /* высота иконки (или изображения) в 40 пикселей. */
    margin-right: 8px;  /* выравнивание справа от текста - 8 пикселей */
}

/* Название сайта (первая строка) */
.site-title {
    font-family     : 'Orbitron';/*, sans-serif;   /* Задает шрифт Orbitron, если он загружен. Если нет — резервный шрифт sans-serif */
    font-size       : 24px; /* размер шрифта - 24 пикселя */
    font-weight     : 600;  /* жирность шрифта - 400 - обычный, 600 - полужирный, 900 - очень жирный */
    text-align      : left; /* выравнивание текста по левому краю */
    line-height     : 1.1;  /* межстрочный интервал (расстояние между строками текста) */
    color           : #111; /* цвет текста */
}

/* Подзаголовок сайта (вторая строка) */
.site-slogan {
    font-family : sans-serif;   /* Orbitron и Exo-2 здесь не подходят, а системный по умолчанию смотрится лучше */
    font-size   : 12px; /* размер шрифта - 12 пикселя */
    font-weight : 200;  /* жирность шрифта - 400 - обычный, 600 - полужирный, 900 - очень жирный */
    margin-top  : 2px;  /* это отступ сверху у .site-slogan, то есть расстояние между первой и второй строкой */
    color       : #666; /* цвет текста */
}




/* ===== НАЗВАНИЕ ЯЗЫКА В ДОЧЕРНИХ СТРАНИЦАХ (lang.html) ===== */
.lang-title {
    color: #b30000;
}




/* ===== ЗАГОЛОВОК ПОД ШАПКОЙ ===== */
.data-info {
    margin      : 20px 0;               /* Отступ сверху и снизу по 20px, по бокам — 0. */
    color       : #444;                 /* Цвет текста */
}




/* ===== ГРАФИК ===== */
/* Заголовок графика */
.chart-title {
    font-weight     : 600;      /* жирность шрифта - 400 - обычный, 600 - полужирный, 900 - очень жирный */
    margin-top      : 8px;     /* это отступ сверху */
    margin-bottom   : 8px;      /* это отступ снизу */
}

/* (Заголовок графика) Информация в скобках */
.title-sub {
    font-weight     : 400;
    color           : #808080;
    font-size       : 15px;
}

/* Контейнер графика */
.chart-container {
    margin          : auto;     /* 0 - внешние отступы сверху и снизу; auto - слева и справа*/
    padding         : 10px;
    max-width       : 1400px;   /* Ограничение ширины (отталкивался от мониторов 1366x768 - там смотрится гармонично) */
    display         : flex;     /* Включает флексбокс, чтобы элементы внутри (img, div, текст и т.д.) шли в одну строку по горизонтали (по умолчанию flex-direction: row). */
    justify-content : center;   /* Горизонтальное выравнивание: всё содержимое будет по центру контейнера. */
    align-items     : center;   /* Вертикальное выравнивание: элементы по центру высоты контейнера (если есть высота). */
}

/* Сам график */
.chart {
    height  : 400px;     /* Высота наиболее удобная для графика в варианте с вакансиями */
    width   : 100%;      /* Ширина графика составляет 85% от ширины родительского контейнера */
}

/* График для языков */
#chart_all_languages {
    height: 450px !important; /* из-за легенды должен быть выше */
}


/* ===== ПРУФЛИНКИ ПОД ТАБЛИЦАМИ ===== */

/* Доп.информация под графиком */
.chart-source {
    font-size       : 12px;
    color           : #777;
    margin-top      : 5px;
    width           : 100%; /* заставляем <p> растянуться */
    display         : block;
    text-align      : center; /* Добавь это для центрирования */
    margin-bottom   : 60px; /* Отступ снизу — чтобы элементы ниже не прилипали слишком близко. */
}

/* Стилизация ссылок */
.chart-source a {
    color: #777;
    text-decoration: underline;
}

/* Поведение ссылок при наведении */
.chart-source a:hover {
    color: #b30000;
}




/* ===== СПИСОК ТЕГОВ НАВЫКОВ ===== */

/* Основной контейнер */
.skills-tag-list {
    display         : flex;         /* Используем флексбокс для выравнивания тегов в строку */
    flex-wrap       : wrap;         /* Разрешаем перенос тегов на следующую строку, если они не помещаются */
    gap             : 10px;         /* Отступ между тегами — и по горизонтали, и по вертикали */
    list-style      : none;         /* Убираем маркеры (точки) у <li> элементов */
    margin-top      : 30px;         /* Отступ сверху от предыдущего блока */
    margin-bottom   : 30px;         /* Отступ сверху от предыдущего блока */
    justify-content : center;       /* Горизонтальное выравнивание: всё содержимое будет по центру контейнера. */
}

/* Стили для отдельного тега навыка (внешний вид "пилюли") */
.skill-tag {
    background-color    : #f2f2f2;                      /* фоновый цвет тега; */
    border              : 2px solid #ccc;               /* тонкая рамка; */
    color               : black;                         /* цвет текста; */
    font-size           : 14px;                         /* размер текста; */
    font-weight         : 400;                          /* Жирный текст */
    padding             : 6px 12px;                     /* внутренние отступы — добавляют «воздуха» внутри тега; */
    border-radius       : 16px;                         /* скругление углов (16px — делает его похожим на капсулу/пилюлю); */
    transition          : background-color 0.2s ease;   /* плавная анимация изменения цвета при наведении (если будет :hover). */
}

/* эффект наведения на пилюлю */
.skill-tag:hover {
    background-color    : #e0e0e0;  /* цвет наведения */
}



/* ===========ТАБЛИЦА ЗАРПЛАТ=========== */

/* Обёртка таблицы зарплат */
.salary-table-wrapper {
  border            : 1px solid #ccc;               /* Тонкая светло-серая рамка вокруг таблицы */
  border-radius     : 4px;                          /* Скругление углов таблицы */
  box-shadow        : 0 2px 8px rgba(0, 0, 0, 0.08);/* Мягкая тень для объёмности */
  margin            : 25px auto 10px;               /* Отступ сверху 25, слева/справа auto, снизу 10 */
  max-width         : 1400px;                       /* Максимальная ширина таблицы */
  overflow          : hidden;                       /* Обрезает всё, что выходит за границы таблицы (например, тени) */
  background-color  : #fff;                         /* Белый фон таблицы */
  position          : relative;
}

/* Контейнер переключения вкладок Москва/Россия */
.salary-table-wrapper .tabs {
    background-color: whitesmoke;   /* Фон панели вкладок */
    width: 100%;                    /* Растягиваем на всю ширину контейнера */
    display: flex;                  /* Горизонтальное расположение вкладок */
    justify-content: center;        /* Центрируем вкладки по горизонтали */
    font-size: 14px;                /* Размер шрифта */
    user-select: none;              /* Запрет выделения текста */
    margin: auto;                   /* Центрируем блок вкладок */
    gap: 12px;                      /* Отступ между вкладками */
}

/* Стили для каждой вкладки */
.salary-table-wrapper .tab {
    padding: 10px 22px;             /* Отступ внутри вкладки */
    cursor: pointer;                /* Курсор при наведении */
    border: 2px solid transparent;  /* Граница для визуального эффекта */
    border-bottom: none;            /* Убираем нижнюю границу */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Плавные переходы */
    color: #555;                    /* Цвет текста */
    background-color: #f9f9f9;      /* Фон вкладки */
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); /* Тень для объёма */
}

/* Эффект наведения на вкладку */
.salary-table-wrapper .tab:hover {
    background-color: #eaeaea;      /* Фон при наведении */
    color: #b30000;                 /* Цвет текста при наведении */
}

/* Активная вкладка */
.salary-table-wrapper .tab.active {
    border-color: darkgray;         /* Цвет границы активной вкладки */
    border-bottom: 2px solid white; /* Нижняя белая граница (чтобы казалось соединённой с таблицей) */
    font-weight: 600;               /* Жирный текст */
    color: #b30000;                 /* Цвет текста активной вкладки */
    background-color: white;        /* Фон активной вкладки */
    box-shadow: none;               /* Убираем тень */
}


/* Таблица зарплат */
.salary-table {
  width             : 100%;     /* Таблица занимает всю доступную ширину контейнера */
  border-collapse   : collapse; /* Убирает промежутки между ячейками — границы схлопываются */
}

/* Шапка таблицы */
.salary-table thead {
  background-color  : #e0e0e0;  /* Светло-серый фон для визуального отделения заголовка */
  color             : #333;     /* Тёмный текст для контраста и читаемости */
  font-weight       : 600;      /* Жирный шрифт для акцента на заголовках */
}

/* Добавляем иконку сортировки */
.salary-table th[data-sortable] {
  position: relative;
  padding-right: 4px; /* уменьшаем, чтобы место было, если нужно */
}

/* Добавляем иконку сортировки */
.salary-table th[data-sortable]::after {
  content: "⇅"; /*⇅*/
  font-size: 15px;
  color: #b30000;   /* #b30000 */
  opacity: 0.3;
  margin-left: 4px; /* небольшой отступ от текста */
  vertical-align: middle; /* чтобы иконка была на уровне текста */
  transition: opacity 0.2s, transform 0.2s;
  position: static; /* отменяем absolute */
  display: inline-block;
}

/* При наведении: сделать иконку видимой */
.salary-table th[data-sortable]:hover::after {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Активная сортировка: стрелка вверх или вниз */
.salary-table th.sort-asc::after {
  content: "▲"; /* стрелка вверх */
  opacity: 1;
  color: #b30000;
}

.salary-table th.sort-desc::after {
  content: "▼";
  opacity: 1;
  color: #b30000;
}


/* Ячейки таблицы: заголовки и данные */
.salary-table th,
.salary-table td {
  padding           : 12px 16px;       /* Внутренние отступы: вертикальный и горизонтальный */
  text-align        : left;            /* Выравнивание текста по левому краю */
  border-bottom     : 1px solid #eee;  /* Светлая граница между строками */
  vertical-align    : middle;          /* Вертикальное выравнивание содержимого по центру */
}

/* Первая колонка: иконка + текст */
.salary-table td:first-child {
  display       : flex;            /* Горизонтальное размещение содержимого */
  align-items   : center;          /* Центрирование по вертикали */
  gap           : 8px;             /* Расстояние между иконкой и текстом */
}

/* Строки таблицы: плавный ховер и курсор */
.salary-table tbody tr {
  transition    : background-color 0.2s ease; /* Плавное изменение фона при наведении */
  cursor        : pointer;                    /* Курсор-ссылка при наведении */
}

/* Чередование цвета строк (зебра) */
.salary-table tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Светлый фон для чётных строк */
}

/* Эффект наведения на строку таблицы */
.salary-table tbody tr:hover {
  background-color: #f1f1f1; /* Голубоватый фон при наведении */
}

/* Выравнивание текста колонок (по центру) */
.salary-table td:nth-child(2),
.salary-table td:nth-child(3),
.salary-table td:nth-child(4),
.salary-table td:nth-child(5),
.salary-table td:nth-child(6),
.salary-table th:nth-child(2),
.salary-table th:nth-child(3),
.salary-table th:nth-child(4),
.salary-table th:nth-child(5),
.salary-table th:nth-child(6) {
  text-align: center;
}



/* ===== СТАТИЧНЫЙ ФУТЕР ===== */

/* Нижняя фиксированная часть страницы. Служит для вывода справочной информации, авторства и т.п. */
.footer {
    margin-top  : 40px;                 /* Внешний отступ сверху от предыдущего блока */
    border-top  : 1px solid #e0e0e0;    /* Тонкая верхняя граница для отделения футера от остальной части */
    background  : #f9f9f9;              /* Светло-серый фон */
    padding     : 4px;                  /* Внутренние отступы: 4px сверху и снизу, 24px слева и справа */
    font-size   : 14px;                 /* Размер шрифта */
    color       : #111;                 /* Цвет текста */
    line-height : 0.6;                  /* вертикальный интервал между строками */
}

/* Предотвращаем перенос текста (сейчас в футере) */
.nowrap {
    white-space : nowrap;
}

/* Текст "HH.RU" — выделяется цветом и шрифтом */
.hh-ru-text {
    font-family : 'Orbitron';/*, 'Exo 2', sans-serif;*/
    font-weight : 600;
    color       : #b30000;
}




/* ============================ АДАПТИВНАЯ ВЕРСТКА ============================ */
@media (max-width: 720px) {


    /* === Базовый размер шрифта для всего документа (mobile) === */
    body {
        font-size   : 8px;
    }


    /* ===== ШАПКА САЙТА (mobile) ===== */
    .site-header {
        padding: 13px 0; /* внутренний отступ сверху и снизу (13 пикселей), слева и справа — 0 */
    }


    /* ===== ЗАГОЛОВКИ (mobile) ===== */

    /* Название языка в дочерних страницах (lang.html) */
    .lang-title {
        font-size     : 24px;
        margin-top    : 8px;    /* Внешний отступ сверху от предыдущего блока */
        margin-bottom : 0px;    /* Внешний отступ сверху от предыдущего блока */
    }

    /*  Под шапкой */
    .data-info {
        font-size   : 15px;
    }

    /* Над графиками и таблицами */
    .chart-title {
        font-size   : 15px; /* Размер текста заголовка */
    }

    /* (Над графиками и таблицами) в скобках */
    .title-sub {
        display     : block;
        margin-top  : 4px;
        font-weight : 400;
        font-size   : 12px;
    }


    /* ===== ГРАФИК (mobile)  ===== */

    /* Контейнер графика */
    .chart-container {
        padding: 5px 5px 0 0;     /* Внешний отступ сверху и справа по 5 пикселей */
    }

    /* Сам график */
    .chart {
        height  : 300px;    /* Высота фиксирована: 260 пикселей (совпадает с надписью с боку "количество открытых вакансий") */
    }

    /* Доп.информация под графиком */
    .chart-source {
        margin-top    : 0px;   /* Внешний отступ сверху от предыдущего блока */
        margin-bottom : 40px;  /* Внешний отступ сверху от предыдущего блока */
    }


    /* === ТАБЛИЦА (mobile) === */

    /* Обёртка таблицы зарплат */
    .salary-table-wrapper {
        margin-top    : 0px;
        margin-bottom : 5px;
    }

    /* Таблица зарплат */
    .salary-table {
        font-size: 9px;
    }

    /* Ячейки таблицы зарплат (заголовки и данные) */
    .salary-table th,
    .salary-table td {
        padding: 4px 4px; /* уменьшение отступов */
    }

    /* Иконки языков в таблице зарплат */
    .salary-table img {
        width       : 18px; /* уменьшение иконок языков */
        height      : auto;
        margin-right: 4px;
        padding     : 4px 4px;
    }

    /* Добавляем иконку сортировки */
    .salary-table th[data-sortable]::after {
        font-size: 8px;
    }

    /* Активная сортировка: стрелка вверх или вниз */
    .salary-table th.sort-asc::after {
        font-size: 8px;
    }

    /* Стилизация иконки сортировки по убыванию в заголовке таблицы */
    .salary-table th.sort-desc::after {
        font-size: 8px;
    }

    /* Стили для каждой вкладки */
    .salary-table-wrapper .tab {
        padding: 7px 15px; /* Отступ внутри вкладки */
    }

    /* ===== СПИСОК ТЕГОВ НАВЫКОВ ===== */
    .skills-tag-list {
        padding: 0;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    /* ===== СТАТИЧНЫЙ ФУТЕР ===== */
    /* Уменьшаем шрифт в футере и отступ от низа экрана на мобильных */
    .footer {
        margin-top      : 10px;  /* Внешний отступ сверху от предыдущего блока */
        font-size       : 12px; /* Уменьшаем размер шрифта */
        line-height     : 0.6;  /* вертикальный интервал между строками */
        margin-bottom   : 10px; /* пространство от футера до края экрана */
    }
}