/* ----------------- Combined ready-to-copy CSS ----------------- */
/* (Includes your original stylesheet + added rules to insert vertical separators) */

/* TYPE YOUR OWN CSS HERE */
header .logo { display: none; }

/* Header container */
#header {
  height: 50px;
  padding-top: 5px;
}

/* Header banner image (kept inside #header but declared at root level for valid CSS) */
img#headerBanner {
  height: auto;
  width: 100%;
  display: block;
  margin: 0;
}

/* Main nav items */
.main-nav li {
  font-size: 14px;
  padding-right: 10px;
}

/* Responsive / sub-nav styling you provided */
@media screen and (min-width: 200px) {
  img#headerBanner { margin-top: 10px; }

  nav#sub-nav {
    background-color: #b71234;
    height: 15px;
    padding-top: 15px;
    margin-top: 5px;
    left: 150px;
    top: 0;
  }

  /* keep the ul inline as you had it */
  #sub-nav > ul.main-nav {
    margin-top: 0px;
    margin-left: 50px;
    display: inline-block;
  }

  #sub-nav .user-menu { margin-top: 10px; }
}

/* ----------------- New rules: vertical separators between menu items ----------------- */
/* These are written to be compatible with:
   - list markup: #sub-nav > ul.main-nav > li > a
   - or anchor-only markup: #sub-nav > a[role="menuitem"]
   They avoid touching layout (no floats changed) and won't add a separator after the last item. */

/* Ensure list items render inline if not already */
#sub-nav > ul.main-nav > li {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

/* Ensure anchors inside list items are inline-block so pseudo-elements position correctly */
#sub-nav > ul.main-nav > li > a,
#sub-nav > ul.main-nav > li > a[role="menuitem"] {
  display: inline-block;
  position: relative;
  padding-right: 10px; /* preserve spacing */
  line-height: 1;      /* keep vertical centering consistent */
}

/* Add separator BEFORE every anchor that follows a previous li (so first item has no line) */
#sub-nav > ul.main-nav > li + li > a::before {
  content: "";
  position: absolute;
  left: -12px;               /* how far from the anchor's left edge the line sits */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;              /* adjust to match visual height in your screenshot */
  background: rgba(255,255,255,0.85);
  pointer-events: none;
}

/* If your nav uses anchors directly under #sub-nav (no ul/li) — fallback */
#sub-nav > a[role="menuitem"],
#sub-nav a[role="menuitem"] {
  display: inline-block;
  position: relative;
  padding-right: 10px;
  line-height: 1;
}

/* Separator for plain anchors (no list) - add before anchors that follow another anchor */
#sub-nav a[role="menuitem"] + a[role="menuitem"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.85);
  pointer-events: none;
}

/* Ensure the user-menu or special items (if they have .user-menu) do not get an accidental line */
/* This hides pseudo separators for items that are explicitly given .user-menu (adjust selector if needed) */
#sub-nav > ul.main-nav > li.user-menu > a::before,
#sub-nav a.user-menu + a.user-menu::before {
  display: none;
}

/* Mobile / narrow screen tweaks */
@media screen and (max-width: 480px) {
  #sub-nav > ul.main-nav > li + li > a::before,
  #sub-nav a[role="menuitem"] + a[role="menuitem"]::before {
    left: -9px;
    height: 12px;
  }
  #sub-nav > ul.main-nav > li > a,
  #sub-nav a[role="menuitem"] {
    padding-right: 8px;
  }
}