/**
 * Подвал сайта. Тёплый кремовый, цвета — токены --footer-* в tokens.css.
 */

.site-footer {
  margin-top: var(--space-16);
  /* Верхний отступ живёт в .site-footer__main: фотография должна начинаться
     от самого края подвала, а не ниже отступа */
  padding-block: 0 var(--space-10);
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-fg);
}

/* ── Верх подвала с фотографией (29.09.2026) ──────────── */

.site-footer__main {
  position: relative;
  padding-top: var(--space-10);
}

/* Разделительная линия под ссылками — нижняя граница фото: кадр «стоит» на
   ней, как в макете. Поэтому у ссылок здесь нет нижнего поля, отступ до игры
   даёт её собственный margin. */
.site-footer__main .site-footer__links {
  margin-bottom: 0;
}

/* Нижняя строка с копирайтом — сразу под разделительной линией. Раньше
   между ними стояла игра со своим отступом; её убрали (29.09.2026),
   и пустое место вместе с ней. */
.site-footer__rest {
  padding-top: var(--space-6);
}

.site-footer__main > .container {
  position: relative;
  z-index: 1;
}

.site-footer__scene {
  display: none;
}

/*
 * Фото подвала (второй макет владельца, 29.09.2026): цветной резкий кадр
 * заходит под карточку контактов и тянется до правого края окна, слева —
 * бирюзовое поле с текстом.
 *
 * За карточкой на макете ничего не видно — она была нарисована поверх.
 * Поэтому в самом файле на её месте плавная размытая заливка по цветам
 * краёв (scene-wide: x 51–572, y 94–498 из 1170 × 596), и кадр ставится
 * так, чтобы центр заливки совпал с центром настоящей карточки. Настоящая
 * карточка крупнее заливки в масштабе подвала и закрывает её целиком.
 *
 * Привязка к карточке, а не к краю окна: с 85rem (1360 px) контейнер
 * упирается в --container-max, колонки сетки постоянной ширины, и центр
 * карточки — это середина окна минус полконтейнера плюс отступ, левая
 * колонка, промежуток и полкарточки (1.95 из 3.3 долей). Ниже 1360
 * раскладка без фото: там колонки плавают и совпадения не будет.
 */
@media (min-width: 85rem) {
  .site-footer__main {
    /* Полширины карточки и отступ до неё слева — от них считается всё */
    --fs-card-half: calc((var(--container-max) - 2 * var(--container-pad) - 2 * var(--space-8)) / 3.3 / 2);
    --fs-fade: var(--space-12);
  }

  /* Обёртка кадра: начинается на --fs-fade левее карточки, чтобы фото
     проявлялось из бирюзы до её края, и идёт до правого края окна */
  .site-footer__scene {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(
      50% - var(--container-max) / 2 + var(--container-pad)
      + (var(--container-max) - 2 * var(--container-pad) - 2 * var(--space-8)) * 0.4394
      + var(--space-8) - var(--fs-fade)
    );
    overflow: hidden;
    pointer-events: none;
    /* Цвет в маске — только канал прозрачности, на экран он не выводится */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fs-fade));
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fs-fade));
  }

  /*
   * Подложка на случай просвета справа: на широких окнах кадр кончается
   * раньше края экрана. Берётся крайняя правая полоска кадра (растение,
   * окно), растянутая и сильно размытая — продолжение комнаты без повторов.
   * Картинка приходит из разметки через --footer-scene.
   */
  .site-footer__scene::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--space-10));
    background: var(--footer-scene) 100% 50% / 600% 110% no-repeat;
    filter: blur(28px);
    opacity: 0.9;
  }

  .site-footer__scene picture {
    display: block;
    height: 100%;
  }

  /* Кадр во всю высоту верхней части подвала. left — центр карточки
     внутри обёртки, сдвиг влево на 26.62% собственной ширины — центр
     заливки в кадре (311.5 из 1170 px). Правый край растворяется в
     подложку, чтобы на широком экране не было шва. */
  .site-footer__scene img {
    position: absolute;
    top: 0;
    left: calc(var(--fs-fade) + var(--fs-card-half));
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
    transform: translateX(-26.62%);
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 6%);
    mask-image: linear-gradient(to left, transparent 0, #000 6%);
  }
}

/* Две колонки вместо четырёх: списки каталога и справочных страниц
   переехали в шапку, здесь остались только бренд и контакты. На широком
   экране добавляется третья, пустая — под фотографию (см. выше). */
.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-12);
  }

  /* Контакты прижаты вправо: иначе между двумя колонками остаётся
     пустая полоса в треть подвала */
  .site-footer__col--contacts {
    justify-self: end;
  }
}

/* С фотографией — три колонки: текст, карточка контактов и пустая третья,
   в которой видна посылка. Карточка встаёт в середину, на растворяющийся
   край кадра, как в макете. Левая колонка шире остальных: в неё должны
   встать в строку оба значка (~490 px) и самая длинная строка реквизитов
   (~435 px), иначе значки уходят столбиком, а адрес — на четвёртую строку. */
@media (min-width: 85rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--space-8);
  }

  .site-footer__col--contacts {
    justify-self: stretch;
    align-self: start;
  }
}

/* Контакты — белой карточкой. Содержимое колонки то же, меняется только
   подложка: на фотографии текст без неё читался бы хуже. */
.site-footer__col--contacts {
  padding: var(--space-6);
  background: var(--footer-card);
  border: 1px solid var(--footer-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--footer-card-shadow);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  /* Имя в подвале — цветом логотипа, как в шапке */
  color: var(--footer-logo, var(--footer-fg-strong));
}

.site-footer__brand-name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.site-footer__about {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ── Доставка и оплата, реквизиты (28.09.2026) ────────── */

/* Заполняют пустую левую колонку под описанием. Значки — плашками в строку:
   это не ссылки, а факты «как привезут и как платить», поэтому без подчёркивания
   и без наведения. */
.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  list-style: none;
}

.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--footer-border);
  border-radius: var(--radius-full);
  color: var(--footer-fg-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.site-footer__badge .site-footer__icon {
  font-size: 1.25rem;
}

/* Реквизиты мелко и приглушённо: их читают осознанно, когда проверяют
   продавца, и они не должны спорить с описанием магазина выше. */
.site-footer__requisites {
  margin-top: var(--space-6);
  color: var(--footer-fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.site-footer__title {
  margin-bottom: var(--space-4);
  color: var(--footer-accent);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

/* Списки ссылок (в т.ч. из wp_nav_menu) */
.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  font-size: var(--fs-sm);
}

.site-footer__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer a:hover {
  color: var(--footer-fg-strong);
}

.site-footer__icon {
  color: var(--footer-accent);
}

/* ── Справочные ссылки одной строкой ─────────────────── */

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--footer-divider);
  color: var(--footer-fg-muted);
  font-size: var(--fs-sm);
}

/* ── Нижняя строка ───────────────────────────────────── */

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  color: var(--footer-fg-muted);
  font-size: var(--fs-xs);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
  }
}

.site-footer__legal {
  display: flex;
  gap: var(--space-6);
}

.site-footer__bottom p {
  margin: 0;
}

/* ── Мессенджеры в контактах ─────────────────────────── */

/* Знаки красим как соседние иконки контактов, подписи — как текст подвала:
   строка должна читаться частью списка, а не отдельной кнопкой. */
.site-footer__messengers .messengers--footer {
  gap: var(--space-6);
}

.messengers--footer .messengers__link {
  gap: var(--space-3);
  color: var(--footer-fg);
  font-size: var(--fs-sm);
}

.messengers--footer .messengers__icon {
  color: var(--footer-accent);
}

.messengers--footer .messengers__glyph {
  width: 1.25rem;
  height: 1.25rem;
}


/* ── Курьер зовёт поиграть (template-parts/footer-game-teaser.php) ───
   Машет рукой, облачко — ссылка на /igra/. Рисунок — инлайн-SVG, цвета
   из токенов. При наведении курьер подпрыгивает. */
.footer-game {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  width: fit-content;
  margin-block: var(--space-8) var(--space-6);
  color: inherit;
  text-decoration: none;
}

.footer-game__courier {
  flex: none;
  overflow: visible;
  transition: transform var(--transition);
}

.footer-game:hover .footer-game__courier,
.footer-game:focus-visible .footer-game__courier {
  transform: translateY(-4px);
}

.footer-game__shadow { fill: var(--footer-divider); }
.footer-game__legs { stroke: var(--color-text-soft); stroke-width: 5; stroke-linecap: round; fill: none; }
.footer-game__pack { fill: var(--color-accent); }
.footer-game__body { fill: var(--color-primary); }
.footer-game__arm { stroke: var(--color-primary-dark); stroke-width: 4; stroke-linecap: round; fill: none; }
.footer-game__arm--front { stroke: var(--color-primary); }
.footer-game__head { fill: var(--color-skin); }
.footer-game__cap { fill: var(--color-primary-dark); }
.footer-game__eye { fill: var(--color-text); }

.footer-game__wave {
  transform-box: view-box;
  transform-origin: 31px 27px;
  animation: footer-game-wave 1.1s ease-in-out infinite;
}

@keyframes footer-game-wave {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(22deg); }
}

.footer-game__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--footer-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* Хвостик облачка — к курьеру */
.footer-game__bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 12px;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--footer-border);
  border-bottom: 1px solid var(--footer-border);
  background: var(--color-surface);
  transform: rotate(45deg);
}

.footer-game__hi {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--footer-fg-strong);
}

.footer-game__cta {
  font-size: var(--fs-sm);
  color: var(--footer-accent);
}

.footer-game:hover .footer-game__cta,
.footer-game:focus-visible .footer-game__cta {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .footer-game__wave { animation: none; }
  .footer-game__courier { transition: none; }
}