/*
 * Site foundation: header shell and public navigation.
 * Extracted from legacy shell core on 2026-04-07.
 */

/* Header */
.topbar{ position: relative; z-index: 20; backdrop-filter: blur(10px);
  /* unify heights of logo / rails / profile blocks in the top line */
  /* +вертикаль, чтобы ленты/профиль выглядели свободнее */
  /* Taller header so rails show content without feeling cramped */
  --topline-box-h: 150px;
}
.topbar.is-sticky{ position: sticky; top:0; z-index: 50; }
.topline{
  display:flex;
  /* keep all top blocks ровно по высоте */
  align-items: stretch;
  justify-content:flex-start;
  gap: 14px;
  padding: 20px var(--page-pad-x);
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,12,.52);
}
.topRight{ position: relative; z-index: 60; margin-left: auto; }
.brand{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:12px;
  text-decoration: none;
  color: inherit;
  /* make logo block visually match the rails */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0;
  width: var(--topline-box-h);
  height: var(--topline-box-h);
  overflow: hidden;
}
.brand:hover{ border-color: rgba(240,140,40,.35); background: rgba(0,0,0,.30); }
.logoSmall{ width: 64px; height:64px; object-fit:cover; border-radius: 16px; border:1px solid rgba(255,255,255,.12); }
.brandName{ font-weight: 900; letter-spacing:.2px; }
.brandSub{ color: var(--text700); font-size: 12px; }

/* Center area in topline: two rails in a row (wraps to 2 rows on narrow screens) */
.topCenter{
  /* Give rails a bit more room on desktop so “Базы месяца” stays readable.
     It can still shrink when the profile block needs space. */
  flex: 1 1 640px;
  min-width: 320px;
  display: flex;
  flex-direction: row;
  /* keep rails side-by-side on desktop; allow wrap only on smaller screens */
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
  /* important for flex children ellipsis/overflow to work and avoid forced wrapping */
  min-width: 0;
  height: var(--topline-box-h);
}

/*
  Keep both rails "one after another" (side-by-side) on most desktop widths.
  Stack them only on smaller screens.
*/
@media (max-width: 980px){
  .topline{ flex-wrap: wrap; }
  .topCenter{ order: 3; flex-basis: 100%; min-width: 0; flex-wrap: wrap; height: auto; }
  .topRight{ order: 2; }
  .brand{ width: auto; height: auto; padding: 10px 12px; }

  /* Profile widget: stop forcing "desktop rail" height on smaller screens */
  .profileWidget{ height: auto; padding: 10px 12px; }
  .profileAvatarLarge{ width: 56px; height: 56px; border-radius: 12px; }
  .profileWidgetMetrics{ flex-wrap: wrap; }
  .profileWidgetActions{ flex-wrap: wrap; }
  .profileWidgetActions > .btn,
  .profileWidgetActions > a.btn,
  .profileWidgetActions > .notifBell > .notifBellBtn{
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }

  /* On smaller screens keep bell tappable even when it sits next to likes */
  .profileWidgetMetrics > .notifBell > .notifBellBtn{
    min-height: 32px;
    padding: 6px 10px;
  }
}

@media (max-width: 520px){
  /* Make the right profile block align nicely under rails */
  .topRight{ width: 100%; }
  .profileWidget{ width: 100%; }
}

.navline{
  display:flex; justify-content:space-between;
 align-items:center;
  padding: 10px var(--page-pad-x);
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,12,.44);
}
.nav{ display:flex; gap: 14px; flex-wrap: wrap; }
.navLink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text900);
  text-decoration: none;
  border-radius: var(--control-radius);
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-weight: 800; font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.navLink:hover{ border-color: var(--control-border-hover); background: var(--control-accent-bg-hover); transform: translateY(-1px); }

.navLink--community{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.communityNavBadge{
  margin-left: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 800;
}
.lang{ opacity:.85; font-weight: 800; font-size: 12px; padding: 6px 10px; border:1px solid var(--control-border); background: var(--control-bg); }

/* Mobile header/nav: keep menu usable on narrow screens */
@media (max-width: 520px){
  :root{ --page-pad-x: 12px; --page-gap-top: 12px; --page-gap-bottom: 28px; --grid-gap: 12px; --stack-gap: 12px; --panel-pad: 12px; }
  .topline{ padding: 10px 12px; }
  .navline{ padding: 8px 12px; }
  .brandSub{ display:none; }
  .topCenter{ gap: 8px; }

  .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }
  .nav::-webkit-scrollbar{ height: 0; }
  .navLink{ white-space: nowrap; }

}