/* FinHub brand — Mintlify-aligned Tangly chrome */
:root {
  --fh-logo-height: 40px;
  --fh-sidebar-active-bg: rgba(184, 18, 213, 0.1);
  --fh-content-max: 48rem;
  --fh-prose-leading: 1.75;
}

/* Top nav / sidebar brand image.
 * Do not set display on all logo imgs — Tangly renders light+dark <img> twins
 * with Tailwind `hidden` / `dark:hidden`; forcing display:block shows both. */
header img[src*="logo"],
nav img[src*="logo"],
aside img[src*="logo"],
a[href="/"] > img,
a[href="/dev-portal"] > img,
a[href="/dev-portal/"] > img,
a[href*="/dev-portal"] > img {
  height: var(--fh-logo-height) !important;
  width: auto !important;
  max-height: var(--fh-logo-height) !important;
  max-width: 140px;
  object-fit: contain;
}

/*
 * Tangly emits two logo <img>s (light + dark). Mixed class/media dark-mode
 * can leave both visible — keep exactly one twin.
 */
html:not(.dark) a[href="/"] > img.hidden,
html:not(.dark) a[href="/dev-portal"] > img.hidden,
html:not(.dark) a[href="/dev-portal/"] > img.hidden,
html:not(.dark) a[href*="/dev-portal"] > img.hidden,
html:not(.dark) header a > img.hidden,
html:not(.dark) nav a > img.hidden {
  display: none !important;
}

html.dark a[href="/"] > img.block,
html.dark a[href="/dev-portal"] > img.block,
html.dark a[href="/dev-portal/"] > img.block,
html.dark a[href*="/dev-portal"] > img.block,
html.dark header a > img.block,
html.dark nav a > img.block {
  display: none !important;
}

html.dark a[href="/"] > img.hidden,
html.dark a[href="/dev-portal"] > img.hidden,
html.dark a[href="/dev-portal/"] > img.hidden,
html.dark a[href*="/dev-portal"] > img.hidden,
html.dark header a > img.hidden,
html.dark nav a > img.hidden {
  display: block !important;
}

/* Topnav height closer to Mintlify chrome */
header.tangly-topnav {
  min-height: 3.5rem;
}

/* Sidebar active item — soft purple wash like Mintlify */
aside nav a[aria-current="page"],
aside nav a[data-active="true"],
aside nav [data-active="true"] > a {
  background: var(--fh-sidebar-active-bg) !important;
  border-radius: 0.5rem;
}

/* Content column density */
.prose-tang {
  max-width: var(--fh-content-max);
  line-height: var(--fh-prose-leading);
}

.prose-tang > :first-child {
  margin-top: 0;
}

/*
 * Tangly v0.2.x renders frontmatter title in <header class="mb-8"> and again
 * as the first prose <h1> — hide the duplicate.
 */
header.mb-8 + .prose-tang > h1:first-child {
  display: none !important;
}

@media (max-width: 640px) {
  :root {
    --fh-logo-height: 32px;
  }
}