[data-md-color-scheme="default"] {
  --md-default-bg-color: #FFFFFF;
  --md-default-fg-color: #1C1E21;
  --md-typeset-color: #1C1E21;
  --md-text-color: #1C1E21;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0E1416;
  --md-default-fg-color: #FFFFFF;
  --md-typeset-color: #FFFFFF;
  --md-text-color: #FFFFFF;
}

/* Typography settings */
body, .md-typeset {
  font-weight: 400; /* DM Sans Regular */
  font-size: 14px !important;
}

.md-typeset h1, 
.md-typeset h2, 
.md-typeset h3, 
.md-typeset h4, 
.md-typeset h5, 
.md-typeset h6 {
  font-weight: 300 !important; /* DM Sans Light */
}

/* Match Heading 1 color to body text color */
.md-typeset h1 {
  color: var(--md-default-fg-color) !important;
  font-size: 42px !important;
  line-height: 1.2 !important;
}

.md-typeset h2 {
  font-size: 28px !important;
  line-height: 1.3 !important;
}

/* Make code block top corners sharp and bottom corners rounder */
.md-typeset pre {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

.md-typeset div.highlight {
  position: relative;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.md-typeset div.highlight::before {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-bottom-left-radius: 4px;
  background-color: var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.05));
  color: var(--md-default-fg-color--light, #888);
  pointer-events: none;
  z-index: 10;
}

.md-typeset div.highlight:has(code.language-bash)::before,
.md-typeset div.highlight:has(code.language-sh)::before {
  content: "BASH";
}

.md-typeset div.highlight:has(code.language-python)::before,
.md-typeset div.highlight:has(code.language-py)::before {
  content: "PYTHON";
}

.md-typeset div.highlight:has(code.language-text)::before {
  content: "TEXT";
}

/* Hide the top-level site title everywhere (desktop & mobile) to remove the purple header */
.md-nav--primary[data-md-level="0"] > .md-nav__title {
  display: none !important;
}

/* Hide the Table of Contents title ONLY on desktop. 
   On mobile, this contains the back/close button for the TOC drawer. */
@media screen and (min-width: 76.25em) {
  .md-nav--secondary > .md-nav__title {
    display: none !important;
  }
}

/* Redesign mobile nested navigation titles (the "Back" buttons) to be clean and modern */
.md-nav__title {
  background-color: var(--md-default-bg-color) !important;
  color: var(--md-default-fg-color) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
  font-weight: 600 !important;
}

.md-nav__title .md-nav__icon {
  color: var(--md-default-fg-color) !important;
}

/* Left Sidebar (Primary): All unselected sidebar links (grayer/dimmer) */
.md-sidebar--primary .md-nav__link {
  color: var(--md-default-fg-color) !important;
  opacity: 0.75 !important;
}

/* Left Sidebar (Primary): Category labels (Guides, API Reference) - prominent */
.md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Left Sidebar (Primary): Selected active links - fully opaque, solid text color (black/white), no purple, bold */
.md-sidebar--primary .md-nav__item--active > .md-nav__link,
.md-sidebar--primary .md-nav__link--active {
  color: var(--md-default-fg-color) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Left Sidebar (Primary): Hover effect - only change color/opacity, not font-weight */
.md-sidebar--primary .md-nav__link:hover {
  color: var(--md-default-fg-color) !important;
  opacity: 1 !important;
}

/* ------------------------------------------- */
/* TOP BAR (HEADER) STYLING                    */
/* ------------------------------------------- */

/* Make top header background match the page background and add a thin bottom border */
.md-header {
  background-color: var(--md-default-bg-color) !important;
  color: var(--md-default-fg-color) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
}

/* Reorder elements in the header (Right side: Version/GitHub -> Theme -> Search) */
.md-header__inner { display: flex; }
.md-header__button.md-logo { order: 1; }
.md-header__button[for="__drawer"] { order: 2; }
.md-header__title { order: 3; }
.md-header__source { 
  order: 4; 
  margin-left: auto; 
  width: auto !important; /* Removes the large empty space on the right of the repo name */
  padding-right: 1rem;
}
.md-header__option[data-md-component="palette"] { order: 5; }
.md-header__button[for="__search"] { order: 6; margin-left: 0.5rem; }
.md-search { order: 7; }

/* Ensure text and icons in the header use the default text color */
.md-header__button, 
.md-header__title, 
.md-header__topic {
  color: var(--md-default-fg-color) !important;
}

/* Adjust the search bar in the header to be minimalist and modern */
.md-search__form {
  background-color: rgba(128, 128, 128, 0.1) !important;
  border: 1px solid transparent !important;
  border-radius: 99px !important;
  transition: all 0.25s ease !important;
}

.md-search__form:hover,
.md-search__form:focus-within {
  background-color: var(--md-default-bg-color) !important;
  border: 1px solid var(--md-default-fg-color--light) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.md-search__input {
  color: var(--md-default-fg-color) !important;
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color) !important;
  opacity: 0.6 !important;
}

.md-search__icon {
  color: var(--md-default-fg-color) !important;
  opacity: 0.5;
  transition: opacity 0.25s ease !important;
}

.md-search__form:hover .md-search__icon,
.md-search__form:focus-within .md-search__icon {
  opacity: 1;
}

/* ------------------------------------------- */
/* RIGHT SIDEBAR (TOC) STYLING                 */
/* ------------------------------------------- */

/* Adjust font size for table of contents headings */
.md-sidebar--secondary .md-nav__link {
  font-size: 12px !important;
}

/* ------------------------------------------- */
/* FOOTER STYLING                              */
/* ------------------------------------------- */

/* Make footer clean and minimalist, blending with the page */
.md-footer,
.md-footer-meta,
.md-footer__inner {
  background-color: var(--md-default-bg-color) !important;
}

/* Add a subtle separator at the top of the footer meta */
.md-footer-meta {
  border-top: 1px solid var(--md-default-fg-color--lightest) !important;
}

/* Clean up footer text and link colors */
.md-footer-meta__inner {
  color: var(--md-default-fg-color) !important;
  opacity: 0.7;
}

/* Hide "Made with Material for MkDocs" but keep copyright */
.md-copyright {
  color: transparent !important; /* Hides the loose "Made with" text */
}

.md-copyright__highlight {
  color: var(--md-default-fg-color) !important;
  opacity: 0.7;
  display: block;
}

.md-copyright > a {
  display: none !important; /* Hides the link to MkDocs */
}

.md-footer-meta a {
  color: var(--md-default-fg-color) !important;
}

/* ------------------------------------------- */
/* NEXT/PREV NAVIGATION BUTTONS STYLING        */
/* ------------------------------------------- */
.md-footer__inner {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important; /* Center the buttons */
  flex-wrap: wrap !important; /* Allow wrapping on very small screens */
  gap: 1rem !important;
}

/* Base style for both buttons */
.md-footer__link {
  background-color: transparent !important;
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
  margin: 0 !important; /* Remove native spacing */
  color: var(--md-default-fg-color) !important;
  width: auto !important; /* Shrink to fit text */
  flex: 0 1 auto !important;
  padding: 0.75rem 1.25rem !important;
  
  /* Ensure icon and text align properly */
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Stack the title elements inside the button */
.md-footer__title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.md-footer__link--next .md-footer__title {
  align-items: flex-end !important;
}

/* Hover effects */
.md-footer__link:hover {
  background-color: rgba(128, 128, 128, 0.05) !important;
  border-color: var(--md-default-fg-color--light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Text and icon adjustments */
.md-footer__direction {
  font-size: 0.7rem !important;
  opacity: 0.6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.md-footer__link .md-ellipsis {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}
.md-footer__button.md-icon {
  color: var(--md-default-fg-color--light) !important;
  transition: color 0.25s ease !important;
}
.md-footer__link:hover .md-footer__button.md-icon {
  color: var(--md-default-fg-color) !important;
}

/* Mobile responsive layout for buttons (Side-by-side pagination) */
@media screen and (max-width: 44.9375em) {
  .md-footer__inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }
  
  /* Compact the title and icon on mobile to prevent truncation */
  .md-footer__title {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 0 !important;
  }
  .md-footer__button.md-icon {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  
  /* Previous button becomes a compact icon-only button */
  .md-footer__link--prev {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0.75rem 1rem !important;
  }
  .md-footer__link--prev .md-footer__title {
    display: none !important; /* Hide text on Previous */
  }
  
  /* Next button takes up the remaining space */
  .md-footer__link--next {
    flex: 1 1 0 !important;
    width: 100% !important;
    padding: 0.75rem 0.5rem !important;
    justify-content: center !important;
  }
  .md-footer__link--next .md-footer__title {
    align-items: flex-end !important;
    text-align: right !important;
    overflow: hidden;
  }
  .md-footer__link .md-ellipsis {
    font-size: 0.85rem !important;
  }
}

/* Optimize footer layout for mobile and tablet screens */
@media screen and (max-width: 59.9375em) {
  .md-footer-meta__inner {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    text-align: center !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  .md-copyright {
    padding: 0 !important;
  }
}