/* Teledyne Vision Solutions brand colors */
:root {
  --md-primary-fg-color: #0076C0;
  --md-primary-fg-color--light: #4da3d9;
  --md-primary-fg-color--dark: #005a94;
  --md-accent-fg-color: #0076C0;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0076C0;
  --md-primary-fg-color--light: #4da3d9;
  --md-primary-fg-color--dark: #005a94;
  --md-accent-fg-color: #4da3d9;
}

/* Vertically center the icon and title text in grid card headings.
   The icon is 1.5em (.lg) while the bold text is ~1em, so vertical-align
   tricks on inline elements never look right.  Flexbox align-items:center
   on the containing <p> is the robust solution. */
.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

/* API card grid styling */
.grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 1rem;
}

.grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Footer branding */
.md-footer-meta {
  background: linear-gradient(90deg, rgb(0,0,0) 10%, rgb(12,53,56) 100%);
}

/* ── Version selector (announce bar) ───────────────────────────── */

/* Hide the entire announce banner while the selector has no data yet.
   Once JS populates the select and removes the inline display:none,
   the :has() selector stops matching and the banner becomes visible. */
[data-md-component="announce"]:has(#version-selector[style*="display:none"]) {
  display: none;
}

#version-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.version-selector__label {
  font-weight: 600;
  color: inherit;
}

.version-selector__select {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0.2rem;
  color: inherit;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  font-size: inherit;
  opacity: 0.9;
}

.version-selector__select:hover {
  opacity: 1;
}

.version-selector__select option {
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
}

/* ── Sidebar layout fix ─────────────────────────────────────────── */

/* Ensure the main area always fills at least the full viewport height.
   This prevents the left navigation sidebar from visually overflowing
   the page when the right-hand content is shorter than the expanded
   navigation tree. */
.md-main {
  min-height: calc(100vh - 2.4rem);
}

/* ── Header title — keep site name static on scroll ────────────── */

/* Material stacks two .md-header__topic spans and JS toggles which
   one is "active" (visible) as you scroll past the page H1.  Locking
   the first span (site name) always-visible and the second (page
   title) always-hidden prevents the header title from changing. */
.md-header__topic:first-child {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.md-header__topic:last-child {
  opacity: 0 !important;
  transform: translateY(100%) !important;
  pointer-events: none;
}