/* ==========================================================================
   Футер лендинга — воспроизведение футера kadastr.ru по computed styles.
   Зависит от assets/css/tokens.css (--footer-*, --font-footer, --container).
   Сетка — на flexbox, без Bootstrap; брейкпоинты как в оригинале,
   xl кастомный: 1230px (не 1200px).
   ========================================================================== */

/* ── Каркас ─────────────────────────────────────────────────────────────── */

/* Блок самодостаточен: не полагаемся на глобальный сброс box-sizing */
.footer,
.footer *,
.footer *::before,
.footer *::after,
.cookie-message,
.cookie-message *,
.cookie-message *::before,
.cookie-message *::after {
  box-sizing: border-box;
}

.footer {
  background-color: var(--footer-bg, #334059);
  color: var(--footer-fg, #fff);
  font-family: var(--font-footer, "Montserrat", sans-serif);
  padding: 80px 0 16px;
}

.footer__container {
  width: 100%;
  max-width: var(--container, 1230px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

/* Ряд колонок: gutter 24px реализован отрицательными margin + padding колонок,
   поэтому колонка остаётся ровно 25% ширины ряда, как в исходной сетке. */
.footer__row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

.footer__col {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

/* ── Типографика ────────────────────────────────────────────────────────── */

/* Подпись-капс. В оригинале это #fff + opacity:.5 (эквивалент токена
   --footer-label: rgba(255,255,255,.5)); оставляем opacity ради совпадения
   computed styles с эталоном. Известное отступление от WCAG AA — см. отчёт. */
.footer__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--footer-fg, #fff);
  opacity: .5;
  margin-bottom: 4px;
}

.footer__phone {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--footer-fg, #fff);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color var(--dur, .2s) var(--ease, ease);
}

.footer__link {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--footer-fg, #fff);
  text-decoration: none;
  transition: color var(--dur, .2s) var(--ease, ease);
}

.footer__link--small {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* Только :hover — как в оригинале. На :focus цвет намеренно НЕ меняем:
   #0077be по тёмно-синему даёт 2.17:1, и сфокусированная ссылка становилась
   нечитаемой ровно в тот момент, когда до неё дошёл клавиатурный пользователь.
   Роль индикатора выполняет обводка ниже. */
.footer__phone:hover,
.footer__link:hover {
  color: var(--footer-link-hover, #0077be);
}

/* Видимый фокус — улучшение относительно оригинала.
   Футер тёмный, баннер белый, поэтому обводки разные:
   белая по тёмно-синему даёт 10.4:1, синяя по белому — 4.79:1. */
.footer a:focus-visible,
.footer button:focus-visible {
  outline: 2px solid var(--rk-focus-on-dark, #fff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rk-focus-ring-dark, rgba(255, 255, 255, .3));
  border-radius: 2px;
}

.cookie-message a:focus-visible,
.cookie-message__btn:focus-visible {
  outline: 2px solid var(--rk-border-focus, #0077be);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rk-focus-ring, rgba(0, 119, 190, .25));
  border-radius: 2px;
}

/* ── Навигация ──────────────────────────────────────────────────────────── */

.footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__nav-item {
  margin-bottom: 24px;
}

.footer__nav-item:last-child {
  margin-bottom: 56px;
}

/* ── Соцсети ────────────────────────────────────────────────────────────── */

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: var(--footer-social-bg, #f6f7f9);
  color: var(--footer-social-fg, #334059);
  text-decoration: none;
  margin-right: 8px;
  /* В оригинале hover-эффект погашен: цвет плитки и глифа не меняется.
     Сохраняем это, добавляя лишь едва заметный отклик по прозрачности. */
  transition: opacity var(--dur, .2s) var(--ease, ease);
}

.footer__social:last-child {
  margin-right: 0;
}

.footer__social:hover {
  color: var(--footer-social-fg, #334059);
  opacity: .85;
}

/* Глиф 16px внутри плитки 32px. Размеры заданы жёстко, поэтому отсутствие
   assets/img/icons.svg не ломает раскладку — плитка остаётся 32×32. */
.footer__social-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
  pointer-events: none;
}

/* ── Блок «При поддержке» ───────────────────────────────────────────────── */

.footer__support {
  padding-right: 12px;
  padding-left: 12px;
}

.footer__label--support {
  margin-bottom: 24px;
}

.footer__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.footer__partner {
  display: inline-flex;
  align-items: center;
  height: 50px;
  margin-right: 25px;
  margin-bottom: 8px;
  color: var(--footer-fg, #fff);
  text-decoration: none;
  transition: color var(--dur, .2s) var(--ease, ease);
}

.footer__partner:last-child {
  margin-right: 0;
}

.footer__partner:hover {
  color: var(--footer-link-hover, #0077be);
}

/* Текстовая заглушка вместо логотипа партнёра */
.footer__partner-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Готово к подстановке официальных SVG заказчика */
.footer__partner-logo {
  display: block;
  width: auto;
  height: 50px;
  max-width: 100%;
}

/* ── Разделитель во всю ширину вьюпорта (вне контейнера) ────────────────── */

.footer__divider {
  border-bottom: 1px solid var(--footer-divider, #3c4a66);
  margin-bottom: 40px;
}

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

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
}

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

/* md: 768px и выше — 2 колонки по 50% */
@media (min-width: 768px) {
  .footer__col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* xl (кастомный): 1230px и выше — 4 колонки по 25%, боковой padding 15px */
@media (min-width: 1230px) {
  .footer__container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .footer__col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Совсем узкие экраны — партнёрские логотипы ниже */
@media (max-width: 370px) {
  .footer__partner {
    height: 40px;
  }

  .footer__partner-logo {
    height: 40px;
  }
}

/* ==========================================================================
   Cookie-баннер
   Скрыт по умолчанию. Показ — добавлением класса .is-visible на #cookie-message
   (логику пишет assets/js/main.js).
   ========================================================================== */

.cookie-message {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--rk-white, #fff);
  color: var(--rk-navy, #334059);
  font-family: var(--font-main, system-ui, sans-serif);
  font-size: .875em;
  line-height: 1.5;
  box-shadow: var(--shadow-md, 0 -4px 12px rgba(51, 64, 89, .12));
  padding: 16px 0;
}

.cookie-message.is-visible {
  display: block;
}

/* Пока открыта модальная форма (класс .is-locked на <body> ставит main.js),
   баннер уходит под неё и перестаёт ловить фокус: до этого он полностью
   накрывал кнопку «Отправить заявку». Страховка на случай, если модалка
   когда-нибудь окажется ниже по стеку. */
body.is-locked .cookie-message {
  z-index: 90;
  visibility: hidden;
}

/* ── Запас под баннером ─────────────────────────────────────────────────
   Баннер зафиксирован у нижнего края и накрывает нижнюю строку футера со
   ссылками на политики. Пока он виден, футер получает дополнительный
   padding-bottom. Высота баннера зависит от переноса строк, поэтому задана
   по брейкпоинтам с запасом; main.js может уточнить её (см. отчёт). */
@supports selector(:has(*)) {
  body:has(.cookie-message.is-visible) .footer {
    padding-bottom: calc(16px + var(--cookie-h, 216px));
  }
}

/* Фолбэк для браузеров без :has(): постоянный запас снизу. Визуально это
   лишь чуть более «воздушный» футер, зато ссылки доступны всегда. */
@supports not selector(:has(*)) {
  .footer {
    padding-bottom: calc(16px + var(--cookie-h, 216px));
  }
}

/* Замеренные высоты баннера: 320px → 210, 430–480px → 168, 576px → 116,
   768px → 95, ≥992px → 74. Берём с запасом 20–30px. */
@media (min-width: 430px) { :root { --cookie-h: 184px; } }
@media (min-width: 576px) { :root { --cookie-h: 124px; } }
@media (min-width: 768px) { :root { --cookie-h: 104px; } }
@media (min-width: 992px) { :root { --cookie-h: 80px; } }

/* На печати баннера нет — запас под него не нужен. Класс .is-visible на нём
   при этом остаётся, поэтому :has() сам по себе не отключится. */
@media print {
  .footer { padding-bottom: 16px !important; }
}

.cookie-message__inner {
  width: 100%;
  max-width: var(--container, 1230px);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cookie-message__text {
  flex: 1 1 320px;
  margin: 0;
}

.cookie-message__link {
  color: var(--rk-blue, #0077be);
  text-decoration: underline;
}

.cookie-message__link:hover {
  color: var(--rk-blue-hover, #0089db);
}

.cookie-message__btn {
  flex: 0 0 auto;
  min-height: var(--btn-h, 34px);
  padding: 8px 24px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background-color: var(--rk-blue, #0077be);
  color: var(--rk-white, #fff);
  font-family: inherit;
  font-size: var(--btn-fs, 13px);
  font-weight: 600;
  letter-spacing: var(--btn-ls, .05em);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur, .2s) var(--ease, ease);
}

.cookie-message__btn:hover {
  background-color: var(--rk-blue-hover, #0089db);
}

.cookie-message__btn:active {
  background-color: var(--rk-blue-active, #005a90);
}

@media (min-width: 1230px) {
  .cookie-message__inner {
    padding: 0 15px;
  }
}