/* ============================================================
   HARSH KUMAR NARULA
   Shutri-inspired technical publication layer
   ============================================================

   This stylesheet intentionally sits on top of MkDocs Material.
   It does NOT replace the existing site design.

   Goals:
   - technical / scientific publication feel
   - restrained visual hierarchy
   - better code/research identity
   - stronger previous/next navigation
   - subtle engineering aesthetic
   - excellent mobile behaviour
   ============================================================ */


/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */

:root {
  --hn-line: rgba(127, 127, 127, 0.20);
  --hn-line-strong: rgba(127, 127, 127, 0.32);
  --hn-soft: rgba(127, 127, 127, 0.045);

  --hn-mono:
    "JetBrains Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}


/* ------------------------------------------------------------
   2. Overall reading surface
   ------------------------------------------------------------ */

.md-content {
  max-width: 900px;
}


/* ------------------------------------------------------------
   3. Publication-style headings
   ------------------------------------------------------------ */

.md-content h1 {
  font-weight: 750;
  letter-spacing: -0.025em;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hn-line);
}

.md-content h2 {
  position: relative;
  font-weight: 700;
  padding-bottom: 0.35rem;
  margin-top: 2.2em;
}

.md-content h2::after {
  content: "";
  display: block;

  width: 2.5rem;

  margin-top: 0.45rem;

  border-bottom:
    2px solid var(--md-accent-fg-color);
}

.md-content h3 {
  font-weight: 700;
}


/* ------------------------------------------------------------
   4. Technical typography
   ------------------------------------------------------------ */

.md-typeset code,
.md-typeset pre,
.md-nav__link,
.md-header__topic {
  font-family: var(--hn-mono);
}

.md-typeset code {
  border-radius: 5px;
}

.md-typeset pre > code {
  border: 1px solid var(--hn-line);
}


/* ------------------------------------------------------------
   5. Code blocks
   ------------------------------------------------------------ */

.md-typeset pre {
  border-radius: 10px;
}

.md-typeset pre > code {
  border-radius: 10px;
}


/* ------------------------------------------------------------
   6. Tables / admonitions / details
   ------------------------------------------------------------ */

.md-typeset .admonition,
.md-typeset details,
.md-typeset table:not([class]) {
  border: 1px solid var(--hn-line);
  box-shadow: none;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
}


/* ------------------------------------------------------------
   7. Homepage hero refinement
   ------------------------------------------------------------ */

.hero {
  border: 1px solid var(--hn-line);
  border-top: 0;
}

.hero-kicker {
  font-family: var(--hn-mono);
  letter-spacing: 0.02em;
}

.hero h1 {
  font-weight: 800;
}

.hero h2 {
  font-weight: 500;
}


/* ------------------------------------------------------------
   8. Homepage cards
   ------------------------------------------------------------ */

.hn-card {
  background: var(--hn-soft);
  border-color: var(--hn-line);
}

.hn-card:hover {
  border-color: var(--md-accent-fg-color);
}


/* ------------------------------------------------------------
   9. Technology chips
   ------------------------------------------------------------ */

.tech {
  font-family: var(--hn-mono);
  letter-spacing: -0.01em;
}


/* ------------------------------------------------------------
   10. Research images
   ------------------------------------------------------------ */

.research-feature {
  border-color: var(--hn-line);
}


/* ------------------------------------------------------------
   11. Previous / Next navigation
   ------------------------------------------------------------ */

/*
   Material already provides excellent previous/next navigation.
   We simply make it feel more like a technical publication.
*/

.md-footer__link {
  border: 1px solid var(--hn-line);
  border-radius: 10px;

  margin: 0.5rem;
  padding: 0.9rem 1rem;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.md-footer__link:hover {
  transform: translateY(-2px);

  border-color:
    var(--md-accent-fg-color);

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.06);
}

.md-footer__title {
  font-weight: 650;
}


/* ------------------------------------------------------------
   12. Navigation typography
   ------------------------------------------------------------ */

.md-nav__link {
  font-size: 0.84rem;
}

.md-nav__item--active > .md-nav__link {
  font-weight: 700;
}


/* ------------------------------------------------------------
   13. Technical labels
   ------------------------------------------------------------ */

.hn-label {
  display: inline-block;

  padding:
    0.18rem 0.5rem;

  border:
    1px solid var(--hn-line);

  border-radius:
    999px;

  font:
    600 0.72rem/1
    var(--hn-mono);

  letter-spacing:
    0.02em;

  opacity:
    0.75;
}


/* ------------------------------------------------------------
   14. Horizontal rules
   ------------------------------------------------------------ */

.md-typeset hr {
  border-bottom-color:
    var(--hn-line);
}


/* ------------------------------------------------------------
   15. Links
   ------------------------------------------------------------ */

.md-typeset a {
  text-underline-offset: 0.15em;
}


/* ------------------------------------------------------------
   16. Dark mode
   ------------------------------------------------------------ */

[data-md-color-scheme="slate"] {

  --hn-line:
    rgba(255, 255, 255, 0.14);

  --hn-line-strong:
    rgba(255, 255, 255, 0.24);

  --hn-soft:
    rgba(255, 255, 255, 0.035);
}


/* ------------------------------------------------------------
   17. Dark mode code blocks
   ------------------------------------------------------------ */

[data-md-color-scheme="slate"]
.md-typeset pre > code {
  border-color:
    var(--hn-line);
}


/* ------------------------------------------------------------
   18. Mobile
   ------------------------------------------------------------ */

@media screen and (max-width: 760px) {

  .md-content {
    max-width: none;
  }

  .md-content h1 {
    padding-bottom:
      0.45rem;
  }

  .md-content h2 {
    margin-top:
      1.8em;
  }

  .md-footer__link {
    margin:
      0.35rem 0;
  }

}


/* ------------------------------------------------------------
   19. Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .hn-card,
  .md-footer__link {
    transition: none;
  }

}