/* Custom styles for Material for MkDocs */

/* Custom color variables */
:root {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #f5f5f5;
  --md-primary-fg-color--dark: #e0e0e0;
  --md-accent-fg-color: #ff4081;

  /* Text colors for light mode */
  --md-default-fg-color: #000000;
  --md-default-fg-color--light: #424242;
  --md-typeset-color: #000000;
}

/* Custom button styles */
.md-button {
  border-radius: 4px;
  font-weight: 500;
  text-transform: none;
  transition: all 0.2s ease;
}

.md-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Custom code block styles */
.md-typeset code {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  padding: 2px 4px;
}

.md-typeset pre > code {
  background-color: transparent;
  padding: 0;
}

/* Custom table styles */
.md-typeset table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.md-typeset table th {
  background-color: #404040;
  color: white;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
}

.md-typeset table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.md-typeset table tr:hover {
  background-color: transparent;
}

/* Custom admonition styles */
.md-typeset .admonition {
  border-radius: 8px;
  border-left-width: 4px;
}

.md-typeset .admonition.note {
  border-left-color: #2196f3;
}

.md-typeset .admonition.warning {
  border-left-color: #ff9800;
}

.md-typeset .admonition.tip {
  border-left-color: #4caf50;
}

.md-typeset .admonition.example {
  border-left-color: #9c27b0;
}

/* Custom navigation styles */
.md-nav__link {
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.md-nav__link:hover {
  background-color: transparent;
}

/* Custom search styles */
.md-search__input {
  border-radius: 20px;
  color: #ffffff !important;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Custom footer styles */
.md-footer {
  background-color: var(--md-primary-fg-color);
  color: white;
}

.md-footer__link {
  color: rgba(255, 255, 255, 0.8);
}

.md-footer__link:hover {
  color: white;
}

/* Custom header styles */
.md-header {
  background-color: #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.md-header * {
  color: #ffffff !important;
}

/* Custom sidebar styles */
.md-sidebar {
  background-color: #fafafa;
  display: block !important;
}

/* Custom scrollbar styles for sidebar in light mode */
.md-sidebar::-webkit-scrollbar {
  width: 8px;
}

.md-sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.md-sidebar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.md-sidebar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Remove the black hood from the top of the sidebar */
.md-sidebar.md-sidebar--primary {
  background: transparent !important;
  border: none !important;
}

/* Hide the secondary sidebar */
.md-sidebar.md-sidebar--secondary {
  display: none !important;
}

.md-sidebar .md-nav__title {
  display: none !important;
}

/* Alternative: Style the black hood to be transparent/removed */
.md-sidebar .md-nav__title,
.md-sidebar .md-nav__header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure primary sidebar is visible */
.md-sidebar--primary {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure sidebar content is visible */
.md-sidebar__inner {
  display: block !important;
  visibility: visible !important;
}

/* Custom content styles */
.md-content {
  line-height: 1.6;
  color: #000000;
}

.md-content h1 {
  color: #000000;
  border-bottom: none;
  padding-bottom: 8px;
}

.md-content h2 {
  color: #333333;
  margin-top: 2em;
}

.md-content h3 {
  color: #555555;
  margin-top: 1.5em;
}

/* Ensure all text elements use proper colors */
.md-content p,
.md-content li,
.md-content blockquote,
.md-content table td {
  color: #000000;
}

/* Navigation text colors */
.md-nav__title,
.md-nav__link {
  color: var(--md-default-fg-color);
}

/* Section titles should be slightly bold */
.md-nav__title {
  font-weight: 600 !important;
}

/* Make sure section headers in navigation are always bold */
.md-nav--primary .md-nav__item > .md-nav__link[href],
.md-nav--primary .md-nav__item--active > .md-nav__link[href] {
  font-weight: 600 !important;
}

/* Ensure all subsection links are normal weight */
.md-nav--primary .md-nav__item .md-nav__item .md-nav__link,
.md-nav--primary .md-nav__item .md-nav__item .md-nav__link[href] {
  font-weight: normal !important;
}

/* Navigation links should be normal weight (but not section headers) */
.md-nav__link {
  font-weight: normal !important;
}

/* Subsection links should be normal weight */
.md-nav__item .md-nav__item .md-nav__link {
  font-weight: normal !important;
}

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

/* Additional navigation hover overrides */
.md-nav__item .md-nav__link:hover {
  color: #666666 !important;
}

.md-nav--primary .md-nav__link:hover {
  color: #666666 !important;
}

/* Override Material theme navigation colors */
.md-sidebar .md-nav__link:hover,
.md-sidebar--primary .md-nav__link:hover {
  color: #666666 !important;
}

/* Currently selected/active navigation item styling */
.md-nav__link--active {
  color: #666666 !important;
}

/* Prevent section headers from being highlighted when subsection is active */
.md-nav__item--active > .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color) !important;
}

/* Keep section titles bold even when subsection is active */
.md-nav__item--active > .md-nav__title {
  font-weight: 600 !important;
}

/* Keep section header links bold even when subsection is active */
.md-nav__item--active > .md-nav__link[href] {
  font-weight: 600 !important;
}

/* Only apply active styling to the exact active link */
.md-nav__link--active {
  color: #666666 !important;
  font-weight: normal !important;
}

/* Only highlight the direct active link, not parent sections */
.md-nav__item--active .md-nav__item .md-nav__link--active {
  color: #666666 !important;
}

/* Sidebar text colors */
.md-sidebar {
  color: var(--md-default-fg-color);
}

/* Custom link styles */
.md-content a {
  color: #000000;
  text-decoration: underline;
  border-bottom: none;
  transition: color 0.2s ease;
}

.md-content a:hover {
  color: #666666;
}

/* Custom list styles */
.md-content ul li {
  margin-bottom: 0.5em;
  color: #000000;
}

.md-content ol li {
  margin-bottom: 0.5em;
  color: #000000;
}

/* Custom blockquote styles */
.md-content blockquote {
  border-left: 4px solid var(--md-primary-fg-color);
  background-color: transparent;
  padding: 1em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
}

/* Custom image styles */
.md-content img {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
}

/* Custom grid styles */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.cell {
  background-color: #fafafa;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

/* Custom tab styles */
.md-tabs__link {
  border-radius: 4px 4px 0 0;
  transition: background-color 0.2s ease;
}

.md-tabs__link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Custom social card styles */
.md-social__link {
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.md-social__link:hover {
  transform: scale(1.1);
}

/* Responsive design improvements */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cell {
    padding: 1rem;
  }

  .md-content h1 {
    font-size: 1.8em;
  }

  .md-content h2 {
    font-size: 1.5em;
  }
}

/* Print styles */
@media print {
  .md-header,
  .md-sidebar,
  .md-footer,
  .md-tabs {
    display: none !important;
  }

  .md-content {
    margin: 0;
    padding: 0;
  }
}

/* Dark mode customizations */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #f5f5f5;
  --md-primary-fg-color--dark: #e0e0e0;

  /* Text colors for dark mode */
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #bfbfbf;
  --md-typeset-color: #ffffff;

  /* Header styling remains the same in dark mode */

  .md-sidebar {
    background-color: #1a1a1a;
  }

  /* Custom scrollbar styles for sidebar in dark mode */
  .md-sidebar::-webkit-scrollbar {
    width: 8px;
  }

  .md-sidebar::-webkit-scrollbar-track {
    background: #2a2a2a;
  }

  .md-sidebar::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
  }

  .md-sidebar::-webkit-scrollbar-thumb:hover {
    background: #777;
  }

  .cell {
    background-color: #2a2a2a;
    border-color: #404040;
  }

  .md-content blockquote {
    background-color: rgba(121, 134, 203, 0.1);
  }

  /* Table styling for dark mode */
  .md-typeset table th {
    background-color: #000000;
    color: white;
  }

  .md-typeset table td {
    border-bottom-color: #404040;
  }

  .md-typeset table tr:hover {
    background-color: transparent;
  }

  /* Header styling for dark mode */
  .md-content h1,
  .md-content h2,
  .md-content h3 {
    color: #ffffff;
  }

  /* Link styling for dark mode */
  .md-content a {
    color: #ffffff;
  }

  .md-content a:hover {
    color: #aaaaaa;
  }

  /* Text styling for dark mode */
  .md-content,
  .md-content p,
  .md-content li,
  .md-content blockquote,
  .md-content table td,
  .md-content ul li,
  .md-content ol li {
    color: #ffffff;
  }

  /* Navigation hover styling for dark mode */
  .md-nav__link:hover,
  .md-nav__item .md-nav__link:hover,
  .md-nav--primary .md-nav__link:hover,
  .md-sidebar .md-nav__link:hover,
  .md-sidebar--primary .md-nav__link:hover {
    color: #aaaaaa !important;
  }

  /* Currently selected/active navigation item styling for dark mode */
  .md-nav__link--active {
    color: #aaaaaa !important;
  }

  /* Prevent section headers from being highlighted when subsection is active */
  .md-nav__item--active > .md-nav__link:not(.md-nav__link--active) {
    color: #ffffff !important;
  }

  /* Keep section titles bold even when subsection is active in dark mode */
  .md-nav__item--active > .md-nav__title {
    font-weight: 600 !important;
  }

  /* Keep section header links bold even when subsection is active in dark mode */
  .md-nav__item--active > .md-nav__link[href] {
    font-weight: 600 !important;
  }

  /* Only highlight the direct active link, not parent sections */
  .md-nav__item--active .md-nav__item .md-nav__link--active {
    color: #aaaaaa !important;
  }

  /* Section titles should be slightly bold in dark mode */
  .md-nav__title {
    font-weight: 600 !important;
  }

  /* Make sure section headers in navigation are always bold in dark mode */
  .md-nav--primary .md-nav__item > .md-nav__link[href],
  .md-nav--primary .md-nav__item--active > .md-nav__link[href] {
    font-weight: 600 !important;
  }

  /* Navigation links should be normal weight in dark mode */
  .md-nav__link {
    font-weight: normal !important;
  }

  /* Ensure all subsection links are normal weight in dark mode */
  .md-nav--primary .md-nav__item .md-nav__item .md-nav__link,
  .md-nav--primary .md-nav__item .md-nav__item .md-nav__link[href] {
    font-weight: normal !important;
  }
}