/* CoolVolume — общие стили сайта.
 * Подключается последним, поэтому переопределяет инлайновые стили страниц.
 * Шапка: первая строка — логотип и меню калькуляторов, вторая — языки.
 * Правится в одном месте на все страницы сайта.
 */

/* ─────────── раскладка шапки ─────────── */
header.site .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 16px;
  padding-top: 11px;
  padding-bottom: 9px;
}

header.site .logo { flex: none; }

/* ─────────── меню калькуляторов ─────────── */
header.site .nav {
  display: flex;
  gap: 2px 4px;
  margin-left: 6px;
  order: 0;
  width: auto;
  /* Основа именно нулевая: при основе по содержимому меню с девятью
     пунктами не помещалось рядом с логотипом и целиком уезжало на свою
     строку, оставляя пустоту справа от логотипа. С нулевой основой оно
     стоит рядом, а лишние пункты переносятся внутри самого меню —
     то есть вторая строка начинается там же, где первая. */
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: wrap;
  align-content: flex-start;
}

header.site .nav a {
  flex: none;
  white-space: nowrap;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: #5b6672;
  text-align: left;
  min-width: 0;
  transition: background .15s ease, color .15s ease;
}
header.site .nav a:hover { background: #efece6; color: #1f2933; }
header.site .nav a.on { background: #1f2933; color: #fff; font-weight: 700; }

/* ─────────── языки: отдельная строка под меню ─────────── */
header.site .tag {
  order: 3;
  flex: 1 1 100%;
  width: 100%;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #e8e4dd;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3px 4px;
  font-size: 12.5px;
  line-height: 1;
}

header.site .tag a,
header.site .tag b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 7px;
  text-decoration: none;
  color: #5b6672;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
header.site .tag a:hover {
  background: #fff;
  border-color: #d8d2c7;
  color: #1f2933;
}
/* текущий язык выделен */
header.site .tag b {
  background: #1f2933;
  border-color: #1f2933;
  color: #fff;
  opacity: 1;
}
header.site .tag svg {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(31, 41, 51, .12);
  flex: none;
}


/* ─────────── порядок языков зафиксирован ───────────
 * В разметке текущий язык всегда стоит первым, из-за чего гирлянда
 * перескакивала при переключении. Здесь порядок задан жёстко,
 * поэтому флаги стоят на своих местах на любой странице. */
header.site .tag a[data-setlang="ru"] { order: 1; }
header.site .tag a[data-setlang="en"] { order: 2; }
header.site .tag a[data-setlang="de"] { order: 3; }
header.site .tag a[data-setlang="es"] { order: 4; }
header.site .tag a[data-setlang="it"] { order: 5; }
header.site .tag a[data-setlang="zh"] { order: 6; }
header.site .tag a[data-setlang="sr"] { order: 7; }
header.site .tag a[data-setlang="tr"] { order: 8; }
header.site .tag a[data-setlang="hi"] { order: 9; }
header.site .tag a[data-setlang="pl"] { order: 10; }
header.site .tag a[data-setlang="pt"] { order: 11; }
header.site .tag a[data-setlang="ar"] { order: 12; }
header.site .tag a[data-setlang="fr"] { order: 13; }
header.site .tag a[data-setlang="lt"] { order: 14; }
header.site .tag a[data-setlang="lv"] { order: 15; }
header.site .tag a[data-setlang="vi"] { order: 16; }
header.site .tag a[data-setlang="ja"] { order: 17; }
header.site .tag a[data-setlang="id"] { order: 18; }

html[lang="ru"] header.site .tag b { order: 1; }
html[lang="en"] header.site .tag b { order: 2; }
html[lang="de"] header.site .tag b { order: 3; }
html[lang="es"] header.site .tag b { order: 4; }
html[lang="it"] header.site .tag b { order: 5; }
html[lang="zh"] header.site .tag b { order: 6; }
html[lang="sr"] header.site .tag b { order: 7; }
html[lang="tr"] header.site .tag b { order: 8; }
html[lang="hi"] header.site .tag b { order: 9; }
html[lang="pl"] header.site .tag b { order: 10; }
html[lang="pt"] header.site .tag b { order: 11; }
html[lang="ar"] header.site .tag b { order: 12; }
html[lang="fr"] header.site .tag b { order: 13; }
html[lang="lt"] header.site .tag b { order: 14; }
html[lang="lv"] header.site .tag b { order: 15; }
html[lang="vi"] header.site .tag b { order: 16; }
html[lang="ja"] header.site .tag b { order: 17; }
html[lang="id"] header.site .tag b { order: 18; }

/* ─────────── узкие экраны ─────────── */
@media (max-width: 900px) {
  header.site .nav {
    order: 2;
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 8px;
    gap: 5px;
  }
  header.site .nav a { padding: 7px 11px; font-size: 14px; }
}
@media (max-width: 560px) {
  header.site .wrap { padding-top: 9px; padding-bottom: 7px; gap: 0 10px; }
  header.site .nav { margin-top: 6px; gap: 3px; }
  header.site .nav a { padding: 6px 9px; font-size: 13.5px; }
  header.site .tag { gap: 2px 3px; margin-top: 6px; padding-top: 6px; }
  header.site .tag a, header.site .tag b { padding: 4px 6px; font-size: 11.5px; gap: 4px; }
  header.site .tag svg { width: 15px; height: 10px; }
}

/* подписи языков видны всегда — старое правило прятало их на узких экранах */
header.site .tag a span,
header.site .tag b span { display: inline !important; }