/* Color schemes */

[data-md-color-scheme="default"] {
  --md-main-title:#4b4b4b;
}

[data-md-color-scheme="slate"] {
  --md-main-title:#cfcfcf;
  --md-default-bg-color:#0d1117;
}

/* Global CSS */

.md-typeset .md-button.text-center {
  display: block;
  margin: 1em auto;
  text-align: center;
  max-width: 10rem;
}

.md-main article h1 {
  font-weight: 600!important;
  font-size: 3rem!important;
  margin: 0 0 1rem!important;
  letter-spacing: 0em!important;
  color: var(--md-main-title)!important;
}

hr {
  border: 0;
  box-sizing: initial;
  display: block;
  height: 0.05rem;
  overflow: visible;
  padding: 0;
  border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
  display: flow-root;
  margin: 2em 0;
}

.center-card {
  grid-template-columns: none!important;
  font-size: 1rem!important;
}

p:has(.bottom) {
  height: auto;
}

.highlighted {
  color: var(--md-accent-fg-color);
  font-weight: bold;
}

.text-custom-color {
  color: var(--md-accent-fg-color)!important;
}

.image-border {
  border-radius: 1rem;
  border: 0.1rem solid var(--md-default-fg-color--lightest);
}

.image-round {
  border-radius: .8rem;
  border: 0.1rem solid var(--md-default-fg-color--lightest);
}

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

.image-centered {
  margin: auto;
}

.image-width-24 {
  max-width: 24rem!important;
}

/* caption image */
p > img.image-caption {
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
}

p:has(img.image-caption) {
  text-align: center;
}

.parent-caption {
  border-radius: 1rem;
  border: 0.1rem solid var(--md-default-fg-color--lightest);
  overflow: hidden;
  position: relative;
  display: flex; /* block-level for proper centering */
  flex-direction: column; /* To stack caption below the image */
  align-items: center; /* Center items horizontally */
  width: fit-content; /* shrink to image width */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Apply max-height to any image wrapped by parent-caption */
.parent-caption img {
  max-height: 500px !important;
}

.caption {
  position: absolute;
  bottom: 0; /* Position the text at the bottom of the image */
  right: 0;  /* Align the text to the right */
  background: rgba(0, 0, 0, 0.5); /* Optional: Add a semi-transparent background for better text readability */
  color: white; /* Text color */
  padding: .2rem .6rem; /* Some padding for better spacing */
  box-sizing: border-box; /* Ensure padding doesn't affect the total width */
  width: 100%; /* Make the caption span the full width */
  font-size: smaller;
  text-align: right; /* Right align the text within the caption */
  font-style: italic;
}
/* caption image */

/* steps */
/* Ensure lightbox anchors wrap as a centered block when containing images */
.md-content a.glightbox {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* Visually hide empty captions but keep structure for a11y */
.parent-caption .caption:empty {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Optional spacing and centering for wrapped images */
.md-content .parent-caption {
  margin: 1rem auto;
}
.steps ul {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

.steps li::before {
content: counter(item);
background-color: var(--md-default-fg-color--lightest);
border: 0px solid black;
border-radius: 100%;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
position: absolute;
left: 0;
top: 0;
color: black;
font-size: .7rem;
}

.steps li {
  counter-increment: item;
  margin-bottom: 1rem!important;
  position: relative;
  padding-left: 30px;
  margin-left: 0!important;
}

.unit {
  justify-content: left;
  display: grid;
  grid-gap: 1rem;
  margin: 0.5rem 0;
  padding-bottom: 0.4rem;
}

.unit ul {
  display: contents!important;
}

.unit ul hr {
  height: 10px;
}

.unit > ul > li {
  list-style: none;
  text-align: left;
  padding: 0.8rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.1rem;
  display: block;
  transition: border .25s,box-shadow .25s;
  height: 100%;
  position: relative;
  margin-left: 0!important;
}

/* steps */

.output {
width: 200px;
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 15px;
display: block;
margin: 0;
padding: .7em .7em;
width: auto;
color: grey;
font-style: italic;
font-family: var(--md-code-font-family);
font-size: .85em;
}

div.output::before {
content: "Output:";
display: block;
margin-bottom: 10px;
font-size: small;
}

/* Classes to create grids and cards embeded in the markdown (extension md_in_html needed) */
.cards {
justify-content: center;
display: grid;
grid-gap: 0.4rem;
margin: 0.5rem 0;
}

.img-max-height {
  max-height: 450px!important;
}

.img-max-width-15 {
  max-width: 15rem!important;
}

.row-1 {
  grid-template-columns: none!important;
  }

.row-2 {
grid-template-columns: repeat(2, minmax(8rem, 1fr));
}

.row-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
gap: .8rem .8rem!important; /* Optional: space between grid items rox-col */
}

.row-auto {
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.cards ul {
display: contents!important;
}

.cards ul li {
  margin-left: 0!important;
  list-style: none;
  text-align: left;
  padding: 0.8rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.1rem;
  display: block;
  transition: border .25s,box-shadow .25s;
  height: 100%;
  position: relative;
}

.cards p:nth-last-child(2) {
margin-bottom: 1rem;
}

.cards hr {
margin: 0.3rem 0;
}

.cards ul li:hover {
border-color: #0000;
box-shadow: var(--md-shadow-z2);
}

.grid {
grid-gap: 0.4rem;
display: grid;
margin: 1em 0;
}

.grid ul {
display: contents!important;
list-style: none;
}

/* .grid ul li a {
list-style: none;
text-align: left;
padding: 0.8rem;
border: 0.05rem solid var(--md-default-fg-color--lightest);
border-radius: 0.1rem;
display: block;
transition: border .25s, color .25s;
}

.grid ul li a:hover {
border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color);
} */