/* ============================================================
   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}
}

/* ============================================================
   publishing.steagus.com — hub bar tail.

   Appended to the shared hub.css by _shared/sync-shared.sh. Anything
   site-specific about the hub goes HERE, never in the shared file: the
   shared part is overwritten wholesale on every sync.

   Several product pages carry their own sticky header pinned to top:0
   (header.bar on the product indexes, header.site on the guide/FAQ pages,
   .top-chrome on the Theme Skinner page). The hub is also sticky at top:0
   and sits at z-index 1000 against their ~40, so on scroll it covered
   their first 40px. Offsetting them by the hub's own height stacks the two
   bars instead. Uses var(--hub-height), so a change to the bar height
   carries through automatically.

   This cannot live in publishing-site.css: the product pages load hub.css and their
   own product stylesheet, but NOT publishing-site.css.
   ============================================================ */
header.bar,
header.site,
.top-chrome{
  top: var(--hub-height);
}

/* ============================================================
   LEGAL STRIP — the bottom counterpart to the hub bar.

   Lives here for the same reason the header offsets above do: every
   page on the site loads hub.css, but the product pages do NOT load
   publishing-site.css. This is the only stylesheet common to all of
   them, so it is the only place the strip can be styled once.

   The markup is byte-identical on every page (see _shell/legal-strip.html)
   and uses root-relative /legal/ links, exactly like the hub bar uses
   absolute site URLs. Copy it in verbatim; never hand-tune per page.

   COLORS: the site runs three palette vocabularies —
     abisam/sct + their guides : --paper-2 / --line   / --ink-3
     theme skinner + its guide : --surface-container / --border / --text-recessive
     publishing-site.css       : --paper   / --line   / --muted
   so each value chains through all three and ends on a literal. The strip
   therefore picks up whichever palette the page already loaded, and still
   renders correctly on a page that loads none of them.
   ============================================================ */
.legal-strip{
  border-top:1px solid var(--line, var(--border, #E2D9C8));
  background:var(--paper-2, var(--surface-container, var(--paper, #FBF8F1)));
}
.legal-strip-in{
  max-width:var(--maxw, 1080px);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 24px;
  font-family:var(--mono, ui-monospace,"SF Mono",Menlo,Consolas,monospace);
  font-size:.7rem;
  line-height:1.5;
}
.legal-strip .ls-copy{
  color:var(--ink-3, var(--text-recessive, var(--muted, #8A8377)));
  letter-spacing:.04em;
}
.legal-strip .ls-links{
  display:flex;
  flex-wrap:wrap;
  gap:0 20px;
}
.legal-strip .ls-links a{
  color:var(--ink-3, var(--text-recessive, var(--muted, #8A8377)));
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .15s ease;
}
.legal-strip .ls-links a:hover{
  color:var(--accent, #5E8C66);
}
.legal-strip .ls-links a:focus-visible{
  outline:2px solid var(--accent, #5E8C66);
  outline-offset:3px;
  border-radius:3px;
}

/* Narrow screens: stack the two halves rather than letting the link row
   wrap raggedly against the copyright. */
@media (max-width:560px){
  .legal-strip-in{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (prefers-reduced-motion:reduce){
  .legal-strip .ls-links a{transition:none}
}