/* =================================================================
 * OmniFetch Documentation - Header and Navigation Styles
 * Contains all header, navigation tabs, search, and footer styling
 * ================================================================= */

/* =================================================================
 * Header with Gradient Background
 * ================================================================= */

/* Enhanced header with gradient */
.md-header {
  background: var(--omnifetch-gradient);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Logo styling */
.md-header__button.md-logo {
  padding: 0.2rem;
}

.md-header__button.md-logo img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

/* =================================================================
 * Navigation Tabs with Enhanced Styling
 * ================================================================= */

.md-tabs {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.md-tabs__item {
  margin: 0 0.2rem;
}

.md-tabs__link {
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.md-tabs__link:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.md-tabs__link--active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 600;
}

/* =================================================================
 * Search Improvements
 * ================================================================= */

.md-search__input {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.md-search__input:focus {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* =================================================================
 * Footer Improvements
 * ================================================================= */

.md-footer {
  background: var(--omnifetch-gradient);
}

/* =================================================================
 * Mobile Navigation Improvements
 * ================================================================= */

@media screen and (max-width: 76.25em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background: var(--omnifetch-gradient);
  }
  
  .md-nav__source {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
  }
}