.mjTopBar {
  background: #0e2f74;
  display: flex;
  justify-content: center;
  padding: 5px 0;
}
.mjTopBarInner {
  width: 100%;
  max-width: 1190px;
  padding: 0 20px;
}
.mjTopBar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 20px;
}
.mjTopBar ul li a {
  color: #fff;
  position: relative;
  padding-right: 18px;
  display: block;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.mjTopBar ul li a:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 15px;
  border-right: 1px solid #fff;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.mjTopBar ul li:last-child a:after { border: 0; }

/* Desktop default: main nav has a top margin to sit under the top bar */
#MJmainNavMargin {
  margin-top: 30px;  /* this is overridden on mobile below */
}

/* Tablet wrap for links in the top bar */
@media (max-width: 1024px) {
  .mjTopBar ul { flex-wrap: wrap; justify-content: center; }
}

/* Mobile rules */
@media (max-width: 768px) {
  /* Hide the top authority bar entirely on mobile */
  .mjTopBar { display: none !important; }

  /* Remove the divider after each link (not visible anyway when hidden, but harmless) */
  .mjTopBar ul li a:after { display: none; }

  /* Kill the top margin on the main nav for mobile */
  #MJmainNavMargin { margin-top: 0 !important; }
}

/* ===== FORCE MOBILE/TABLET BEHAVIOR (<= LG = 991.98px) ===== */
@media (max-width: 991.98px) {
  /* Hide the authority top bar on mobile/tablet */
  nav.mjTopBar { 
    display: none !important; 
  }

  /* Remove the gap above your main nav (override inline) */
  #MJmainNavMargin {
    margin-top: 0 !important;
  }
}

/* Desktop (>= 992px): ensure the main nav sits below the top bar */
@media (min-width: 992px) {
  #MJmainNavMargin {
    margin-top: 30px !important; /* restore the spacing under the top bar */
  }
}

:root {
  --topbar-height: 36px; /* adjust if your top bar is taller/shorter */
}

/* Base cleanup */
#MJmainNavMargin { margin-top: 0 !important; } /* don't rely on margin for spacing */

/* Desktop (>=992px): show top bar, push main nav below it */
@media (min-width: 992px) {
  nav.mjTopBar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1040;              /* above main nav */
    height: var(--topbar-height);
    align-items: center;         /* keep links vertically centered */
  }
  #MJmainNavMargin {
    position: fixed;             /* you already had this inline; keep it consistent */
    top: var(--topbar-height) !important;  /* sit directly under the top bar */
    left: 0; right: 0;
    z-index: 1030;               /* under top bar */
  }
  /* Optional: ensure page content isn't hidden behind fixed headers */
  body { padding-top: calc(var(--topbar-height) + 90px); } 
  /* ^ 90px ~= your navbar/logo height; tweak as needed */
}

/* Mobile/Tablet (<992px): hide top bar, pin main nav to top */
@media (max-width: 991.98px) {
  nav.mjTopBar { display: none !important; }
  #MJmainNavMargin {
    position: fixed;
    top: 0 !important;
    left: 0; right: 0;
    margin-top: 0 !important;
  }
  body { padding-top: 90px; } /* just your navbar height on mobile */
}