/* ===== HEADER & TABS ===== */
/* Iridescent gradient header */
.md-header {
  background: linear-gradient(
    135deg,
    #00d4aa 0%,
    #0099cc 25%,
    #6666ff 50%,
    #9933ff 75%,
    #ff66cc 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: iridescent 8s ease-in-out infinite !important;
  color: #1a1a1a !important; /* Darker text for better legibility */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  padding: 0.5rem 0 0 0 !important;
}

@keyframes iridescent {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.md-header__title {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important; /* White shadow for contrast */
  color: #1a1a1a !important; /* Dark text */
  font-weight: 600 !important;
}

.md-header__source {
  color: #1a1a1a !important; /* Dark text for source */
}

/* Iridescent tabs */
.md-tabs {
  background: linear-gradient(
    135deg,
    #00d4aa 0%,
    #0099cc 25%,
    #6666ff 50%,
    #9933ff 75%,
    #ff66cc 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: iridescent 8s ease-in-out infinite !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Tab link styling - make them look like buttons */
.md-tabs__link {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important; /* White shadow for contrast */
  color: #1a1a1a !important; /* Dark text */
  font-weight: 500 !important;
  padding: 0.25rem 0.75rem !important; /* Smaller padding for smaller buttons */
  border-radius: 6px !important; /* Rounded corners */
  margin: 0.25rem !important; /* Add some spacing between tabs */
  transition: all 0.3s ease !important; /* Smooth transitions */
  border: 2px solid transparent !important; /* Transparent border for hover effect */
}

/* Button-like hover effect */
.md-tabs__link:hover,
.md-tabs__link--active {
  background-color: rgba(
    255,
    255,
    255,
    0.25
  ) !important; /* Semi-transparent white background */
  backdrop-filter: blur(10px) !important; /* Glassmorphism effect */
  border-radius: 8px !important; /* Slightly more rounded on hover */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; /* Drop shadow */
  color: #000000 !important; /* Darker text on hover */
  border: 2px solid rgba(255, 255, 255, 0.3) !important; /* Subtle border */
  transform: translateY(-1px) !important; /* Slight lift effect */
}

/* Active tab styling */
.md-tabs__link--active {
  background-color: rgba(
    255,
    255,
    255,
    0.35
  ) !important; /* More opaque for active state */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; /* Stronger shadow for active */
  border: 2px solid rgba(255, 255, 255, 0.5) !important; /* More visible border for active */
}

.md-tabs__item {
  margin: 0 0.25rem !important; /* Space between tab items */
}

/* ===== SIDEBAR NAVIGATION ===== */
/* Let Material for MkDocs handle navigation completely - standard behavior */
.md-nav__link {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s ease !important;
}

/* Navigation icons */
.md-nav__link .emoji {
  font-size: 1em !important;
  margin-right: 0.25rem !important;
}

/* ===== CONTENT AREA ===== */
/* Ensure proper content layout */
.md-main {
  /* Let Material for MkDocs handle layout */
}

.md-content {
  /* Let Material for MkDocs handle content positioning */
}

/* ===== ADMONITIONS ===== */
/* Fix admonition icon overlap */
.admonition-title::before {
  left: 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
}

/* ===== CODE BLOCKS ===== */
/* Use Material for MkDocs' built-in syntax highlighting */
.md-typeset .highlight {
  position: relative;
}

/* ===== IMAGES ===== */
.md-typeset img {
  border-radius: 8px !important;
  max-width: 100% !important;
}

/* ===== DARK MODE ===== */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #6366f1 !important;
  --md-primary-bg-color: #ffffff !important;
}

/* ===== RESPONSIVE ===== */
/* Ensure proper mobile behavior */
@media (max-width: 76.1875em) {
  .md-nav__link {
    padding: 0.5rem 1rem !important;
  }
}

.md-nav--primary .md-nav__link[for="__toc"] {
  display: none !important;
}