.site-nav {
  padding: 2rem;
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.nav-links-left {
  display: flex;
  gap: 2rem;
  width: 33.33%;
  justify-content: flex-start;
}

.nav-links-right {
  display: flex;
  gap: 2rem;
  width: 33.33%;
  justify-content: flex-end;
}

/* Site title styles - consolidated */
.site-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: 200;
  font-family: 'Spectral', serif;
  width: 33.33%;
  text-align: center; /* Let the media query handle alignment */
  margin: 0;
}

.site-title a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.site-title a:hover {
  opacity: 0.8;
}

/* Non-home page styles */
.internal-page .site-nav .nav-links-left a,
.internal-page .site-nav .nav-links-right a {
  color: #8f8f94;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 300;
  transition: opacity 0.3s ease;
}

.internal-page .site-nav .nav-links-left a.current-page,
.internal-page .site-nav .nav-links-right a.current-page {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Internal page specific title color */
.internal-page .site-title a {
  color: #8f8f94;
}

/* Home page styles */
.home-page .site-nav a {
  color: #fff;
}

@media (max-width: 768px) {
    .site-nav {
      display: flex; /* Use flexbox for layout */
      justify-content: space-between; /* Space between nav links and title */
      align-items: center; /* Vertically align items */
      width: 100%; /* Ensure the navigation bar spans the full width */
      box-sizing: border-box; /* Include padding in the width calculation */
    }
  
    .nav-links-left {
      gap: 0.4rem; /* Reduce spacing between nav links */
    }

    /* Make space for the title */
    .nav-links-right {
      visibility: hidden !important; /* Hide but keep space */
      width: auto !important;
    }
  
    .site-title {
      font-size: 1.0rem; /* Make the title smaller */
      text-align: right; /* Align the title text to the right */
      margin-left: auto; /* Push the title completely to the right */
      margin-right: 0; /* Ensure no extra margin on the right */
      width: auto; /* Remove the 33.33% width restriction */
    }

    .home-title {
      font-size: 1.0rem !important;
      text-align: right !important;
      margin-left: auto !important;
      margin-right: 0 !important;
      width: auto !important;
      padding-right: 0.5rem;
      flex-shrink: 0;
    }
    
  }