/* Remove shadow from the menu for a cleaner look */
.md-header {
  box-shadow: none;
  background: linear-gradient(to right, var(--md-primary-fg-color), var(--md-primary-fg-color--light));
}

/* Add a subtle border to define the menu without shadow */
.md-header {
  border-bottom: 1px solid var(--md-default-fg-color--light);
}

/* Increase spacing for a modern, airy feel */
.md-nav__item {
  padding: 0.5em 1em;
}

/* Reduce spacing for items in collapsible sub-menus */
.md-nav__item .md-nav__item {
  padding: 0.2em 1em; /* Reduced vertical padding for nested items */
  margin: 0; /* Remove margins to minimize gaps */
  line-height: 1.3; /* Tighter line height for compact appearance */
}

/* Style main menu items to stand out */
.md-nav--primary > .md-nav__item {
  font-weight: 700; /* Bolder text for main pages */
  font-size: 1.2em; /* Slightly larger text */
  color: var(--md-primary-fg-color--dark); /* Contrasting color */
  background-color: var(--md-default-bg-color--light); /* Subtle background */
  border-left: 3px solid var(--md-accent-fg-color); /* Colored border for emphasis */
  margin: 0; /* No vertical margin */
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Reduce spacing for section titles to minimize gap after main menu items */
.md-nav__title {
  margin: 0.2em 0; /* Reduced margin */
  padding: 0.2em 1em; /* Minimal padding */
  line-height: 1.2; /* Tighter line height */
}

/* Add hover effects for main menu items */
.md-nav--primary > .md-nav__item:hover {
  background-color: var(--md-accent-fg-color--light); /* Lighter background on hover */
  color: var(--md-accent-fg-color);
  text-decoration: none; /* No underline for main items on hover */
}

/* Add subtle hover effects for other (non-main) menu items */
.md-nav__link:hover {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Style the menu text for a sleek appearance */
.md-nav__link {
  font-family: 'Roboto', sans-serif;
  font-size: 1.1em;
  font-weight: 500;
  color: var(--md-default-fg-color);
}

/* Ensure the menu is responsive and looks good on mobile */
@media screen and (max-width: 768px) {
  .md-header {
    background: var(--md-primary-fg-color);
  }
  .md-nav__item {
    padding: 1em;
  }
  /* Adjust sub-menu items for mobile */
  .md-nav__item .md-nav__item {
    padding: 0.15em 1em; /* Even tighter padding on mobile */
    margin: 0;
    line-height: 1.2;
  }
  /* Adjust main menu items for mobile */
  .md-nav--primary > .md-nav__item {
    font-size: 1.1em; /* Smaller font for mobile */
    border-left: none; /* Remove border for cleaner look */
    background-color: var(--md-default-bg-color); /* Consistent background */
  }
  /* Adjust section titles for mobile */
  .md-nav__title {
    margin: 0.1em 0; /* Tighter margin on mobile */
    padding: 0.2em 1em;
  }
}