/* Fonts to match the Digital World JS SDK's Starlight doc site
   (sdks/finance/digital-world-js-sdk/astro.config.mjs's `fonts` block). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inconsolata:wght@400;700&display=swap");

/* Full-width top bar (see _templates/page.html), matching the Starlight
   header on the JS SDK's doc site: brand left, search center, theme toggle
   right. Only shown at Furo's own desktop breakpoint (63em) where the
   sidebar is a persistent column — below that, Furo's stock mobile-header
   already provides the same three elements. */
.dw-topbar {
  display: none;
}

@media (min-width: 63em) {
  .dw-topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--header-height, 3.5rem);
    padding: 0 1.5rem;
    background-color: var(--color-header-background);
    border-bottom: 1px solid var(--color-header-border);
    color: var(--color-header-text);
    position: sticky;
    top: 0;
    z-index: 40;
  }

  /* The top bar now owns brand + search, so hide Furo's sidebar copies. */
  .sidebar-brand,
  .sidebar-search-container {
    display: none;
  }

  /* Avoid a redundant second toggle floating over the article content. */
  .theme-toggle-content {
    display: none !important;
  }

  /* Furo centers the whole 3-column layout as a unit on wide viewports by
     giving the sidebar a `calc(50% - 26em)`-ish width with its content
     right-justified inside that box — on a wide monitor that leaves dead
     space before the sidebar visually starts. Pin it to a fixed width and
     left-justify its content instead, so it sits flush against the true
     left edge of the viewport (matching the JS SDK's Starlight layout)
     regardless of viewport width. */
  .sidebar-drawer {
    width: 18em !important;
    justify-content: flex-start !important;
  }

  /* `.main` (sidebar's sibling, everything to its right) was implicitly
     "centered" only because the old variable sidebar width absorbed
     exactly enough space to make the flush-left `.content` column land in
     the visual center. Now that the sidebar is a fixed width, center
     `.content` explicitly within the remaining space instead — the
     `.toc-drawer` stays pinned to the far right independently since it's
     positioned fixed, not part of this flex flow. */
  .main {
    justify-content: center;
  }
}

.dw-topbar-brand-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.dw-topbar-hub-link {
  font-size: 0.75rem;
  color: var(--color-foreground-secondary);
  text-decoration: none;
}

.dw-topbar-hub-link:hover {
  color: var(--color-foreground-primary);
}

.dw-topbar-brand {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-header-text);
  text-decoration: none;
  white-space: nowrap;
}

.dw-topbar-search {
  flex: 1;
  display: flex;
  justify-content: center;
}

.dw-topbar-search input {
  width: 100%;
  max-width: 32rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-sidebar-search-border);
  background: var(--color-sidebar-search-background);
  color: var(--color-sidebar-search-foreground);
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}

.dw-topbar-search input:focus {
  background: var(--color-sidebar-search-background--focus);
  outline: none;
}

.dw-topbar-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.dw-topbar-toggle .theme-toggle {
  color: var(--color-header-text);
}

.dw-topbar-toggle-label {
  font-size: 0.85rem;
  color: var(--color-header-text);
}

/* Homepage badge row (PyPI version, supported Python versions, license) —
   same `.badges` class/layout the JS SDK's overrides.css uses for its own
   badge row, synced from its README. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-block: 1rem;
}

.badges img {
  vertical-align: middle;
}