/* ========= HEADER ========= */
.hub-header{
  position:fixed; top:0; left:0; width:100%;
  background:#2b2b2b; z-index:1030;
  padding:14px 20px; transition:padding .25s, box-shadow .25s;
}

.hub-header.shrink{
  padding:6px 20px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}

.hub-brand img{ width:100px; transition:width .25s; position:relative; z-index:1031;}
.hub-header.shrink .hub-brand img{ width:70px; }

.hub-nav{ display:flex; align-items:center; }

.hub-menu{ display:flex; gap:1.5rem; margin-left:auto; }
.hub-menu a:hover{ color:var(--hub-accent); }

.lang-switch button{
  background:none; border:none; margin-left:.8rem;
  color:var(--hub-fg); font-weight:600; cursor:pointer;
  display:inline;
}
.lang-switch button:disabled{ opacity:.4; cursor:default; }

/* mobile-only language switch */
.lang-mobile{ display:none; }

/* hamburger */
.hub-icon{ display:none; margin-left:1rem; cursor:pointer; position:relative; z-index:1031; }
.hub-burger{ width:26px; height:18px; position:relative; }
.hub-burger span{
  position:absolute; left:0; width:100%; height:3px; border-radius:2px;
  background:#fff; transition:transform .3s, opacity .3s;
}
.hub-burger span:nth-child(1){ top:0; }
.hub-burger span:nth-child(2){ top:7px; }
.hub-burger span:nth-child(3){ top:14px; }
.hub-icon.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hub-icon.open span:nth-child(2){ opacity:0; }
.hub-icon.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* drawer */
.hub-drawer{
  position:fixed; top:0; left:0; width:100%; background:#2b2b2b;
  transform:translateY(-100%); transition:transform .45s ease;
  padding:4.2rem 0 1rem; text-align:center; z-index:1029;
}
.hub-drawer a{ display:block; padding:.9rem 0; }
.hub-drawer a:hover{ color:var(--hub-accent); }
.hub-drawer.open{ transform:translateY(0); margin-top:75px;}

/* responsive */
@media(max-width:1024px){
  .hub-menu{ display:none; }
  .hub-icon{ display:block; margin-left:auto; }

  /* hide desktop language switch */
  .hub-nav > .lang-switch:not(.lang-mobile){ display:none; }

  /* show mobile language switch */
  .lang-mobile{ display:block; margin-top:.5rem; }

  /* header sopra drawer */
  .hub-header{ z-index:1032; padding:18px 20px; }
}