/*
 * Сетка, шапка, подвал.
 */

/* ---------- Шапка ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 68px;
}

/*
 * Логотип не сжимается.
 *
 * Шапка выложена флексом, у пунктов меню стоит `white-space: nowrap`, поэтому
 * меню не уступает ни пикселя. Всё, чего не хватало, отнималось у логотипа:
 * при девяти длинных пунктах он рисовался размером 8×2 пикселя. Запрет
 * на сжатие делает нехватку места видимой сразу, а не молча съедает логотип.
 */
.site-header__logo {
  flex: 0 0 auto;
}

/*
 * `height: auto` снимает подсказку из атрибута разметки, чтобы картинка
 * бралась в своих настоящих пропорциях; `max-height` остаётся страховкой
 * на случай, если владелец загрузит логотип крупнее.
 *
 * Предел опущен с 44 до 41 — 11.09, вместе с перерисованным логотипом.
 * Прежние 44 не срабатывали ни при старом файле, ни при новом: оба
 * 41 пиксель высотой. Но страховка должна держать высоту шапки, а не
 * разрешать ей вырасти на три пикселя, если однажды загрузят файл выше.
 *
 * Важно: логотип должен иметь собственные размеры в самом файле.
 * У SVG только с `viewBox`, без `width` и `height`, своего размера нет,
 * и при `width: auto; height: auto` браузер отрисовывает его в никаких
 * нулевых — шапка остаётся пустой. На это налетел новый логотип, файл
 * поправлен.
 */
.site-header__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 41px;
}

.site-header__title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.site-header__search-toggle,
.site-header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--color-text);
  border-radius: var(--radius-small);
}

.site-header__search-toggle:hover,
.site-header__menu-toggle:hover {
  background: var(--color-bg-soft);
}

.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.site-header__menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Меню ---------- */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
}

.site-nav__list > li {
  position: relative;
}

/*
 * Кнопка раскрытия раздела живёт только в бургер-меню: её заводит `theme.js`
 * при ширине до 1160 и снимает обратно на широком экране. Правило здесь —
 * страховка на случай, если скрипт не успел снять кнопку при изменении
 * ширины окна: на десктопе разделы раскрываются наведением, и вторая
 * кнопка рядом с подписью там лишняя.
 */
.site-nav__expand {
  display: none;
}

.site-nav__list a,
.site-nav__list span {
  display: block;
  padding: 8px 0;
  color: var(--color-text);
  font-size: var(--size-small);
  font-weight: 600;
  white-space: nowrap;
}

.site-nav__list a:hover {
  color: var(--color-accent-ink);
}

/*
 * Витрины отличаются от тематических рубрик фоновой подложкой.
 *
 * Подложка нейтрально-серая, а не оранжевая: оранжевым отмечается «вы здесь»,
 * и если бы выделение было того же цвета, читатель перестал бы понимать,
 * где он находится, а где просто выделенный раздел.
 */
.site-nav__list > li.menu-item--showcase > a {
  padding-right: 12px;
  padding-left: 12px;
  background: var(--color-bg-soft);
  border-radius: 8px;
}

/*
 * «Вы здесь» — оранжевая линия под пунктом, а не цвет текста.
 *
 * Цветом текста это быть перестало как раз из-за подложек: два признака
 * на одном канале спорили между собой. Теперь фон отвечает за вид раздела,
 * линия — за текущее положение, и перепутать их нельзя.
 *
 * Три класса, а не один: на самой рубрике WordPress ставит `current-menu-item`,
 * внутри подрубрики — `current-menu-ancestor`, а на странице статьи —
 * `current-menu-parent`. Без последнего линия пропадала бы ровно там, где
 * читатель проводит больше всего времени.
 */
.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current-menu-ancestor > a,
.site-nav__list > li.current-menu-parent > a {
  position: relative;
}

.site-nav__list > li.current-menu-item > a::after,
.site-nav__list > li.current-menu-ancestor > a::after,
.site-nav__list > li.current-menu-parent > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-accent-ink);
  border-radius: 2px;
}

/* В выпадающем списке линия под пунктом читается плохо — там прежний цвет. */
.site-nav__list .sub-menu .current-menu-item > a {
  color: var(--color-accent-ink);
}

/* Подменю */
.site-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 240px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__list .sub-menu a {
  padding: 8px 16px;
  font-weight: 400;
  white-space: normal;
}

/* ---------- Поиск в шапке ---------- */

.site-search {
  padding: 16px 0;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

.site-search form {
  display: flex;
  gap: 10px;
}

.site-search input[type="search"] {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: #fff;
}

.site-search button {
  padding: 11px 24px;
  border: none;
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
}

/* ---------- Основная сетка ---------- */

.site-main {
  padding: 28px 0 48px;
  min-height: 50vh;
}

.layout {
  display: grid;
  gap: 32px;
}

.layout--sidebar {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.layout__main {
  min-width: 0;
}

.layout__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Подвал ---------- */

.site-footer {
  margin-top: 40px;
  padding: 40px 0 0;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

/*
 * Четыре одинаковых столбца, в каждом ссылки одного рода: разделы,
 * форматы подачи, сервисы, служебное и связь. Раньше подвал был из трёх
 * разных по устройству кусков и читался как три подвала рядом.
 */
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 32px;
}

.site-footer__links,
.site-footer__menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a,
.site-footer__menu a {
  color: var(--color-text-muted);
  font-size: var(--size-small);
}

.site-footer__links a:hover,
.site-footer__menu a:hover {
  color: var(--color-accent-ink);
}

.site-footer__title {
  font-weight: 700;
  margin-bottom: 12px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top: 1px solid var(--color-border);
  font-size: var(--size-tiny);
  color: var(--color-text-light);
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
  .layout--sidebar {
    grid-template-columns: 1fr;
  }

  .layout__side {
    order: 2;
  }
}

/*
 * Порог бургер-меню — 1160, а не прежние 900.
 *
 * Семь пунктов шапки занимают 754 пикселя, логотип 208, кнопка поиска 40,
 * два промежутка 48 — вместе 1050. На 1024 это не помещается: не хватает
 * 66 пикселей, и раньше их молча отнимали у логотипа.
 *
 * Порог взят с запасом, а не впритык. Замер показал, что на 1121 свободными
 * остаются 16 пикселей — при другом наборе шрифтов их может не остаться,
 * а последствие теперь другое: логотипу сжиматься запрещено, поэтому меню
 * не ужмётся, а вылезет за край с горизонтальной прокруткой. На 1161
 * свободных 56, и такого запаса хватает.
 */
@media (max-width: 1160px) {
  .site-header__menu-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: 68px 0 0;
    padding: 20px;
    background: var(--color-bg);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 40;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list > li {
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav__list a,
  .site-nav__list span {
    padding: 13px 0;
    font-size: 17px;
  }

  /*
   * Подменю раскрывается кнопкой раздела — разбор в `theme.js`.
   *
   * Пока скрипт не построил аккордеон, список остаётся раскрытым, как было
   * до этапа 47: кнопку рисует скрипт, и без него прятать подменю нечем.
   */
  .site-nav__list .sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    /* Промежуток между соседними целями: до этапа 47 он был нулевым */
    gap: 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    padding: 4px 0 12px 16px;
    min-width: 0;
  }

  .site-nav__list .sub-menu a {
    display: flex;
    align-items: center;
    /* Высота цели: до этапа 47 подпункт был 38,8 пикселя */
    min-height: 44px;
    padding: 0;
    font-size: 15px;
    color: var(--color-text-muted);
  }

  /*
   * В бургер-меню пункты идут вертикальным списком, и подчёркивание снизу
   * в нём сливается с разделителем между пунктами. Тот же оранжевый цвет,
   * но полосой слева — по вертикальному списку она читается сразу.
   */
  .site-nav__list > li.current-menu-item > a::after,
  .site-nav__list > li.current-menu-ancestor > a::after,
  .site-nav__list > li.current-menu-parent > a::after {
    right: auto;
    top: 0;
    bottom: 0;
    left: -20px;
    width: 3px;
    height: auto;
  }

  /* Подложка витрин остаётся, но во всю ширину списка. */
  .site-nav__list > li.menu-item--showcase > a {
    padding-right: 12px;
    margin-right: -12px;
    margin-left: -12px;
  }

  /*
   * Кнопка раскрытия раздела.
   *
   * Стоит после подложки витрин намеренно: у «Найти работу» есть и подложка,
   * и подменю, а правила одинаковой силы — выигрывает то, что ниже. Иначе
   * подпись прошла бы под кнопкой.
   *
   * Размер 64×54 и вынос за правый край панели: панель отбита от края
   * на 20 пикселей, и без выноса между кнопкой и краем экрана оставалась бы
   * мёртвая полоса — как раз там, где лежит большой палец.
   *
   * Высота задана числом, а не «во всю высоту пункта»: пункт вместе
   * с раскрытым подменю высокий, и кнопка растянулась бы на весь список.
   */
  .site-nav__list > li.has-sub {
    position: relative;
  }

  .site-nav__list > li.has-sub > a {
    padding-right: 56px;
  }

  .site-nav__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: -20px;
    width: 64px;
    height: 54px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

  .site-nav__expand::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
  }

  .site-nav__list > li.is-expanded > .site-nav__expand::before {
    transform: translateY(2px) rotate(-135deg);
  }

  .site-nav__list > li.has-sub:not(.is-expanded) > .sub-menu {
    display: none;
  }
}

/*
 * Подвал перестраивается на прежней границе: его колонки от ширины меню
 * не зависят, и двигать их вместе с порогом бургера незачем.
 */
@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

/*
 * Ссылки подвала на телефоне — цель в 44 пикселя.
 *
 * До этапа 50 ссылка была 20 пикселей высотой при кегле 15: пятнадцать
 * ссылок подряд, и каждая вдвое ниже нормы. Промежутки между ними были
 * в порядке — 14,4 пикселя, — поэтому трогаем только высоту, а расстояние
 * между целями оставляем прежним правилом `gap: 8` у списка.
 *
 * Подвал от этого растёт, и это принято: он стоит последним на странице,
 * его высота ничего не отодвигает.
 *
 * Граница 640 — та же, что у крошек на этапе 49.
 */
@media (max-width: 640px) {
  .site-footer__links a,
  .site-footer__menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

}

/*
 * На узком экране столбцов два, а не один: ссылки короткие, и в одну
 * колонку подвал вытягивался бы на два экрана. Разделы остаются
 * во всю ширину и держат внутри свои два столбца.
 */
@media (max-width: 560px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}