/* ============================================================
   BASE — сброс/типографика общих HTML-тегов и базовые layout-
   примитивы (обёртки, отступы, футер, баннер). Грузится на ВСЕХ
   страницах сайта, до подключения компонентов и page-специфики.
   ============================================================ */

body {
    font-family: 'Fira Sans', sans-serif;
}

/* Локальный саб-сет Material Symbols Outlined: только глифы, нужные для
   иконок assignment_turned_in и support_agent (карточки на главной).
   При добавлении новой иконки на сайт файл нужно пересобрать под новый
   набор символов (запрос к Google Fonts с параметром text=<имена иконок>). */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('/static/users/fonts/material-symbols-outlined-subset.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

html {
    color: #444444;
}

html::-webkit-scrollbar {
    display: none;
}

h1 {
  /* Задаем градиент слева направо */
  background: linear-gradient(to right, #557a95 0%, #79aec8 100%);

  /* Магия: обрезаем фон строго по контуру букв */
  -webkit-background-clip: text;
  background-clip: text;

  /* Делаем сам текст прозрачным, чтобы сквозь него был виден градиент */
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

h2 {
   color: #444444;
}

h3 {
   color: #444444;
}

mark {
    background-color: #ffff00;
}

details {
    background-color: whitesmoke;
}

code {
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid #cbcbcb;
    border-radius: .5em;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

code_non {
    padding-left: .5em;
    padding-right: .5em;
    border: 1px solid #cbcbcb;
    border-radius: .5em;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

code_text {
    border: 1px solid #557a95;
    background-color: transparent;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

code_text a {
    text-decoration: none;
    color: #557a95;
    padding: 0.15em 0.2em;
    transition: background-color 0.5s ease;
}

code_text a:hover {
    background-color: #d0e8f2;
}

table {
    font-size: small;
}

/* Общий класс "растянутого" описательного текста — используется
   и на публичных страницах, и в карточке заявки в дашборде */
.description {
    font-size: 1.2em;
    line-height: 1.5em;
}

/* --- Layout-примитивы (обёртки, отступы, футер) --- */

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.l-box-my {
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.l-box-button {
    padding-top: 1em;
    padding-bottom: 1em;

    padding-right: 1em;
}

.l-box-my2 {
    padding-left: 2em;
    padding-right: 2em;
}

.l-box-sm {
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 1em;
}

.l-box-md {
    padding: 2em;
}

.l-box-lg {
    padding: 3em;
}

.l-box {
    padding: 0.5em 2em;
}

aside {
    background: whitesmoke;
    color: #444444;
    border: 1px solid #ccc;
    font-style: italic;
    line-height: 1.5em;
    padding: 1em 1em;
    margin-bottom: 1em;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.content_center {
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
    padding-left: 1em;
    padding-right: 1em;
    line-height: 1.5em;
}

.header_center {
    text-align: center;
    line-height: 2em;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-family: "Roboto Light", sans-serif;
    letter-spacing: .05em;
    margin-left: auto;
    margin-right: auto;
    max-width: 768px
}

.button_center {
    text-align: center;
}

.container_my { display: flex; justify-content: center; }

.content_my { text-align: center; }

.blog {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Пустой декоративный баннер под шапкой — используется на всех
   публичных страницах (home/dispatch/crm/login/registration/changelog/
   personal_data_policy) как часть общего каркаса */
.banner {
    background: transparent url("/static/users/img/home_fill_scale.jpg") no-repeat top center fixed;
    height: 350px;
    width: 100%;
    margin-bottom: 2em;
    display: table;
}

.footer {
    background: #557a95;
    color: whitesmoke;
    text-align: center;
    line-height: 1.75em;
    margin-top: auto;
}

.footer a {
    color: whitesmoke;
}