/* ============================================================
   СЛИМ-ШАПКА (дизайн user data/brand/header-A-final.html)
   Грузится ПОСЛЕ styles.css и brand.css — перебивает старый
   градиентный hero-header. Десктоп: липкая строка-навигация.
   Мобайл: app-bar сжимается при прокрутке + лента-чипсы + меню «⋯».
   Палитра берётся из brand.css (золото), структура — из макета.
   ============================================================ */

/* — сброс старого hero-header — */
header.site-header {
  background: var(--paper-2, #F7F0E1) !important;
  border: 1px solid var(--hairline, #E6DBC2) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  overflow: visible !important;
  text-align: left;
  position: sticky;
  top: 8px;
  z-index: 40;
  transition: box-shadow .2s ease;
}
header.site-header::before { display: none !important; }
header.site-header.scrolled { box-shadow: 0 8px 22px rgba(70, 50, 20, .12) !important; }

/* — верхняя строка — */
.site-header .hbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  min-height: 62px;
}

/* бренд (иконка + название = h1 для SEO) */
.site-header .hbrand {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
  text-decoration: none;
  color: inherit;
}
.site-header .hbrand-ic {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  background: linear-gradient(135deg, var(--gold, #9A6A23), var(--gold-deep, #7E561D));
}
.site-header .hbrand-name {
  margin: 0;
  font-family: var(--brand-serif, "Source Serif 4", Georgia, serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.05;
  color: var(--ink, #2A2724);
  letter-spacing: -0.01em;
}
.site-header .hbrand-short { display: none; }

/* десктоп: название в две строки (как в макете) — освобождает место навигации */
@media (min-width: 768px) {
  .site-header .hbar { min-height: 66px; }
  .site-header .hbrand-name {
    max-width: 200px;
    white-space: normal;
    font-size: 18px;
    line-height: 1.08;
  }
}

/* навигация */
.site-header .hnav {
  display: flex;
  align-items: center;
  gap: 9px 18px;
  flex-wrap: wrap;
}
.site-header .hnav a {
  color: var(--gold-ink, #7C551B);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-header .hnav a:hover { color: var(--gold, #9A6A23); text-decoration: underline; }

/* правая группа: промо + язык + кебаб */
.site-header .hright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.site-header .hpromo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--gold, #9A6A23), var(--gold-deep, #7E561D));
  border-radius: 11px;
  padding: 9px 15px;
  box-shadow: 0 6px 16px rgba(120, 80, 25, .25);
  transition: filter .15s ease, transform .15s ease;
}
.site-header .hpromo:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* язык — в строке (перебиваем absolute из styles.css) */
.site-header .lang-switcher {
  position: static;
  top: auto; right: auto;
  flex: none;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline-2, #D8CDB6);
  backdrop-filter: none;
  padding: 3px;
  border-radius: 11px;
}

/* кебаб (только мобайл-сжатый) */
.site-header .hkebab {
  display: none;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--hairline, #E6DBC2);
  background: #fff;
  color: var(--gold-deep, #7C551B);
  font-size: 18px;
  align-items: center; justify-content: center;
  cursor: pointer;
}

/* чипсы и меню скрыты на десктопе */
.site-header .hchips,
.site-header .hmenu { display: none; }

/* ============================================================
   SEO-абзац «Как считается балл» — теперь на бумаге, не на градиенте
   ============================================================ */
.intro-details {
  margin: 0 0 16px;
  max-width: 820px;
  background: var(--gold-tint, #EEE2C9);
  border: 1px solid var(--hairline, #E6DBC2);
  border-radius: 12px;
  padding: 0;
}
.intro-details > summary {
  color: var(--gold-ink, #7C551B);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 14px;
}
.intro-details[open] > summary { padding-bottom: 6px; }
.intro-details .intro-subtitle {
  color: #5f574a;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 8px;
  padding: 0 14px;
  opacity: 1;
}
.intro-details .intro-lead {
  color: #5f574a;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  padding: 0 14px 14px;
  max-width: 820px;
  opacity: 1;
}

/* ============================================================
   МОБАЙЛ (<768px): app-bar + лента-чипсы + сжатие + меню
   ============================================================ */
@media (max-width: 767px) {
  header.site-header {
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    top: 0;
  }

  .site-header .hbar {
    gap: 10px;
    padding: 11px 14px;
    min-height: 0;
  }
  .site-header .hbrand { gap: 10px; flex: 1; min-width: 0; }
  .site-header .hbrand-ic {
    width: 30px; height: 30px;
    font-size: 15px; border-radius: 9px;
    transition: .2s ease;
  }
  .site-header .hbrand-name { font-size: 15.5px; flex: 1; min-width: 0; }
  .site-header .hbrand-full { display: block; }
  .site-header .hbrand-short {
    display: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ссылки и промо уезжают в чипсы/меню */
  .site-header .hnav { display: none; }
  .site-header .hpromo { display: none; }
  .site-header .hright { margin-left: auto; gap: 8px; }

  /* лента-чипсы */
  .site-header .hchips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 14px 11px;
    scrollbar-width: none;
    border-top: 1px solid #EFE7D4;
    transition: max-height .22s ease, opacity .22s ease, padding .22s ease;
  }
  .site-header .hchips::-webkit-scrollbar { display: none; }
  .site-header .hchips a {
    flex: none;
    background: var(--gold-tint, #E9DFC6);
    color: var(--gold-ink, #7C551B);
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 999px;
    padding: 7px 13px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--hairline, #E6DBC2);
  }
  .site-header .hchips a.hchip-promo {
    background: linear-gradient(135deg, var(--gold, #9A6A23), var(--gold-deep, #7E561D));
    color: #fff;
    border-color: transparent;
  }

  /* сжатое состояние (при прокрутке) */
  header.site-header.cond .hbar { padding-top: 8px; padding-bottom: 8px; }
  header.site-header.cond .hbrand-ic { width: 26px; height: 26px; font-size: 13px; }
  /* scrolled/condensed: держим бренд в одну строку (логотип теперь один текст-узел, без full/short) */
  header.site-header.cond .hbrand-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  header.site-header.cond .lang-switcher { display: none; }
  header.site-header.cond .hkebab { display: flex; }
  header.site-header.cond .hchips {
    max-height: 0;
    padding-top: 0; padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    border-top: 0;
  }

  /* меню «⋯» */
  .site-header .hmenu {
    position: absolute;
    top: 52px; right: 12px;
    z-index: 60;
    width: 252px;
    background: #fff;
    border: 1px solid var(--hairline, #E6DBC2);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(60, 40, 15, .22);
    overflow: hidden;
    display: block;
  }
  .site-header .hmenu[hidden] { display: none; }
  .site-header .hmenu .promo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: linear-gradient(135deg, var(--gold, #9A6A23), var(--gold-deep, #7E561D));
  }
  .site-header .hmenu a:not(.promo-row) {
    display: block;
    padding: 12px 15px;
    color: var(--gold-ink, #7C551B);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-top: 1px solid #F0E8D5;
  }

  /* — перебиваем старые body.mobile-app header-правила из styles.css — */
  body.mobile-app header.site-header {
    padding: 0 !important;
    margin-bottom: 12px !important;
    text-align: left;
  }
  body.mobile-app header.site-header .hbrand-name {
    font-size: 15.5px !important;
    line-height: 1.05;
    margin: 0;
  }
  body.mobile-app header.site-header.cond .hbrand-name { font-size: 15px !important; }
  body.mobile-app header.site-header .lang-switcher {
    position: static !important;
    top: auto !important; right: auto !important;
    transform: none !important;
  }
}