#mobileLegacyNavPlaceholder {
  position: relative;
}

/* Hamburger button */
.mobile-nav-legacy-hamburger {
  display: block;
  font-size: 72px;
  padding: 8px 16px;
  cursor: pointer;
  color: white;
  background-color: #1a1a1a;
  text-align: right;
  width: 100%;
  box-sizing: border-box;
}

#mobileLegacyNavPlaceholder,
#mobile-nav-legacy-menu,
#mobile-nav-legacy-nav {
  all: unset;
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#mobile-nav-legacy-nav {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Dropdown menu */
#mobile-nav-legacy-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw; /* Force full viewport width */
  background-color: #2f3336;
  z-index: 999;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.6);

  /* 👇 New lines to break out of desktop container constraints */
  max-width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Nav container full width */
#mobile-nav-legacy-nav,
#mobile-nav-legacy-nav ul {
  width: 100%;
  padding-left: 0;
  margin: 0;
}

#mobile-nav-legacy-nav li {
  width: 100%;
  margin: 0;
}

/* First level UL */
.mobile-nav-legacy-level-1 {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Nav items should be full width */
.mobile-nav-legacy-level-1 > li {
  width: 100%;
}

/* Buttons at all levels */
.mobile-nav-legacy-toggle {
  font-size: 4cqw;
  font-weight: bold;
  background: #2f3336;
  color: white;
  border: none;
  padding: 14px 30px;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  display: block;
  border-bottom: 1px solid #111;
  cursor: pointer;
}

/* Submenus */
.nav-level-2,
.nav-level-3 {
  width: 100%;
  padding-left: 1em;
  background-color: #2f3336;
  margin: 0;
}

/* Deep links */
.nav-level-3 a {
  display: block;
  font-size: 4cqw;
  padding: 12px 30px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #222;
  box-sizing: border-box;
  width: 100%;
}

/* Visibility toggle */
.hidden {
  display: none !important;
}

/* Third-level link styling */
.nav-level-3 a {
  text-align: left;
  padding-left: 30px;
}

/* Any button in the nav (all levels) */
.mobile-nav-legacy-toggle {
  text-align: left;
  padding-left: 30px;
}

/* Optional: Remove text centering from any inherited styles */
#mobile-nav-legacy-nav,
#mobile-nav-legacy-nav ul,
#mobile-nav-legacy-nav li,
#mobile-nav-legacy-nav a,
#mobile-nav-legacy-nav button {
  text-align: left !important;
  list-style-type: none;
}

#mobile-nav-legacy-back {
  display: block;
  width: 100%;
  background-color: #2f3336;
  color: white;
  font-size: 4cqw;
  font-weight: bold;
  padding: 14px 30px;
  text-align: left;
  border-bottom: 1px solid #111;
  box-sizing: border-box;
  cursor: pointer;
}

#mobileLegacyNavPlaceholder {
  display: none;
}

.legacy-mana-nav-icon-single {
  width: 50px;
  height: 50px;
  vertical-align: middle;
}

.legacy-mana-nav-icon-dual {
  width: 100px;
  height: 50px;
  vertical-align: middle;
}

.legacy-mana-nav-icon-tri {
  width: 150px;
  height: 50px;
  vertical-align: middle;
}

.legacy-mana-nav-icon-five {
  width: 250px;
  height: 0px;
  vertical-align: middle;
}