/* Модуль «Верхня стрічка» (Molfar modules): стрічка над шапкою сайту. Значення — змінні --ts-* з налаштувань модуля (атрибут style).
   Цей самий файл показує попередній перегляд в адмінці (iframe), тому на телефоні — звичайні @media і vw. */
.topstrip,
.topstrip * {
  box-sizing: border-box;
}

.topstrip {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--ts-h);
  overflow: hidden;
  background: var(--ts-bg);
  font-family: var(--ts-font);
  font-size: var(--ts-fs);
  font-weight: 400;
  letter-spacing: var(--ts-ls);
  line-height: var(--ts-lh);
}

.topstrip--upper {
  text-transform: uppercase;
}

/* Відступи й висота — тут, а не на .topstrip: посилання займає всю площу стрічки, без мертвих зон по краях. */
.topstrip__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ts-line-gap);
  width: 100%;
  min-width: 0;
  min-height: var(--ts-h);
  padding: 0 var(--ts-pad);
  color: inherit;
  text-decoration: none;
}

a.topstrip__body:hover {
  color: inherit;
  opacity: .85;
}

/* Місце при нестачі ширини віддають лінії, а не текст. */
.topstrip__text {
  flex: 0 0 auto;
  max-width: 100%;
  text-align: center;
}

.topstrip--lines .topstrip__body::before,
.topstrip--lines .topstrip__body::after {
  content: "";
  flex: 0 1 var(--ts-line-len);
  min-width: 0;
  height: var(--ts-line-w);
  background: var(--ts-line);
  transform: translateY(var(--ts-line-y));
}

.topstrip--left .topstrip__body {
  justify-content: flex-start;
}

.topstrip--left .topstrip__text {
  text-align: left;
}

.topstrip--left.topstrip--lines .topstrip__body::before {
  display: none;
}

.topstrip--right .topstrip__body {
  justify-content: flex-end;
}

.topstrip--right .topstrip__text {
  text-align: right;
}

.topstrip--right.topstrip--lines .topstrip__body::after {
  display: none;
}

.topstrip--closable .topstrip__body {
  padding-right: 44px;
  padding-left: 44px;
}

.topstrip__close {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ts-close);
  font: 400 22px/1 Arial, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.topstrip__close:hover {
  opacity: .7;
}

/* Бігучий рядок: дві однакові групи, кожна не вужча за екран, зсув на половину доріжки дає безшовне повторення. */
.topstrip--marquee .topstrip__body {
  justify-content: flex-start;
  gap: 0;
  padding: 0;
}

.topstrip__run {
  display: flex;
  flex: none;
  width: max-content;
  animation: topstrip-run var(--ts-speed) linear infinite;
}

.topstrip--marquee:hover .topstrip__run {
  animation-play-state: paused;
}

.topstrip__group {
  flex: none;
  min-width: 100vw;
  padding: 0 1em;
  text-align: center;
  white-space: nowrap;
}

@keyframes topstrip-run {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topstrip__run {
    animation: none;
  }
}

/* Плашка попереднього перегляду (чернетка за посиланням із адмінки); відвідувачі її не бачать. */
.topstrip-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 16px;
  background: #15132d;
  color: #fff;
  font: 400 14px/1.4 Rubik, Arial, sans-serif;
}

.topstrip-note__langs {
  display: inline-flex;
  gap: 4px;
}

.topstrip-note__langs a {
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
}

.topstrip-note__langs a[aria-current] {
  background: #fff;
  color: #15132d;
}

@media (min-width: 768px) {
  .topstrip--mobile {
    display: none;
  }
}

@media (max-width: 767px) {
  .topstrip--desktop {
    display: none;
  }

  /* --ts-fs-m — розмір на екрані 390 px; на інших телефонах масштабується разом з екраном, тож текст лишається в один рядок. */
  .topstrip {
    min-height: var(--ts-h-m);
    font-size: clamp(10px, calc(var(--ts-fs-m) * 100vw / 390), var(--ts-fs));
  }

  .topstrip__body {
    min-height: var(--ts-h-m);
    padding: 0 min(var(--ts-pad), 12px);
  }

  .topstrip--closable .topstrip__body {
    padding-right: 36px;
    padding-left: 12px;
  }

  .topstrip--lines .topstrip__body::before,
  .topstrip--lines .topstrip__body::after {
    display: none;
  }

  .topstrip__close {
    right: 4px;
  }
}