/* Container */
.menu-container {
  position: relative;
  display: inline-block;  /* shrink-wrap to the hamburger width */
}

/* Hamburger button */
.hamburger {
  display: inline-block;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 4px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 2px;
}

/* Animate hamburger into an "X" */
.change .bar1 {
  transform: rotate(-45deg) translate(-7px, 7px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  transform: rotate(45deg) translate(-6px, -6px);
}

/* Dropdown panel */
.menu-links {
  display: none;                 /* hidden by default */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;

  white-space: nowrap;           /* keep items on one line each */
  width: max-content;            /* shrink to content width */
  max-width: 90vw;               /* don't exceed viewport */
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.menu-links.show {
  display: inline-block;
}

/* Unified base font style for all menu items */
.menu-links a,
.menu-links .label,
.menu-links .dropdown-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;        /* identical size for links and buttons */
  font-weight: 500;       /* semi-bold for readability */
  line-height: 1.4;
  color: #fff !important;
  text-decoration: none;
}

/* Links */
.menu-links a,
.menu-links .label {
  display: block;
  padding: 6px 10px;
}

/* Link hover */
.menu-links a:hover {
  background-color: #686868;
  border-radius: 4px;
}

/* Dropdown buttons */
.menu-links .dropdown-btn {
  display: block;
  width: 100%;
  padding: 6px 10px;
  background: transparent !important;
  border: none !important;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}

/* Hover effect for dropdown buttons */
.menu-links .dropdown-btn:hover {
  background: #686868 !important;
  border-radius: 4px;
}