/* Only for slides developement: Use this style to view the real slide border*/
/* .slides {
	border: 3px solid #ac0000;
} */

/* Variable Presets */
:root {
	--r-presentation-bg-color: #ffffff; /* Presentation Background color */
	--r-heading-margin: 0 0 0.5rem 0; /* Bottom Margin for a headers */
	--r-block-margin: 0.5rem 0; /* Top and Bottom Margin for all block elemenst */
	--r-link-color: #000000; /* Link color */
	--r-link-decoration-color: #ccc; /* Link Decoration color */
	--r-link-hover-color: #777; /* Link Hover color */

  --mermaid-text-color: #000; /* Mermaid text color */
  --mermaid-shapes-fill-color: #bbb; /* Mermaid fill color */
  --mermaid-edge-color: #000; /* Mermaid edge color */
  --mermaid-edge-label-color: #aaa; /* Mermaid edge label color */
  --mermaid-arrowhead-color: #000; /* Mermaid arrowhead color */

	--del-decoration-color: #888; /* Deleted text decoration color */

	--figure-caption-color: #555; /* Figure caption color */
	--figure-border-color: #888; /* Figure border color */

	--table-text-size: 0.6em; /* Table text size */
	--table-border-color: #999; /* Table border color */

	--bar-fill-color: #bbbbbb; /* Bar chart bar fill color */
	--bar-text-color: #000; /* Bar chart text color */

	--bar-translate-x: 0; /* Bar chart translate X */
	--bar-translate-y: 0; /* Bar chart translate Y */

	--color-attention: #de5c00; /* Color for attention text */

	--code-block-background: #f0f0f0; /* Code block background color */

	--footnote-text-color: #808080; /* Footnote text color */

  --control-color: #a8a6a6;  /* Navigation arrow color */
  --control-progress-color: #000;  /* Navigation progress color */
  --control-progress-bg-color: rgba(0, 0, 0, 0.2);  /* Navigation progress background color - RGBA format to provide transparency */
}

/* Customization overriding existing platform styles*/
.reveal .slides section {
  padding: 1rem !important; /* Add padding around slide content */ 
  box-sizing: border-box !important; /* Ensure padding is included in slide size */
}




/* Styles for GENERAL HTML ELEMENTS */
/* Headings */
/* Remove ALL CAPS from slide titles */
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
	text-transform: none;
  margin-bottom: .35em;
}

/* Custom styling for centering content when h1 is used */
h1 {
	margin-bottom: 1rem; /* Add some spacing below h1 */
}

/* Font sizes */
.reveal h1 {
	font-size: 2.1em;
}
.reveal h2 {
	font-size: 1.5em;
}
.reveal h3 {
	font-size: 1.4em;
}
.text-large {
	font-size: 1.2em;
}
.text-mid {
	font-size: 0.8em;
}
.text-small {
	font-size: 0.6em;
}
.text-attention {
	color: var(--color-attention);
}

/* Block elements margin */	
.mx-auto {
margin-left: auto !important;			/* Centered horizontally */
	margin-right: auto !important;
}

.my-auto {
	margin-top: auto !important;			/* Centered vertically */
	margin-bottom: auto !important;
}

.mx-auto.my-auto {
	margin-left: auto !important;	/* Centered both horizontally and vertically */
	margin-right: auto !important;
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.m-0 {
	margin: 0 !important; /* No margin */
}

.mt-auto {
	margin-top: auto !important; /* Top margin auto, pushing the containre to the bottom when situated insinde <div class="d-flex flex-vertical height-100"> */
}

.mb-auto {
	margin-bottom: auto !important;
}

/* Links */
.reveal a,
.reveal a:visited {
	text-decoration: underline;
	text-decoration-color: var(--r-link-decoration-color);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.reveal a:hover,
.reveal a:focus {
	color: var(--r-link-hover-color);
}

/* explicit helpers to make overriding easier */
.align-right {
	text-align: right;
}
.align-center {
	text-align: center;
}
.align-left {
	text-align: left !important;
}

/* Del element */
del {
	text-decoration: line-through;
	text-decoration-color: var(--del-decoration-color);
}

/* Image */
.reveal img {
  display: block;
  max-width: 100% !important;
  max-height: 55vh;
  width: auto;
  object-fit: contain !important;
  margin: 1rem auto !important;
}

/* Lists */

.list-unstyled {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* List items with zero bottom margin */
ul.margin-0 li,
ol.margin-0 li {
	margin-bottom: 0 !important;
}

/* List items with  bottom margin */
ul.margin-1 li,
ol.margin-1 li {
	margin-bottom: 1.5rem !important;
}


/* Navigation */
.reveal .controls button {
  color: var(--control-color);
}

.reveal .progress {
  background: var(--control-progress-bg-color); /* Navigation progress background color */
}

.reveal .progress span {
  background-color: var(--control-progress-color);
}


/* Flex Model */

.d-flex {
	display: flex !important;
}

.flex-vertical {
	flex-direction: column !important;
}

.flex-gap-small {
	gap: 0.5rem !important;
}

.flex-gap-mid {
	gap: 1rem !important;
}

.flex-gap-large {
	gap: 2rem !important;
}

.flex-gap-xlarge {
	gap: 3rem !important;
}

.flex-fill-equal {
  flex: 1 1 0 !important;
}

.height-100 {
	height: calc(var(--slide-height) - 2rem); /* Adjust for padding */
}

.reveal .my-indent {
  display: block;        /* required for span or inline use */
  margin-left: 2em;      /* shift whole paragraph */
}

/* Figurte Styles  */
figure {
	text-align: center;
}

figcaption {
	font-size: 0.8em;
	margin-top: 0.4em;
	color: var(--figure-caption-color);
}

figure img {
	border: 2px solid var(--figure-border-color);
	border-radius: 4px;
}




/* Styles for MERMAID */

/* Make Mermaid diagrams expand to fill slide */
/* .reveal .slides section .mermaid {
	display: flex !important;
	flex: 1 1 auto !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 auto !important;
} */

.mermaid svg {
	width: 100%;
	height: 100%;
	max-width: 100% !important; /* Overrides diagram width */
  min-width: 70% !important; /* Ensure diagrams have some minimum width */
	display: block !important;
  object-fit: contain;
  margin: 0 auto !important; /* Center horizontally with old top/bottom margine 1rem */
}

/* Fix for specific Mermaid components */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .cluster rect {
	stroke-width: 2px !important; /* <--- control shape border thickness */
}

/* Make text more readable */
.mermaid .label {
	font-size: 16px !important;
}

/* Important override for graph and flowchart types */
.mermaid[id^="mermaid-"] {
	transform: scale(1.1) !important; /* Slightly scale up all diagrams */
}

/* TWEAKS FOR BLACK THEME */
/* General text */
.reveal .mermaid text,
.reveal .mermaid .nodeLabel,
.reveal .mermaid .edgeLabel {
	color: var(--mermaid-text-color) !important;
}

.reveal .mermaid .edgeLabel {
	background-color: var(--r-presentation-bg-color) !important;
}

/* Node shapes */
.reveal .mermaid rect,
.reveal .mermaid .node rect,
.reveal .mermaid circle,
.reveal .mermaid ellipse,
.reveal .mermaid polygon {
	color: var(--mermaid-text-color) !important;
	fill: var(--mermaid-shapes-fill-color) !important;
	stroke: none !important;
	stroke-width: 0.3px !important; /* <--- control shape border thickness */
}

/* Rounded corners for rectangles */
.reveal .mermaid rect,
.reveal .mermaid .node rect {
	rx: 5 !important; /* <--- corner radius X */
	ry: 5 !important; /* <--- corner radius Y */
}

/* Edges */
.reveal .mermaid .edgePath path,
.reveal .mermaid .flowchart-link {
	stroke: var(--mermaid-edge-color) !important;
	stroke-width: 1.3px !important;
	fill: none !important;
}

/* Arrowheads */
.reveal .mermaid marker path,
.reveal .mermaid .arrowheadPath {
	fill: var(--mermaid-arrowhead-color) !important;
	stroke: none !important;
}

/* Edge labels */
.reveal .mermaid .edgeLabel {
	/* background-color: var(--mermaid-edge-label-color) !important; */
}

.node-bkg {
	fill: var(--mermaid-shapes-fill-color) !important;
}


/* Tables */
table {
  margin: auto auto !important;
  width: auto !important;
  min-width: 60% !important;
	max-width: 100% !important;
  /* max-width: 95vw !important; */
  max-height: 70vh !important;
  border-collapse: collapse !important;
  color: inherit;
  font-size: var(--table-text-size) !important;
}

.reveal table th, .reveal table td {
  border: 2px solid var(--table-border-color) !important;
  padding: 6px 12px !important;
  text-align: left;
  white-space: normal !important;
  vertical-align: top;
	line-height: 1.2;
}

/* Hide table used for data */
.data-chart-table {
  position: absolute !important;
  left: -9999px !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}



/* Barchart Custom Style */

/* Adjust margin for bar chart slide */
.chart-slide #bar-chart {
  margin-top: 60px !important;
}

/* Manual scaling for bar chart */
#bar-chart[data-scale] {
  /* transform: scale(var(--scale)) !important; */
  transform-origin: top center !important;
}

/* Bar chart container */
#bar-chart {
  width: 100%;
  position: relative !important;
  box-sizing: border-box;
	overflow: visible;
}

/* SVG should now fill the container */
#bar-chart svg {
  /* display: block; */
  width: auto !important;
  height: auto !important;
  font-family: Arial, sans-serif;
  background-color: transparent !important;
  overflow: visible !important;
	scale: var(--scale);
	transform: translate(var(--bar-translate-x), var(--bar-translate-y));
}

/* Bars */
.bar-rect {
  fill: var(--bar-fill-color) !important;
}

/* Labels */
#bar-chart text {
  font-size: 12px;
  fill: var(--bar-text-color) !important;
}

/* Iframe styles */
.reveal iframe {
  width: 100%;
  height: 550px;
  border: none;
  display: block; /* Makes iframe a block element, so it respects width */
  margin-left: auto; /* Center horizontally */
  margin-right: auto; /* Center horizontally */
  box-sizing: border-box; /* Includes padding and border in the width */
}

/* Code block styles */
.reveal pre {
  width: 100%;
  max-height: none ;
  font-size: 0.4em;
  line-height: 1.2;
  padding: 0 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  background-color: var(--code-block-background) !important;
  border: none !important;
  box-shadow: none !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.reveal pre code {
  max-height: none !important;
  background: var(--code-block-background) !important;
  padding: 0.7rem !important;
  border-radius: 4px !important;
  font-size: 0.8em;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}


/* Footnote styles */
.footnote {
  font-size: 0.5em;
  color: var(--footnote-text-color);
  display: block;  
  margin-top: 1rem;
  margin-bottom: .5rem;  
  text-align: center;  
}