/* ===== Light Mode Styles ===== */
[data-md-color-scheme="default"] .md-nav__item > a {
  color: #333333;
  text-decoration: none;
  display: block;
  padding: 0.5em 1em;
  background-color: #f0f0f0;
  border-radius: 4px;
}

[data-md-color-scheme="default"] .md-nav__item > a:hover,
[data-md-color-scheme="default"] .md-nav__item > a:focus {
  background-color: #2a3b4d;
  color: orange;
  text-decoration: underline;
}

[data-md-color-scheme="default"] .md-nav__item > a.md-nav__link--active {
  background-color: #2a3b4d;
  color: orange;
  font-weight: 600;
  border-radius: 4px;
}

/* ===== Dark Mode Styles ===== */
[data-md-color-scheme="slate"] .md-nav__item > a {
  color: #dddddd;
  text-decoration: none;
  display: block;
  padding: 0.5em 1em;
  background-color: #2a3b4d;
  border-radius: 4px;
}

[data-md-color-scheme="slate"] .md-nav__item > a:hover,
[data-md-color-scheme="slate"] .md-nav__item > a:focus {
  background-color: #2a3b4d;
  color: orange;
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-nav__item > a.md-nav__link--active {
  background-color: #2a3b4d;
  color: orange;
  font-weight: 600;
  border-radius: 4px;
}
/* Base: make active tab bold */
.md-tabs__item--active > .md-tabs__link {
  font-weight: bold;
}

/* Light mode */
[data-md-color-scheme="default"] .md-tabs__item--active > .md-tabs__link {
  color: #ff9800; /* or use a CSS variable like var(--md-primary-fg-color) */
}

/* Dark mode TESTING BY KYLE*/
[data-md-color-scheme="slate"] .md-tabs__item--active > .md-tabs__link {
  color: #ff9800; /* a warm orange tone, or any colour you like */
}
/* Make top navigation tabs span full width */
.md-tabs__list {
  flex-wrap: wrap !important;
  justify-content: center;
}