/* =====================================================
   GraphBit Docs – Quantum Violet Theme Enhancements
   Primary (Quantum Violet): #6C4FF7
   Light Variant:            #8A6EF9
   Dark Variant:             #5A42D6
   (Optional Accent Idea:    #FFB347 / #FFC861)  <-- not enabled; set --md-accent-fg-color if adopted
   ===================================================== */

/* Unified brand color tokens applied across schemes */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #6C4FF7;
  --md-primary-fg-color--light: #8A6EF9;
  --md-primary-fg-color--dark: #5A42D6;
  /* Uncomment to introduce a distinct accent (ensure contrast): */
  /* --md-accent-fg-color: #FFB347; */
}

/* Active navigation emphasis (left border + weight) */
.md-nav__link--active, .md-nav__item .md-nav__link--active {
  font-weight: 600;
  border-left: 3px solid var(--md-primary-fg-color);
  padding-left: calc(var(--md-spacing) - 3px);
}

/* Hover state for navigation links */
.md-nav__link:hover {
  color: var(--md-primary-fg-color--dark);
}

/* Primary buttons – rely on upstream styles, just refine hover */
.md-button--primary:hover {
  background-color: var(--md-primary-fg-color--dark);
  border-color: var(--md-primary-fg-color--dark);
}

/* Text links: clearer affordance + accessible focus */
.md-typeset a {
  text-decoration: none;
  position: relative;
  transition: color .15s ease;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--md-primary-fg-color--dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Global focus ring (keyboard navigation) */
:focus-visible {
  outline: 2px solid var(--md-primary-fg-color--light);
  outline-offset: 2px;
}

/* Improve contrast on inline code inside links */
.md-typeset a code {
  color: var(--md-primary-fg-color--dark);
}

/* Optional subtle underline animation (commented) */
/* .md-typeset a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--md-primary-fg-color--dark);
  transition: width .2s ease;
}
 .md-typeset a:hover::after, .md-typeset a:focus-visible::after { width: 100%; } */

/* Ensure colored selection harmonizes with brand */
::selection {
  background: var(--md-primary-fg-color--light);
  color: #ffffff;
}

/* Dark scheme specific fine‑tune (optional slight desaturate) */
[data-md-color-scheme="slate"] .md-nav__link--active {
  border-left-color: var(--md-primary-fg-color--light);
}

/* =====================================================
   Two-Row Header Implementation
   ===================================================== */

/* Header container - ensure proper stacking */
.md-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4; /* Base z-index for header */
  display: flex;
  flex-direction: column;
  background-color: #0a0b0b !important;
  box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2);
  transition: transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
}

/* Logo Header (Top Row) - Highest z-index */
.md-header__logo-row {
  z-index: 6; /* Highest z-index to appear above all other elements */
  background-color: #0a0b0b !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
}

/* Navigation Header (Bottom Row) */
.md-header__nav-row {
  z-index: 5; /* Lower than logo header but higher than content */
  background-color: #0a0b0b !important;
  position: sticky;
  top: 0;
}

/* Mobile hamburger menu button */
.md-header__menu-button {
  display: none;
  margin-right: 0.5rem;
  color: white;
}

/* Logo section layout */
.md-header__logo-section {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Logo styling */
.md-header__logo-section .md-logo {
  margin-right: 0.8rem;
  padding: 0.4rem;
}

.md-header__logo-section .md-logo img {
  height: 3rem;
  width: auto;
}

/* Site title styling */
.md-header__title {
  flex: 1;
  min-width: 0;
}

.md-header__title .md-header__topic {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
}

/* Controls section (search and theme toggle) */
.md-header__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Search container with theme toggle */
.md-header__search-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Theme toggle positioning */
.md-header__theme-toggle {
  margin-left: 0.5rem;
}

/* Header inner layout for both rows */
.md-header__logo-row .md-header__inner {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  min-height: 3rem;
}

.md-header__nav-row .md-header__inner {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  min-height: 3rem;
}

/* Navigation tabs styling */
.md-header__nav-row .md-tabs {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #0a0b0b !important;
}

.md-header__nav-row .md-tabs__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
  align-items: center;
  flex-wrap: nowrap;
}

.md-header__nav-row .md-tabs__list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Additional scrollbar hiding for different browsers */
.md-header__nav-row .md-tabs__list {
  -webkit-overflow-scrolling: touch;
}

.md-header__nav-row .md-tabs__list::-webkit-scrollbar-track {
  display: none;
}

.md-header__nav-row .md-tabs__list::-webkit-scrollbar-thumb {
  display: none;
}

.md-header__nav-row .md-tabs__item {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.md-header__nav-row .md-tabs__link {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.125s, background-color 0.125s;
  border-bottom: 2px solid transparent;
  height: 100%;
  white-space: nowrap;
}

.md-header__nav-row .md-tabs__link:hover,
.md-header__nav-row .md-tabs__link:focus {
  color: white;
  background-color: rgba(255, 255, 255, 0.05);
}

.md-header__nav-row .md-tabs__link--active {
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.8);
}

/* Ensure content doesn't overlap with fixed header */
.md-main {
  margin-top: 6rem; /* Adjust based on combined height of both header rows */
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
  .md-header__logo-section .md-logo {
    margin-right: 0.6rem;
  }

  .md-header__title .md-header__topic {
    font-size: 1rem;
  }

  .md-header__nav-row .md-tabs__link {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }

  .md-header__nav-row .md-header__inner {
    min-height: 2.8rem;
    max-height: 2.8rem;
    height: 2.8rem;
  }

  .md-main {
    margin-top: 5.5rem;
  }
}

/* Tablet responsive adjustments */
@media screen and (max-width: 60em) {
  /* Show hamburger menu on tablets */
  .md-header__menu-button {
    display: block;
  }

  /* Hide navigation tabs on tablets */
  .md-header__nav-row {
    display: none;
  }

  /* Adjust main content margin when nav is hidden */
  .md-main {
    margin-top: 3rem; /* Only logo header height */
  }

  .md-header--scrolled ~ .md-main {
    margin-top: 3rem;
  }

  /* Adjust logo and title for tablet */
  .md-header__logo-section .md-logo img {
    height: 2.5rem;
  }

  .md-header__title .md-header__topic {
    font-size: 0.95rem;
  }
}

/* Mobile responsive adjustments */
@media screen and (max-width: 44.9375em) {
  /* Show hamburger menu on mobile */
  .md-header__menu-button {
    display: block;
  }

  /* Hide navigation tabs on mobile */
  .md-header__nav-row {
    display: none;
  }

  /* Mobile logo and title adjustments */
  .md-header__logo-section .md-logo img {
    height: 2.2rem;
  }

  .md-header__title .md-header__topic {
    font-size: 0.9rem;
  }

  /* Adjust header controls for mobile */
  .md-header__controls {
    gap: 0.3rem;
  }

  .md-header__search-container {
    gap: 0.3rem;
  }

  /* Adjust main content margin for mobile */
  .md-main {
    margin-top: 3rem; /* Only logo header height */
  }

  .md-header--scrolled ~ .md-main {
    margin-top: 3rem;
  }

  /* Mobile header inner padding */
  .md-header__logo-row .md-header__inner {
    padding: 0 0.8rem;
    min-height: 3rem;
  }
}

/* Force header background color override */
.md-header,
.md-header__inner,
.md-header__logo-row,
.md-header__nav-row,
.md-tabs,
.md-tabs__list {
  background-color: #0a0b0b !important;
}

/* Force drawer navigation header background override */
.md-nav__title,
.md-nav__title[for="__drawer"],
.md-nav--primary > .md-nav__title,
.md-sidebar--primary .md-nav__title,
.md-nav__title .md-nav__button,
.md-nav__button {
  background-color: #0a0b0b !important;
  color: white !important;
}

/* Mobile navigation drawer styles */
@media screen and (max-width: 60em) {
  /* Ensure drawer navigation is visible and styled properly */
  .md-nav--primary {
    background-color: var(--md-default-bg-color);
  }

  /* Fix drawer header/title background */
  .md-nav--primary .md-nav__title,
  .md-nav__title,
  .md-nav__title[for="__drawer"] {
    background-color: #0a0b0b !important;
    color: white !important;
    font-weight: 600;
  }

  /* Fix back button area */
  .md-nav__title .md-nav__button,
  .md-nav__button {
    color: white !important;
  }

  .md-nav--primary .md-nav__item {
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
  }

  .md-nav--primary .md-nav__link {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .md-nav--primary .md-nav__link--active {
    color: var(--md-primary-fg-color);
    font-weight: 600;
  }

  /* Drawer overlay */
  .md-overlay {
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* Additional drawer header overrides */
  .md-sidebar--primary .md-sidebar__scrollwrap .md-nav--primary .md-nav__title {
    background-color: #0a0b0b !important;
  }
}

/* =====================================================
   Scroll Behavior Implementation
   ===================================================== */

/* Hide logo header on scroll down */
.md-header--scrolled .md-header__logo-row {
  transform: translateY(-100%);
}

/* Adjust navigation header position when logo header is hidden */
.md-header--scrolled .md-header__nav-row {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

/* Adjust main content margin when logo header is hidden */
.md-header--scrolled ~ .md-main {
  margin-top: 3rem; /* Height of just the navigation row */
}

/* Smooth transitions for scroll behavior */
.md-header__logo-row,
.md-header__nav-row {
  transition: transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
}

/* Ensure navigation header stays visible and functional */
.md-header--scrolled .md-header__nav-row .md-tabs {
  opacity: 1;
  visibility: visible;
}

/* Responsive scroll behavior adjustments */
@media screen and (max-width: 76.1875em) {
  .md-header--scrolled ~ .md-main {
    margin-top: 2.8rem;
  }
}

/* Tablet and mobile scroll behavior */
@media screen and (max-width: 60em) {
  .md-header--scrolled ~ .md-main {
    margin-top: 3rem; /* Only logo header visible */
  }
}

@media screen and (max-width: 44.9375em) {
  .md-header--scrolled ~ .md-main {
    margin-top: 3rem; /* Only logo header visible */
  }
}