/* Custom styles for MTHDS documentation
   Fully grayscale — no blue tint */

/* ───── Light mode (default) ───── */
:root,
[data-md-color-scheme="default"] {
  /* Primary (header, nav, buttons) — light header */
  --md-primary-fg-color: #f5f5f5;
  --md-primary-fg-color--light: #e5e5e5;
  --md-primary-fg-color--dark: #d4d4d4;
  --md-primary-bg-color: #1a1a1a;
  --md-primary-bg-color--light: #262626;

  /* Accent (highlights, toggles) */
  --md-accent-fg-color: #525252;
  --md-accent-fg-color--transparent: rgba(82, 82, 82, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #f5f5f5;

  /* Default foreground / background */
  --md-default-fg-color: #525252;
  --md-default-fg-color--light: #6b6b6b;
  --md-default-fg-color--lighter: #a0a0a0;
  --md-default-fg-color--lightest: rgba(82, 82, 82, 0.12);
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: #f5f5f5;
  --md-default-bg-color--lighter: #fafafa;
  --md-default-bg-color--lightest: #ffffff;

  /* Typography */
  --md-typeset-color: #525252;
  --md-typeset-a-color: #3a3a3a;

  /* Code blocks */
  --md-code-fg-color: #1a1a1a;
  --md-code-bg-color: #f5f5f5;
  --md-code-hl-color: rgba(82, 82, 82, 0.1);

  /* Footer */
  --md-footer-fg-color: #d4d4d4;
  --md-footer-fg-color--light: #a0a0a0;
  --md-footer-fg-color--lighter: #6b6b6b;
  --md-footer-bg-color: #1a1a1a;
  --md-footer-bg-color--dark: #0f0f0f;
}

/* ───── Dark mode (slate) ───── */
[data-md-color-scheme="slate"] {
  /* Primary — dark header */
  --md-primary-fg-color: #1a1a1a;
  --md-primary-fg-color--light: #333333;
  --md-primary-fg-color--dark: #0a0a0a;
  --md-primary-bg-color: #e5e5e5;
  --md-primary-bg-color--light: #d4d4d4;

  /* Accent */
  --md-accent-fg-color: #d4d4d4;
  --md-accent-fg-color--transparent: rgba(212, 212, 212, 0.1);
  --md-accent-bg-color: #1a1a1a;
  --md-accent-bg-color--light: #333333;

  /* Default foreground / background */
  --md-default-fg-color: #d4d4d4;
  --md-default-fg-color--light: #a0a0a0;
  --md-default-fg-color--lighter: #6b6b6b;
  --md-default-fg-color--lightest: rgba(212, 212, 212, 0.12);
  --md-default-bg-color: #0f0f0f;
  --md-default-bg-color--light: #1a1a1a;
  --md-default-bg-color--lighter: #262626;
  --md-default-bg-color--lightest: #0f0f0f;

  /* Typography */
  --md-typeset-color: #d4d4d4;
  --md-typeset-a-color: #e5e5e5;

  /* Code blocks */
  --md-code-fg-color: #e5e5e5;
  --md-code-bg-color: #1a1a1a;
  --md-code-hl-color: rgba(212, 212, 212, 0.15);

  /* Footer */
  --md-footer-fg-color: #d4d4d4;
  --md-footer-fg-color--light: #a0a0a0;
  --md-footer-fg-color--lighter: #6b6b6b;
  --md-footer-bg-color: #0a0a0a;
  --md-footer-bg-color--dark: #050505;
}

/* ───── Header ───── */
.md-header {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* ───── Headings ───── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: #1a1a1a;
  font-weight: 700;
}

[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: #e5e5e5;
}

/* ───── Links ───── */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-typeset a:hover {
  color: #1a1a1a;
  text-decoration-thickness: 2px;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #e5e5e5;
}

/* Remove underline from navigation links */
.md-nav a,
.md-tabs a,
.md-header a,
.md-footer a,
.md-source a {
  text-decoration: none;
}

/* ───── Navigation tabs ───── */
.md-tabs {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* ───── Admonitions: tint with accent ───── */
.md-typeset .admonition,
.md-typeset details {
  border-color: var(--md-accent-fg-color);
}

/* ───── LLMs copy-markdown button ───── */
#llms-copy-button button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--md-default-bg-color) !important;
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  padding: 6px 8px !important;
  color: var(--md-default-fg-color--light) !important;
  box-shadow: none !important;
  transition: color 0.2s ease;
}

#llms-copy-button button:hover {
  color: var(--md-accent-fg-color) !important;
}

#llms-copy-button button::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
}

/* ───── Theme-aware logo ───── */
/* Hide default <img> so we can swap via CSS background */
.md-header .md-logo img,
.md-nav .md-logo img {
  display: none;
}

/* Full logo via background-image — light mode: black logo */
.md-header .md-logo,
.md-nav .md-logo {
  background: url("../images/mthds-black_on_transparent.png") no-repeat center / contain;
  width: 108px;
  min-width: 108px;
  height: 1.6rem;
}

/* Dark mode: white logo */
[data-md-color-scheme="slate"] .md-header .md-logo,
[data-md-color-scheme="slate"] .md-nav .md-logo {
  background-image: url("../images/mthds-white_on_transparent.png");
}

/* Hide "MTHDS" site name text — the full logo already displays it.
   Keep .md-header__topic visible because Material JS appends
   the mike version selector (.md-version) as its child. */
.md-header__topic:first-child > .md-ellipsis {
  display: none;
}
.md-header__topic:first-child {
  flex-shrink: 0;
}

/* ───── Smooth color transitions for theme toggle ───── */
body,
.md-header,
.md-tabs,
.md-footer {
  transition: background-color 0.3s ease, color 0.3s ease;
}