/* Use :has() to detect the landing page by marker element
   – no JS, works on first paint and with instant navigation. */

/* Full-page gradient on the landing page (including top bar) */
html:has(#velr-landing-marker),
html:has(#velr-landing-marker) body {
  /* neutral grey → black instead of blue-ish slate */
  background: radial-gradient(
    circle at top left,
    #3f3f46 0,    /* gray-700 */
    #18181b 45%,  /* gray-900 */
    #000000 100%
  );
  background-attachment: fixed;
}

/* Let the gradient shine through on landing */
html:has(#velr-landing-marker) .md-main,
html:has(#velr-landing-marker) .md-main__inner,
html:has(#velr-landing-marker) [data-md-component="container"],
html:has(#velr-landing-marker) [data-md-component="content"] {
  background: transparent !important;
  box-shadow: none;
}

/* Header + tabs transparent so gradient covers them too */
html:has(#velr-landing-marker) .md-header,
html:has(#velr-landing-marker) .md-header__inner,
html:has(#velr-landing-marker) .md-tabs,
html:has(#velr-landing-marker) .md-tabs--primary {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none; /* keep the theme's border/underline, just drop shadows */
}

/* Header text/icons + tabs on dark background */
html:has(#velr-landing-marker) .md-header,
html:has(#velr-landing-marker) .md-header a,
html:has(#velr-landing-marker) .md-header a:visited,
html:has(#velr-landing-marker) .md-header .md-header-nav__title,
html:has(#velr-landing-marker) .md-header .md-header-nav__title .md-header-nav__topic,
html:has(#velr-landing-marker) .md-header .md-header-nav__button,
html:has(#velr-landing-marker) .md-header .md-icon,
html:has(#velr-landing-marker) .md-tabs__link {
  color: #e5e7eb;
}

/* Active tab ("Home"): brighter text + white segment underline */
html:has(#velr-landing-marker) .md-tabs__item--active > .md-tabs__link {
  color: #ffffff;
  /* use the theme's underline mechanism, just force it to white */
  box-shadow: 0 2px 0 0 #ffffff !important;
}

/* Light text in content */
html:has(#velr-landing-marker) .md-typeset,
html:has(#velr-landing-marker) .md-typeset h1,
html:has(#velr-landing-marker) .md-typeset p {
  color: #e5e7eb;
}

/* Buttons spacing */
html:has(#velr-landing-marker) .md-typeset .md-button {
  margin-right: 0.75rem;
}

/* Hide palette toggle + footer on landing */
html:has(#velr-landing-marker) [data-md-component="palette"] {
  display: none !important;
}
html:has(#velr-landing-marker) .md-footer {
  display: none !important;
}

/* Center content + hero box */
html:has(#velr-landing-marker) .md-main__inner {
  min-height: calc(100vh - 5rem);
  display: flex;
  align-items: center;
}

html:has(#velr-landing-marker) .md-content {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* The boxed hero */
html:has(#velr-landing-marker) .md-content__inner {
  max-width: 50rem;
  padding: 3rem 3.5rem;
  border-radius: 1.5rem;
  background: radial-gradient(
    circle at top left,
    rgba(39, 39, 42, 0.9),  /* gray-800-ish */
    rgba(9, 9, 11, 0.96)    /* near-black */
  );
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

/* ========== Collapsed search pill in header ========== */
/* <div class="md-search"><button class="md-search__button">Search</button></div> */

html:has(#velr-landing-marker) .md-search__button {
  display: none !important;
}

/* ========== Repo badge in header (right side) ========== */

html:has(#velr-landing-marker) .md-header__source {
  background-color: rgba(9, 9, 11, 0.96);
  border-radius: 9999px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

html:has(#velr-landing-marker) .md-header__source,
html:has(#velr-landing-marker) .md-header__source * {
  color: #e5e7eb;
}

/* ========== Secondary hero button ("Get Started") ========== */

html:has(#velr-landing-marker) .md-typeset .md-button:not(.md-button--primary) {
  background-color: rgba(9, 9, 11, 0.9);
  color: #d4d4d8;  /* light neutral gray */
  border: 1px solid rgba(82, 82, 91, 0.85);
}

html:has(#velr-landing-marker) .md-typeset .md-button:not(.md-button--primary):hover {
  background-color: rgba(63, 63, 70, 0.95); /* gray-700-ish on hover */
  color: #ffffff;
}

/* ========== Dark code snippets on landing page ========== */
/* ========== VS-Code/Monokai-style code on landing page ========== */

/* Block code container */
html:has(#velr-landing-marker) .md-typeset pre {
  background-color: #1e1e1e;              /* editor background */
  color: #f8f8f2;                         /* default foreground */
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid #2d2d2d;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Remove theme’s extra background on inner code */
html:has(#velr-landing-marker) .md-typeset pre > code {
  background: transparent;
  box-shadow: none;
}

/* Override to remove code-block shadow completely */
html:has(#velr-landing-marker) .md-typeset pre {
  background-color: #1e1e1e;              /* editor background */
  color: #f8f8f2;                         /* default foreground */
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid #2d2d2d;
  box-shadow: none;                       /* no dropshadow under code block */
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ===== Syntax colours (Pygments / highlight.js style classes) ===== */

/* Base text */
html:has(#velr-landing-marker) .md-typeset pre code {
  color: #f8f8f2;
}

/* Comments (# ... ) */
html:has(#velr-landing-marker) .md-typeset pre code .c,
html:has(#velr-landing-marker) .md-typeset pre code .c1,
html:has(#velr-landing-marker) .md-typeset pre code .cm {
  color: #a6e22e;   /* Monokai green */
}

/* Keywords (while, return, etc.) and keyword-constants (True, False) */
html:has(#velr-landing-marker) .md-typeset pre code .k,
html:has(#velr-landing-marker) .md-typeset pre code .kd,
html:has(#velr-landing-marker) .md-typeset pre code .kn,
html:has(#velr-landing-marker) .md-typeset pre code .kr,
html:has(#velr-landing-marker) .md-typeset pre code .kc {
  color: #60a5fa;   /* nice VSCode-ish blue */
}

/* Builtins / function names */
html:has(#velr-landing-marker) .md-typeset pre code .nf,
html:has(#velr-landing-marker) .md-typeset pre code .nb {
  color: #a6e22e;   /* same green as comments */
}

/* Strings: "…" and """ … """ */
html:has(#velr-landing-marker) .md-typeset pre code .s,
html:has(#velr-landing-marker) .md-typeset pre code .s1,
html:has(#velr-landing-marker) .md-typeset pre code .s2 {
  color: #CE9178;  /* darker amber / orange */
}

/* Numbers */
html:has(#velr-landing-marker) .md-typeset pre code .m,
html:has(#velr-landing-marker) .md-typeset pre code .mi,
html:has(#velr-landing-marker) .md-typeset pre code .mf {
  color: #ae81ff;   /* purple */
}

/* Operators (=, +, ->, :) */
html:has(#velr-landing-marker) .md-typeset pre code .o {
  color: #f8f8f2;   /* pink/red */
}

/* Names / identifiers (fall back) */
html:has(#velr-landing-marker) .md-typeset pre code .n {
  color: #f8f8f2;
}

/* Parentheses / punctuation: (), :, , etc. */
html:has(#velr-landing-marker) .md-typeset pre code .p {
  color: #fbbf24;  /* amber-ish yellow */
}

/* Hide the code-toolbar (copy + select) on landing page only */
html:has(#velr-landing-marker) .md-code__nav {
  display: none !important;
}

/* ========= Mobile / portrait tweaks ========= */
@media (max-width: 768px) {

  /* 1. Avoid iOS issues with fixed backgrounds */
  html:has(#velr-landing-marker),
  html:has(#velr-landing-marker) body {
    background-attachment: scroll;
  }

  /* 2. Let the page scroll naturally, don't vertically center */
  html:has(#velr-landing-marker) .md-main__inner {
    min-height: auto;
    padding-top: 4.5rem;   /* room for header */
    padding-bottom: 2rem;
    align-items: flex-start;
  }

  /* 3. Remove flex layout from content so it can be full-width */
  html:has(#velr-landing-marker) .md-content {
    display: block;
    padding: 0 1rem 2rem;
  }

  /* 4. Make hero card fit the viewport width and reduce padding */
  html:has(#velr-landing-marker) .md-content__inner {
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  /* 5. Slightly smaller typography + code for small screens */
  html:has(#velr-landing-marker) .md-typeset h1 {
    font-size: 1.8rem;
  }

  html:has(#velr-landing-marker) .md-typeset pre {
    font-size: 0.8rem;
    padding: 0.75rem 0.75rem;
  }
}

html:has(#velr-landing-marker) .md-typeset .md-button {
    font-size: 0.8rem;          /* smaller text */
    padding: 0.45rem 0.9rem;    /* less horizontal padding */
    margin-right: 0.4rem;       /* less gap between buttons */
    white-space: nowrap;        /* keep each button on one line */
}


/* Optionally be even more aggressive on tiny screens */
@media (max-width: 480px) {
  html:has(#velr-landing-marker) .md-typeset .md-button {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    margin-right: 0.35rem;
  }
}