/**
 * @file
 * Styles for the Top Bar component.
 * Dark blue strip with a lighter-blue (cyan) links block flush to the right.
 */

.topbar {
  padding: 0;
}

.topbar__inner {
  width: 100%;
  min-height: 50px;
}

/* Lighter-blue block, flush to the right viewport edge: wider than its links so
   the links sit on the left with empty cyan trailing to the right. */
.topbar__links {
  flex: 0 0 38%;
  min-width: 24rem; /* never narrower than the links need */
  justify-content: flex-start;
  gap: 3.5rem;
  padding: 0.9rem 3.5rem;
  border-left: 1px solid var(--pp-white, #ffffff); /* divider vs the dark-blue strip */
}

.topbar__link {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  line-height: 1.2;
  white-space: nowrap;
}

.topbar__link:hover,
.topbar__link:focus {
  color: var(--pp-white, #ffffff) !important;
  text-decoration: underline !important;
}

@media (max-width: 575px) {
  .topbar__links {
    width: 100%;
    margin-left: 0; /* no sliver on mobile — links are centered full-width */
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem 1rem;
    border-left: 0; /* full-width on mobile, no divider */
  }
}