/* ==========================================================
   Humanex — shared site bar / navigation  (all screens)
   ========================================================== */
:root{ --hx-bar-bg:rgba(4,10,22,.94); --hx-bar-bd:rgba(255,255,255,.12); }

.hx-sitebar{
  position:sticky; top:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px,2vw,26px);
  padding:clamp(8px,1.2vw,12px) clamp(12px,3vw,28px);
  background:var(--hx-bar-bg);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hx-bar-bd);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#e2e8f0;
  width:100%; box-sizing:border-box;
}

/* ---------- brand (logo + titles) ---------- */
.hx-sitebar .hx-brand{
  display:flex; align-items:center; gap:clamp(8px,1.2vw,13px);
  text-decoration:none; color:inherit; flex:0 1 auto; min-width:0;
}
.hx-sitebar .hx-brand-logo{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:9px;
  padding:clamp(4px,.6vw,7px) clamp(6px,.9vw,10px);
  box-shadow:0 3px 12px rgba(0,0,0,.28); flex-shrink:0;
}
.hx-sitebar .hx-brand-logo img{
  height:clamp(20px,2.4vw,30px); width:auto; display:block;
}
.hx-sitebar .hx-brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.hx-sitebar .hx-brand-txt b{
  font-size:clamp(13px,1.35vw,18px); font-weight:800; letter-spacing:-.02em;
  white-space:nowrap; color:inherit;
}
.hx-sitebar .hx-brand-txt small{
  font-size:clamp(9px,.85vw,11.5px); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#00d4aa; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* ---------- navigation (upper right) ---------- */
.hx-sitebar .hx-nav{
  display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(5px,.7vw,9px); flex:1 1 auto; flex-wrap:wrap;
}
.hx-sitebar .hx-nav a,
.hx-sitebar .hx-nav button{
  -webkit-appearance:none; appearance:none;
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px;
  padding:clamp(7px,.85vw,10px) clamp(11px,1.3vw,17px);
  border-radius:999px;
  font-family:inherit; font-size:clamp(11.5px,1.05vw,13.5px); font-weight:700;
  letter-spacing:-.01em; white-space:nowrap; text-decoration:none; cursor:pointer;
  color:#dbe6f5;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}
.hx-sitebar .hx-nav a:hover,
.hx-sitebar .hx-nav button:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.34);
  color:#fff; transform:translateY(-1px);
}
.hx-sitebar .hx-nav a:active,
.hx-sitebar .hx-nav button:active{transform:translateY(0)}
.hx-sitebar .hx-nav a.active{
  background:rgba(0,212,170,.18);
  border-color:rgba(0,212,170,.55);
  color:#00d4aa;
  box-shadow:0 0 0 1px rgba(0,212,170,.18) inset;
}
/* Contact us */
.hx-sitebar .hx-nav a.cta{
  background:linear-gradient(135deg,#00d4aa,#0ea5e9);
  border-color:transparent; color:#03121f; font-weight:800;
  box-shadow:0 6px 18px rgba(0,212,170,.30);
}
.hx-sitebar .hx-nav a.cta:hover{filter:brightness(1.08);color:#03121f}
/* System access */
.hx-sitebar .hx-nav a.sys{
  background:linear-gradient(135deg,#7c6af7,#a78bfa);
  border-color:transparent; color:#fff; font-weight:800;
  box-shadow:0 6px 18px rgba(124,106,247,.34);
}
.hx-sitebar .hx-nav a.sys:hover{filter:brightness(1.10);color:#fff}
/* Theme toggle — explicit colours so it is never white-on-white */
.hx-sitebar .hx-nav button.hx-theme{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
  color:#dbe6f5; min-width:84px; justify-content:center;
}
.hx-sitebar .hx-nav button.hx-theme:hover{
  background:rgba(255,255,255,.16); color:#fff;
}

/* ---------- light mode ---------- */
body.light .hx-sitebar{
  background:rgba(247,251,255,.96);
  border-bottom-color:rgba(15,42,64,.14);
  color:#0f2a40;
}
body.light .hx-sitebar .hx-brand-logo{background:#fff;box-shadow:0 3px 10px rgba(15,42,64,.14)}
body.light .hx-sitebar .hx-brand-txt small{color:#0a9b7d}
body.light .hx-sitebar .hx-nav a,
body.light .hx-sitebar .hx-nav button{
  background:rgba(15,42,64,.05);
  border-color:rgba(15,42,64,.16);
  color:#26415c;
}
body.light .hx-sitebar .hx-nav a:hover,
body.light .hx-sitebar .hx-nav button:hover{
  background:rgba(15,42,64,.10); border-color:rgba(15,42,64,.3); color:#0f2a40;
}
body.light .hx-sitebar .hx-nav a.active{
  background:rgba(0,168,134,.14); border-color:rgba(0,168,134,.5); color:#0a8f74;
}
body.light .hx-sitebar .hx-nav a.cta{color:#03121f}
body.light .hx-sitebar .hx-nav a.sys{color:#fff}
body.light .hx-sitebar .hx-nav button.hx-theme{
  background:rgba(15,42,64,.05); border-color:rgba(15,42,64,.2); color:#26415c;
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hx-sitebar .hx-brand-txt small{display:none}
}
@media(max-width:860px){
  .hx-sitebar{flex-wrap:wrap; gap:8px}
  .hx-sitebar .hx-nav{width:100%; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px}
  .hx-sitebar .hx-nav::-webkit-scrollbar{display:none}
}
@media(max-width:520px){
  .hx-sitebar .hx-brand-txt b{font-size:13px}
  .hx-sitebar .hx-nav a,.hx-sitebar .hx-nav button{padding:7px 11px;font-size:11.5px}
}