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

.site-footer {
  margin-top: var(--space-16);
  padding-block: var(--space-10);
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-fg);
}

/* Две колонки вместо четырёх: списки каталога и справочных страниц
   переехали в шапку, здесь остались только бренд и контакты. */
.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;
  }
}

.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);
}

.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; }
}