/**
 * Arqelya clay tile logo — единый визуальный язык для шапки, подвала и лоадера.
 * Логотип — самодостаточная иконка с мягкой плиткой; не инвертируем в тёмной теме.
 */

.site-logo-picture {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.site-logo-mark {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 22%;
  filter:
    drop-shadow(0 1px 2px rgba(42, 37, 32, 0.08))
    drop-shadow(0 6px 18px rgba(42, 37, 32, 0.07));
  transition: filter 0.28s ease, transform 0.28s ease;
}

a:hover .site-logo-mark,
a:focus-visible .site-logo-mark {
  filter:
    drop-shadow(0 2px 4px rgba(42, 37, 32, 0.1))
    drop-shadow(0 10px 24px rgba(42, 37, 32, 0.1));
  transform: translateY(-1px);
}

/* ---- Размеры по контексту ---- */

.page-editorial .site-header__brand .site-header__logo {
  width: 46px !important;
  height: 46px !important;
}

.page-editorial .site-header__brand {
  gap: 0.65rem !important;
}

.arq-foot__logo {
  width: 54px;
  height: 54px;
}

.mh__logo {
  width: 38px;
  height: 38px;
}

.mh-menu__brand img.site-logo-mark {
  width: 34px;
  height: 34px;
}

.arq-page-loader__logo {
  width: 88px;
  height: 88px;
  filter:
    drop-shadow(0 4px 12px rgba(42, 37, 32, 0.1))
    drop-shadow(0 16px 40px rgba(42, 37, 32, 0.08));
}

.page-editorial .site-nav-offcanvas__logo {
  width: 40px;
  height: 40px;
}

/* ---- Тёмная тема: сохраняем натуральные цвета плитки, усиливаем глубину ---- */

html[data-theme="dark"] img.site-logo-mark,
html[data-theme="dark"] .page-editorial .site-header__brand .site-header__logo,
html[data-theme="dark"] .page-editorial .site-header__brand img.site-logo-mark,
html[data-theme="dark"] .mh__logo,
html[data-theme="dark"] .site-footer__logo,
html[data-theme="dark"] .site-nav-offcanvas__logo,
html[data-theme="dark"] .arq-foot__logo,
[data-theme="dark"] img.site-logo-mark {
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.42))
    drop-shadow(0 10px 28px rgba(0, 0, 0, 0.28)) !important;
  -webkit-filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.42))
    drop-shadow(0 10px 28px rgba(0, 0, 0, 0.28)) !important;
}

html[data-theme="dark"] a:hover .site-logo-mark,
html[data-theme="dark"] a:focus-visible .site-logo-mark {
  filter:
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.48))
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.32)) !important;
  -webkit-filter:
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.48))
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.32)) !important;
}

html[data-theme="dark"] .arq-page-loader__logo.site-logo-mark {
  filter:
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 20px 48px rgba(0, 0, 0, 0.3)) !important;
  -webkit-filter:
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 20px 48px rgba(0, 0, 0, 0.3)) !important;
}

@media (max-width: 991.98px) {
  .page-editorial .site-header__brand .site-header__logo {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-logo-mark {
    transition: none;
  }

  a:hover .site-logo-mark,
  a:focus-visible .site-logo-mark {
    transform: none;
  }
}