/* Center image captions */
figcaption {
  text-align: center;
  font-style: italic;
  font-size: 0.5em !important;
  margin-top: 0.5em;
}

/* Ensure captions are centered in RevealJS specifically */
.reveal figcaption {
  text-align: center;
  font-style: italic;
  font-size: 0.5em !important;
  margin-top: 0.5em;
}

/* More specific RevealJS selectors to override default styles */
.reveal .slides figcaption {
  text-align: center;
  font-style: italic;
  font-size: 0.5em !important;
  margin-top: 0.5em;
}

.reveal .slides section figcaption {
  text-align: center;
  font-style: italic;
  font-size: 0.5em !important;
  margin-top: 0.5em;
}

/* Center attribution blocks (which are similar to captions) */
.attribution {
  text-align: center;
  font-size: 0.5em !important;
  font-style: italic;
  margin-top: 1em;
}

/* Mermaid diagram basic fixes */
.mermaid {
  font-family: Arial, sans-serif !important;
}

.mermaid text {
  font-size: 20px !important;
  fill: #000000 !important;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  stroke-width: 2px !important;
}

/* Aggressive RevealJS Mermaid text truncation fix */
.reveal .mermaid {
  max-width: none !important;
  width: auto !important;
  margin: 0 auto !important;
  font-size: 1rem !important;
  overflow: visible !important;
}

.reveal .mermaid svg {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.reveal .mermaid text,
.reveal .mermaid .nodeLabel,
.reveal .mermaid .edgeLabel {
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
  fill: #000000 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.reveal .mermaid foreignObject {
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}

.reveal .mermaid .label {
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
}

/* Force container to not clip text */
.reveal .mermaid .node {
  overflow: visible !important;
}

/* Let Quarto handle navbar styling */
.navbar {
  /* Quarto's default navbar styling will be used */
}

/* CRITICAL: Force all mermaid elements to be fully visible and black */
.mermaid,
.reveal .mermaid,
.mermaid * {
  opacity: 1 !important;
}

/* Ensure no white backgrounds on mermaid elements */
.mermaid,
.reveal .mermaid,
.mermaid svg,
.reveal .mermaid svg,
figure:has(.mermaid),
.reveal figure:has(.mermaid) {
  background: transparent !important;
  background-color: transparent !important;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path,
.reveal .mermaid .node rect,
.reveal .mermaid .node circle,
.reveal .mermaid .node ellipse,
.reveal .mermaid .node polygon,
.reveal .mermaid .node path {
  fill: #ffffff !important;
  stroke: #000000 !important;
  stroke-width: 3px !important;
}

.mermaid .edgePath .path,
.reveal .mermaid .edgePath .path {
  stroke: #000000 !important;
  stroke-width: 3px !important;
}

.mermaid .arrowheadPath,
.reveal .mermaid .arrowheadPath {
  fill: #000000 !important;
  stroke: #000000 !important;
}