/* Общий chrome публичных страниц — шапка по Claude Design «Главная.dc.html».
   Классы hm-* заскоуплены и не конфликтуют со старым styles.css. */

/* Фирменный шрифт заголовков СТАН-Торги. */
@font-face {
    font-family: 'Xolonium';
    src: url('../fonts/Xolonium-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Основной текстовый шрифт Gilroy (как на stan-torgi.ru). Заголовки остаются на Xolonium. */
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Regular_0.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Medium_0.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Semibold_0.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Bold_0.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --hm-bg: #FAFAF8;
    --hm-ink: #111111;
    --hm-soft: #4F4F4F;
    --hm-mute: #898989;
    --hm-mute-2: #ABABAB;
    --hm-line: #ECECE8;
    --hm-line-2: #F1F1ED;
    --hm-line-dark: #DCDCD6;
    --hm-fill: #F4F4F1;
    --hm-yellow: #F8C700;
    --hm-gold: #8A6E00;
    --hm-green: #17845A;
    --hm-green-bg: #EAF6F0;
    --hm-blue: #2563EB;
    --hm-blue-bg: #EDF2FD;
}

.hm-header, .hm-header * { box-sizing: border-box; }
.hm-header a { text-decoration: none; color: inherit; }

.hm-container { max-width: 1240px; margin: 0 auto; width: 100%; padding: 0 24px; }

.hm-header {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Шапка не шире контентной колонки, по центру. */
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* Рамка прозрачная со всех сторон (видна только снизу), чтобы при
       «отлипании» появление полной рамки не меняло высоту шапки. */
    border: 1px solid transparent;
    border-bottom-color: var(--hm-line);
    /* Скругление и у белого состояния — при быстром скролле переход
       радиуса не успевает за фоном и мелькают углы. */
    border-radius: 16px;
    font-family: 'Gilroy', 'Inter Tight', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--hm-ink);
    transition: background .25s ease, top .25s ease, width .25s ease,
        border-color .25s ease, box-shadow .25s ease;
}
.hm-header-inner { min-height: 64px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hm-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.hm-brand img { height: 34px; width: auto; display: block; }
.hm-brand-name { display: flex; flex-direction: column; line-height: 1; }
.hm-brand-name b { font-weight: 800; font-size: 16px; letter-spacing: .02em; color: var(--hm-ink); white-space: nowrap; }
.hm-brand-name small { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--hm-mute); margin-top: 3px; white-space: nowrap; }
.hm-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.hm-nav a { padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--hm-soft); white-space: nowrap; transition: background .15s, color .15s; }
.hm-nav a:hover { background: var(--hm-fill); color: var(--hm-ink); }
.hm-nav a.active { background: var(--hm-fill); color: var(--hm-ink); }
.hm-hd-right { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.hm-icon-btn { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9px; transition: background .15s; }
.hm-icon-btn:hover { background: var(--hm-fill); }
.hm-icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--hm-yellow); border: 1.5px solid #FFFFFF; }
.hm-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid var(--hm-line);
    background: #FFFFFF;
    transition: border-color .15s, background .15s;
}
.hm-user:hover { border-color: var(--hm-line-dark); background: var(--hm-bg); }
.hm-user .who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hm-user .who b { font-size: 13px; font-weight: 600; color: var(--hm-ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-user .who span { font-size: 11px; color: var(--hm-mute); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Плавная смена цветов внутри шапки при переходе в тёмный режим. */
.hm-nav a, .hm-brand-name b, .hm-brand-name small, .hm-icon-btn,
.hm-user, .hm-user .who b, .hm-user .who span {
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.hm-icon-btn { color: var(--hm-soft); }

/* ---------- Скролл: шапка «отлипает» и темнеет ---------- */
.hm-header.is-scrolled {
    top: 12px;
    width: calc(100% - 28px);
    background: rgba(17, 17, 17, .92);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 20px 44px -20px rgba(17, 17, 17, .55);
    color: #FFFFFF;
}
.hm-header.is-scrolled .hm-brand-name b { color: #FFFFFF; }
.hm-header.is-scrolled .hm-brand-name small { color: var(--hm-mute-2); }
.hm-header.is-scrolled .hm-nav a { color: #E3E3DE; }
.hm-header.is-scrolled .hm-nav a:hover,
.hm-header.is-scrolled .hm-nav a.active { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.hm-header.is-scrolled .hm-icon-btn { color: #E3E3DE; }
.hm-header.is-scrolled .hm-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.hm-header.is-scrolled .hm-icon-btn .dot { border-color: #111111; }
.hm-header.is-scrolled .hm-user { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.hm-header.is-scrolled .hm-user:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); }
.hm-header.is-scrolled .hm-user .who b { color: #FFFFFF; }
.hm-header.is-scrolled .hm-user .who span { color: var(--hm-mute-2); }

@media (prefers-reduced-motion: reduce) {
    .hm-header, .hm-header * { transition: none !important; }
}

/* Сжатие шапки: на узких экранах навигация уезжает на свою строку
   с горизонтальным скроллом, затем прячутся подпись бренда и email. */
@media (max-width: 900px) {
    .hm-nav { order: 3; flex-basis: 100%; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
    .hm-nav::-webkit-scrollbar { display: none; }
    .hm-header-inner { gap: 10px; }
    .hm-header.is-scrolled { top: 8px; width: calc(100% - 16px); }
}
@media (max-width: 700px) {
    .hm-brand-name small, .hm-user .who span { display: none; }
}