/* Virtual Sutra AI — custom MkDocs styles */

:root {
  /* Brand accent, matched to landing/app/globals.css (--accent / --accent-dark)
     rather than mkdocs-material's canned "deep-orange" swatch, so the public
     docs site and the marketing site read as the same product. */
  --md-primary-fg-color: #b45309;
  --md-accent-fg-color: #f5a524;

  /* Hero-only surface tokens. Deliberately static (not md-default-bg-color /
     md-default-fg-color, which flip between light/slate schemes) — the hero
     mirrors landing's always-dark section, independent of the reader's
     light/dark toggle. --vs-accent-dark reuses the same value as
     --md-accent-fg-color above (they happen to coincide); kept as a distinct
     token because the hero's accent must stay legible on a fixed dark
     background regardless of which scheme is active. */
  --vs-dark: #0b1220;
  --vs-dark-border: rgba(255, 255, 255, 0.09);
  --vs-dark-text: #e6eaf2;
  --vs-dark-text-2: #9aa7bd;
}

/* Tighten table padding slightly */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.5em 0.75em;
}

/* Subtle monospace font for inline code */
.md-typeset code {
  font-size: 0.875em;
}

/* ── Landing-style hero (home page only — see overrides/main.html) ──────── */
.vs-hero {
  background: var(--vs-dark);
  color: var(--vs-dark-text);
  border-bottom: 1px solid var(--vs-dark-border);
  padding: 72px 1.2rem 88px;
  text-align: center;
}

.vs-hero__inner {
  max-width: 46rem;
  margin: 0 auto;
}

.vs-hero__eyebrow {
  margin: 0 0 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
}

.vs-hero__title {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.vs-hero__lead {
  margin: 0 auto 32px;
  max-width: 38rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--vs-dark-text-2);
}

.vs-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Shared button mechanics for both the always-dark homepage hero CTAs
 * (.vs-hero__btn) and the theme-aware header buttons (.vs-header-links__btn
 * below) — only size and color differ between the two. */
.vs-hero__btn,
.vs-header-links__btn {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.vs-hero__btn {
  height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.vs-hero__btn--primary {
  background: #fff;
  color: var(--vs-dark);
}

.vs-hero__btn--primary:hover {
  opacity: 0.9;
}

.vs-hero__btn--secondary {
  background: transparent;
  color: var(--vs-dark-text);
  border-color: var(--vs-dark-border);
}

.vs-hero__btn--secondary:hover {
  border-color: var(--vs-dark-text-2);
}

/* ---------------------------------------------------------------------------
 * Tier / scope availability callouts (see reference/tier-scope-matrix.md)
 *
 * These reuse the `admonition` block from the `admonition` markdown extension
 * with a custom class instead of a built-in type, so they render as ordinary
 * MkDocs Material admonitions everywhere except the accent colour and icon
 * below. Written as `!!! tier-pro "Availability"` / `!!! tier-community
 * "Availability"` / `!!! tier-enterprise "Availability"` / `!!! tier-ungated
 * "Availability"` at the top of a page.
 * ------------------------------------------------------------------------ */
.md-typeset .admonition.tier-community,
.md-typeset details.tier-community {
  border-color: #2e7d32;
}
.md-typeset .tier-community > .admonition-title,
.md-typeset .tier-community > summary {
  background-color: #2e7d3212;
}
.md-typeset .tier-community > .admonition-title::before,
.md-typeset .tier-community > summary::before {
  background-color: #2e7d32;
  -webkit-mask-image: var(--md-admonition-icon--note);
  mask-image: var(--md-admonition-icon--note);
}

.md-typeset .admonition.tier-pro,
.md-typeset details.tier-pro {
  border-color: #536DFE;
}
.md-typeset .tier-pro > .admonition-title,
.md-typeset .tier-pro > summary {
  background-color: #536dfe14;
}
.md-typeset .tier-pro > .admonition-title::before,
.md-typeset .tier-pro > summary::before {
  background-color: #536DFE;
  -webkit-mask-image: var(--md-admonition-icon--note);
  mask-image: var(--md-admonition-icon--note);
}

.md-typeset .admonition.tier-enterprise,
.md-typeset details.tier-enterprise {
  border-color: #6A1B9A;
}
.md-typeset .tier-enterprise > .admonition-title,
.md-typeset .tier-enterprise > summary {
  background-color: #6a1b9a14;
}
.md-typeset .tier-enterprise > .admonition-title::before,
.md-typeset .tier-enterprise > summary::before {
  background-color: #6A1B9A;
  -webkit-mask-image: var(--md-admonition-icon--note);
  mask-image: var(--md-admonition-icon--note);
}

.md-typeset .admonition.tier-ungated,
.md-typeset details.tier-ungated {
  border-color: #9e9e9e;
}
.md-typeset .tier-ungated > .admonition-title,
.md-typeset .tier-ungated > summary {
  background-color: #9e9e9e14;
}
.md-typeset .tier-ungated > .admonition-title::before,
.md-typeset .tier-ungated > summary::before {
  background-color: #757575;
  -webkit-mask-image: var(--md-admonition-icon--warning);
  mask-image: var(--md-admonition-icon--warning);
}

/* ---------------------------------------------------------------------------
 * Custom sidebar search (see overrides/partials/nav.html + assets/vs-search.js)
 *
 * Independent of Material's own search component, which is confirmed unable
 * to relocate out of the header (its JS never initializes once moved — see
 * docs#67 / docs#77). This is a self-contained implementation, styled to
 * match the surrounding sidebar/nav rather than Material's own search
 * dialog.
 * ------------------------------------------------------------------------ */
.vs-search {
  position: relative;
  margin: 0.4rem 0.6rem 0.8rem;
}

.vs-search__box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.2rem;
  padding: 0 0.6rem;
  border-radius: 0.2rem;
  background-color: var(--md-default-fg-color--lightest);
  transition: background-color 0.15s, box-shadow 0.15s;
}

.vs-search__box:focus-within {
  background-color: var(--md-default-bg-color);
  box-shadow: 0 0 0 2px var(--md-accent-fg-color);
}

.vs-search__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--md-default-fg-color--light);
}

.vs-search__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.vs-search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--md-default-fg-color);
  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1.4;
  outline: none;
}

.vs-search__input::placeholder {
  color: var(--md-default-fg-color--light);
}

.vs-search__clear {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
}

.vs-search__clear:hover {
  background-color: var(--md-default-fg-color--lightest);
}

.vs-search__clear svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.vs-search__results {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  box-shadow: var(--md-shadow-z2);
}

.vs-search__list {
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
}

.vs-search__item {
  margin: 0;
}

.vs-search__link {
  display: block;
  padding: 0.4rem 0.7rem;
  border-left: 2px solid transparent;
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.vs-search__link:hover,
.vs-search__link--active {
  background-color: var(--md-default-fg-color--lightest);
  border-left-color: var(--md-accent-fg-color);
}

.vs-search__title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--md-default-fg-color);
}

.vs-search__snippet {
  display: -webkit-box;
  margin-top: 0.1rem;
  overflow: hidden;
  font-size: 0.64rem;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vs-search__title mark,
.vs-search__snippet mark {
  background: transparent;
  color: var(--md-accent-fg-color);
  font-weight: 700;
}

.vs-search__empty {
  padding: 0.6rem 0.7rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

/* Prevent iOS Safari's auto-zoom-on-focus below 16px inputs on small
   screens, where the sidebar search also has to work inside the off-canvas
   drawer (see docs#77 mobile verification). */
@media screen and (max-width: 76.1875em) {
  .vs-search__input {
    font-size: 16px;
  }
}

/* ── "Related" panel in the right-hand TOC rail (injected by assets/vs-chrome.js) ── */
.md-nav--related {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-nav--related > .md-nav__title {
  padding: 0 0.6rem;
}

/* ── Product Site / Console header buttons (injected by assets/vs-chrome.js)
 * — docs issue #68. Sit directly in the header bar itself, before the
 * palette toggle, using --md-primary-* (not --md-default-*) since the
 * header's own background is --md-primary-fg-color (the site's accent
 * color) with --md-primary-bg-color as its contrasting text/icon color —
 * the same pair every other header control (logo, title, toggle icons)
 * already uses.
 *
 * Deliberately NOT hidden below any breakpoint (unlike .md-header__source,
 * a nice-to-have repo link Material itself hides under 60em) — these are
 * primary nav destinations the nav: list no longer carries once
 * navigation.tabs is removed (docs#66), so this header placement is their
 * only path on every viewport, including mobile. flex-wrap lets them drop
 * to a second line under the title on very narrow screens instead of
 * disappearing. */
.vs-header-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.6rem;
}

.vs-header-links__btn {
  height: 1.8rem;
  padding: 0 0.8rem;
  border-radius: 0.2rem;
  font-size: 0.65rem;
  white-space: nowrap;
}

.vs-header-links__btn--primary {
  background: var(--md-primary-bg-color);
  color: var(--md-primary-fg-color);
}

.vs-header-links__btn--primary:hover {
  opacity: 0.85;
}

.vs-header-links__btn--secondary {
  background: transparent;
  color: var(--md-primary-bg-color);
  border-color: var(--md-primary-bg-color--light);
}

.vs-header-links__btn--secondary:hover {
  border-color: var(--md-primary-bg-color);
}

/* ---------------------------------------------------------------------------
 * Hide Material's header search label (docs#76)
 *
 * The search DIALOG is gone from the DOM: overrides/partials/search.html is an
 * empty override, which is what keeps Material's search runtime from loading
 * (it otherwise fetches search_index.json and spins up a lunr worker on every
 * page to service a hidden dialog). A zero-byte override cannot drift out of
 * sync with upstream, so it does not reintroduce the problem docs#76 is about.
 *
 * The LABEL still comes from stock header.html and is hidden here rather than
 * by script, so it never paints.
 *
 * The `material/search` plugin stays ENABLED - it builds the search_index.json
 * that assets/vs-chrome.js's sibling, assets/vs-search.js, fetches lazily for
 * the sidebar box (docs#67 / docs#77).
 * --------------------------------------------------------------------------- */
.md-header [for="__search"] {
  display: none !important;
}

/* The <noscript> fallback for the header buttons (docs#76). It renders AFTER the
 * header element, because a `header` block override can only append - which is
 * the whole reason assets/vs-chrome.js exists. Style it as a thin bar so a
 * non-JS visitor still has the one path to the product site and the console. */
.vs-header-links--noscript {
  justify-content: flex-end;
  margin: 0;
  padding: 0.4rem 0.8rem;
  background: var(--md-primary-fg-color);
}