/* =========================
   Mermaid responsive for Obsidian Publish
   ========================= */

.markdown-rendered .mermaid,
.markdown-preview-view .mermaid,
.publish-renderer .mermaid {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin: 1rem 0;
  padding: 0 0 0.75rem 0;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

/* SVG should stay within note width by default */
.markdown-rendered .mermaid svg,
.markdown-preview-view .mermaid svg,
.publish-renderer .mermaid svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Optional: slightly smaller text on narrow screens */
@media (max-width: 700px) {
  .markdown-rendered .mermaid svg,
  .markdown-preview-view .mermaid svg,
  .publish-renderer .mermaid svg {
    font-size: 14px;
  }
}

/* Optional: visual hint that the area can scroll */
.markdown-rendered .mermaid::-webkit-scrollbar,
.markdown-preview-view .mermaid::-webkit-scrollbar,
.publish-renderer .mermaid::-webkit-scrollbar {
  height: 8px;
}

.markdown-rendered .mermaid::-webkit-scrollbar-thumb,
.markdown-preview-view .mermaid::-webkit-scrollbar-thumb,
.publish-renderer .mermaid::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.35);
  border-radius: 999px;
}

/* =========================
   Centered images for Obsidian Publish
   ========================= */

.markdown-rendered img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
|--------------------------------------------------------------------------
| Footer Styling
|--------------------------------------------------------------------------
|
| Styles for the theme's default footer, which is hijacked to display
| custom social media links as a static element at the end of the page.
|
*/
.site-footer {
  display: block !important;
  text-align: center;
  padding: 1rem 1rem 1.25rem;
  margin-top: 2rem;
  border-top: 1px solid var(--background-modifier-border);
}

.footer-icon-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 24px;
}

.footer-icon-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1;
}

.footer-icon-links svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer-icon-links a:hover {
  color: var(--text-accent);
}

.footer-icon-links a:hover svg {
  transform: scale(1.12);
}