/*
 * synx-theme.css — visual-continuity restyle for the SynxDB docs.
 *
 * Loaded AFTER the upstream custom.css by html_css_files (appended by
 * brand-switch.sh). Cascade wins for every rule we redefine. No
 * !important blanket use; targets known sphinx_rtd_theme selectors.
 *
 * Source of truth for the token values: synxdata.com light tokens
 * defined in src/styles/global.css. Spec:
 * docs/superpowers/specs/2026-05-14-docs-theme-design.md
 */

/* JetBrains Mono for code — replaces upstream's Source Code Pro */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Token override: redefine the upstream custom.css :root vars ---- */
:root {
  --bg-primary:   #FFFFFF;  /* ink-900 light */
  --bg-secondary: #F4F6F8;  /* ink-800 light */
  --bg-tertiary:  #E8ECF0;  /* ink-700 light */
  --text-primary:   #0B0F14;  /* ink-50 light */
  --text-secondary: #303B4A;  /* ink-200 light */
  --text-muted:     #6B7785;  /* ink-400 light */

  /* --accent is the brand accent for content surfaces (inline code, badges, etc).
     --link is the link color. They share a hex today but exist as separate
     tokens so future divergence is one-line — e.g. brand accent could move
     to a non-link role while links stay at the WCAG-tested brown. */
  --accent:       #A8421A;
  --accent-hover: #C25A28;
  --link:         #A8421A;
  --link-hover:   #C25A28;

  --border: #D9DEE5;

  /* Semantic feedback colors (light-mode shades, WCAG AA against light bg) */
  --color-success: #156B43;
  --color-warning: #9B2E20;
}

/* ---- Sidebar / TOC menu — comprehensive override over RTD theme.css + custom.css ----

   We're fighting two upstream stylesheets (the RTD base theme.css and
   the upstream custom-synxdb.css), both of which paint sidebar elements
   with light/blue/grey colors that read badly on our dark sidebar.
   Matching every selector permutation by specificity proved fragile —
   theme.css uses descendant chains down to .toctree-l10. We use
   !important on the four critical sidebar-only properties (background,
   color, border-left, display) to win the cascade unambiguously.
   Scope is limited to .wy-nav-side / .wy-side-nav-search / .wy-menu-vertical;
   the rest of synx-theme.css avoids !important. */

/* 1. Sidebar container + logo area */
.wy-nav-side,
.wy-side-nav-search {
  background: #171D24 !important;       /* ink-700 dark */
}
.wy-side-nav-search .wy-dropdown > a,
.wy-side-nav-search > a {
  color: #E8EAED !important;            /* white-ish — lets the current-item orange be the only orange */
}
.wy-side-nav-search > div.version {
  color: #7B8793 !important;
}

/* 1a. Stack the logo above the product name in the sidebar header.
   Sphinx RTD renders the home link as `<a>TEXT<img class="logo"/></a>`
   (text first, image after). Make the anchor a flex column and give
   the .logo image order:-1 so it appears first visually. */
.wy-side-nav-search > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;              /* breathing room between logo and name */
}
.wy-side-nav-search > a > img.logo {
  order: -1 !important;
  display: block !important;
  max-width: 180px !important;          /* fixed cap — proportionate at any sidebar width */
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* 1b. Give the search input a little top margin so it doesn't feel
   glued to the wordmark + product-name header block. */
.wy-side-nav-search form.wy-form {
  margin-top: 0.75rem !important;
}
/* Hide the Font Awesome home icon that RTD adds via :before on .icon-home.
   The wordmark logo above already serves as the click-home affordance,
   and the small house glyph was rendering on its own line under flex. */
.wy-side-nav-search > a.icon-home::before,
.wy-side-nav-search > a::before {
  display: none !important;
  content: none !important;
}

/* 2. Search input — dark in both default and focus states */
.wy-side-nav-search input[type="text"],
.wy-side-nav-search input[type="text"]:focus {
  background: #232A33 !important;
  background-color: #232A33 !important;
  color: #E8EAED !important;
  border-color: #303B4A !important;
}
.wy-side-nav-search input[type="text"]::placeholder {
  color: #7B8793 !important;
}

/* 3. Sidebar containers, list items, and submenu ULs — all transparent
   so only the .wy-nav-side ink-700 base shows through. */
.wy-menu-vertical,
.wy-menu-vertical li,
.wy-menu-vertical li.current,
.wy-menu-vertical li.toctree-l1,
.wy-menu-vertical li.toctree-l2,
.wy-menu-vertical li.toctree-l3,
.wy-menu-vertical li.toctree-l4,
.wy-menu-vertical li.toctree-l5,
.wy-menu-vertical li.toctree-l1.current,
.wy-menu-vertical li.toctree-l2.current,
.wy-menu-vertical li.toctree-l3.current,
.wy-menu-vertical li.toctree-l4.current,
.wy-menu-vertical li.toctree-l5.current,
.wy-menu-vertical li ul {
  background: transparent !important;
  background-color: transparent !important;
}

/* 4. All menu links — transparent bg, depth-stepped text color.
   Note: .wy-menu-vertical li.current a is intentionally excluded
   from this block; current-item color is handled in section 6 to
   avoid a specificity collision that would flatten depth colors. */
.wy-menu-vertical a,
.wy-menu-vertical li a,
.wy-menu-vertical li.toctree-l5 a,
.wy-menu-vertical li.toctree-l6 a,
.wy-menu-vertical li.toctree-l7 a,
.wy-menu-vertical li.toctree-l8 a,
.wy-menu-vertical li.toctree-l9 a,
.wy-menu-vertical li.toctree-l10 a,
.wy-menu-vertical li ul li a {
  background: transparent !important;
  background-color: transparent !important;
  color: #D2D6DB !important;            /* ink-100 dark — fallback for l5+ */
  border-bottom: none !important;
}

/* 4a. Depth-stepped indentation — non-current anchors.
   RTD's theme.css falls back to a flat 1.618em for all non-current
   depths; we replace that with a predictable 0.75rem step per level.
   Each anchor reserves a 3px transparent left border so default and
   hover states share the same geometry as current items — only the
   border color flips, no text-position wobble. */
.wy-menu-vertical li.toctree-l1 > a {
  padding-left: calc(1.0rem - 3px) !important;
  border-left: 3px solid transparent !important;
  color: #E2E6EB !important;  /* brightest — l1 section headers */
  font-weight: 600 !important;
}
.wy-menu-vertical li.toctree-l2 > a,
.wy-menu-vertical li.toctree-l2 a {
  padding-left: calc(1.75rem - 3px) !important;
  border-left: 3px solid transparent !important;
  color: #C8CDD4 !important;
  font-weight: 400 !important;
}
.wy-menu-vertical li.toctree-l3 > a,
.wy-menu-vertical li.toctree-l3 a {
  padding-left: calc(2.5rem - 3px) !important;
  border-left: 3px solid transparent !important;
  color: #9DA6B0 !important;
  font-weight: 400 !important;
}
.wy-menu-vertical li.toctree-l4 > a,
.wy-menu-vertical li.toctree-l4 a {
  padding-left: calc(3.25rem - 3px) !important;
  border-left: 3px solid transparent !important;
  color: #8A9299 !important;
  font-weight: 400 !important;
}

/* 4b. Font-size floor — prevents RTD's .9em from compounding across
   nested depths. l3 is .9em; l4 nested inside l3 would be .81em (~11px).
   rem breaks the em cascade entirely so both floors at 13px. */
.wy-menu-vertical li.toctree-l3,
.wy-menu-vertical li.toctree-l4,
.wy-menu-vertical li.toctree-l3 a,
.wy-menu-vertical li.toctree-l4 a {
  font-size: 0.8125rem !important;  /* 13px — never compounds */
}

/* 4c. Visual separator between collapsed l1 sections */
.wy-menu-vertical li.toctree-l1 + li.toctree-l1 > a {
  border-top: 1px solid #263040 !important;
}

/* 5. Hover — #3A4450 (Synx ink-500 dark) is ~17 lightness points above
   the current-section bg (#232A33). Visibly distinct even when hovering
   inside a deeply-nested .current chain. Text goes to pure white for a
   second contrast signal. border-left forced to transparent: upstream
   custom.css applies an orange (`var(--accent)`) hover border at
   top-level and a gray (`var(--border)`) hover border on submenu
   items — inconsistent colors at different depths. We suppress both
   so only the current item ever shows the orange left bar. */
.wy-menu-vertical a:hover,
.wy-menu-vertical li a:hover,
.wy-menu-vertical li.toctree-l1 > a:hover,
.wy-menu-vertical li.toctree-l2 a:hover,
.wy-menu-vertical li.toctree-l3 a:hover,
.wy-menu-vertical li.toctree-l4 a:hover,
.wy-menu-vertical li ul li a:hover,
.wy-menu-vertical a:active,
.wy-nav .wy-menu-vertical a:hover {
  background: #3A4450 !important;       /* Synx ink-500 dark — visible against current's #232A33 */
  background-color: #3A4450 !important;
  color: #FFFFFF !important;
  border-left: 3px solid #FFFFFF !important;  /* white left bar — distinct from current's orange */
}

/* 6. Current / active item — dark bg + orange left border. Covers every
   depth and every descendant-current chain RTD's theme.css paints.
   padding-left uses calc(indent - 3px) to compensate for the 3px
   border-left so text aligns with non-current siblings at same depth. */
.wy-menu-vertical li.current > a,
.wy-menu-vertical li.current > a:hover,
.wy-menu-vertical li ul li.current > a,
.wy-menu-vertical li ul li.current > a:hover,
.wy-menu-vertical li.on > a,
.wy-menu-vertical li.on > a:hover {
  background: #232A33 !important;
  background-color: #232A33 !important;
  color: #E8EAED !important;
  border-left: 3px solid #F97A3D !important;
}
.wy-menu-vertical li.toctree-l1.current > a,
.wy-menu-vertical li.toctree-l1.current > a:hover {
  background: #232A33 !important;
  background-color: #232A33 !important;
  color: #E8EAED !important;
  border-left: 3px solid #F97A3D !important;
  padding-left: calc(1.0rem - 3px) !important;
}
.wy-menu-vertical li.toctree-l2.current > a,
.wy-menu-vertical li.toctree-l2.current > a:hover {
  background: #232A33 !important;
  background-color: #232A33 !important;
  color: #E8EAED !important;
  border-left: 3px solid #F97A3D !important;
  padding-left: calc(1.75rem - 3px) !important;
}
.wy-menu-vertical li.toctree-l3.current > a,
.wy-menu-vertical li.toctree-l3.current > a:hover {
  background: #232A33 !important;
  background-color: #232A33 !important;
  color: #E8EAED !important;
  border-left: 3px solid #F97A3D !important;
  padding-left: calc(2.5rem - 3px) !important;
}
.wy-menu-vertical li.toctree-l4.current > a,
.wy-menu-vertical li.toctree-l4.current > a:hover {
  background: #232A33 !important;
  background-color: #232A33 !important;
  color: #E8EAED !important;
  border-left: 3px solid #F97A3D !important;
  padding-left: calc(3.25rem - 3px) !important;
}
.wy-menu-vertical li.toctree-l5.current > a {
  background: #232A33 !important;
  background-color: #232A33 !important;
  color: #E8EAED !important;
  border-left: 3px solid #F97A3D !important;
}

/* 6a. Descendants of a current section are NOT current — they must stay
   transparent so the hover rule (section 5) can paint them on mouse-over.
   Without this, theme.css's `.wy-menu-vertical li.toctree-l2.current
   li.toctree-l3 > a { background: #c9c9c9 }` would paint them light gray,
   and we'd need either a current-bg or transparent override. Transparent
   is correct — these items are inside a current section but are not
   themselves current. */
.wy-menu-vertical li.toctree-l1.current li.toctree-l2 > a:not(.current),
.wy-menu-vertical li.toctree-l1.current li.toctree-l3 > a:not(.current),
.wy-menu-vertical li.toctree-l1.current li.toctree-l4 > a:not(.current),
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a:not(.current),
.wy-menu-vertical li.toctree-l2.current li.toctree-l4 > a:not(.current),
.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a:not(.current),
.wy-menu-vertical li.toctree-l4.current li.toctree-l5 > a:not(.current),
.wy-menu-vertical li.toctree-l5.current li.toctree-l6 > a:not(.current) {
  background: transparent !important;
  background-color: transparent !important;
}
/* And the hover version — selectors at (0,5,3) specificity beat both
   theme.css descendant-grays AND any other rule that targets these. */
.wy-menu-vertical li.toctree-l1.current li.toctree-l2 > a:hover,
.wy-menu-vertical li.toctree-l1.current li.toctree-l3 > a:hover,
.wy-menu-vertical li.toctree-l1.current li.toctree-l4 > a:hover,
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a:hover,
.wy-menu-vertical li.toctree-l2.current li.toctree-l4 > a:hover,
.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a:hover,
.wy-menu-vertical li.toctree-l4.current li.toctree-l5 > a:hover,
.wy-menu-vertical li.toctree-l5.current li.toctree-l6 > a:hover {
  background: #3A4450 !important;
  background-color: #3A4450 !important;
  color: #FFFFFF !important;
  border-left: 3px solid #FFFFFF !important;
}

/* 7a. Hide the "Table of Contents" caption at the top of the sidebar.
   The entire sidebar IS the table of contents — the label is redundant
   and takes vertical space that's better spent on actual menu items. */
.wy-menu-vertical p.caption,
.wy-menu-vertical .caption {
  display: none !important;
}

/* 7b. Hide the '+' toctree-expand indicators. They weren't visible in
   the base custom-synxdb.css implementation either (which set their
   color to near-bg gray) — keep the cleaner look. */
.wy-menu-vertical li button.toctree-expand,
.wy-menu-vertical li.current > a button.toctree-expand,
.wy-menu-vertical li.on a button.toctree-expand,
.wy-menu-vertical li.toctree-l1 button.toctree-expand,
.wy-menu-vertical li.toctree-l2 button.toctree-expand,
.wy-menu-vertical li.toctree-l3 button.toctree-expand,
.wy-menu-vertical li.toctree-l4 button.toctree-expand,
.wy-menu-vertical li.toctree-l5 button.toctree-expand {
  display: none !important;
}

/* ---- Links ---- */
a, a:visited {
  color: var(--link);
}
a:hover {
  color: var(--link-hover);
}

/* ---- Inline code ---- */
code.literal,
.rst-content code.literal,
.rst-content tt.literal {
  background: var(--bg-secondary);
  color: var(--accent);
  border: 1px solid var(--border);
  font-weight: 500;
}

/* ---- Code blocks ---- */
.highlight,
.rst-content pre.literal-block,
.rst-content div[class^="highlight"] pre {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* ---- Admonitions ---- */
.rst-content .admonition.note,
.rst-content .admonition.tip,
.rst-content .admonition.important,
.rst-content .admonition.hint {
  background: var(--bg-secondary);
  border-left: 4px solid var(--color-success);
}
.rst-content .admonition.warning,
.rst-content .admonition.danger,
.rst-content .admonition.attention,
.rst-content .admonition.caution {
  background: var(--bg-secondary);
  border-left: 4px solid var(--color-warning);
}
.rst-content .admonition .admonition-title {
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
}

/* ---- Mono font swap (JetBrains Mono replaces Source Code Pro) ---- */
code,
pre,
.highlight,
kbd,
samp,
tt,
.rst-content code,
.rst-content tt,
.rst-content pre {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}