div.region-top-header {
  display: flex;                  /* horizontal layout */
  justify-content: flex-start;    /* always position to the LEFT */
  align-items: center;
  gap: 0.4rem;                    /* spacing between items */
  font-family: "Cairo", sans-serif;
  font-size: 0.75rem;             /* small font */
  border-bottom: 1px solid #e7e3e3;  /* light grey underline */
}

.region-top-bar .d-flex {
  direction: ltr;
  margin-left: 0.4rem;
}

.region-top-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.region-top-header li {
  padding: 0 0.4rem;
  text-transform: uppercase;      /* optional formal look */
}

/* Pipe separator between items */
.region-top-header li + li::before {
  content: " | ";
  color: #999;
  font-weight: normal;
  font-family: "Cairo", sans-serif;
  margin: 0 0.3rem;
  display: inline-block;
}

.region-top-header a {
  text-decoration: none;
  color: #333;
  display: inline-block;
  transition: color 0.2s ease-in-out;
  padding: 0.1rem 0;
}

.region-top-header a:hover {
  color: #0d6efd;
}

.region-top-header a.is-active {
  font-weight: 600;
  color: #0d6efd;
}