/* ============================================================
   STEAGUS CROSS-SITE HUB BAR  —  styles (Direction C)
   Status: structure LOCKED, palette LOCKED (Steagus Palette System v1.0).

   Each --acc-* value is pulled directly from that site's own
   Theme Skinner `accent` anchor — see _docs/steagus-palette-system-v1.0.md.
   ============================================================ */

:root{
  /* --- per-site accents (Steagus Palette System v1.0) --- */
  --acc-community:  #6E9DC9;   /* blue — community's site accent, tone raised for legibility on black */
  --acc-publishing: #5E8C66;   /* sage green — publishing's actual site accent */
  --acc-games:      #D8752E;   /* orange — games' accent, complements its steel-blue surface */
  --acc-oethus:     #C2792F;   /* amber-rustic — oethus' primary accent */

  /* --- bar chrome (Direction C = black base, warm-white anchor) --- */
  --hub-bg:        #141416;
  --hub-anchor:    #F0EDE6;    /* the neutral company center */
  --hub-idle:      #8f8f95;
  --hub-hover-bg:  #232327;
  --hub-active:    #ffffff;
  --hub-height:    40px;
}

.hub{
  display:flex;
  align-items:center;
  height:var(--hub-height);
  padding:0 16px;
  background:var(--hub-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:12.5px;
  user-select:none;
  position:sticky;
  top:0;
  z-index:1000;
}

.hub-brand{
  margin-right:auto;
  color:var(--hub-anchor);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
}
.hub-brand:hover{color:#fff}

.hub-links{
  display:flex;
  align-items:center;
  gap:4px;
  /* on narrow screens, let the set scroll rather than wrap/break */
  overflow-x:auto;
  scrollbar-width:none;              /* Firefox */
}
.hub-links::-webkit-scrollbar{display:none}  /* WebKit */

.hub-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:6px;
  color:var(--hub-idle);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.hub-link:hover{
  background:var(--hub-hover-bg);
  color:var(--hub-active);
}

.hub-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 auto;
}

/* each link's mark carries its site's accent */
.l-community  .hub-dot{background:var(--acc-community)}
.l-publishing .hub-dot{background:var(--acc-publishing)}
.l-games      .hub-dot{background:var(--acc-games)}
.l-oethus     .hub-dot{background:var(--acc-oethus)}

/* ------------------------------------------------------------
   ACTIVE STATE — the .active class is applied by the partial's own
   inline script (hostname self-detection). No page cooperation needed.
   Each link carries its l-{site} class, so the underline picks up
   that site's own accent color automatically.
   ------------------------------------------------------------ */
.hub-link.active{
  color:var(--hub-active);
}
.hub-link.active::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:2px;
  height:2px;
  border-radius:2px;
}
.l-community.active::after  { background:var(--acc-community) }
.l-publishing.active::after { background:var(--acc-publishing) }
.l-games.active::after      { background:var(--acc-games) }
.l-oethus.active::after     { background:var(--acc-oethus) }

/* ------------------------------------------------------------
   Accessibility floor
   ------------------------------------------------------------ */
.hub-link:focus-visible,
.hub-brand:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .hub-link{transition:none}
}