/* Navigation bar styles - migrated from React NavBar.css */

/* Responsive design */
/* @media (max-width: 768px) {
  .website-navbar {
    padding: 1rem;
    gap: 0.5rem;
  }
  
  .website-navbar .navbar {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}
 */

 .website-navbar {
  display: flex;
  justify-content: left;
  align-items: center;

  width: 100%;
  background-color: var(--global-secondary-background-color);

  /* Clear dividing line at the top */
  border-bottom: 2px solid var(--main-contrast-color);
  padding: 0.7% 7%;
  box-shadow: 0 2px 5px var(--global-background-color);
  z-index: 1000;
}
  
.website-navbar button {
  padding: 10px 20px;
  font-size: 1em;
  color: var(--title-color);
  background-color: var(--main-contrast-color);
  /* TODO: change border to slightly darker/lighter than background */
  border: 2px solid var(--main-slight-contrast-color);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

.website-navbar button:hover {
  background-color: #028d79;
  transform: scale(1.05);
  border-color: var(--main-contrast-color);
}

.website-navbar button:active {
  background-color: var(--main-slight-contrast-color);
}

.website-navbar button:disabled {
  background-color: #555555;
  cursor: not-allowed;
}

  /* Better mobile handling */
@media (max-width: 640px) {
  .website-navbar {
    gap: 0.75rem;
    padding: 0.75rem 0;
     /* Center items on smallest screens */
    /* justify-content: center; */
  }
  
  .website-navbar button {
    /* Slightly smaller padding */
    /* padding: 0.4rem 0.8rem; */
    /* Reduced side margin */
    margin: 0 4px;

    font-size: 0.875rem;
    /* Makes buttons expand available width */
    flex-grow: 1;
    /* Prevents text wrapping */
    white-space: nowrap;
  }
}

/* Tablet+ sizes */
@media (min-width: 768px) {
  .website-navbar {
    /* Left-align when space allows */
    justify-content: flex-start;

    /* Added 10px for a bit of padding between the start of the NavBar */
    /* on the left and the start of the page screen */
    padding: 1.25rem 10px;
  }

  .website-navbar a {
    /* Balanced margin for larger screens */
    margin: 0 6px;
  }
}