[data-md-color-primary="custom"] {
  --md-primary-fg-color:         #101010; /* header/top-bar background */
  --md-primary-fg-color--light:  #2b2b2b;
  --md-primary-fg-color--dark:   #000000;
  --md-primary-bg-color:         #ffffff;
  --md-primary-bg-color--light:  rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:              #78d642; /* links, active nav, search highlight */
  --md-accent-fg-color--transparent: rgba(120, 214, 66, 0.1);
  --md-accent-bg-color:              #ffffff;
  --md-accent-bg-color--light:       rgba(255, 255, 255, 0.7);
  --md-typeset-a-color: var(--md-accent-fg-color);
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #8ec31f;
}

.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
  background-color: rgba(142, 195, 31, 0.1);
}

.md-typeset .admonition.note > .admonition-title::before,
.md-typeset details.note > summary::before {
  background-color: #8ec31f;
}

/* =============================================================================
   Top nav tabs — wrap instead of silently scrolling off-screen
   Material's default .md-tabs__list is a single-row flex container with
   overflow:auto and scrollbar-width:none (scrollbar hidden entirely), so any
   tab that doesn't fit is scrolled out of view with no visual affordance --
   it just looks clipped at the browser's edge. This bites hardest on longer
   top-level labels in some locales (e.g. fr, de) combined with our ~10
   top-level sections. navigation.tabs.sticky is not enabled, so the bar
   isn't pinned to a fixed height -- letting it wrap to a second line is a
   safe, no-JS fix: every tab stays reachable and visible instead of
   depending on a hidden horizontal scrollbar.
   ============================================================================= */
.md-tabs__list {
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  row-gap: 0.2rem;
}

.md-tabs__item {
  height: auto;
}

.md-tabs__link {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

.md-header__button.md-logo {
  margin: 0 0 0 0.2rem;
  padding: 0 0 0 0.4rem;
}

.md-header__button.md-logo img {
  height: 2rem;
}

.md-nav--secondary .md-nav__list .md-nav__list {
  padding-left: 0.9rem;
}

.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item {
  padding-left: 0.6rem;
}