/* Правки шапки. Отдельный файл: style.min.css собирается сборкой из исходников.

   В теме .main-menu имеет жёсткую ширину 946px — она была рассчитана на шесть
   пунктов меню. После появления страниц «О компании» и «Блог» пунктов стало
   семь, и на экранах 1281–1400px шапка упиралась в мини-корзину. Ниже 1281px
   меню превращается в выезжающую панель, поэтому правки ограничены десктопом. */

@media screen and (min-width: 1281px) {
  .header .container {
    gap: 32px;
  }

  .main-menu {
    width: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 32px;
  }

  .main-menu__list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-column-gap: 28px;
       -moz-column-gap: 28px;
            column-gap: 28px;
    row-gap: 8px;
  }

  .main-menu__item a {
    white-space: nowrap;
  }

  /* На страницах без соцсетей пустой список забирал место и сдвигал меню. */
  .main-menu .social-list:empty {
    display: none;
    margin: 0;
  }
}

/* Активный пункт подсвечивается по текущей странице (класс проставляется в
   чанке header-menu). Раньше он был прибит к «Частым вопросам» и горел
   зелёным на всех страницах сразу. */
.main-menu__item_active > a {
  color: var(--primary, #7a972d);
}

/* Нижняя строка подвала. Раньше это был <footer> внутри <footer class="footer">,
   что запрещено спецификацией (валидатор: «The element footer must not appear as
   a descendant of the footer element»). Тег заменён на div.footer-bottom, а
   правила ниже повторяют селекторы `.footer footer` из style.min.css
   (его правит сборка, трогать нельзя). */
.footer .footer-bottom {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 64px;
}

.footer .footer-bottom .links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.footer .footer-bottom .creator {
  margin-left: auto;
}

@media screen and (max-width: 1280px) {
  .footer .footer-bottom {
    display: contents;
  }

  .footer .footer-bottom .copyright {
    width: 100%;
    font-size: 14px;
  }

  .footer .footer-bottom .links {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .footer .footer-bottom .creator {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
}

@media screen and (max-width: 900px) {
  .footer .footer-bottom .links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 30px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
  }

  .footer .footer-bottom .creator {
    margin-left: 0;
    margin-top: 11px;
  }
}