/* Shared component behavior uses color tokens defined by the consumer site. */

.wy-menu-vertical li.toctree-l1 > a {
  color: var(--cf-sidebar-text) !important;
  background: var(--cf-sidebar) !important;
  border-radius: 8px;
}

.wy-menu-vertical li.toctree-l1 > a:hover {
  background: var(--cf-sidebar-hover-bg) !important;
}

.wy-menu-vertical li.toctree-l1.current > a,
.wy-menu-vertical li.toctree-l1.current > a:visited,
.wy-menu-vertical li.toctree-l1.current > a:hover,
.wy-menu-vertical li.toctree-l1 > a:active {
  color: var(--cf-sidebar-active-link) !important;
  background: var(--cf-sidebar) !important;
}

.wy-menu-vertical li.toctree-l1 > a:focus-visible {
  outline: 2px solid var(--cf-sidebar-text) !important;
  outline-offset: -2px;
}

.wy-menu-vertical li.toctree-l1.current > .cf-sidebar-section-toggle:hover {
  background: transparent !important;
}

/* Use the existing icon silhouettes with the exact label color. */
.wy-menu-vertical li.toctree-l1 > a[data-cf-icon]::before,
.wy-menu-vertical li.toctree-l1.current > a[data-cf-icon]::before {
  background-image: none !important;
  background-color: currentColor !important;
  -webkit-mask: var(--cf-sidebar-section-icon) no-repeat center / contain;
  mask: var(--cf-sidebar-section-icon) no-repeat center / contain;
}

/* Match both search fields and outrank the inherited RTD input rules. */
.cf-topbar__search input[type="text"],
.cf-search-overlay__form input.cf-search-overlay__input {
  border-radius: 8px !important;
}

/* Products and services: spacing belongs to the title and individual tabs. */
.cf-home-panel {
  padding: 0;
}

.cf-home-panel__header {
  padding: 16px 24px;
}

.cf-home-panel__header h2 {
  margin: 0;
}

.cf-home-tabs {
  margin: 0;
  padding: 0;
  gap: 0;
}

.cf-home-tab {
  margin: 0;
  padding: 4px 24px 12px;
}

/* Reserve the primary orange link style for Read Documentation. */
.cf-service-card a.cf-card-link:not(.cf-card-link--doc) {
  color: var(--cf-card-secondary-link, #0B101E) !important;
}

/* Separate page breadcrumbs from the section or article title. */
.cf-page-shell--article .cf-breadcrumbs-wrap {
  margin-bottom: 24px;
}