/* --- BIDOPTIC BRAND COLORS --- */
:root {
  --md-primary-fg-color: #080d13;
  --md-primary-fg-color--dark: #05080c;
  --md-accent-fg-color: #4a8fe8;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b1018;           /* --bg from variables.css */
  --md-default-bg-color--light: #111823;    /* --bg2 from variables.css */
  --md-default-fg-color: #c4d8ea;           /* --text from variables.css */
  --md-default-fg-color--light: #658fa8;    /* --muted from variables.css */
  --md-code-bg-color: #080d13;
  --md-code-fg-color: #4a8fe8;
  --md-typeset-color: #daeaf8;              /* --bright from variables.css */
  --md-typeset-a-color: #4a8fe8;            /* --accent from variables.css */
  --md-border-color: #18263a;               /* --border from variables.css */
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, .md-content__button {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* Match the bordered grid style from your landing page */
.md-content__inner {
  max-width: 1060px;
}

.md-main__inner {
  margin-top: 2rem;
}

/* Custom styling for Admonitions (Hints/Warnings) to match your boxes */
.admonition {
  border-radius: 0 !important;
  border: 1px solid var(--md-border-color) !important;
  background-color: rgba(74, 143, 232, 0.02) !important;
}

.admonition-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.6rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: rgba(255, 255, 255, 0.015) !important;
  border-bottom: 1px solid var(--md-border-color) !important;
}

/* Navigation styling */
.md-header {
  background-color: rgba(8, 13, 19, 0.95) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--md-border-color);
}

/* --- WIDESCREEN TECHNICAL LAYOUT --- */

/* 1. Expand the total grid to utilize more screen real estate */
.md-grid {
  max-width: 1400px !important;      /* Widens the "frame" for the entire page */
  margin: 0 auto;
}

/* 2. Bring sidebars closer to the text (Fixes the "crazy big" gap) */
.md-main__inner {
  column-gap: 2rem !important;       /* Reduced from 8rem to a tight, professional gap */
  margin-top: 2.5rem;
}

/* 3. Make the main middle text wider and the hero of the page */
.md-content {
  max-width: 1060px !important;      /* Matches your main site's container width */
  flex-grow: 1;                      /* Allows it to claim the center space */
}

/* 4. Fix sidebar width to prevent them from growing too large */
.md-sidebar {
  width: 13rem !important;           /* Fixed width for consistent navigation */
}

/* --- SIDEBAR LIST REFINEMENT --- */

.md-nav__link {
  padding-top: 0.35rem !important;   /* Breathable but compact vertical spacing */
  padding-bottom: 0.35rem !important;
  font-size: 0.72rem !important;     /* Crisp technical font size */
  color: #658fa8 !important;         /* Uses --muted */
}

/* Sidebar labels (e.g., Table of contents) */
.md-nav__title {
  margin-bottom: 1rem !important;
  font-family: 'JetBrains Mono', monospace !important; /* */
  font-size: 0.6rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2e4d62 !important;         /* Uses --dim */
}

/* --- CUSTOM SCROLLBAR (Darker Blue) --- */

/* For Chrome, Safari, and Edge */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #080d13;               /* Matches your --bg */
}

::-webkit-scrollbar-thumb {
  background: #18263a;               /* Matches your --border blue */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2e4d62;               /* Matches your --dim darker blue */
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #18263a #080d13;  /* Thumb color and Track color */
}

/* --- SIDEBAR HOVER INTERACTION --- */

.md-nav__link {
  transition: color 0.15s ease, background-color 0.15s ease !important;
}
.md-nav__link:hover {
  color: #daeaf8 !important;
  background-color: rgba(74, 143, 232, 0.04);
  cursor: pointer;
}

/* Distinct color for the page the user is currently reading */
.md-nav__link--active {
  color: #4a8fe8 !important;
  font-weight: 500;
}

.md-footer-meta {
  background-color: #05080c !important;
  border-top: 1px solid #18263a;
}

.md-copyright {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: #2e4d62 !important;
  letter-spacing: 0.05em;
}

/* Removes the extra padding often left by the hidden footer */
.md-footer {
  display: none; 
}

/* Better spacing for mobile screens */
@media screen and (max-width: 45em) {
  .md-content {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  
  .md-footer-meta a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000;
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 20px;
  }
}

:root > * {
  --md-primary-fg-color: #080d13 !important;      /* Your deep black header */
  --md-accent-fg-color: #4a8fe8 !important;       /* Your bright blue accent */
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #080d13 !important;
  --md-accent-fg-color: #4a8fe8 !important;
  --md-default-bg-color: #0b1018;
  --md-border-color: #18263a;
}

/* --- 2. VISIBILITY FIX --- */
/* Forces the mobile hamburger menu and search icons to be BLUE */
.md-header__button.md-logo, 
.md-header__button.md-icon {
  color: #4a8fe8 !important;
}

/* --- 3. DESKTOP LAYOUT (Sidebars on the side) --- */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 1400px !important;
  }
  .md-sidebar {
    width: 14rem !important; /* Proper sidebar width */
  }
  .md-content {
    max-width: 1000px !important;
  }
}

/* --- 4. TYPOGRAPHY --- */
h1, h2, h3 {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
}