/* mus_nav.css
   PURPOSE
   - Theme variables (colors, breakpoint).
   - Visual styles (desktop drawer, borders, hover, alignment).
   - Responsive/layout scaffolding is injected by mus_nav.js.
*/

:root {
	--nav-banner-height: 50px;
	--nav-button-height: 28px;
	--nav-breakpoint: 1060;

    /* ========== Surfaces ========== */
    --nav-bg: #CCFFFF;               /* very light aqua / cyan tint – main menu background */
    --submenu-bg: #CCFFFF;           /* submenu panel background */
    --border-color: #2F4F4F;         /* dark slate gray – borders around nav */
    --divider-color: #2F4F4F;        /* dark slate gray – separators between items */

    /* ========== Links ========== */
    --nav-link: #4B0082;             /* indigo violet – default link text */
    --nav-link-hover-bg: #2E0854;    /* dark purple – hover/focus background */
    --nav-link-hover: #00CED1;       /* dark turquoise – hover/focus text */
    --nav-link-current-bg: #FFD700;  /* bright gold – background for current page link */
    --nav-link-current-color: #111111; /* charcoal black – text color on gold current page */

    /* Parent highlight when a child is current */
    --nav-link-parent-current-bg: #FFFACD; /* pale yellow */
    --nav-link-parent-current-color: #111111;
	--nav-link-parent-hover-bg: #66E0E0;  /* brighter aqua that pops but stays harmonious */
	
    /* ========== Focus Indicator ========== */
    --focus-outline: 2px solid #1E3A8A;  /* deep indigo outline */
}

/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  z-index: 1000;
  background-color: var(--nav-bg);
  padding: 2px 10px;
  border-radius: 0 0 7px 7px;
  width: fit-content;
  border-left: 5px solid var(--border-color);
  border-right: 5px solid var(--border-color);
  border-bottom: 5px solid var(--border-color);
  border-top: none;
}

/* Top-level list */
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  width: fit-content;
  flex-wrap: nowrap;
  background-color: var(--nav-bg);
  position: relative;
}

.nav-menu > li {
  padding: 10px 15px;
  line-height: 1;
  position: relative;
  text-align: center;
}

/* Desktop vertical dividers between top-level items */
@media (min-width: 1061px) {
  .nav-menu > li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    border-right: 1px solid var(--divider-color);
  }
}

/* Normal links (child items & any non-submenu items) */
.nav-menu a {
  color: var(--nav-link);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s, background-color 0.3s;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
}
.nav-menu a:hover {
  color: var(--nav-link-hover);
  background-color: var(--nav-link-hover-bg);
}

/* Current page link */
.nav-menu a[aria-current="page"] {
  color: var(--nav-link-current-color) !important;
  background-color: var(--nav-link-current-bg) !important;
  pointer-events: none;
  cursor: default;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
}

/* ===== Unified parent toggle (text + arrow together) ===== */
.submenu-toggle {
  display: inline-flex;               /* shrink-wrap text + arrow */
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--nav-link);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.3s, background-color 0.3s;
  text-align: center;
}
.submenu-toggle:hover,
.nav-menu li.has-submenu:hover > .submenu-toggle {
  background-color: var(--nav-link-hover-bg);
  color: var(--nav-link-hover);
}
.submenu-toggle .submenu-indicator {
  font-size: 12px;
  transition: transform 0.15s ease;
}

/* Arrow rotation: mobile (active), desktop (hover) */
.has-submenu.active > .submenu-toggle .submenu-indicator {
  transform: rotate(180deg);
}
@media (min-width: 1061px) {
  .nav-menu li.has-submenu:hover > .submenu-toggle .submenu-indicator {
    transform: rotate(180deg);
  }
}

/* Parent highlighted only when a child is current */
.nav-menu li.has-submenu:has(.submenu a[aria-current="page"]) > .submenu-toggle {
  background-color: var(--nav-link-parent-current-bg);
  color: var(--nav-link-parent-current-color);
  font-weight: bold;
  border-radius: 6px;
}

/* ===== Submenu base ===== */
.nav-menu li .submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--submenu-bg);
}
.nav-menu li .submenu li a {
  color: var(--nav-link);
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  white-space: nowrap;
  border-radius: 6px;
}
.nav-menu li .submenu li a:hover {
  color: var(--nav-link-hover);
  background-color: var(--nav-link-hover-bg);
}

/* ===== Desktop (banner) – pulldown drawer with dividers & slide effect ===== */
@media (min-width: 1061px) {
  .nav-menu {
    display: inline-flex;
  }
  .nav-menu li.has-submenu { position: relative; }

  .nav-menu li.has-submenu .submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background-color: var(--submenu-bg);
    border-left: 5px solid var(--border-color);
    border-right: 5px solid var(--border-color);
    border-bottom: 5px solid var(--border-color);
    border-top: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.35s ease;
    z-index: 1001;
    text-align: center;
  }
  .nav-menu li.has-submenu:hover .submenu {
    max-height: 500px; /* adjust as needed */
    opacity: 1;
  }
  .nav-menu li.has-submenu .submenu li {
    position: relative;
    padding: 8px 0;
    text-align: center;
  }
  .nav-menu li.has-submenu .submenu li:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    border-bottom: 1px solid var(--divider-color);
  }

  /* Banner parent highlight logic */
  /* Hovering with submenu open, no current child */
  .nav-menu li.has-submenu:hover:not(:has(.submenu a[aria-current="page"])) > .submenu-toggle {
    background-color: var(--nav-link-parent-hover-bg);
    color: var(--nav-link);
    font-weight: normal;
    border-radius: 6px;
  }

  /* Parent with current child → pale yellow */
  .nav-menu li.has-submenu:has(.submenu a[aria-current="page"]) > .submenu-toggle {
    background-color: var(--nav-link-parent-current-bg);
    color: var(--nav-link-parent-current-color);
    font-weight: bold;
    border-radius: 6px;
  }
}

/* ===== Mobile (vertical) submenu + Version 1 hover behavior ===== */
@media (max-width: 1060px) {
  .nav-menu li.has-submenu .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-menu li.has-submenu.active .submenu {
    max-height: 400px;
  }

  /* Parent background when submenu open, no current child */
  .nav-menu li.has-submenu.active:not(:has(.submenu a[aria-current="page"])) > .submenu-toggle {
    background-color: var(--nav-bg); /* base menu bg */
    color: var(--nav-link);
    font-weight: normal;
    border-radius: 6px;
  }

  /* Hover over open submenu parent (no current child) */
  .nav-menu li.has-submenu.active:not(:has(.submenu a[aria-current="page"])) > .submenu-toggle:hover {
    background-color: var(--nav-link-parent-hover-bg);
    color: var(--nav-link);
  }

  /* Parent with current child → pale yellow */
  .nav-menu li.has-submenu:has(.submenu a[aria-current="page"]) > .submenu-toggle {
    background-color: var(--nav-link-parent-current-bg);
    color: var(--nav-link-parent-current-color);
    font-weight: bold;
    border-radius: 6px;
  }

  /* === NEW: Hover should override current background === */
  .nav-menu li.has-submenu:has(.submenu a[aria-current="page"]) > .submenu-toggle:hover {
    background-color: var(--nav-link-parent-hover-bg);
    color: var(--nav-link);
    font-weight: bold;
  }

  /* === Vertical menu dividers between top-level items === */
  .nav-menu > li:not(:last-child) {
    border-bottom: 1px solid var(--divider-color);
  }
}

/* Toggle button */
.menu-toggle {
  display: none;
  font-size: 16px;
  background-color: var(--nav-bg);
  border: 3px solid var(--border-color);
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 5px 0 0 5px;
  position: fixed;
  z-index: 1001;
  top: 5px;
  left: 5px;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s;
  color: var(--nav-link);
}
.menu-toggle:hover,
.menu-toggle:focus {
  background-color: var(--nav-link-hover-bg);
  color: var(--nav-link-hover);
}
.menu-toggle.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Close button */
.menu-close {
  display: none;
  font-size: 14px;
  background-color: var(--nav-bg);
  border: 3px solid var(--border-color);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--nav-link);
  transition: background-color 0.3s, color 0.3s;
  z-index: 1002;
}
.menu-close:hover,
.menu-close:focus {
  background-color: var(--nav-link-hover-bg);
  color: var(--nav-link-hover);
}