/* /domains/gromadan.com/public_html/css/top_bar/nav_bar.css */
:root { --topnav-h: 72px; }
@media (max-width: 1399px) { :root { --topnav-h: 58px; } }

/* ---------- бар ---------- */
.top-nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topnav-h);
    z-index: 50;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 0.25s ease;
    will-change: transform;
}
.top-nav.hide-bar { transform: translateY(-100%); }
body.has-top-nav { padding-top: var(--topnav-h); }

/* десктоп: 3 колонки ровно как у .app (лого над меню-сайдбаром, меню над лентой, язык над правой панелью) */
.top-nav-inner {
    height: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
    column-gap: var(--gap);
    align-items: center;
}
.top-nav-inner > * { min-width: 0; }
@media (min-width: 1920px) { .top-nav-inner { max-width: 1900px; } }
@media (min-width: 2400px) { .top-nav-inner { max-width: 2200px; } }

/* ---------- логотип ---------- */
.top-nav-logo { justify-self: center; text-decoration: none; display: inline-flex; align-items: center; line-height: 1; }
.top-nav-logo-g {
    display: none; width: 38px; height: 38px;
    background: var(--gradient);
    -webkit-mask: url('/img/logo-g.webp') center / contain no-repeat;
            mask: url('/img/logo-g.webp') center / contain no-repeat;
}

/* ---------- меню разделов внутри бара ---------- */
.top-nav .city-sections-menu { margin: 0; padding: 6px 4px; background: transparent; }
.top-nav .city-sections-tab {
    background: var(--bg); box-shadow: none; border: 1px solid transparent;
    padding: 9px 16px; font-size: 0.85rem;
}
.top-nav .city-sections-tab:hover { background: var(--primary-light); }
.top-nav .city-sections-tab.active {
    background: var(--surface); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
}

/* ---------- правая часть ---------- */
.top-nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.top-nav-locale { display: flex; align-items: center; gap: 10px; }
.top-nav .icon-btn { width: 40px; height: 40px; box-shadow: none; background: var(--bg); }
.top-nav .icon-btn:hover { background: var(--primary-light); }
.top-nav .icon-btn.create-plus-btn { background: var(--gradient); color: #fff; }
.top-nav .locale-dd-icon { width: 26px; height: 26px; }
.top-nav .top-nav-burger { display: none; width: 40px; height: 40px; }

/* ---------- прилипание колонок под баром (десктоп) ---------- */
@media (min-width: 901px) { body.has-top-nav .app { padding-top: 20px; } }
@media (min-width: 1400px) {
    body.has-top-nav .sidebar,
    body.has-top-nav .right-panel {
        top: calc(var(--topnav-h) + 16px);
        max-height: calc(100dvh - var(--topnav-h) - 32px);
    }
}

/* ---------- ≤1399: бургер вместо сайдбара ---------- */
@media (max-width: 1399px) {
    .top-nav-inner { display: flex; gap: 10px; padding: 0 12px; }
    .top-nav-logo { justify-self: auto; flex-shrink: 0; }
    .top-nav-menu { flex: 1 1 auto; }
    .top-nav-actions { flex-shrink: 0; gap: 8px; }
    .top-nav-locale { display: none; }          /* язык/страна есть в выезжающем меню */
    .top-nav .top-nav-burger { display: flex; }
    body.has-top-nav .app .right-panel {
        top: calc(var(--topnav-h) + 12px);
        max-height: calc(100dvh - var(--topnav-h) - 24px);
    }
}

/* ---------- ≤900: вместо слова — буква G ---------- */
@media (max-width: 900px) {
    .top-nav-logo-full { display: none; }
    .top-nav-logo-g { display: block; }
    .top-nav .city-sections-tab { padding: 8px 13px; font-size: 0.79rem; }
    .top-nav .icon-btn, .top-nav .top-nav-burger { width: 36px; height: 36px; }
}

/* ---------- "+" в первой stories на главной ---------- */
.stories-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.stories-row > .stories { flex: 1 1 auto; min-width: 0; margin: 0; }
.stories-add { flex-shrink: 0; padding: 4px; }
.stories-add .icon-btn { width: 76px; height: 76px; }
.stories-add .icon-btn svg { width: 30px; height: 30px; }
@media (max-width: 900px) {
    .stories-row { margin: 0 10px; gap: 10px; }
    .stories-add .icon-btn { width: 58px; height: 58px; }
    .stories-add .icon-btn svg { width: 24px; height: 24px; }
}