/* Hayavega docs -- restyled to match index.html's own design system, not
   just borrow its accent color. Every token below (names and values) is
   copied straight from index.html's :root -- this file's only job is to
   map Material for MkDocs' own --md-* variables onto those same tokens,
   plus a handful of component overrides (header, tabs, hero, buttons,
   cards) where Material's structure doesn't leave a variable for the
   thing index.html actually does differently. The visual reference is
   the register of reflex.dev / uv / angular.dev / react.dev: a deep
   dark background by default, one confident hayavega accent, code-forward
   content, flat elevated panels with soft rounded corners -- not
   whimsical decoration, not a light-cream background. */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600&display=swap");

/* Defensive: nothing in this file should ever force horizontal page
   scroll on a narrow viewport -- internal scrollable elements (code
   blocks, tables) keep their own overflow-x, this only guards the page
   itself. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Smooth scroll + reduced-motion guard, and text selection/focus colors
   in the brand palette -- the same three accessibility/polish details
   index.html sets at the top of its own stylesheet. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
::selection { background: var(--leaf-tint); color: var(--leaf-strong); }
.md-typeset :focus-visible { outline-color: var(--stamp); }

/* ---------- index.html's own tokens, copied verbatim. [data-md-color-
   scheme="slate"] is Material's own name for its dark scheme, listed
   first (and default) in mkdocs.yml, so it carries the dark palette;
   "default" carries light, for the manual toggle only. ---------- */
[data-md-color-scheme="slate"] {
  --ink: #EAF0F7; --paper: #0A0F1A; --surface: #111929; --surface-2: #182236;
  --hayavega: #FF7A1A; --hayavega-strong: #FFA148; --hayavega-tint: rgba(255, 122, 26, 0.16);
  --leaf: #22C55E; --leaf-strong: #5EEBA0; --leaf-tint: rgba(34, 197, 94, 0.14);
  --stamp: #38BDF8; --stamp-strong: #7DD3FC; --stamp-tint: rgba(56, 189, 248, 0.14);
  --rind: #F43F5E; --rind-tint: rgba(244, 63, 94, 0.14);
  --line: #222C40; --muted: #8A94A6;
  --code-bg: #070A12; --code-ink: #E6ECF5; --code-mut: #64708A; --code-str: #FFA148; --code-kw: #22C55E; --code-fn: #38BDF8;
  /* A warm glow reads fine against a near-black page; the same tint
     washed over a white light-mode background turns it pale cream/
     pink -- landing on the exact "warm off-white + orange" look this
     palette is meant to avoid. Light mode gets a cool, barely-there
     glow instead (see [data-md-color-scheme="default"] below). */
  --glow: var(--hayavega-tint);
}
[data-md-color-scheme="default"] {
  --ink: #0A0F1A; --paper: #FFFFFF; --surface: #F3F5F9; --surface-2: #E7EBF2;
  --hayavega: #E8640A; --hayavega-strong: #C2530A; --hayavega-tint: rgba(232, 100, 10, 0.10);
  --leaf: #15803D; --leaf-strong: #0F6B30; --leaf-tint: rgba(21, 128, 61, 0.10);
  --stamp: #0284C7; --stamp-strong: #026AA2; --stamp-tint: rgba(2, 132, 199, 0.10);
  --rind: #DC2626; --rind-tint: rgba(220, 38, 38, 0.10);
  --line: #DCE1EA; --muted: #5B6578;
  --glow: rgba(2, 132, 199, 0.05);
  /* Code blocks stay terminal-dark in both modes, same as index.html. */
  --code-bg: #070A12; --code-ink: #E6ECF5; --code-mut: #64708A; --code-str: #FFA148; --code-kw: #22C55E; --code-fn: #38BDF8;
}

/* ---------- map Material's variables onto those tokens ---------- */
[data-md-color-scheme="slate"], [data-md-color-scheme="default"] {
  --md-text-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --md-code-font: "Fira Code", ui-monospace, Consolas, monospace;

  /* index.html's primary action color is the hayavega gradient (its
     .btn-primary) -- hayavega is also this site's single confident accent,
     so both primary and accent point at it; stamp (sky blue) carries
     links instead, matching index.html's `a{color:var(--stamp)}`. */
  --md-primary-fg-color: var(--hayavega);
  --md-primary-fg-color--light: var(--hayavega-tint);
  --md-primary-fg-color--dark: var(--hayavega-strong);
  --md-primary-bg-color: var(--paper);
  --md-primary-bg-color--light: var(--paper);
  --md-accent-fg-color: var(--hayavega);
  --md-accent-fg-color--transparent: var(--hayavega-tint);
  --md-accent-bg-color: var(--paper);

  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--muted);
  --md-default-fg-color--lighter: color-mix(in srgb, var(--muted) 55%, transparent);
  --md-default-fg-color--lightest: color-mix(in srgb, var(--muted) 20%, transparent);
  --md-default-bg-color: var(--paper);
  --md-default-bg-color--light: color-mix(in srgb, var(--paper) 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in srgb, var(--paper) 40%, transparent);
  --md-default-bg-color--lightest: color-mix(in srgb, var(--paper) 15%, transparent);

  /* Code blocks read as a little terminal, same as index.html's <pre> --
     deliberately not re-derived from the surrounding light/dark page
     tokens above. */
  --md-code-fg-color: var(--code-ink);
  --md-code-bg-color: var(--code-bg);
  --md-code-bg-color--light: color-mix(in srgb, var(--code-bg) 90%, transparent);
  --md-code-bg-color--lighter: color-mix(in srgb, var(--code-bg) 54%, transparent);
  --md-code-hl-keyword-color: var(--code-kw);
  --md-code-hl-string-color: var(--code-str);
  --md-code-hl-number-color: var(--code-str);
  --md-code-hl-function-color: var(--code-fn);
  --md-code-hl-constant-color: var(--code-fn);
  --md-code-hl-special-color: var(--code-fn);
  --md-code-hl-name-color: var(--code-ink);
  --md-code-hl-operator-color: var(--code-mut);
  --md-code-hl-punctuation-color: var(--code-mut);
  --md-code-hl-comment-color: var(--code-mut);
  --md-code-hl-generic-color: var(--code-mut);
  --md-code-hl-variable-color: var(--code-mut);

  --md-typeset-color: var(--ink);
  --md-typeset-a-color: var(--stamp);
  --md-typeset-ins-color: color-mix(in srgb, var(--leaf) 18%, transparent);
  --md-typeset-del-color: color-mix(in srgb, var(--rind) 18%, transparent);
  --md-typeset-table-color: color-mix(in srgb, var(--ink) 14%, transparent);
  --md-typeset-table-color--light: color-mix(in srgb, var(--ink) 6%, transparent);
  --md-typeset-mark-color: var(--hayavega-tint);

  --md-footer-bg-color: var(--surface);
  --md-footer-bg-color--dark: color-mix(in srgb, var(--surface) 85%, var(--ink));
  --md-footer-fg-color: var(--ink);
  --md-footer-fg-color--light: var(--muted);
  --md-footer-fg-color--lighter: color-mix(in srgb, var(--muted) 50%, transparent);
}

body { background: var(--paper); }

/* ---------- header & tabs: a translucent blurred bar over the dark
   background, like a modern dev-tool site's sticky nav, instead of
   Material's default solid-primary-color bar ---------- */
.md-header, .md-tabs {
  background-color: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.md-tabs__link { color: var(--muted); opacity: 1; font-weight: 500; }
.md-tabs__link:hover, .md-tabs__link--active { color: var(--stamp); }

/* ---------- left sidebar nav: flat active-item styling, replacing
   Material's default glowing white box-shadow (a soft blurred fade
   meant to mask scrolled content behind a sticky active link) with a
   plain color change and a left border.

   Material's own rules here are unusually specific (three chained
   classes, e.g. ".md-nav--lifted>.md-nav__list>.md-nav__item--active
   >.md-nav__link"), so matching selectors plus !important is the
   reliable way to override every one of them, including the
   :focus/:hover state mkdocs-material's instant-navigation applies to
   the active link after a page transition (which otherwise jumps to
   the hayavega accent color instead of staying on the stamp-blue active
   color used here). ---------- */
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
.md-nav__item--active > .md-nav__link {
  background: none !important;
  box-shadow: none !important;
  border-left: 2px solid var(--stamp);
  padding-left: calc(0.6rem - 2px);
  margin-left: -2px;
}
.md-nav--primary .md-nav__item--active > .md-nav__link,
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--stamp) !important;
  font-weight: 600;
}
.md-nav--primary .md-nav__item--active > .md-nav__link:focus,
.md-nav--primary .md-nav__item--active > .md-nav__link:hover {
  color: var(--stamp-strong) !important;
}
/* Same glow trick on the sticky "On this page" / section titles --
   keep the sticky pin, drop the blurred fade for a flat edge instead. */
.md-nav--primary .md-nav__title,
.md-nav--secondary .md-nav__title {
  box-shadow: none !important;
  border-bottom: 1px solid var(--line);
}
.md-header__button, .md-header__topic { color: var(--ink); }
.md-search__form { background-color: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.md-search__input::placeholder { color: var(--muted); }

/* Logo mark in the nav -- Material sizes a font-icon logo via its own
   icon system by default; a custom <img> logo needs explicit width and
   height here or it can render at zero size in some header states. */
.md-header__button.md-logo,
.md-header__button.md-logo img {
  height: 1.5rem;
  width: 1.5rem;
  display: inline-flex;
}
.md-header__button.md-logo img {
  object-fit: contain;
}

/* ---------- buttons: a hayavega gradient primary action, rounded like
   the reference sites' CTAs -- no shadow-heavy SaaS look, just a soft
   glow ring on hover ---------- */
.md-button {
  border-radius: 10px;
  border-width: 1px;
  font-weight: 600;
  border-color: var(--line);
  color: var(--ink);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.md-button:hover {
  border-color: var(--stamp);
  color: var(--stamp);
  background: none;
}
.md-button--primary {
  background: linear-gradient(135deg, var(--hayavega), var(--hayavega-strong));
  border-color: transparent;
  color: #1A1206;
}
.md-button--primary:hover {
  box-shadow: 0 0 0 4px var(--hayavega-tint);
  border-color: transparent;
  color: #1A1206;
}

/* ---------- hero: plain dark background with a soft hayavega glow behind
   it, a bold sans headline -- the same restrained treatment as
   index.html's hero ---------- */
.hayavega-hero {
  background: none;
  padding: 0;
  margin: 0 0 2.8rem;
  color: var(--ink);
  box-shadow: none;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  position: relative;
}
.hayavega-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -40px;
  width: 700px;
  height: 420px;
  background: radial-gradient(ellipse at center, var(--glow), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hayavega-hero h1 {
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
  font-weight: 700;
}
.hayavega-hero p {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 56ch;
  margin: 0 0 1.6rem;
}
.hayavega-hero p.hayavega-welcome {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--hayavega-strong);
  max-width: 42ch;
  margin: 0.8rem 0 0;
}
/* The label badge above the hero H1. A full pill shape is the common
   convention for this (reflex.dev, uv, React, Angular all use one),
   but a rounded-rect badge at this design's own --radius keeps the
   same "small bordered label" idea without matching that exact pill
   shape, which (paired with a warm accent) is also the shape the
   user's own portfolio site uses for its buttons. */
.hayavega-eyebrow {
  display: inline-block;
  font-family: "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hayavega-strong);
  background: var(--hayavega-tint);
  padding: 6px 14px;
  border-radius: 10px;
  margin: 0 0 18px;
}
@media screen and (max-width: 44em) {
  .hayavega-hero h1 { font-size: 1.9rem; }
  .hayavega-hero p { font-size: 1rem; }
  .hayavega-hero .md-button {
    display: block;
    text-align: center;
    margin: 0 0 0.6rem;
  }
}

/* ---------- feature grid: flat elevated panels with soft rounded
   corners and a subtle border, like the reference sites' feature
   cards -- no drop shadow, hover brightens the border instead of
   lifting the card. ---------- */
.grid.cards > ul > li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.grid.cards > ul > li:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--hayavega);
}

/* ---------- benchmark stat tiles on the performance page: terminal-dark
   tile, rounded corners, hayavega value -- same accent role hayavega plays in
   index.html's "shipped" status tags, a highlighted callout rather than
   the primary color ---------- */
.hayavega-stats {
  display: grid;
  /* 145px wasn't quite wide enough to fit "template_render req/s" as
     one unbroken label -- Material's base .md-typeset overflow-wrap
     rule then force-split it mid-word ("template_re" / "nder"). */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 0.8rem;
}
.hayavega-stat {
  background: var(--code-bg);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--hayavega);
}
.hayavega-stat .value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--hayavega);
  display: block;
  line-height: 1.2;
}
.hayavega-stat .label {
  font-size: 0.78rem;
  color: var(--code-mut);
  letter-spacing: 0.01em;
}

/* ---------- admonitions: leaf-accented tip/example, same as
   index.html's .callout (leaf border + leaf-strong title) ---------- */
.md-typeset .admonition.tip,
.md-typeset .admonition.example {
  border-color: var(--leaf);
  border-radius: 8px;
  background-color: var(--surface);
}
.md-typeset .tip > .admonition-title,
.md-typeset .example > .admonition-title {
  background-color: var(--leaf-tint);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .example > .admonition-title::before {
  background-color: var(--leaf);
}

/* Code blocks: a touch more breathing room */
.md-typeset pre > code {
  font-size: 0.82rem;
}
.md-typeset .highlight {
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* Tables: dark surface, subtle border */
.md-typeset table:not([class]) {
  border-color: var(--line);
  border-radius: 8px;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border-bottom-color: var(--line);
}
.md-typeset table:not([class]) th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

/* ---------- headings: Space Grotesk throughout, matching index.html's
   bold sans headlines -- no serif, no slab, no vintage register ---------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}
.md-typeset h1 { font-weight: 700; letter-spacing: -0.02em; }
.md-typeset h2 { font-weight: 600; letter-spacing: -0.01em; }
.md-typeset h3 { font-weight: 600; }

/* ---------- more generous vertical rhythm -- index.html's sections run
   72-100px of padding; Material's default article padding is much
   tighter, which feels cramped by comparison. A thin rule divides
   sections, matching the restrained hairline convention of the
   reference sites. ---------- */
.md-content__inner {
  padding-top: 1.6rem;
}
.md-typeset h2 {
  margin-top: 2.2em;
  padding-top: 0.5em;
  border-top: 1px solid var(--line);
}
.md-typeset > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Rules and quotes in the brand palette instead of Material's neutral gray */
.md-typeset hr { border-bottom: 1px solid var(--line); }
.md-typeset blockquote {
  border-left: 3px solid var(--stamp);
  color: var(--muted);
}

/* Inline code: a subtle surface tint instead of Material's flat gray chip */
.md-typeset code:not(pre code) {
  background-color: var(--surface-2);
  color: var(--ink);
  border-radius: 4px;
}

/* ---------- footer "Contact us": paired with its own icon on the
   right side of the footer, instead of a bare icon with only a hover
   tooltip and an unrelated text link sitting apart from it on the
   left. There's exactly one social link in extra.social (LinkedIn),
   so the label is added via ::after rather than templating. ---------- */
.md-social__link {
  width: auto !important;
  height: auto !important;
  line-height: 1.6rem;
  text-align: left !important;
  padding: 0 2px;
  white-space: nowrap;
}
.md-social__link svg {
  vertical-align: middle;
}
.md-social__link::after {
  content: "Contact us";
  display: inline-block;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  vertical-align: middle;
  color: var(--md-footer-fg-color--light);
  white-space: nowrap;
}
.md-social__link:hover::after {
  color: var(--hayavega-strong);
}

/* Footer bottom row: copyright on the left, "Contact us" on the right,
   both inside the same .md-footer-meta__inner div (Material's actual
   classes -- .md-footer-copyright/.md-footer-social, used by five
   prior commits, don't exist in its markup and matched nothing).
   The "Built in India" tagline sits on its own centered line below
   that row, added as generated content on the container itself so it
   spans the full width rather than being pinned to the left column
   alongside the copyright text. */
.md-footer-meta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.md-footer-meta__inner::after {
  content: "Built in India (Bharat), made for the world.";
  flex-basis: 100%;
  text-align: center;
  margin-top: 0.6rem;
  color: var(--md-footer-fg-color--lighter);
  font-size: 0.7rem;
}