/*
  MkDocs Material theme tweaks for this course.

  Goals (both light/dark modes):
  - Header (top bar) background: #141519
  - Footer Prev/Next navigation blocks background: #17181f
*/

/* --- Header (top bar + tabs) --- */
/* Apply dark header only in Dark mode (scheme: slate) */
body[data-md-color-scheme="slate"] .md-header,
body[data-md-color-scheme="slate"] .md-tabs {
  background-color: #141519 !important;
}

/* Ensure readable foreground on dark header in BOTH schemes */
body[data-md-color-scheme="slate"] .md-header,
body[data-md-color-scheme="slate"] .md-header a,
body[data-md-color-scheme="slate"] .md-header .md-header__button,
body[data-md-color-scheme="slate"] .md-header .md-header__title,
body[data-md-color-scheme="slate"] .md-tabs,
body[data-md-color-scheme="slate"] .md-tabs a,
body[data-md-color-scheme="slate"] .md-tabs .md-tabs__link {
  color: #ffffff !important;
}

/* Tab states */
body[data-md-color-scheme="slate"] .md-tabs__link--active,
body[data-md-color-scheme="slate"] .md-tabs__link:focus,
body[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #ffffff !important;
}

/* --- Mobile drawer (left menu) header --- */
/* In dark mode, Material uses the primary color for the drawer header (site + repo block).
   Override only the drawer header (for="__drawer") to avoid affecting section titles. */
body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"],
body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__source {
  background-color: #141519 !important;
}

body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"],
body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"] a,
body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__source,
body[data-md-color-scheme="slate"] .md-nav--primary .md-nav__source a {
  color: #ffffff !important;
}

/* --- Logo --- */
/* Logo is a PNG with transparency; add a subtle shadow for contrast. */
.md-logo img {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
}

/* --- Footer navigation (Prev / Next) --- */
/*
  Material has changed classnames across versions.
  We target a small set of known selectors to keep it robust.
*/
/*
  Material uses these CSS variables for footer colors.
  Setting variables keeps the default markup and hover/focus behavior intact.
*/
body {
  --md-footer-bg-color: #17181f;
  --md-footer-bg-color--dark: #141519;
  --md-footer-fg-color: #ffffff;
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.72);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.56);
}

.md-footer__link,
.md-footer__link:link,
.md-footer__link:visited,
.md-footer-nav__link,
.md-footer-nav__link:link,
.md-footer-nav__link:visited {
  color: inherit;
}

/* --- Footer links hover/focus (Dark mode) --- */
body[data-md-color-scheme="slate"] .md-footer a:link,
body[data-md-color-scheme="slate"] .md-footer a:visited {
  color: inherit;
}

body[data-md-color-scheme="slate"] .md-footer a:hover,
body[data-md-color-scheme="slate"] .md-footer a:focus {
  color: #ffffff;
}

/* --- Content links (Dark mode) --- */
/*
  In dark mode, default link color can look too saturated (e.g. bright blue).
  Keep the change scoped to the content area and to the dark scheme only.
*/
/*
  Material sets `--md-typeset-a-color` in palette CSS with selectors like:
  `[data-md-color-scheme=slate][data-md-color-primary=indigo] { ... }`
  Use a more specific selector to reliably override it.
*/
body[data-md-color-scheme="slate"][data-md-color-primary] {
  /* Material uses this variable for links in typeset content */
  --md-accent-fg-color: #e6edf3;
  --md-accent-fg-color--transparent: rgba(230, 237, 243, 0.10);
  --md-typeset-a-color: #e6edf3;
}

body[data-md-color-scheme="slate"] .md-typeset a:link,
body[data-md-color-scheme="slate"] .md-typeset a:visited {
  color: var(--md-typeset-a-color);
}

body[data-md-color-scheme="slate"] .md-typeset a:hover,
body[data-md-color-scheme="slate"] .md-typeset a:focus {
  color: #ffffff;
}

/* --- Header permalinks (¶) in headings (Dark mode) --- */
body[data-md-color-scheme="slate"] .md-typeset a.headerlink {
  color: #e6edf3 !important;
}

body[data-md-color-scheme="slate"] .md-typeset a.headerlink:hover,
body[data-md-color-scheme="slate"] .md-typeset a.headerlink:focus {
  color: #ffffff !important;
}

/* --- Navigation + Table of contents links (Dark mode) --- */
/*
  The left navigation and the right TOC often use the theme accent color
  for active/hover states, which can look too bright in dark mode.
*/
body[data-md-color-scheme="slate"] .md-nav__link:hover,
body[data-md-color-scheme="slate"] .md-nav__link:focus,
body[data-md-color-scheme="slate"] .md-nav__link--active,
body[data-md-color-scheme="slate"] .md-nav__link[aria-current] {
  color: #e6edf3 !important;
}

/* --- Mermaid diagrams (Dark mode) --- */
/*
  Mermaid renders as SVG. In dark mode, raise contrast for text/lines/arrows.
  Keep overrides scoped to content and to the dark scheme only.
*/
body[data-md-color-scheme="slate"] .md-typeset .mermaid svg text {
  fill: #e6edf3 !important;
}

body[data-md-color-scheme="slate"] .md-typeset .mermaid svg path,
body[data-md-color-scheme="slate"] .md-typeset .mermaid svg line {
  stroke: #e6edf3 !important;
}

body[data-md-color-scheme="slate"] .md-typeset .mermaid svg marker path {
  fill: #e6edf3 !important;
  stroke: #e6edf3 !important;
}

body[data-md-color-scheme="slate"] .md-typeset .mermaid svg .node rect,
body[data-md-color-scheme="slate"] .md-typeset .mermaid svg .node circle,
body[data-md-color-scheme="slate"] .md-typeset .mermaid svg .node ellipse,
body[data-md-color-scheme="slate"] .md-typeset .mermaid svg .node polygon {
  fill: rgba(230, 237, 243, 0.06) !important;
  stroke: #e6edf3 !important;
}

/* --- Back to top button (Dark mode) --- */
/*
  Material renders the "Back to top" button when `navigation.top` is enabled.
  In dark mode, the default hover can look too bright/contrasty.
  Keep hover just slightly more prominent than the base state.
*/
body[data-md-color-scheme="slate"] .md-top {
  background-color: #1f232b !important;
  color: #e6edf3 !important;
}

body[data-md-color-scheme="slate"] .md-top:hover,
body[data-md-color-scheme="slate"] .md-top:focus {
  background-color: #2a3039 !important;
  color: #ffffff !important;
}