/* ============================================================
   Apple Liquid Glass Design — glassmorphism overrides
   for Material for MkDocs (slate / dark mode)
   ============================================================ */

/* ---------- shared glass mixin values ---------- */
:root {
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.12);
  --glass-blur: 16px;
  --glass-radius: 14px;
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --glass-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.18);
  --glass-accent: rgba(255, 152, 0, 0.12);
}

/* ---------- header / top-bar ---------- */
.md-header {
  background: rgba(30, 30, 30, 0.55) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
}

/* ---------- navigation sidebar ---------- */
.md-sidebar {
  background: transparent !important;
}

.md-sidebar__scrollwrap {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  border-radius: 0 var(--glass-radius) var(--glass-radius) 0;
}

/* active nav item — subtle glass highlight */
.md-nav__item--active > .md-nav__link {
  background: var(--glass-accent) !important;
  border-radius: 8px;
}

/* ---------- content area ---------- */
.md-main__inner {
  background: transparent;
}

.md-content {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  margin: 12px 0;
  padding: 4px;
}

/* ---------- code blocks ---------- */
.highlight {
  background: rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-strong);
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              var(--glass-shadow-sm);
  overflow: hidden;
}

.highlight code {
  background: transparent !important;
}

/* inline code */
:not(pre) > code {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 2px 6px;
}

/* ---------- tables ---------- */
.md-typeset table:not([class]) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--glass-shadow-sm);
}

.md-typeset table:not([class]) th {
  background: rgba(255, 152, 0, 0.08);
}

/* ---------- admonitions / call-outs ---------- */
.md-typeset .admonition,
.md-typeset details {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow-sm);
}

/* ---------- tabs ---------- */
.md-typeset .tabbed-set {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
}

/* ---------- search bar ---------- */
.md-search__form {
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px !important;
}

/* ---------- footer ---------- */
.md-footer {
  background: rgba(30, 30, 30, 0.50) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
}

/* ---------- horizontal rules — subtle glow ---------- */
.md-typeset hr {
  border-image: linear-gradient(
    to right,
    transparent,
    rgba(255, 152, 0, 0.25),
    transparent
  ) 1;
}

/* ---------- scrollbar ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- links — subtle glass-glow on hover ---------- */
.md-typeset a:hover {
  text-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
}

/* ---------- images — soft glass frame ---------- */
.md-typeset img {
  border-radius: 10px;
}

/* ============================================================
   Dynamic Liquid Glass — mouse-tracking specular highlight
   ============================================================ */

/* Shared: every glass surface gets a hidden radial-light overlay
   that becomes visible when JS adds the .glass-active class and
   sets --glass-x / --glass-y custom properties. */
.md-header,
.md-content,
.md-sidebar__scrollwrap,
.highlight,
.md-search__form,
.md-footer {
  position: relative;
  overflow: hidden;
}

.md-header::after,
.md-content::after,
.md-sidebar__scrollwrap::after,
.highlight::after,
.md-search__form::after,
.md-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    circle 220px at var(--glass-x, 50%) var(--glass-y, 50%),
    rgba(255, 200, 120, 0.10) 0%,
    rgba(255, 152, 0, 0.04) 40%,
    transparent 70%
  );
  z-index: 1;
}

.md-header.glass-active::after,
.md-content.glass-active::after,
.md-sidebar__scrollwrap.glass-active::after,
.highlight.glass-active::after,
.md-search__form.glass-active::after,
.md-footer.glass-active::after {
  opacity: 1;
}

/* Keep header text / nav icons above the overlay */
.md-header > *,
.md-content > *,
.md-sidebar__scrollwrap > *,
.md-search__form > *,
.md-footer > * {
  position: relative;
  z-index: 2;
}

/* Highlight code blocks get a slightly brighter spot */
.highlight.glass-active::after {
  background: radial-gradient(
    circle 180px at var(--glass-x, 50%) var(--glass-y, 50%),
    rgba(255, 200, 120, 0.12) 0%,
    rgba(255, 152, 0, 0.05) 35%,
    transparent 65%
  );
}