/*
 * Zensical-inspired styles for mkdocs-material
 * Extracts the visual refinements from zensical's "modern" theme
 * while maintaining compatibility with mkdocs-material's HTML structure.
 */

/* ============================================
   HEADER - Translucent glassmorphism effect
   ============================================ */

.md-header {
  -webkit-backdrop-filter: blur(0.4rem);
  backdrop-filter: blur(0.4rem);
  background-color: var(--md-default-bg-color--light) !important;
}

.md-header--shadow {
  box-shadow: 0 0.05rem 0 var(--md-default-fg-color--lightest);
}

/* ============================================
   TYPOGRAPHY - Zensical refinements
   ============================================ */

.md-typeset {
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  line-height: 1.8;
}

.md-typeset h1 {
  font-size: 1.875em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.md-typeset h2 {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.md-typeset h3 {
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

/* Underlined links like zensical */
.md-typeset a {
  text-decoration: underline;
}

.md-typeset a.md-button,
.md-typeset .md-nav a,
.md-typeset .md-footer a,
.md-typeset .md-source a,
.md-typeset .headerlink {
  text-decoration: none;
}

/* ============================================
   BUTTONS - Rounded pill style
   ============================================ */

.md-typeset .md-button {
  border-radius: 1.2rem;
}

/* ============================================
   CODE BLOCKS - Rounder corners
   ============================================ */

.md-typeset pre > code {
  border-radius: 0.4rem;
}

.md-typeset code {
  border-radius: 0.2rem;
}

/* ============================================
   SLATE (DARK) THEME - Zensical Modern Style
   ============================================ */

@media screen {
  [data-md-color-scheme="slate"] {
    /* Darker, richer background (zensical uses 5% lightness vs material's 14%) */
    --md-default-bg-color: hsla(var(--md-hue), 15%, 5%, 1);
    --md-default-bg-color--light: hsla(var(--md-hue), 15%, 5%, 0.54);
    --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 5%, 0.26);
    --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 5%, 0.07);

    /* Code blocks - slightly lighter than background for contrast */
    --md-code-bg-color: hsla(var(--md-hue), 20%, 10%, 1);
    --md-code-bg-color--light: hsla(var(--md-hue), 20%, 10%, 0.9);
    --md-code-bg-color--lighter: hsla(var(--md-hue), 20%, 10%, 0.54);
    --md-code-fg-color: hsla(var(--md-hue), 20%, 80%, 1);

    /* Vibrant syntax highlighting colors */
    --md-code-hl-number-color: #e6695b;
    --md-code-hl-special-color: #f06090;
    --md-code-hl-function-color: #c973d9;
    --md-code-hl-constant-color: #9383e2;
    --md-code-hl-keyword-color: #6791e0;
    --md-code-hl-string-color: #2fb170;

    /* Footer */
    --md-footer-bg-color: hsla(var(--md-hue), 15%, 10%, 0.87);
    --md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 8%, 1);

    /* Refined shadows with subtle light edges */
    --md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #ffffff1a;
    --md-shadow-z2: 0 0.2rem 0.5rem #00000040, 0 0 0.05rem #ffffff59;
    --md-shadow-z3: 0 0.5rem 2rem #0006, 0 0 0.05rem #00000059;
  }

  /* White headings in dark mode for better contrast */
  [data-md-color-scheme="slate"] .md-header__title,
  [data-md-color-scheme="slate"] h1,
  [data-md-color-scheme="slate"] h2,
  [data-md-color-scheme="slate"] h3,
  [data-md-color-scheme="slate"] h4,
  [data-md-color-scheme="slate"] h5,
  [data-md-color-scheme="slate"] h6 {
    color: hsla(var(--md-hue), 0%, 100%, 1);
  }

  /* Link colors for black primary in dark mode */
  [data-md-color-scheme="slate"][data-md-color-primary="black"] {
    --md-typeset-a-color: #5e8bde;
  }
}

/* ============================================
   DEFAULT (LIGHT) THEME
   ============================================ */

[data-md-color-scheme="default"] {
  --md-default-bg-color--light: rgba(255, 255, 255, 0.7);
}

.md-sidebar code.doc-symbol-class:after {
    content: "c";
}
.md-sidebar code.doc-symbol-method:after {
    content: "m";
}
.md-sidebar code.doc-symbol-attribute:after {
    content: "a";
}