.header-bar {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;             /* full width */
  height: var(--header-height);
  z-index: 1000;

  display: flex;
  justify-content: center; /* center children horizontally */
  align-items: center;
  background: transparent;
  padding: 0 10px;

  border-bottom: 2px solid rgb(0, 0, 0);
}

/* Pin the hamburger to the left inside the full-width bar */
.header-bar .menu-container {
  position: absolute;
  left: 10px;
  top: 35%;
  transform: translateY(-50%);  /* vertical center within bar */
}

/* Logo just sits in the centered flex flow */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { width: 120px; height: auto; display: block; }

.header-spacer {
  height: 130px;         /* equal to header height */
}