/* The main-site navbar, for the static hub pages.
 *
 * WHY THIS FILE DUPLICATES RULES
 * ------------------------------
 * /community/packs, /community/societies and /c/<slug> are static HTML served by
 * rewrites, so they never render <Navbar /> and never load the app's bundled
 * app/homepage-design.css. They used to carry their own "Share hub" topbar,
 * which made walking from the leaderboard into a pack page feel like leaving the
 * site. These rules are a deliberate copy of the .hp-* navbar rules in
 * app/homepage-design.css so the two chromes match.
 *
 * KEEP IN SYNC with app/homepage-design.css and components/Navbar.tsx. The nav
 * link list also lives in both places (js/hub-ui.js here). The real fix is to
 * make these pages Next.js routes; until then, changing one means changing both.
 *
 * The breakpoints are the measured ones: nine nav items need 1032px of bar at
 * 24px gaps, so 981-1040px tightens to 16px and 980px and below collapses to
 * the hamburger.
 */

.hs-sitenav { background: transparent; }

.hs-sitenav-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cloud);
}

.hs-sitenav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 66px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.hs-sitenav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
}
.hs-sitenav-brand img { width: 30px; height: 30px; }
.hs-sitenav-word {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--midnight);
}

.hs-sitenav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
}
.hs-sitenav-link {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(10, 26, 63, 0.78);
  text-decoration: none;
  transition: color .15s;
}
.hs-sitenav-link:hover { color: var(--ink); }
/* Active is orange text on a white nav, so it uses the darker AA orange, the
   same call app/homepage-design.css makes for .hp-navlink.is-active. */
.hs-sitenav-link.is-active { color: #C25E02; }

.hs-sitenav-right { display: flex; align-items: center; gap: 14px; }

.hs-sitenav-cta {
  flex: none;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--pill);
  border: none;
  background: var(--orange);
  color: var(--midnight);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(253, 119, 2, 0.28);
  transition: background .15s, transform .15s;
}
.hs-sitenav-cta:hover { background: var(--flame); transform: translateY(-2px); }
.hs-sitenav-cta:active { transform: scale(0.98); background: var(--flame); }

/* The cycle status line. It used to sit inside the hub's own topbar; the site
   navbar has no room for it at nine items, so it becomes a slim strip beneath,
   in the same navy the app uses for its homepage promo bar. */
.hs-sitenav-status {
  background: var(--midnight);
  color: rgba(239, 238, 251, 0.88);
}
.hs-sitenav-status-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
}
.hs-sitenav-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); flex: none;
}

.hs-sitenav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 11px;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  /* column, not the default row: the bars are flex ITEMS of this button, so a
     row direction lays them side by side and margin-top does nothing. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hs-sitenav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.hs-sitenav-panel {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--cloud);
}
.hs-sitenav-panel.is-open { display: block; }
.hs-sitenav-panel-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px 18px; }
.hs-sitenav-panel a {
  display: block;
  padding: 13px 4px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cloud);
}
.hs-sitenav-panel a.is-active { color: var(--orange); }
.hs-sitenav-panel .hs-sitenav-cta {
  height: 46px; width: 100%; justify-content: center; margin-top: 14px;
}

@media (min-width: 981px) and (max-width: 1040px) {
  .hs-sitenav-links { gap: 16px; }
}
@media (max-width: 980px) {
  .hs-sitenav-links { display: none; }
  .hs-sitenav-toggle { display: inline-flex; }
  .hs-sitenav-right { margin-left: auto; }
}
@media (max-width: 560px) {
  .hs-sitenav-inner { padding: 0 18px; }
  .hs-sitenav-status-inner { padding: 9px 18px; }
}