header {
  background: rgb(19, 19, 19);
  margin: 10vh 15%;
  height: auto; /* allow header height to grow */
  min-height: 10vh;
  display: flex;
  flex-direction: column; /* stack toggle + menu vertically */
  align-items: center; /* align hamburger left */
  justify-content: center; /* start at top */
}

/* Hide the toggle button by default */
#menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  width: 100%;
  height: 10vh;
  text-align: center; /* align hamburger icon left */
  padding-left: 0; /* reset any default padding */
  transition: color var(--transition-time-fast) ease;
}

/* open (expanded) = orange */
#menu-toggle[aria-expanded="true"] {
  color: var(--main-red-color);
}

/* Menu container flex styles */
header .menu-top-bar-menu-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Menu items */
header .top-bar-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  letter-spacing: var(--main-uppercase-spacing);
  font-size: 1.1vw;
  color: #ffffff;
  text-transform: uppercase;
}

/* Menu items spacing */
header .top-bar-menu li {
  margin-left: 1vw;
  margin-right: 1vw;
}

header .top-bar-menu li:first-child {
  margin-left: 0;
}

header .top-bar-menu li:last-child {
  margin-right: 0;
}

/* Menu links */
header .top-bar-menu a {
  color: white;
  text-decoration: none;
  transition: color var(--transition-time-fast) ease;
}

header .top-bar-menu a:hover {
  color: var(--main-red-color);
}

/* Responsive styles */
@media (max-width: 1000px) {

  /* Show hamburger */
  #menu-toggle {
    display: block;
    outline: none;
  }

  /* Remove border Firefox adds when button is focused */
  #menu-toggle::-moz-focus-inner {
    border: 0;
  }

  /* Optional: Add custom focus style (for accessibility) */
  #menu-toggle:focus {
    outline: none;
    box-shadow: none;
  }

  /* Hide the menu by default */
  header .menu-top-bar-menu-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;    
    flex-direction: column;
    width: 100%;
  }

  /* When menu is toggled open */
  header .menu-top-bar-menu-container.active {
    max-height: 500px; /* adjust this if needed */
    border-top: 0.1px solid rgb(49, 49, 49);
    border-bottom: 0.1px solid rgb(49, 49, 49);
  }

  /* Make menu vertical */
  header .top-bar-menu {
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.9rem;            /* Increase font size, adjust as needed */
    margin: 20px 6px;
  }

  /* Menu items full width with padding */
  header .top-bar-menu li {
    width: 100%;
    margin: 2px 0;
  }

  header .top-bar-menu a {
    width: 100%;
    display: block;
  }
}


@media (max-width: 675.98px){
  header {
    margin: 5vh 7%;
  }
}