/*──────────────────────────  NAVBAR  ────────────────────────────*/
.navbar{
  background:var(--c-surface);
  padding:1rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 8px var(--c-shadow-color-navbar);
  position:sticky;
  top:0;
  z-index:100;
  transition: transform 0.3s ease-in-out, background var(--transition) 0.3s ease-in-out, box-shadow var(--transition) 0.3s ease-in-out;
}
.navbar--hidden {
  transform: translateY(-100%);
}

.navbar .brand img{width:140px}
#menu{display:flex;gap:1rem;align-items:center}
#menu a{color:var(--c-text-primary);text-decoration:none;font-weight:500; transition: color var(--transition);}
#menu a:hover{text-decoration:underline}

#theme-toggle {
  background: none;
  border: none;
  color: var(--c-text-primary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  margin-left: 0.5rem;
  line-height: 1;
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
}
#theme-toggle:hover {
  background-color: var(--c-surface-darker);
}

#burger{display:none;flex-direction:column;gap:4px;background:none;border:none}
#burger span{width:26px;height:3px;background:var(--c-text-primary); transition: background var(--transition);}

@media(max-width:768px){
  #burger{display:flex}
  #menu{position:absolute;right:0;top:72px;flex-direction:column;background:var(--c-surface);width:220px;padding:1rem;border-radius:var(--radius);box-shadow:0 2px 12px var(--c-shadow-color);transform:scaleY(0);transform-origin:top;transition: transform var(--transition), background var(--transition), box-shadow var(--transition);}
  #menu.open{transform:scaleY(1)}
  #menu a, #theme-toggle {padding:.8rem 1rem;border-radius:var(--radius); width: 100%; text-align: left; margin-left: 0;}
  #menu .btn--ghost { text-align: center; }
}