/* Hide the default logo icon in the header */
.md-header__button.md-logo {
  display: none;
}

/* Indent nav items under each top-level section for clearer hierarchy */
.md-nav--primary .md-nav__item .md-nav {
  padding-left: 0.6rem;
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

/* Widen the main content column — Material's default max-width (~61rem)
   feels cramped next to wider code blocks and screenshots */
.md-grid {
  max-width: 70rem;
}

/* Center all content images by default — no manual wrapper needed */
.md-typeset img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;   /* cap default image size so full-res screenshots don't dominate a page */
  width: 100%;        /* still shrinks gracefully on narrower viewports */
  height: auto;
}

/* Dracula-inspired palette overrides for dark mode (slate scheme) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #282a36;        /* Dracula background */
  --md-default-fg-color: #f8f8f2;        /* Dracula foreground */
  --md-default-fg-color--light: #f8f8f2cc;
  --md-default-fg-color--lighter: #f8f8f280;
  --md-default-fg-color--lightest: #6272a4; /* Dracula comment/muted */

  --md-primary-fg-color: #bd93f9;        /* Dracula purple */
  --md-primary-bg-color: #282a36;

  --md-accent-fg-color: #ff79c6;         /* Dracula pink */

  --md-code-bg-color: #21222c;
  --md-code-fg-color: #f8f8f2;

  --md-typeset-a-color: #8be9fd;         /* Dracula cyan for links */
}

/* Sidebar/nav surface slightly lighter than page background, Dracula "current line" */
[data-md-color-scheme="slate"] .md-sidebar,
[data-md-color-scheme="slate"] .md-nav {
  background-color: #282a36;
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #ff79c6;
}

/* Slightly leaner body text */
.md-typeset {
  font-size: 0.7rem;      /* Material's default is 0.8rem — try 0.7 or 0.75 to taste */
  font-weight: 400;       /* explicitly normal weight, in case Inter's rendering bold */
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;       /* keep headers a bit heavier than body text so hierarchy still reads clearly */
}