/* 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 announce banner until JS explicitly reveals it (adds
   .md-announce-ready once the version selector or offline banner has
   content to show). A class toggle is used instead of :has() so browsers
   without :has() support don't get stuck showing/hiding it incorrectly. */
[data-md-component="announce"] {
  display: none;
}

[data-md-component="announce"].md-announce-ready {
  display: block;
}

#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);
}

#download-docs-link {
  color: inherit;
  text-decoration: underline;
  font-size: 0.75rem;
}

/* ── Offline banner (announce bar) ─────────────────────────────── */

.offline-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
}

.offline-banner a {
  color: inherit;
  text-decoration: underline;
}

/* ── 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;
}