/* ============================================================
   04-ШАПКА

   В шапке есть неочевидный приём, о котором стоит знать.

   ШАПОК НА САМОМ ДЕЛЕ ДВЕ, наложенных друг на друга:

     .header             обычная - красный логотип, кнопка, WhatsApp
     .header_logo_dark   поверх неё, с тёмным логотипом

   У верхней стоит mix-blend-mode: difference - это режим смешивания,
   при котором цвет вычитается из того, что под ним. Результат:
   логотип автоматически становится белым над тёмными секциями и
   тёмным над светлыми. Никакого JS - браузер считает сам.
   Верхний слой не ловит клики (pointer-events: none), поэтому
   кнопки нижнего слоя работают нормально.

   Логика прокрутки (классы header_hide и header_is_scrolled) -
   в js/04-шапка.js
   ============================================================ */


/* ------------------------------------------------------------
   КАРКАС
   ------------------------------------------------------------ */

.header__box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: calc(112 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .header__box {
    height: calc(60 / var(--device-size) * 100vw);
  }
}

.header__inner {
  height: 100%;
}

.header__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  transform: translateZ(0);   /* просим браузер рисовать шапку
                                 на отдельном слое - так уход
                                 наверх идёт плавно, без рывков */
  transition: 0.3s ease-out;
}


/* ------------------------------------------------------------
   ЛОГОТИП
   ------------------------------------------------------------ */

.header-logo {
  margin-left: calc(-30 / var(--device-size) * 100vw);
}

.header-logo__image {
  width: calc(356 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .header-logo {
    margin: 0;
    width: calc(86 / var(--device-size) * 100vw);
    overflow: hidden;     /* на мобильном виден только знак,
                             текст логотипа обрезается */
  }

  .header-logo__image {
    width: calc(266 / var(--device-size) * 100vw);
  }
}


/* ------------------------------------------------------------
   КНОПКА «ОТПРАВИТЬ ЗАЯВКУ»
   ------------------------------------------------------------ */

.header-button {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .header-button {
    width: calc(227 / var(--device-size) * 100vw);
    margin-right: calc(12 / var(--device-size) * 100vw);
  }

  /* Здесь и живёт вся раскраска кнопки в шапке:
     белая заливка, красная рамка, красный текст */
  .header-button .button-arrow {
    width: 100%;
    height: calc(56 / var(--device-size) * 100vw);
    padding-left: calc(16 / var(--device-size) * 100vw);
    padding-right: calc(36 / var(--device-size) * 100vw);
    border: calc(2 / var(--device-size) * 100vw) solid #d41318;
    border-radius: calc(8 / var(--device-size) * 100vw);
    background-color: #fff;
    color: #d41318;
    font-size: calc(25 / var(--device-size) * 100vw);
    font-weight: 500;
    letter-spacing: calc(-0.4 / var(--device-size) * 100vw);
  }
}

@media (min-width: 768px) and (hover: hover) {
  /* при наведении цвет НЕ меняется - в отличие от обычной
     кнопки со стрелкой, которая темнеет */
  .header-button .button-arrow:hover {
    color: #d41318;
  }

  /* при нажатии всё содержимое притухает */
  .header-button .button-arrow:active .button-arrow__title,
  .header-button .button-arrow:active .button-arrow__icon-wrapper {
    opacity: 0.3;
  }
}

/* На мобильном кнопка в шапке спрятана. Появляется только
   после прокрутки - см. блок «состояния» ниже */
@media (max-width: 767px) {
  .header-button {
    display: none;
  }

  .header-button .button-arrow {
    height: calc(44 / var(--device-size) * 100vw);
    padding-left: calc(23 / var(--device-size) * 100vw);
    padding-right: calc(30 / var(--device-size) * 100vw);
    border-radius: calc(6 / var(--device-size) * 100vw);
    background-color: #d41318;
    color: #fff;
    font-size: calc(20 / var(--device-size) * 100vw);
    letter-spacing: calc(-0.2 / var(--device-size) * 100vw);
  }

  .header-button .button-arrow__icon {
    color: #fff;
  }
}


/* ------------------------------------------------------------
   КНОПКА WHATSAPP
   Красный квадрат с белой иконкой.
   Класс называется header-phone по историческим причинам -
   раньше там был телефон.
   ------------------------------------------------------------ */

.header-phone {
  position: fixed;
  top: calc(14 / var(--device-size) * 100vw);
  right: calc(16 / var(--device-size) * 100vw);
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(56 / var(--device-size) * 100vw);
  height: calc(56 / var(--device-size) * 100vw);
  border-radius: calc(8 / var(--device-size) * 100vw);
  background-color: #d41318;
  color: #fff;
}

/* На десктопе стоит в потоке, слева от кнопки */
@media (min-width: 768px) {
  .header-phone {
    position: relative;
    top: 0;
    right: 0;
    margin-right: auto;
  }
}

/* На иврите прижимается к левому краю */
@media (max-width: 767px) {
  [lang="he"] .header-phone {
    left: calc(16 / var(--device-size) * 100vw);
    right: auto;
  }

  .header-phone {
    width: calc(30 / var(--device-size) * 100vw);
    height: calc(30 / var(--device-size) * 100vw);
    border-radius: calc(4 / var(--device-size) * 100vw);
  }
}

/* Иконка внутри. При наведении чуть увеличивается */
.header-phone svg {
  width: calc(28 / var(--device-size) * 100vw);
  height: auto;
  color: currentColor;
  transition: width 0.2s linear;
}

@media (hover: hover) {
  .header-phone:hover svg {
    width: calc(30 / var(--device-size) * 100vw);
  }
}

.header-phone:active {
  opacity: 0.3;
}

@media (max-width: 767px) {
  .header-phone svg {
    width: calc(15 / var(--device-size) * 100vw);
  }
}


/* ------------------------------------------------------------
   ТЁМНЫЙ СЛОЙ ПОВЕРХ ШАПКИ
   Тот самый трюк со смешиванием цветов
   ------------------------------------------------------------ */

.header_logo_dark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: calc(112 / var(--device-size) * 100vw);
  mix-blend-mode: difference;   /* цвет вычитается из подложки */
  pointer-events: none;         /* слой не мешает кликать */
  transform: translateZ(0);
}

@media (max-width: 767px) {
  .header_logo_dark {
    height: calc(60 / var(--device-size) * 100vw);
  }
}

/* В тёмном слое видим только текст кнопки, но не стрелку -
   иначе стрелка задваивалась бы с нижним слоем */
.header_logo_dark .button-arrow .button-arrow__title {
  opacity: 1;
}

.header_logo_dark .button-arrow__icon {
  opacity: 0;
}


/* ------------------------------------------------------------
   СОСТОЯНИЯ ПРИ ПРОКРУТКЕ
   Классы вешает js/04-шапка.js
   ------------------------------------------------------------ */

/* Листаем вниз - шапка уезжает наверх и не ловит клики */
.header_hide {
  pointer-events: none;
}

.header_hide .header__container {
  transform: translate3d(0, -100%, 0);
}

/* Прокрутили ниже первого экрана.
   На мобильном логотип уступает место кнопке. */
@media (max-width: 767px) {
  .header_is_scrolled .header-logo {
    display: none;
  }

  .header_logo_dark.header_is_scrolled .header-logo {
    opacity: 0;
  }

  .header_is_scrolled .header-button {
    display: block;
  }
}


/* ------------------------------------------------------------
   ВНУТРЕННИЕ СТРАНИЦЫ
   На «спасибо» и странице ошибки кнопки в шапке нет
   ------------------------------------------------------------ */

.thank-you-page .header-button,
.page-error .header-button {
  display: none;
}