/* Hon4uNav.css - look + behaviour for the CC:DBNavMenu2 (MenuType="Boot2") menu on Hon4U pages.
   The control renders Bootstrap-3 navbar markup; Hon4U pages do not load Bootstrap, so this file styles
   exactly that markup (scoped to nav.navbar) and Hon4uNav.js does the open/close.
   Desktop: one horizontal bar, dropdowns on hover/click.  Mobile (<= 860px): hamburger + accordion. */

nav.navbar {
  --nv-bg: #303055;
  --nv-bg-2: #3b3b68;
  --nv-text: #eef0ff;
  --nv-muted: #b9bde0;
  --nv-hover: #4a4a80;
  --nv-drop: #ffffff;
  --nv-drop-text: #1d2230;
  --nv-drop-hover: #eef0f8;
  --nv-line: #e3e5ee;
  position: relative;
  z-index: 1000;
  margin: 0;
  background: var(--nv-bg);
  box-shadow: 0 2px 6px rgba(20, 20, 60, .18);
  font: 500 15px/1.3 'Heebo', Arial, Helvetica, sans-serif;
}
nav.navbar *, nav.navbar *::before, nav.navbar *::after { box-sizing: border-box; }
nav.navbar a { text-decoration: none; }
nav.navbar ul { list-style: none; margin: 0; padding: 0; }
nav.navbar .container-fluid { display: flex; flex-wrap: wrap; align-items: center; max-width: 1320px; margin: 0 auto; padding: 0 12px; }

/* brand + hamburger */
nav.navbar .navbar-header { display: flex; align-items: center; min-height: 48px; }
nav.navbar .navbar-brand, nav.navbar .navbar-brand11 {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px 0 0; padding-inline: 0 14px;
  color: #fff; font-size: 19px; font-weight: 700; white-space: nowrap;
}
nav.navbar .navbar-brand11 img { height: 30px; width: auto; border-radius: 4px; vertical-align: middle; }
nav.navbar .navbar-toggle { display: none; }
nav.navbar .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* menu bar */
nav.navbar .navbar-collapse { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; min-width: 0; }
nav.navbar .nav { display: flex; flex-wrap: wrap; align-items: stretch; }
nav.navbar .nav > li { position: relative; }
nav.navbar .nav > li > a {
  display: flex; align-items: center; gap: 5px;
  height: 48px; padding: 0 12px;
  color: var(--nv-text); cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
nav.navbar .nav > li > a:hover, nav.navbar .nav > li.open > a { background: var(--nv-hover); color: #fff; }
nav.navbar .nav > li.active > a { box-shadow: inset 0 -3px 0 #8f95ff; }
nav.navbar .caret {
  display: inline-block; width: 0; height: 0;
  border-top: 5px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent;
  opacity: .7; transition: transform .15s;
}
nav.navbar li.open > a .caret { transform: rotate(180deg); }

/* dropdowns */
nav.navbar .dropdown-menu {
  display: none;
  position: absolute; top: 100%; inset-inline-start: 0;
  min-width: 210px; padding: 6px 0;
  background: var(--nv-drop); border: 1px solid var(--nv-line); border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px rgba(20, 20, 60, .18);
}
nav.navbar li.open > .dropdown-menu { display: block; }
nav.navbar .dropdown-menu > li > a {
  display: block; padding: 8px 16px;
  color: var(--nv-drop-text); font-weight: 400; font-size: 14px; white-space: nowrap;
}
nav.navbar .dropdown-menu > li > a:hover { background: var(--nv-drop-hover); color: #b3261e; }
nav.navbar .dropdown-menu > li.divider { height: 1px; margin: 5px 0; background: var(--nv-line); }
nav.navbar .navbar-right .dropdown-menu { inset-inline-start: auto; inset-inline-end: 0; }

/* desktop: open on hover too (mouse only) */
@media (min-width: 861px) and (hover: hover) {
  nav.navbar .nav > li.dropdown:hover > .dropdown-menu { display: block; }
  nav.navbar .nav > li.dropdown:hover > a { background: var(--nv-hover); }
}

/* mobile: hamburger + accordion */
@media (max-width: 860px) {
  nav.navbar .container-fluid { padding: 0 8px; }
  nav.navbar .navbar-header { width: 100%; justify-content: space-between; }
  nav.navbar .navbar-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 36px; padding: 0 10px; margin: 0;
    background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; cursor: pointer;
    order: 2;
  }
  nav.navbar .navbar-toggle .icon-bar { display: block; height: 2px; border-radius: 1px; background: #fff; }
  nav.navbar .navbar-collapse { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
  nav.navbar .navbar-collapse.in { display: flex; height: auto !important; overflow: visible !important; }
  nav.navbar .nav { flex-direction: column; }
  nav.navbar .nav > li > a { height: auto; padding: 12px 10px; border-top: 1px solid rgba(255, 255, 255, .08); justify-content: space-between; }
  nav.navbar .dropdown-menu {
    position: static; min-width: 0; padding: 2px 0 6px;
    background: var(--nv-bg-2); border: 0; border-radius: 0; box-shadow: none;
  }
  nav.navbar .dropdown-menu > li > a { padding: 10px 26px; color: var(--nv-text); white-space: normal; }
  nav.navbar .dropdown-menu > li > a:hover { background: var(--nv-hover); color: #fff; }
  nav.navbar .dropdown-menu > li.divider { background: rgba(255, 255, 255, .12); }
}