.md-header__title {
  font-family: "Exo 2", sans-serif !important;
  font-size: 24px;
}

.md-nav {
  font-family: "exo 2", sans-serif;
}

h1, h2, h3 {
  font-family: "exo 2", sans-serif;
}

/* Header background colors - same for both light and dark mode */
.md-header {
  background-color: #2C67B5 !important;
}

/* Active link colors for second level items only */
.md-nav__item .md-nav__item .md-nav__link--active {
  color: #2C67B5 !important;
  font-weight: 600 !important;
  background-color: rgba(52, 114, 196, 0.2) !important;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__item .md-nav__link--active {
  color: #98BFEC !important;
  font-weight: 600 !important;
  background-color: rgba(52, 114, 196, 0.2) !important;
}

/* Active link styling for "On this page" navigation */
.md-nav--secondary .md-nav__link--active {
  color: #2C67B5 !important;
  font-weight: 600 !important;
  background-color: rgba(52, 114, 196, 0.2) !important;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: #98BFEC !important;
  font-weight: 600 !important;
  background-color: rgba(52, 114, 196, 0.2) !important;
}

/* Active link indicator bars */
.md-nav__link--active::before {
  background-color: #2C67B5 !important;
}

[data-md-color-scheme="slate"] .md-nav__link--active::before {
  background-color: #98BFEC !important;
}

/* Tool icons in H1 headings - use same color as smaller icons and increase size */
h1 img[src*="_"] {
  filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.2) contrast(1) !important;
  width: 24px !important;
  height: 24px !important;
}

[data-md-color-scheme="slate"] h1 img[src*="_"] {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1) contrast(1) !important;
  width: 24px !important;
  height: 24px !important;
}

/* Navigation titles - use main text color */
.md-nav__title {
  color: var(--md-default-fg-color) !important;
  font-weight: 400 !important;
}

/* Menu items - make them subtle color */
.md-nav__link {
  color: var(--md-default-fg-color--light) !important;
  padding: 4px 8px !important;
  border-radius: 5px !important;
}

.md-nav__link:hover {
  color: #5790DA !important;
}

/* Links in main content - match top bar color and hover styling */
.md-content a {
  color: #2C67B5 !important;
}

.md-content a:hover {
  color: #5790DA !important;
}