/* ACEP Header Styles */
header#mainHeader {
  --hdr-bar-h: clamp(48px, 6vh, 72px);
  height: var(--hdr-bar-h);
  background: #111;
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
}
header#mainHeader .headerBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  min-height: var(--hdr-bar-h);
  background: #111;
  border-bottom: 1px solid #333;
}
header#mainHeader .brand {
  font: 700 clamp(20px, 0.9vw + 0.4rem, 26px) Arial, sans-serif;
  color: #fff;
  white-space: nowrap;
}
header#mainHeader #missionClock {
  font: 600 clamp(20px, 0.75vw + 0.3rem, 22px) Arial, sans-serif;
  color: #fff;
  white-space: nowrap;
}
header#mainHeader #mainMenu ul {
  font: 500 clamp(18px, 0.8vw + 0.3rem, 16px) Arial, sans-serif;
  display: flex;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
header#mainHeader #mainMenu a {
  display: block;
  padding: 10px 16px;
  background: #222;
  color: #bbb;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s;
}
header#mainHeader #mainMenu a:hover {
  filter: brightness(1.6);
}
header#mainHeader #mainMenu li.active a {
  background: #555;
  color: #fff;
}
header#mainHeader .logo1g img {
  height: 26px;
  width: auto;
  display: block;
}
header#mainHeader .account {
  font: 500 clamp(20px, 0.8vw + 0.3rem, 22px) Arial, sans-serif;
  color: #ccc;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s;
}
header#mainHeader .account:hover {
  filter: brightness(1.5);
}


/* —————————————————— between 800px and 1900px —————————————————— */
@media (max-width: 1900px) {
  header#mainHeader {
    height: auto !important;
  }
  header#mainHeader .headerBar {
    flex-wrap: wrap;
    row-gap: 4px;
    margin: 4px 0;
  }
  header#mainHeader #mainMenu {
    order: 4;
    width: 100%;
    display: block;
  }
  /* strip out any extra spacing on the UL */
  header#mainHeader #mainMenu ul {
    display: flex;
    flex-wrap: nowrap;     /* keep one line until 800px */
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* make each button share the space equally */
  header#mainHeader #mainMenu ul li {
    flex: 1;
  }
  /* center the text, remove side-to-side gaps */
  header#mainHeader #mainMenu a {
    display: block;
    padding: 10px 0;
    font: 500 18px Arial, sans-serif;
    text-align: center;
    background: #222;
    color: #bbb;
    transition: filter .2s;
  }
}



/* —————————————————— below 800px —————————————————— */
@media (max-width: 1000px) {
  /* wrap menu items onto a second line instead of scrolling */
  header#mainHeader #mainMenu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header#mainHeader #mainMenu a {
    padding: 6px 10px;
    font-size: 17px;
  }
}