.fig-center {
  text-align: center;
}

.fig-center img {
  display: block;
  margin: 0 auto;
}

.fig-center figcaption {
  text-align: center;
}

.img-center {
  display: block;
  margin: 0 auto;
}

.mermaid-center {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mermaid-center .mermaid {
  width: fit-content;
  max-width: 100%;
}

/* Desktop: hide the site navigation sidebar. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    display: none;
  }
}

/* Where the page TOC is a sidebar, place it before the content. */
@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    order: -1;
  }
}

/* Keep the theme toggle and search together at the right end. */
.md-header__inner > [data-md-component="palette"] {
  order: 20;
  margin-left: auto;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

/* Search button shown on smaller screens. */
.md-header__inner > label[for="__search"] {
  order: 21;
  margin-left: 0;
}

/* Search field shown on larger screens. */
.md-header__inner > .md-search {
  order: 22;
  margin-left: 0;
  flex-shrink: 0;
}

/* Below Material's drawer breakpoint the header menus do not fit: five
   titles push the site title, search and theme toggle off the right edge.
   The navigation drawer already lists the same pages as one column (the
   `nav:` block mirrors the dropdowns), so hand over to it there. The same
   breakpoint as the sidebar rule above, mirrored: desktop gets the menus
   and no drawer, everything smaller gets the drawer and no menus. */
@media screen and (max-width: 76.234375em) {
  .md-header__inner > .md-header__option:has(> .md-header__dropdown) {
    display: none;
  }
}

/* Dropdown surfaces. Important declarations override the plugin's inline styles. */
.md-header__dropdown {
  --wp-menu-shadow: 0 12px 32px rgb(0 0 0 / 14%),
    0 2px 6px rgb(0 0 0 / 6%);
  --wp-menu-highlight: color-mix(
    in srgb, var(--md-typeset-a-color) 10%, var(--md-default-bg-color)
  );
}

[data-md-color-scheme="slate"] .md-header__dropdown {
  --wp-menu-shadow: 0 14px 36px rgb(0 0 0 / 32%),
    0 2px 8px rgb(0 0 0 / 18%);
}

.md-header__dropdown-content,
.md-header__dropdown-submenu {
  padding: 0.3rem;
  background: var(--md-default-bg-color) !important;
  border: 1px solid var(--md-default-fg-color--lightest) !important;
  border-radius: 0.6rem !important;
  box-shadow: var(--wp-menu-shadow) !important;
  transform-origin: top left;
  animation: wp-menu-enter 150ms ease-out;
}

/* Keep long menus scrollable without adding a gap in the hover target. */
.md-header__dropdown-content {
  min-width: min(15rem, calc(100vw - 2rem)) !important;
  max-width: min(23rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.md-header__dropdown-content a {
  padding: 0.55rem 0.7rem !important;
  border-radius: 0.35rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: background-color 120ms ease, color 120ms ease;
}

.md-header__dropdown-content a:hover,
.md-header__dropdown-content a:focus-visible {
  background: var(--wp-menu-highlight) !important;
  color: var(--md-typeset-a-color) !important;
}

.md-header__dropdown-content a:focus-visible {
  outline: 2px solid var(--md-typeset-a-color);
  outline-offset: -2px;
}

/* Separate the section link from its dropdown toggle. */
.wp-header-menu-heading {
  display: flex;
  align-items: center;
  border-radius: 0.4rem;
  transition: background-color 120ms ease;
}

.wp-header-menu-heading:hover,
.wp-header-menu-heading:focus-within {
  background: rgb(255 255 255 / 12%);
}

.wp-header-menu-heading > .md-header__button {
  border-radius: 0.3rem;
  opacity: 1;
}

/* Also style menu headings before the link-enhancement script runs. */
.md-header__dropdown > button.md-header__button {
  border-radius: 0.4rem;
  transition: background-color 120ms ease;
}

.md-header__dropdown > button.md-header__button:hover {
  background: rgb(255 255 255 / 12%);
}

.wp-header-menu-heading > a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.wp-header-menu-heading > a:focus-visible,
.wp-header-menu-heading > button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@keyframes wp-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-header__dropdown-content,
  .md-header__dropdown-submenu {
    animation: none;
  }

  .md-header__dropdown-content a,
  .wp-header-menu-heading,
  .md-header__dropdown > button.md-header__button {
    transition: none;
  }
}