/* Хром сайта (хедер, футер, переключалка языка) поверх IDS.
   Значения — со старого сайта Shift.
   Композиция публикации — в static/css/page-composition/publication.css. */

body.ids {
  max-width: 1600px;
  margin: 0 auto;
}

/* Хедер: фиксированный, с градиентом-подложкой. Подложка ниже самого
   содержимого (нижний паддинг), чтобы контент при скролле не слипался
   с меню: плотная часть до ~60%, хвост до низа */

header {
  position: fixed;
  max-width: 1600px;
  width: 100%;
  z-index: 12;
  box-sizing: border-box;
  padding: 0.6em 0.65em 1.9em;
  background: linear-gradient(
    180deg,
    var(--ids__background) 52%,
    color-mix(in srgb, var(--ids__background) 50%, transparent) 74%,
    color-mix(in srgb, var(--ids__background) 1%, transparent) 100%
  );

  @media (width < 768px) {
    /* Всё содержимое хедера (лого, меню, переключалка, поиск) уменьшается
       строго пропорционально: размеры внутри заданы в em */
    font-size: 0.875em;
    padding: 0.8em 0.8em;
  }

  /* Самые узкие экраны (360–390 px): весь хедер ещё на ступень мельче,
     чтобы «Люди» не переносились на вторую строку */
  @media (width < 400px) {
    font-size: 0.81em;
  }

  & .nav {
    display: flex;
    justify-content: space-between;
    /* Всё выравнивается по верху — отступы сверху предсказуемые */
    align-items: flex-start;

    & .nav-item {
      display: flex;
    }
  }

  & .logo {
    text-decoration: none;
    /* Логотип крупный (≈ как на старом сайте), меню и остальное
       выравниваются с ним оптически, не по базовой линии */
    margin-top: 0.05em;

    @media (width < 768px) {
      margin-top: 0.25em;
    }

    & svg {
      /* Вьюбокс подогнан под контент (133 × 42), высота 1.55 → ширина по пропорции */
      width: 4.9em;
      height: 1.55em;

      @media (width < 768px) {
        width: 3.7em;
        height: 1.17em;
      }

      & path {
        fill: var(--ids__text);
        transition: fill var(--ids__duration-base) var(--ids__easing-base);
      }
    }

    &:hover svg path {
      fill: var(--ids__hover);
      transition: fill 0s ease;
    }
  }
}

/* Ссылки разделов: все публикации / рынки / команды / подборки.
   Прижаты влево к логотипу; активный пункт — болдом
   (ставит pubs-table.js на /publications/ по ?group), оранжевый — только ховер. */

.nav-sections {
  gap: 1.2em;
  font-size: 0.8em;
  /* Базовая линия — на линии логотипа (всё от margin-top логотипа) */
  margin-top: 0.4em;
  /* Зазор до логотипа — в полтора гэпа между пунктами */
  margin-left: 1.8em;
  margin-right: auto;

  & a {
    text-decoration: none;
  }

  & a:hover {
    color: var(--ids__hover);
  }

  & a.active {
    font-weight: 650;
  }

  @media (width < 768px) {
    flex-wrap: wrap;
    /* Гэпы плотнее — переключалка языка отделяется заметным отступом */
    gap: 0.55em;
    margin-left: 0.7em;
  }

}

/* Короткие подписи пунктов — только на мобильных */
.nav-label-short {
  display: none;
}

@media (width < 768px) {
  .nav-label-full {
    display: none;
  }

  .nav-label-short {
    display: inline;
  }

  /* Служебная ссылка на дизайн-систему в деве на мобильных мешает;
     «Подборки» убраны, чтобы «Люди» влезали в одну строку */
  .nav-dev,
  .nav-collections {
    display: none;
  }
}

/* Поиск в шапке (внутренние страницы; на главной вместо него крупное
   поле в начале контента). Маленькое поле между разделами и переключалкой;
   выпадайка прижата к правому краю поля и шире него. Сам компонент —
   css/components/search.css, там же .search--large для главной. */

header .search {
  flex: 0 1 11em;
  font-size: 0.8em;
  /* По базовой линии с меню выравнивается текст в поле, не бордер */
  margin-top: 0.35em;
  margin-right: 1.5em;

  & .search-results {
    left: auto;
    right: 0;
    width: 30em;
    max-width: calc(100vw - 2em);
  }

  /* На мобильных поиска в хедере нет — только крупное поле на главной */
  @media (width < 768px) {
    display: none;
  }
}

/* Зазор между фиксированным хедером и контентом — добавка к ids__space
   в начале страниц */
main {
  padding-top: 1rem;

  @media (width < 768px) {
    padding-top: 5rem;
  }
}

/* Переключалка языка */

.switcher {
  display: flex;
  align-items: center;
  font-size: 0.8em;
  font-weight: 550;
  /* EN дополнительно опускает align-items: center относительно пилюли RU,
     поэтому маленький марджин */
  margin-top: 0.15em;

  & span {
    --ids__radius: 0.7em;
    border: var(--ids__border-width-s) solid var(--ids__text);
    padding: 0.2em 0.3em;
    background-color: var(--ids__text);
    color: var(--ids__background);
  }

  & a {
    margin: 0 0.4em;
    text-decoration: none;
  }
}

/* Контакты внизу главной */

.ids .contacts {
  margin: 0;
}

/* Футер */

footer {
  margin-top: 13rem;
  padding: 0.5em 0;
  width: 50%;
}

.footer-caption {
  font-size: 0.75em;
}