/* ============================================================
   01-БАЗА
   Переменные, шрифты, сброс стилей, контейнер, утилиты.
   Подключается ПЕРВЫМ из наших файлов (после библиотек).
   ============================================================ */


/* ------------------------------------------------------------
   ГЛАВНОЕ, ЧТО НУЖНО ПОНЯТЬ ПРО ЭТОТ САЙТ

   Вся вёрстка резиновая. В CSS вписаны прямые пиксели из макета,
   а браузер сам пересчитывает их в проценты от ширины экрана.
   Формула всегда одна:

       размер: calc(ЧИСЛО_ИЗ_МАКЕТА / var(--device-size) * 100vw);

   Например, шапка высотой 112px в макете шириной 1512:
       height: calc(112 / var(--device-size) * 100vw);

   --device-size - это ширина макета, из которого взято число.
   Она меняется на разных экранах (см. ниже). Поэтому одно и то же
   правило работает и на десктопе, и на мобильном - надо только
   подставить число из соответствующего макета.

   ВАЖНО: если правишь размер - меняй ЧИСЛО в calc(), а не результат.
   ------------------------------------------------------------ */

:root {
  --device-size: 1512;      /* десктопный макет */
}

@media (min-width: 1730px) {
  :root { --device-size: 1730; }   /* широкие экраны */
}

@media (max-width: 1279px) {
  :root { --device-size: 768; }    /* планшет */
}

@media (max-width: 767px) {
  :root { --device-size: 320; }    /* мобильный макет */
}


/* ------------------------------------------------------------
   ФИРМЕННЫЕ ЦВЕТА
   Вынесены в переменные, чтобы менять в одном месте.
   ------------------------------------------------------------ */

:root {
  --цвет-текста:   #010101;
  --цвет-фирменный:#d41318;   /* красный Rubicon */
  --цвет-фон:      #fff;
  --цвет-линии:    #cfcfcf;   /* тонкие линии под заголовками */
  --цвет-линии-тёмной: #5a5a5a; /* те же линии на тёмном фоне */
}


/* ------------------------------------------------------------
   СБРОС И БАЗОВАЯ ТИПОГРАФИКА
   ------------------------------------------------------------ */

html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: var(--цвет-фон);
  color: var(--цвет-текста);
  font-family: Montserrat, serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* Страница на иврите - другой шрифт и более тонкое начертание */
[lang="he"] body {
  font-family: "Noto Sans Hebrew", serif;
  font-weight: 300;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  -webkit-locale: auto;
}

h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-family: inherit;
  font-weight: 400;
}

a {
  color: inherit;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

li {
  list-style: none;
}


/* ------------------------------------------------------------
   ЭЛЕМЕНТЫ ФОРМ - убираем стандартное оформление браузера
   ------------------------------------------------------------ */

button,
input,
textarea {
  border: none;
  border-radius: 0;
  outline: none;
}

button,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"] {
  -webkit-appearance: none;
}

fieldset {
  border: none;
}

/* Прячем кнопки автозаполнения Safari и крестик очистки в IE/Edge */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  position: absolute;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}

input::-ms-clear,
input::-ms-reveal {
  width: 0;
  height: 0;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}


/* ------------------------------------------------------------
   КАРКАС СТРАНИЦЫ
   ------------------------------------------------------------ */

.page-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

/* Контейнер - ограничивает ширину контента и задаёт боковые поля.
   1440 - ширина контентной области, 116 - боковой отступ (из макета). */
.container {
  margin: 0 auto;
  max-width: calc(1440 / var(--device-size) * 100vw);
  padding: 0 calc(116 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .container {
    padding: 0 calc(16 / var(--device-size) * 100vw);
  }
}


/* ------------------------------------------------------------
   КАРТИНКИ
   .picture - обёртка, .picture__image - само изображение
   ------------------------------------------------------------ */

.picture {
  display: block;
}

.picture__image {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ------------------------------------------------------------
   ИКОНКИ
   Иконки лежат в одном файле sprite.svg и вставляются через <use>.
   Размер по умолчанию 20x20, конкретные иконки переопределяют его.
   ------------------------------------------------------------ */

.icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
}


/* ------------------------------------------------------------
   УТИЛИТЫ
   ------------------------------------------------------------ */

/* Спрятать на мобильном */
@media (max-width: 767px) {
  .mob-hide { display: none; }
}

/* Спрятать на десктопе */
@media (min-width: 768px) {
  .desktop-hide { display: none; }
}

/* Видно только скринридерам */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}