/* =================================== */
/*   Navbar Modernization & Spacing Fix  */
/* =================================== */

/* This targets the navbar only on larger screens (desktops) */
@media (min-width: 992px) {

  /* 1. Slightly reduce the font size and padding for each link */
  .navbar-light .navbar-nav .nav-link {
    font-size: 20px; /* Reduced from the default, which is likely 16px or 18px */
    padding-left: 12px;  /* Control space on the left */
    padding-right: 12px; /* Control space on the right */
  }

  /* 2. Remove the old border-based separator from your custom 'nav-sep' class */
  .navbar-light .navbar-nav .nav-sep {
    border-right: none; /* Disables any existing border */
    position: relative; /* Needed for the ::after pseudo-element */
  }

  /* 3. Add a more modern, subtle separator using a pseudo-element */
  .navbar-light .navbar-nav .nav-sep::after {
    content: '|'; /* This is the character we will use as a separator */
    position: absolute;
    right: -2px; /* Adjust position to be centered between items */
    top: 50%;
    transform: translateY(-50%);
    color: #e0e0e0; /* A light, non-distracting gray */
    font-weight: 300; /* Makes the line thinner */
  }

}