/* site-footer.css — единый выдвижной футер сайта («ящик» + содержимое).
 *
 * ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ для футера на всех страницах. Раньше стили футера
 * были продублированы инлайном в <style> каждой страницы и разъезжались;
 * позиционирование «ящика» жило только в waifuhunt-scroll-scene.css (index).
 * Теперь и раскладка «ящика», и оформление содержимого — здесь.
 *
 * Разметка (одинаковая на всех страницах, src/components/SiteFooter.astro):
 *   <div id="footer-drawer">
 *     <div id="footer-handle" role="button" aria-expanded="false" aria-controls="footer-drawer">…</div>
 *     <footer class="site-footer"> … </footer>
 *   </div>
 * Поведение (тумблер + не схлопывать из-за оверлея «Версии») — js/site-footer.js.
 *
 * ⚠️ ЗАПАСНЫЕ ЗНАЧЕНИЯ У ПЕРЕМЕННЫХ — НЕ УКРАШЕНИЕ.
 * Файл грузят и три ещё не переведённые страницы (guild, dialogue, versions),
 * а tokens.css там не подключён: без запасного значения `var(--s-6)` схлопнул
 * бы все отступы футера в ноль. Поэтому весь словарь файла объявлен ОДНИМ
 * блоком ниже — токен с запасным значением, — а в правилах используются уже
 * локальные имена без запасных. Когда эти три страницы переедут на систему,
 * блок схлопывается в прямые токены.
 */

#footer-drawer {
  /* цвет */
  --f-bg:      var(--bg-raised, #0e0b14);
  --f-bg-deep: var(--bg-inset, #07060c);
  --f-line:    var(--line-subtle, rgba(255, 255, 255, 0.07));
  --f-brass:   var(--brass, #9b6a46);
  --f-ink:     var(--ink, #ffffff);
  --f-ink-2:   var(--ink-2, rgba(255, 255, 255, 0.72));
  --f-ink-3:   var(--ink-3, rgba(255, 255, 255, 0.48));
  --f-ink-4:   var(--ink-4, rgba(255, 255, 255, 0.3));
  --f-accent:  var(--accent-text, #e7bb7c);
  /* метрика */
  --f-1: var(--s-1, 4px);
  --f-2: var(--s-2, 8px);
  --f-3: var(--s-3, 12px);
  --f-4: var(--s-4, 16px);
  --f-5: var(--s-5, 20px);
  --f-6: var(--s-6, 24px);
  --f-8: var(--s-8, 32px);
  --f-10: var(--s-10, 40px);
  /* шрифт */
  --f-display: var(--font-display, Georgia, 'Times New Roman', serif);
  --f-label:   var(--font-label, Georgia, serif);
  --f-body:    var(--font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
  --f-t--2: var(--t--2, 11px);
  --f-t--1: var(--t--1, 12px);
  --f-t-0:  var(--t-0, 14px);
  --f-t-2:  var(--t-2, 20px);
  --f-ls:   var(--ls-label, 0.12em);
  --f-lh:   var(--lh-body, 1.6);
  /* движение */
  --f-z:    var(--z-toast, 200);
  --f-w:    600;
  --f-lh-flat: var(--lh-flat, 1);
  --f-dur:  var(--dur-3, 420ms);
  --f-ease: var(--ease-out, cubic-bezier(0.16, 0.84, 0.24, 1));
}

/* ── выдвижной «ящик»: приклеен к низу вьюпорта, торчит ручкой на 32px ── */
#footer-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--f-z);
  transform: translateY(calc(100% - 32px));
  transition: transform var(--f-dur) var(--f-ease);
}

#footer-drawer.open {
  transform: translateY(0);
}

/* Ручка — латунная кромка ящика: за неё и тянут. */
#footer-handle {
  height: 32px;
  background: var(--f-bg-deep);
  border-top: 1px solid color-mix(in srgb, var(--f-brass) 52%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: var(--f-5);
  font-family: var(--f-label);
  font-size: var(--f-t--2);
  letter-spacing: var(--f-ls);
  text-transform: uppercase;
  color: var(--f-ink-4);
  user-select: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#footer-handle:hover {
  color: var(--f-accent);
  border-top-color: var(--f-brass);
  background: var(--f-bg);
}

#footer-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: var(--f-t-0);
  line-height: var(--f-lh-flat);
  opacity: 0.65;
}

/* содержимое футера скроллится внутри «ящика», без лишнего верхнего отступа */
#footer-drawer .site-footer {
  margin-top: 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── оформление содержимого ── */
.site-footer {
  margin-top: var(--f-10);
  background: var(--f-bg);
  border-top: 1px solid var(--f-line);
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--f-8) var(--f-5) var(--f-5);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.1fr 0.85fr;
  gap: var(--f-8);
  align-items: start;
}

.footer-brand-title {
  margin: 0 0 var(--f-3);
  font-family: var(--f-display);
  font-size: var(--f-t-2);
  font-weight: var(--f-w);
  color: var(--f-ink);
}

.footer-brand-text {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--f-t-0);
  color: var(--f-ink-3);
  line-height: var(--f-lh);
  max-width: 52ch;
}

/* Названия колонок — капитель с разрядкой: тот же приём, что у подписей
   разделов внутри страниц. */
.footer-title {
  margin: 0 0 var(--f-4);
  font-family: var(--f-label);
  font-size: var(--f-t--2);
  font-weight: var(--f-w);
  letter-spacing: var(--f-ls);
  text-transform: uppercase;
  color: var(--f-ink-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--f-2);
}

.footer-link {
  font-family: var(--f-body);
  font-size: var(--f-t-0);
  color: var(--f-ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--f-accent);
}

.footer-divider {
  margin: var(--f-6) 0 var(--f-5);
  border: none;
  border-top: 1px solid var(--f-line);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--f-5);
  flex-wrap: wrap;
}

.footer-copy {
  font-family: var(--f-body);
  color: var(--f-ink-3);
  line-height: var(--f-lh);
  font-size: var(--f-t--1);
  max-width: 86ch;
}

.footer-copy strong {
  color: var(--f-ink-2);
}

/* Ссылки внутри правового абзаца идут строкой, а не колонкой. */
.footer-copy .footer-link {
  display: inline;
  font-size: inherit;
  color: var(--f-accent);
}

.footer-rights {
  font-family: var(--f-body);
  color: var(--f-ink-3);
  font-size: var(--f-t--1);
  white-space: nowrap;
}

/* Маркировка 16+ — обязательная по закону, поэтому отдельным знаком, а не
   строкой в абзаце: её должно быть видно без чтения. */
.footer-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 26px;
  padding: 0 var(--f-2);
  margin-bottom: var(--f-2);
  border: 1px solid color-mix(in srgb, var(--f-brass) 60%, transparent);
  font-family: var(--f-label);
  font-weight: var(--f-w);
  font-size: var(--f-t--1);
  letter-spacing: var(--f-ls);
  color: var(--f-ink-2);
}

.footer-socials {
  display: flex;
  gap: var(--f-3);
  align-items: center;
  margin-top: var(--f-5);
}

/* Кнопка канала — латунная пластина, не розовый кружок. */
.footer-telegram-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--f-bg-deep);
  border: 1px solid color-mix(in srgb, var(--f-brass) 55%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-telegram-btn:hover {
  background: var(--f-bg);
  border-color: var(--f-brass);
}

.footer-telegram-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--f-accent);
  display: block;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--f-6);
  }

  .footer-inner {
    padding: var(--f-6) var(--f-4) var(--f-5);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-rights {
    white-space: normal;
  }
}