/* MENUS: Top nav (horizontal + dropdowns) and Left nav (vertical)
   Dependencies: theme.css for colors/typography; layout.css for container layout
   =========================== */

/* Menubar container: positioning context for dropdowns */
#menubar {
  position: relative;
  z-index: 10;
}

/* ========= Top Navigation (Horizontal + CSS-only Dropdowns) ========= */

/* Main menu row styling */
#menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level menu items positioning */
#menu > li {
  position: relative;
}

#menu li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

#menu li.has-submenu {
  position: relative;
}

/* Root menu link styling */
#menu > li > a {
  display: block;
  padding: 6px 10px;
  color: #FFFFFF;
  background: #04304B;        /* Missouri Blue */
  border: 1px solid #04304B;
  text-decoration: none;
  font-size: .85em;
  font-variant: small-caps;
  line-height: 1;
}

#menu > li > a:hover,
#menu > li > a:focus {
  background: #B4202E;        /* Missouri Red hover */
  color: #FFFFFF;
  letter-spacing: .01px;
}

/* Submenu hidden by default */
#menubar #menu .submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 12rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #B4202E;
  border: 0;
  z-index: 9999;
}

/* Reveal submenu on hover or focus-within */
#menu li.has-submenu:hover > .submenu,
#menu li.has-submenu:focus-within > .submenu {
  display: block !important;
}

/* Submenu link styling */
#menubar #menu .submenu li {
  margin: 0;
  padding: 0;
}

#menubar #menu .submenu a {
  display: block;
  padding: 8px 12px;
  background: #B4202E;
  color: #FFFFFF;
  text-decoration: none;
  border: 0;
  font-variant: normal;
  font-size: 0.8em;
}

#menubar #menu .submenu a + a {
  border-top: 1px solid rgba(255,255,255,0.25);
}

#menubar #menu .submenu a:hover,
#menubar #menu .submenu a:focus {
  background: #04304B;
  color: #FFFFFF;
}

/* Parent link border adjustments when submenu open */
#menu > li.has-submenu > a {
  border-bottom: 1px solid #04304B;
}

#menu > li.has-submenu:hover > a,
#menu > li.has-submenu:focus-within > a {
  border-bottom-color: transparent;
  border-right-color: transparent;
}

/* Mark current page link */
#menu a.current {
  outline: 2px solid #B4202E;
  outline-offset: 2px;
}

/* ========= Mobile Behavior (stacked top nav) ========= */
@media (max-width: 900px) {
  #menu {
    flex-direction: column;
    align-items: stretch;
  }
  #menu > li {
    width: 100%;
  }
  #menubar #menu .submenu {
    position: static;
    display: none;
    padding: 6px 0 0 0;
    min-width: 0;
    margin-top: 0;
  }
  #menu li.has-submenu:focus-within > .submenu {
    display: block !important;
  }
}

/* ========= Left Navigation (Vertical) ========= */

/* Vertical menu reset */
#vmenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

#vmenu li {
  margin: 0 0 6px 0;
  padding: 0;
}

/* Vertical nav links */
#vmenu a {
  display: block;
  text-decoration: none;
  padding: 6px 10px;
  color: #FFFFFF;
  background-color: #B4202E;
  line-height: 1;
  font-size: 1em;
  border: 1px solid #000;
  font-variant: small-caps;
}

#vmenu a:hover,
#vmenu a:focus {
  background-color: #04304B;
  color: #FFFFFF;
  letter-spacing: 0.01px;
}

/* ========= Toggle Patterns for Left Nav ========= */

/* Flyout pattern */
#leftcolumn.flyout #vmenu li {
  position: relative;
}

#leftcolumn.flyout #vmenu li > ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background: #B4202E;
  border: 1px solid #000;
  z-index: 1000;
}

#leftcolumn.flyout #vmenu li:hover > ul,
#leftcolumn.flyout #vmenu li:focus-within > ul {
  display: block;
}

/* Accordion pattern */
#leftcolumn.accordion #vmenu ul {
  display: none;
}

#leftcolumn.accordion #vmenu li.open > ul {
  display: block;
}

/* Indicators for parent items */
#leftcolumn.flyout #vmenu li.has-children > a::after,
#leftcolumn.accordion #vmenu li.has-children > a::after {
  content: "?";
  float: right;
  font-size: 0.85em;
  opacity: 0.85;
}

#leftcolumn.accordion #vmenu li.open > a::after {
  content: "?";
}

/* ========= Mobile adjustments for Left Nav ========= */
@media (max-width: 900px) {
  #leftcolumn.flyout #vmenu li > ul,
  #leftcolumn.accordion #vmenu ul {
    position: static;
    display: none;
    margin: 0;
    padding: 0;
  }
}