.main-nav {
  background-color: var(--color-lehigh-brown);
}

/* .main-nav (this div) and .main-menu (the <ul> it wraps) are both
   rendered by header.twig (college_of_business:header, Phase 3b), not by
   this component's own root markup (a bare <li>) -- header.twig's
   ".menu-toggle__toggleable-content-wrapper > .main-nav > ul.main-menu"
   exists specifically to host this component's <li> items, so these
   wrapper-level rules live here (the authoritative stylesheet for them
   in the original Fractal source) rather than in header.css, which never
   redefines them. Unchanged architecture from the Fractal source --
   main-menu.scss always styled .main-nav/.main-menu even though
   main-menu.twig only ever rendered the inner <li>. This is not the same
   category as leftnav/subnav's CSS leaks (Tasks 4-5): those reach into
   an unrelated sibling component via a combinator; these are the direct,
   intended host markup for this exact component's own content. */
.main-nav .main-menu {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--color-white);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 769px) {
  .main-nav .main-menu {
    flex-direction: row;
    justify-content: flex-end;
    border: 0;
  }
}

.main-nav .main-menu__item {
  margin: 0;
  border-top: 1px solid var(--color-white);
}

@media (min-width: 769px) {
  .main-nav .main-menu__item {
    margin: 0 var(--space-double) 0 0;
    border: 0;
  }
}

.main-nav .main-menu .main-menu__link {
  width: 100%;
  padding: 0.5em 1em;
  border: 0;
  font-size: 1.5rem;
  color: var(--color-white);
  background-color: transparent;
}

@media (min-width: 769px) {
  .main-nav .main-menu .main-menu__link {
    width: auto;
    padding: 0;
  }
}

.main-nav .main-menu .main-menu__link:hover,
.main-nav .main-menu .main-menu__link:focus {
  text-decoration: none;
  color: var(--color-golden-hour);
}

.main-nav .main-menu .main-menu__link--with-sub::after {
  position: relative;
  left: 3px;
  color: var(--color-white);
  display: inline-block;
  content: "\f107";
  font-family: var(--font-awesome);
  transform: rotate(-90deg);
}

@media (min-width: 769px) {
  .main-nav .main-menu .main-menu__link--with-sub::after {
    transform: rotate(0);
  }
}

.main-nav .main-menu .main-menu__link--sub:hover,
.main-nav .main-menu .main-menu__link--sub:focus {
  text-decoration: underline;
}

.main-nav .main-menu--sub-nav {
  position: absolute;
  top: var(--space-decagon);
  left: 0;
  height: inherit;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.main-nav .main-menu--sub-nav .menu-toggle__toggleable-content-wrapper {
  padding: var(--space-double);
}

@media (min-width: 769px) {
  .main-nav .main-menu--sub-nav .menu-toggle__toggleable-content-wrapper {
    padding: 0 var(--space-triple) var(--space-quintuple);
    height: 80vh;
    overflow-y: auto;
    text-align: center;
  }
}

.main-nav .main-menu--sub-nav.show {
  visibility: visible;
}

.main-nav .main-menu--sub-nav .main-menu--sub {
  list-style: none;
  margin: var(--space-double) 0 0 0;
  padding: 0;
}

@media (min-width: 769px) {
  .main-nav .main-menu--sub-nav .main-menu--sub {
    margin: var(--space-quintuple) 0 0 0;
    padding: 0 var(--space-quadruple) 0 0;
    display: inline-block;
    vertical-align: top;
    text-align: left;
  }
}

.main-nav .main-menu--sub-nav .main-menu--sub li {
  margin: 0 0 var(--space-one-fourth) 0;
}

.main-nav .main-menu--sub-nav .main-menu--sub li.title {
  color: var(--color-night-sky);
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 var(--space) 0;
}

.main-nav .main-menu--sub-nav .main-menu--sub li.title a {
  color: var(--color-night-sky);
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 var(--space) 0;
  text-decoration: none;
}

.main-nav .main-menu--sub-nav .main-menu--sub li.title a:hover {
  text-decoration: none;
}

.main-nav .main-menu--sub-nav .main-menu--sub li.sub-title {
  color: var(--color-black);
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1.5rem 0 var(--space-one-half) 0;
}

.main-nav .main-menu--sub-nav .main-menu--sub li.sub-title a {
  color: var(--color-black);
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1.5rem 0 var(--space-one-half) 0;
  text-decoration: none;
}

.main-nav .main-menu--sub-nav .main-menu--sub li.sub-title a:hover {
  text-decoration: none;
}

.main-nav .main-menu--sub-nav .main-menu--sub li .main-menu__link {
  color: var(--color-black);
  font-size: 1.25rem;
}

.main-nav .main-menu--sub-nav .main-menu--sub li:last-of-type {
  margin: 0;
}

.main-nav .main-menu--sub-nav .main-menu--stacked {
  display: flex;
  flex-direction: column;
}

.main-nav .main-menu--sub-nav .main-menu--stacked .main-menu--sub:last-of-type {
  margin: var(--space-quadruple) 0 0 0;
}

.main-nav .main-menu--sub-nav .main-menu--stacked .main-menu--sub:last-of-type li {
  margin: var(--space-one-half) 0;
}

.main-nav .main-menu--sub-nav .main-menu--stacked .main-menu--sub:last-of-type li:last-of-type {
  margin: var(--space-one-half) 0 0 0;
}

.main-nav .main-menu--sub-nav .decoration {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

@media (min-width: 769px) {
  .main-nav .main-menu--sub-nav .decoration {
    display: block;
  }
}

.main-nav .main-menu--sub-nav .decoration::before {
  content: "";
  display: block;
  position: relative;
  top: 0;
  width: 0;
  height: 0;
  border-top: 200px solid transparent;
  border-right: 200px solid var(--color-lehigh-brown);
}

.main-nav .main-menu .two .decoration::before {
  border-right: 200px solid var(--color-autumn-dusk);
}

/* Styles a close button that js/menu-toggle.js injects dynamically into
   ".menu-toggle__toggleable--with-close" containers (see
   "$menuToggleableClose.classList.add('js-menu-toggle__toggleable__close')"
   in js/menu-toggle.js) -- real, functioning CSS for JS-injected markup,
   not dead code, same category as footer.css's "#fcb" rule (Phase 3b). */
.main-nav .js-menu-toggle__toggleable__close {
  position: relative;
  position: absolute;
  top: var(--space-double);
  right: var(--space-double);
  width: var(--space-double);
  height: var(--space-double);
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.main-nav .js-menu-toggle__toggleable__close:before,
.main-nav .js-menu-toggle__toggleable__close:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  box-sizing: border-box;
  display: block;
  width: 2px;
  height: 22px;
  background: var(--color-black);
  transform: translate(0, -50%) rotate(180deg);
  transition: background-color 0.25s;
}

.main-nav .js-menu-toggle__toggleable__close:before {
  transform: translate(0, -50%) rotate(45deg);
}

.main-nav .js-menu-toggle__toggleable__close:after {
  transform: translate(0, -50%) rotate(-45deg);
}

.main-nav .js-menu-toggle__toggleable__close:hover:before,
.main-nav .js-menu-toggle__toggleable__close:hover:after,
.main-nav .js-menu-toggle__toggleable__close:focus:before,
.main-nav .js-menu-toggle__toggleable__close:focus:after {
  background: var(--color-blue-k60);
}

.sticky .main-nav .main-menu--sub-nav {
  position: fixed;
  /* Bug fix (Phase 5a): 121px was a hardcoded assumption about
     .business-nav's real rendered height, same root cause as Phase 3b's
     ".name-tag.sticky" and "body.sticky main" fixes (see header.css and
     reset.css) -- js/sticky-nav.js already measures the real height on
     every scroll event and sets --sticky-nav-height on the root element;
     121px is kept only as the pre-JS/no-JS fallback. */
  top: var(--sticky-nav-height, 121px);
}

.main-menu--sub-nav.js-menu-toggle__toggleable,
.main-menu__link--toggle ~ .menu-toggle__toggleable {
  transition: visibility 0s 0.4s;
  position: absolute;
  top: 0;
  left: 100vw;
  z-index: -2;
  width: 100%;
  min-height: calc(100vh - 139px);
  max-height: calc(100vh - 139px);
  visibility: hidden;
  overflow-y: scroll;
}

@media (min-width: 769px) {
  .main-menu--sub-nav.js-menu-toggle__toggleable,
  .main-menu__link--toggle ~ .menu-toggle__toggleable {
    transition: visibility 0s 0.4s, height 0.25s ease-out, box-shadow 0.4s ease-out;
  }
}

@media (min-width: 769px) {
  .main-menu--sub-nav.js-menu-toggle__toggleable,
  .main-menu__link--toggle ~ .menu-toggle__toggleable {
    position: absolute;
    top: 100%;
    left: 50%;
    height: 0;
    min-height: 0;
    max-height: 99999em;
    overflow: hidden;
    transform: translate(-50%);
  }
}

.main-nav .main-menu--sub-nav .main-menu__item--sub {
  background-color: var(--color-white);
}

.main-nav .main-menu--sub-nav.js-menu-toggle__toggleable--open .main-menu__item--sub {
  background-color: inherit;
}

.main-menu--sub-nav.js-menu-toggle__toggleable--open,
.main-menu__link--toggle:checked ~ .menu-toggle__toggleable {
  transition: visibility 0s 0s;
  overflow-y: scroll;
  visibility: visible;
}

@media (min-width: 769px) {
  .main-menu--sub-nav.js-menu-toggle__toggleable--open,
  .main-menu__link--toggle:checked ~ .menu-toggle__toggleable {
    transition: visibility 0s 0s, height 0.25s ease-out, box-shadow 0.4s ease-out;
  }
}

@media (min-width: 769px) {
  /* Pre-existing bug, preserved verbatim, not fixed in this phase: "vr(4)"
     is not a valid CSS (or resolved Sass) function -- the original Sass
     source's "calc(100vh - #{vr(4)})" compiled straight through to this
     invalid "calc(100vh - vr(4))" without ever being evaluated, so
     browsers drop this whole declaration as invalid and this rule has
     never actually applied any height in production. */
  .main-menu--sub-nav.js-menu-toggle__toggleable--open,
  .main-menu__link--toggle:checked ~ .menu-toggle__toggleable {
    height: calc(100vh - vr(4));
  }
}

.js .main-menu--sub-nav.js-menu-toggle__toggleable--open,
.js .main-menu__link--toggle:checked ~ .menu-toggle__toggleable {
  /* rgba computed from $black, 0.22 in the original Sass has no matching
     --color-*-with-alpha token (same "one-off computed shade" gap
     documented in header.css for #251506) -- kept as a literal rgba(). */
  box-shadow: 0 18px 54px 18px rgba(0, 0, 0, 0.22);
}

@media (769px) {
  /* Pre-existing bug, preserved verbatim: "@media (769px)" (missing
     "min-width:"/"max-width:") is invalid media-query syntax and this
     whole block has never actually applied in any browser -- not fixed
     in this phase. */
  [style*=height].main-menu--sub-nav.js-menu-toggle__toggleable--open,
  .main-menu__link--toggle:checked ~ [style*=height].menu-toggle__toggleable {
    overflow: hidden;
  }
}