:root {
  --nav-bg: #0a2a66;
  --nav-text: #ffffff;
}

.navbar,
.navbar-default,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  background-color: var(--nav-bg);
}

.navbar a,
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
  color: var(--nav-text);
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
  color: var(--nav-text);
  background-color: rgba(255, 255, 255, 0.12);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: var(--nav-text);
  background-color: rgba(255, 255, 255, 0.18);
}

.navbar-default .navbar-toggle {
  border-color: var(--nav-text);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--nav-text);
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/*
 * Bootstrap sets `.bg-primary` with `background-color: ... !important` and a
 * gradient `background-image`. Override both so the header is consistently
 * high-contrast, including dropdown + nested dropdown menus on mobile Safari.
 */
.navbar.bg-primary {
  background-color: var(--nav-bg) !important;
  background-image: none !important;
}

.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link,
.navbar.bg-primary .dropdown-item {
  color: var(--nav-text) !important;
}

.navbar.bg-primary .dropdown-menu {
  background-color: var(--nav-bg) !important;
  border-color: rgba(255, 255, 255, 0.2);
}

.navbar.bg-primary .dropdown-item:focus,
.navbar.bg-primary .dropdown-item:hover {
  color: var(--nav-text) !important;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Improve readability in high-contrast/forced-colors environments */
@media (forced-colors: active) {
  .navbar,
  .navbar-default,
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    background-color: Canvas;
    color: CanvasText;
  }

  .navbar a,
  .navbar-default .navbar-brand,
  .navbar-default .navbar-nav > li > a,
  .navbar-default .navbar-text {
    color: LinkText;
    background-color: Canvas;
  }

  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-brand:focus,
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:focus,
  .navbar-default .navbar-nav > .active > a:hover {
    color: CanvasText;
    background-color: Highlight;
  }

  .navbar-default .navbar-toggle {
    border-color: ButtonText;
  }

  .navbar-default .navbar-toggle .icon-bar {
    background-color: ButtonText;
  }

  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background-color: Highlight;
  }
}