/* ==========================================================================
   1. THEME VARIABLES (COLORS & SIZING)
   ========================================================================== */
:root {
  --md-text-font-size: 18px;
  --md-code-font-size: 15px;
}

/* Dark Mode (Slate) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #20222b;
  --md-default-bg-color--light: #2a2d37;
  --md-default-bg-color--dark: #191b20;

  --md-primary-fg-color: #4db6ac; /* Light Teal for Native Accents (TOC links, etc) */
  --md-primary-bg-color: #ffffff;
  --custom-teal-accent: #4db6ac;  /* Light Teal for Accents/Bullets */
  --custom-header-bg: #036c5f;    /* Dark Teal specifically for the Header */
  
  --md-accent-fg-color: #dea702;
  --md-accent-bg-color: #000000;
}

/* Light Mode (Default) */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #00897b; /* Dark Teal for Native Accents (TOC links, etc) */
  --md-primary-bg-color: #ffffff;
  --custom-teal-accent: #00897b;  /* Dark Teal for Accents/Bullets */
  --custom-header-bg: #84f0e5;    /* Light Teal specifically for the Header */
  
  --md-accent-fg-color: #dea702;
}

/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */
/* Keep header background bound to our Custom Header Background variable */
.md-header {
  background-color: var(--custom-header-bg) !important;
}

/* Ensure the tabs bar always drops down into the page background color */
.md-tabs {
  background-color: var(--md-default-bg-color);
  line-height: 1;
}
.md-tabs .md-tabs__link {
  font-size: 18px;
}

/* Defeat the scroll animation to force both titles side-by-side */
.md-header__title .md-header__ellipsis {
  display: flex !important;
  align-items: center;
}
.md-header__topic {
  position: static !important;
  transform: none !important;
  transition: none !important;
  opacity: 1 !important;
}
.md-header__topic:first-child {
  display: flex;
  align-items: center;
}
.md-header__topic:first-child::after {
  content: ">";
  margin: 0 10px;
}

/* Completely hide the 'Made with Zensical' footer */
.md-footer {
  display: none;
}

/* Font Size Resizer Controls (with a11y focus states) */
.font-size-container {
  display: flex;
  align-items: center;
  margin-right: 15px;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  height: 32px;
  overflow: hidden;
}
/* Invert button background for Dark Mode to simulate elevation */
[data-md-color-scheme="slate"] .font-size-container {
  background-color: rgba(255, 255, 255, 0.1);
}
.font-size-btn {
  color: inherit;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  border: none;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.8;
}
.font-size-btn:hover,
.font-size-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  opacity: 1;
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: -2px;
}
.font-size-separator {
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   3. GLOBAL LAYOUT & TYPOGRAPHY
   ========================================================================== */
.md-grid {
  max-width: 1330px;
}

/* Force the reading pane to globally respect our custom JS variable */
.md-content .md-typeset {
  font-size: var(--custom-document-font-size, 18px) !important;
}

/* Force sidebars to scale */
.md-sidebar--secondary .md-nav__link,
.md-sidebar--secondary .md-nav__title,
.md-sidebar--secondary .md-typeset {
  font-size: 17px !important;
}

/* Soften headings in Dark Mode only */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: #e2e4de; 
}

/* Paragraph spacing */
.md-typeset p {
  line-height: 1.7 !important;
  margin-bottom: 1.2em !important;
  letter-spacing: 0.02em;
}

/* Force stubborn elements to 'em' for proper scaling */
.md-typeset .admonition,
.md-typeset pre > code,
.md-typeset code {
  font-size: 0.85em; 
}

/* ==========================================================================
   4. MARKDOWN LISTS
   ========================================================================== */
/* Pull tight to paragraphs */
.md-typeset p:has(+ ul),
.md-typeset p:has(+ ol) {
  margin-bottom: 0.2em !important;
}

/* Strip top margin and paragraph wrappers */
.md-typeset ul,
.md-typeset ol {
  margin-top: 0 !important;
}
.md-typeset li {
  margin-bottom: 0.2em !important;
}
.md-typeset li p {
  margin: 0 !important;
}

/* Hierarchical Bolding */
.md-typeset ul:has(ul) > li:not(.example-state) {
  font-weight: 600;
}
.md-typeset ul ul li {
  font-weight: normal !important;
}

/* Hierarchical Markers */
.md-typeset ul > li::marker {
  content: "▸  ";
  color: var(--custom-teal-accent);
  font-size: 1.1em;
}
.md-typeset ul ul > li::marker {
  content: "▸  ";
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
}
.md-typeset ul ul ul > li::marker {
  content: "—  ";
  color: var(--md-default-fg-color--light);
  font-size: 1em;
}

/* Remove bottom margins from nested lists */
.md-typeset ul ul,
.md-typeset ol ol {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   5. SEMANTIC CLASSES
   ========================================================================== */
.amber {
  color: var(--md-accent-fg-color) !important;
}

/* ==========================================================================
   6. PASTEL SYNTAX HIGHLIGHTING (DARK MODE)
   ========================================================================== */
[data-md-color-scheme="slate"] {
  --md-code-fg-color:               #c0caf5;
  --md-code-bg-color:               #1a1b26;
  --md-code-hl-keyword-color:       #f69d50;
  --md-code-hl-name-color:          #c0caf5;
  --md-code-hl-name-class-color:    #7dcfff;
  --md-code-hl-name-function-color: #73daca;
  --md-code-hl-string-color:        #e0af68;
  --md-code-hl-number-color:        #e0af68;
  --md-code-hl-operator-color:      #89ddff;
  --md-code-hl-comment-color:       #7a88cf;
  --md-code-hl-constant-color:      #bb9af7;
  --md-code-hl-variable-color:      #2ac3de;
  --md-code-hl-punctuation-color:   #a9b1d6;
  --md-code-hl-special-color:       #bb9af7;
}