/* NAV BACKGROUND + LINK COLORS */
header,
header *,
.site-header,
.site-header *,
nav,
nav *,
.topnav,
.topnav *,
.menu,
.menu *,
.nav,
.nav * {
  background-color: #004f52 !important;
}

header.site-header {
  background-color: #004f52 !important;
  border-bottom: none !important;
}

nav a {
  color: #ffffff !important;
  font-weight: 500;
}

nav a:hover {
  color: #cfae4f !important;
}

/* NAV ITEM SPACING */
nav ul {
  display: flex !important;
  gap: 1px !important; /* adjust this number for more/less spacing */
  margin: 0 !important;
  padding: 0 !important;
}

nav ul li {
  list-style: none !important;
}

nav ul li a {
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep logo the same size everywhere */
.site-logo img {
  width: auto !important;
  height: 50px !important; /* or whatever size you want */
}

/* Make the header layout responsive */
.header-flex, .site-header, nav, .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* THIS is the magic */
  gap: 10px;
}

/* On phones, stack the header elements */
@media (max-width: 700px) {
  .header-flex, .site-header, nav, .nav-container {
    flex-direction: column;
    text-align: center;
  }
}