/* Lightbox styles */
.si-lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1200;
  opacity:0;
  transition:opacity .18s ease;
  cursor:zoom-out;
}
.si-lightbox-open{ opacity:1; }
.si-lightbox-fadeout{ opacity:0; }
.si-lightbox-image{
  max-width:92%;
  max-height:92%;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  border-radius:4px;
}

/* Make sure floated image doesn't overlap on very small screens */
@media (max-width:640px){
  .si-lightbox-overlay{ padding:12px; }
  div[style*="float:left"]{ float:none !important; width:auto !important; margin:0 0 16px 0 !important; }
}

/* Thumbnail: show at actual image size by default, but scale down on small screens */
.si-lightbox-thumb{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  display:block;
}

@media (max-width:800px){
  .si-lightbox-thumb{ max-width:100% !important; height:auto !important; }
}

/* Footer styles */
[data-md-color-scheme="default"] {
  --md-footer-bg-color: #757575;
  --md-footer-bg-color--dark: #757575;
  --md-footer-fg-color: #ffffff;
  --md-footer-fg-color--light: #ffffff;
  --md-footer-fg-color--lighter: #ffffff;
}

/* Headings: light-blue background that reaches near the right edge,
   keeps a small inner margin and stays inside the main content area. */
.md-typeset h1,
.md-typeset h2 {
  position: relative;
  display: block;
  padding: 0.35em 1rem;
  margin: 1.2em 0 0.6em 0;
  color: inherit;
  box-sizing: border-box;
}

/* background bar that visually extends a bit to the right while respecting
   the content container (won't overlap the left navigation) */
.md-typeset h1::before,
.md-typeset h2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.25rem;
  right: -1rem; /* extends slightly toward the right edge */
  background: #dddddd;
  z-index: -1;
  border-radius: 6px;
}

/* Ensure the bar adapts on very small screens */
@media (max-width: 640px) {
  .md-typeset h1::before,
  .md-typeset h2::before {
    left: -0.15rem;
    right: -0.5rem;
    border-radius: 4px;
  }
  .md-typeset h1,
  .md-typeset h2 {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}

/* Level-1 headings */
.md-typeset h1 {
  color: #ffffff
}
.md-typeset h1::before {
  background: #757575;
}

.md-typeset a[href^="http"]::after {
  content: " [↗]";
}