/* Minimal navigation styles for global nav + hamburger (moved to site common) */
.global-nav-wrapper {
  display: block;
  position: relative;
  padding-top: 0.4rem;
}

/* When nav is placed inside a header, make the header a positioning context
   and position the wrapper at the header's bottom-left so it does not push
   header content around. */
header { position: relative; }
header > .global-nav-wrapper { position: absolute !important; left: 0 !important; bottom: 0 !important; z-index: 2000 !important; }
/* On wide (desktop) view, align the nav left edge with the inner left edge of <main>
   (main has max-width:800px and padding-left:4vw in common/style.css). */
@media (min-width: 900px) {
  header > .global-nav-wrapper {
    left: calc(50% - 400px) !important; /* centers relative to main (removed +4vw) */
  }
}

/* Hamburger button: base visual rules; positioned in wrapper below */
.nav-toggle {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.85;
}
.nav-toggle:focus { outline: 2px solid #66a; }

.global-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.15rem; /* tighter default gap */
  align-items: flex-start;
  display: none; /* folded by default */
}
.global-nav li { margin: 0; }

/* Place parent link and its submenu toggle on the same horizontal line.
   Use flex so the label shrinks and shows an ellipsis when necessary,
   while the toggle keeps its natural size on the right. */
.global-nav-wrapper .global-nav li.has-children {
  display: flex;
  align-items: center;
}
.global-nav-wrapper .global-nav li.has-children > a {
  flex: 1 1 auto;
  min-width: 0; /* allow shrinking inside flex */
  display: block;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-nav-wrapper .global-nav li.has-children > .submenu-toggle {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 0 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.global-nav a {
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  display: block;
  line-height: 1.1;
}
.global-nav a.current { font-weight: 700; border-bottom: 2px solid currentColor; }

/* Open state: show nav as vertical list (applies to all viewports) */
.global-nav-wrapper.open .global-nav {
  /* Opened menu overlays content and expands downward from the button */
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  background: rgba(255,255,255,0.98) !important;
  padding: 0.4rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
  position: absolute !important;
  left: 0 !important;
  top: 100% !important; /* open downward from wrapper */
  min-width: 200px !important; /* reduced to ~200px per request */
  z-index: 2500 !important;
}
.global-nav-wrapper .global-nav { text-align: left !important; }
.global-nav-wrapper .global-nav a { color: #111 !important; text-align: left !important; }
.global-nav-wrapper.open .global-nav li { margin: 0 !important; }

/* Position hamburger at the left-bottom of the wrapper and give semi-transparent white background */
.global-nav-wrapper > .nav-toggle,
.global-nav-wrapper .nav-toggle {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  background: rgba(255,255,255,0.3) !important; /* white, 30% opacity */
  border: none !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  color: #111 !important; /* ensure icon/text is visible */
  font-size: 1.15rem !important; /* slightly larger for visibility */
  line-height: 1 !important;
  z-index: 3000 !important; /* bring to front above header and menu */
}
.global-nav-wrapper > .nav-toggle:focus,
.global-nav-wrapper .nav-toggle:focus { outline: 2px solid rgba(0,0,0,0.15) !important; }

/* Submenu (rendered as nested UL.sub-nav) is hidden by default and shown when JavaScript adds .open.
   This replaces the previous inline rules and prevents submenus from being visible immediately. */
.global-nav-wrapper .sub-nav {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.5rem; /* slight indent for submenu items */
}
.global-nav-wrapper .sub-nav.open {
  display: block;
}
.global-nav-wrapper .back-item { list-style: none; margin: 0; padding: 0; }
.global-nav-wrapper .back-button {
  background: none;
  border: 0;
  padding: 6px 8px;
  display: block;
  width: 100%;
  text-align: left;
  font-weight: normal;
}
.global-nav-wrapper .submenu-toggle {
  background: none;
  border: 0;
  padding: 0 6px;
  cursor: pointer;
  margin-left: 6px;
}

/* Ensure submenu toggles are visible in root/menu-default states.
   Some cascade rules hide the toggle when `data-show-depth` is non-zero
   (sub-menu view). Make explicit rules to show the toggle when the
   wrapper indicates root depth (0) or when the attribute is absent. */
.global-nav-wrapper[data-show-depth="0"] .global-nav > li.has-children > .submenu-toggle,
.global-nav-wrapper:not([data-show-depth]) .global-nav > li.has-children > .submenu-toggle {
  display: inline-block !important;
}

/* When a depth is selected on the wrapper, show only that depth's list.
   This keeps the menu focused on one level at a time. The CSS below
   hides all lists when `data-show-depth` is present, then enables the
   specific depth. We provide rules for depths 0..4 which covers expected use.
   If deeper nesting is needed, extend the pattern. */
.global-nav-wrapper[data-show-depth] .global-nav {
  display: flex !important;
  flex-direction: column !important;
}
/* Hide all top-level items when a non-root depth is selected, then reveal
   only the parent li that contains the requested submenu via JS-applied class. */
.global-nav-wrapper[data-show-depth]:not([data-show-depth="0"]) .global-nav > li {
  display: none !important;
}
.global-nav-wrapper .global-nav > li.menu-parent-active {
  display: block !important;
}
/* Ensure menu-parent-active is visible even when a non-root depth selector hides other top-level LIs */
.global-nav-wrapper[data-show-depth]:not([data-show-depth="0"]) .global-nav > li.menu-parent-active {
  display: block !important;
}
/* Hide the parent's label and its submenu-toggle when showing the submenu view;
   only the back button and the submenu items will be visible. */
.global-nav-wrapper[data-show-depth]:not([data-show-depth="0"]) .global-nav > li.menu-parent-active > a,
.global-nav-wrapper[data-show-depth]:not([data-show-depth="0"]) .global-nav > li.menu-parent-active > .submenu-toggle {
  display: none !important;
}
/* Remove left padding for shown sub-nav so items are left-aligned */
.global-nav-wrapper[data-show-depth]:not([data-show-depth="0"]) .sub-nav[data-depth] {
  padding-left: 0 !important;
}
/* sub-nav visibility is driven by data-depth matching the wrapper state */
.global-nav-wrapper[data-show-depth="0"] .sub-nav { display: none !important; }
.global-nav-wrapper[data-show-depth="1"] .sub-nav[data-depth="1"] { display: block !important; }
.global-nav-wrapper[data-show-depth="2"] .sub-nav[data-depth="2"] { display: block !important; }
.global-nav-wrapper[data-show-depth="3"] .sub-nav[data-depth="3"] { display: block !important; }
.global-nav-wrapper[data-show-depth="4"] .sub-nav[data-depth="4"] { display: block !important; }