/*
  Global background layout shared by both themes.
*/
body[data-md-color-scheme="default"],
body[data-md-color-scheme="slate"] {
  min-height: 120vh;
  position: relative;
  isolation: isolate;
}

/*
  Shared blurred background image layer.
*/
body[data-md-color-scheme="default"]::before,
body[data-md-color-scheme="slate"]::before {
  content: "";
  position: fixed;
  inset: -20px;
  z-index: -2;
  pointer-events: none;
  background-image: url("../assets/images/astro-ledge.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: blur(var(--bg-blur, 10px));
  transform: scale(1.06);
}

/*
  Shared tint overlay layer (above image, below content).
*/
body[data-md-color-scheme="default"]::after,
body[data-md-color-scheme="slate"]::after {
  content: "";
  position: fixed;
  inset: -20px;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-tint);
  mix-blend-mode: var(--bg-blend-mode, normal);
}

/*
  Light mode: image with white tint for readability.
*/
body[data-md-color-scheme="default"] {
  --bg-blur: 8px;
  --bg-blend-mode: screen ;
  --bg-tint: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.80) 50%,
    rgba(255, 255, 255, 0.95) 100%
  );
  background-color: #ffffff;
}

/*
  Dark mode: image with darker tint.
*/
body[data-md-color-scheme="slate"] {
  --bg-blur: 10px;
  --bg-blend-mode: multiply;
  --bg-tint: linear-gradient(
    180deg,
    rgba(10, 12, 18, 0.80) 0%,
    rgba(12, 14, 22, 0.60) 50%,
    rgba(10, 12, 18, 0.80) 100%
  );
  background-color: #000000;
}

/*
  Acrylic styling for the top header and tab bar.
  Blur + translucency + subtle edge highlights mimic glass UI.
*/
body[data-md-color-scheme="slate"] .md-header,
body[data-md-color-scheme="slate"] .md-tabs,
body[data-md-color-scheme="default"] .md-header,
body[data-md-color-scheme="default"] .md-tabs {
  background: rgba(16, 20, 28, 0.36);
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(8, 10, 16, 0.5);
  backdrop-filter: blur(24px) saturate(185%) contrast(108%);
  -webkit-backdrop-filter: blur(24px) saturate(185%) contrast(108%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 26px rgba(0, 0, 0, 0.3);
}

/*
  Slight text lift on header title and tab links for legibility
  against translucent backgrounds.
*/
body[data-md-color-scheme="slate"] .md-header__title,
body[data-md-color-scheme="slate"] .md-tabs__link,
body[data-md-color-scheme="default"] .md-header__title,
body[data-md-color-scheme="default"] .md-tabs__link {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/*
  Footer fill removal: keep footer transparent so background
  treatment remains visible through the bottom region.
*/
body[data-md-color-scheme="slate"] .md-footer,
body[data-md-color-scheme="slate"] .md-footer-meta,
body[data-md-color-scheme="slate"] .md-footer__inner,
body[data-md-color-scheme="slate"] .md-footer-meta__inner,
body[data-md-color-scheme="default"] .md-footer,
body[data-md-color-scheme="default"] .md-footer-meta,
body[data-md-color-scheme="default"] .md-footer__inner,
body[data-md-color-scheme="default"] .md-footer-meta__inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

/*
  Code block styling (matched to gethomepage-style tones).
*/
[data-md-color-scheme="slate"] {
  --md-code-bg-color: hsla(0, 0%, 0%, 0.2);
}

[data-md-color-scheme="default"] {
  --md-code-bg-color: hsla(0, 0%, 100%, 0.6);
  --md-code-bg-color--lighter: hsla(0, 0%, 100%, 0.6);
}

.md-typeset pre > code,
.md-typeset .highlight pre {
  background-color: var(--md-code-bg-color);
}

/*
  Tables use the same background as code blocks.
*/
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  background-color: var(--md-code-bg-color);
}

/*
  Light mode: increase admonition contrast/readability.
*/
body[data-md-color-scheme="default"] .md-typeset .admonition,
body[data-md-color-scheme="default"] .md-typeset details {
  position: relative;
  overflow: hidden;
}

body[data-md-color-scheme="default"] .md-typeset .admonition::before,
body[data-md-color-scheme="default"] .md-typeset details::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

body[data-md-color-scheme="default"] .md-typeset .admonition > *,
body[data-md-color-scheme="default"] .md-typeset details > * {
  position: relative;
  z-index: 1;
}