/* ══════════════════════════════════════════════════════════════════════════
   Footer (#29)
   Підвал сайту: бренд · групи посилань · логотипи партнерів · реквізити + ©
   Варіанти:
     .footer            — повний, темний (diiaBlueDeep, заливка великої площини)
     .footer--compact   — слім, світлий (для застосунку / дашборда)
   JS: немає. A11y: <footer> landmark, групи посилань = <nav aria-labelledby>.

   Тема обох варіантів керується приватними runtime-властивостями (--footer-*),
   значення яких — ВИКЛЮЧНО токени. Це прибирає дублювання селекторів на варіант.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Root + тема (темна за замовчуванням) ────────────────────────────────── */
.footer {
  --footer-bg:         var(--uris-component-footer-surface);
  --footer-fg:         var(--uris-component-footer-text);
  --footer-muted:      var(--uris-component-footer-text-muted);
  --footer-border:     var(--uris-component-footer-border);
  --footer-link:       var(--uris-component-footer-text-muted);
  --footer-link-hover: var(--uris-component-footer-text);
  /* Свідомий відступ від semantic-focus-ring (#004bc1): на темній поверхні
     footer (brand-black-pure) синє кільце не тримає 3:1 (WCAG 2.4.13 /
     non-text contrast), тому темний варіант використовує білий текст-колір.
     Світлий .footer--compact нижче використовує стандартний focus-ring. */
  --footer-focus:      var(--uris-component-footer-text);

  background-color: var(--footer-bg);
  color: var(--footer-muted);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  -webkit-font-smoothing: antialiased;
}

/* ── Компактний світлий варіант ─────────────────────────────────────────── */
.footer--compact {
  --footer-bg:         var(--uris-color-semantic-surface);
  --footer-fg:         var(--uris-color-semantic-text);
  --footer-muted:      var(--uris-color-semantic-text-muted);
  --footer-border:     var(--uris-color-semantic-border);
  --footer-link:       var(--uris-color-semantic-link);
  --footer-link-hover: var(--uris-color-semantic-link);
  --footer-focus:      var(--uris-color-semantic-focus-ring);

  border-block-start: 1px solid var(--footer-border);
}

/* ── Контейнер ──────────────────────────────────────────────────────────── */
.footer__container {
  max-width: var(--uris-component-footer-max-width);
  margin-inline: auto;
  padding-inline: var(--uris-spacing-6);
  padding-block: var(--uris-spacing-12);
}

.footer--compact .footer__container {
  padding-block: var(--uris-spacing-5);
}

/* ── Верхня зона: бренд + колонки посилань ──────────────────────────────── */
.footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(4, 1fr);
  gap: var(--uris-spacing-8);
}

/* ── Бренд-блок ─────────────────────────────────────────────────────────── */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-4);
}

.footer__brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  align-self: flex-start;
  color: var(--footer-fg);
  text-decoration: none;
}

.footer__brand-mark:focus-visible {
  outline: 2px solid var(--footer-focus);
  outline-offset: 3px;
  border-radius: var(--uris-radius-sm);
}

.footer__brand-sep {
  width: 1px;
  height: 24px;
  background-color: var(--footer-border);
  flex-shrink: 0;
}

.footer__wordmark {
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.footer__brand-name {
  margin: 0;
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
  line-height: var(--uris-text-sm-line);
  color: var(--footer-fg);
}

.footer__brand-desc {
  margin: 0;
  max-width: 38ch;
  font-size: var(--uris-text-sm-size);
  color: var(--footer-muted);
}

/* ── Колонка посилань (nav-група) ───────────────────────────────────────── */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-3);
}

.footer__heading {
  margin: 0;
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--footer-fg);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-2);
}

/* ── Посилання (спільне для груп, реквізитів, дій) ──────────────────────── */
.footer__link {
  color: var(--footer-link);
  text-decoration: none;
  font-size: var(--uris-text-sm-size);
  border-radius: var(--uris-radius-sm);
  transition: color var(--uris-duration-fast) var(--uris-ease-default);
}

.footer__link:hover {
  color: var(--footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__link:focus-visible {
  outline: 2px solid var(--footer-focus);
  outline-offset: 3px;
  color: var(--footer-link-hover);
}

.footer__link[aria-current="page"] {
  color: var(--footer-link-hover);
  font-weight: var(--uris-font-weight-medium);
}

/* ── Партнери / програми ────────────────────────────────────────────────── */
.footer__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uris-spacing-3) var(--uris-spacing-4);
  margin-block-start: var(--uris-spacing-10);
  padding-block-start: var(--uris-spacing-8);
  border-block-start: 1px solid var(--footer-border);
}

.footer__partners-label {
  font-size: var(--uris-text-xs-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--footer-muted);
}

/* Плейсхолдер-плитка логотипа: замінюється офіційним SVG партнера */
.footer__partner {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  height: 40px;
  padding-inline: var(--uris-spacing-3);
  border: 1px solid var(--footer-border);
  border-radius: var(--uris-radius-md);
  color: var(--footer-fg);
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-medium);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
  transition:
    border-color var(--uris-duration-fast) var(--uris-ease-default),
    color        var(--uris-duration-fast) var(--uris-ease-default);
}

.footer__partner:hover {
  border-color: var(--footer-fg);
}

.footer__partner:focus-visible {
  outline: 2px solid var(--footer-focus);
  outline-offset: 2px;
}

.footer__partner--sm {
  height: 28px;
  padding-inline: var(--uris-spacing-2);
}

/* ── Нижній рядок: реквізити + © + мова + дія ───────────────────────────── */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--uris-spacing-4) var(--uris-spacing-8);
  margin-block-start: var(--uris-spacing-10);
  padding-block-start: var(--uris-spacing-6);
  border-block-start: 1px solid var(--footer-border);
}

.footer__bottom-info {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-2);
}

.footer__legal {
  margin: 0;
  font-size: var(--uris-text-xs-size);
  line-height: var(--uris-text-sm-line);
  color: var(--footer-muted);
}

.footer__legal strong {
  font-weight: var(--uris-font-weight-medium);
  color: var(--footer-fg);
}

/* Інлайн-посилання в суцільному тексті реквізитів мусить мати не-колірну
   ознаку (підкреслення) — WCAG 1.4.1: воно того ж кольору, що й текст довкола. */
.footer__legal .footer__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__copyright {
  margin: 0;
  font-size: var(--uris-text-xs-size);
  color: var(--footer-muted);
}

.footer__bottom-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uris-spacing-5);
}

/* ── Перемикач мови ─────────────────────────────────────────────────────── */
.footer__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-1);
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-medium);
}

.footer__lang-item {
  color: var(--footer-link);
  padding-inline: var(--uris-spacing-1);
  border-radius: var(--uris-radius-sm);
  text-decoration: none;
  transition: color var(--uris-duration-fast) var(--uris-ease-default);
}

.footer__lang-item:hover {
  color: var(--footer-link-hover);
}

.footer__lang-item[aria-current="true"] {
  color: var(--footer-link-hover);
  font-weight: var(--uris-font-weight-bold);
}

.footer__lang-item:focus-visible {
  outline: 2px solid var(--footer-focus);
  outline-offset: 2px;
}

.footer__lang-sep {
  color: var(--footer-muted);
  user-select: none;
  font-weight: var(--uris-font-weight-regular);
}

/* ── Дія («Повідомити про проблему») ────────────────────────────────────── */
.footer__action {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  color: var(--footer-link);
  font-size: var(--uris-text-sm-size);
  text-decoration: none;
  border-radius: var(--uris-radius-sm);
  transition: color var(--uris-duration-fast) var(--uris-ease-default);
}

.footer__action:hover {
  color: var(--footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__action:focus-visible {
  outline: 2px solid var(--footer-focus);
  outline-offset: 3px;
}

.footer__action-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Спрощений варіант (тимчасовий) — лого + назва + дублювання меню + ©
   ══════════════════════════════════════════════════════════════════════════ */
.footer--simple .footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-6);
  padding-block: var(--uris-spacing-8);
}

.footer--simple .footer__menu {
  column-count: 3;
  column-gap: var(--uris-spacing-8);
  padding-block-start: var(--uris-spacing-6);
  border-block-start: 1px solid var(--footer-border);
}

.footer--simple .footer__menu .footer__link {
  display: block;
  padding-block: var(--uris-spacing-1);
  break-inside: avoid;
}

.footer--simple .footer__copyright {
  padding-block-start: var(--uris-spacing-6);
  border-block-start: 1px solid var(--footer-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   Компактний варіант — однорядкова смуга
   ══════════════════════════════════════════════════════════════════════════ */
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uris-spacing-3) var(--uris-spacing-6);
}

.footer__bar-start {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uris-spacing-2) var(--uris-spacing-3);
}

.footer__bar-meta {
  font-size: var(--uris-text-xs-size);
  color: var(--footer-muted);
}

/* Інлайн-перелік правових посилань (компакт) */
.footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uris-spacing-1) var(--uris-spacing-4);
}

.footer__partners--inline {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: none;
  gap: var(--uris-spacing-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   Адаптив (desktop-first)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer--simple .footer__menu {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  .footer__top {
    grid-template-columns: 1fr;
  }

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

  .footer--simple .footer__menu {
    column-count: 1;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .footer__link,
  .footer__action,
  .footer__lang-item,
  .footer__partner {
    transition: none;
  }
}