span.title {
  font-weight: bold;
}

span.em {
  font-weight: bold;
}

.separator {
  border-bottom: 1px solid #e3e8ee;
}

a.field {
  font-weight: 600;
  /* color: #3c4257; */
  font-size: .8rem;
}

span.parent-field {
  font-weight: 600;
  color: #5f6368;
  font-size: .85em;
}

span.type {
  color: #5f6368;
  font-size: .7rem;
  margin-right: 4px;
}

span.version {
  color: #5f6368;
  font-size: .7rem;
  float: right;
}

span.faint {
  color: #5f6368;
}

/* Improve visibility and tactility of card links */
.card {
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
  display: block;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.card:active {
  transform: translateY(0) scale(0.98);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.card:focus-visible {
  outline: 2px solid #007acc;
  outline-offset: 4px;
  border-radius: 8px;
}

.workflow-teaser {
  margin: 0 0 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.12));
  background: var(--md-default-bg-color--light, #f7f7f7);
}

.workflow-teaser--hero {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
}

.workflow-teaser video {
  border-radius: inherit;
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  background: #111;
}

.workflow-teaser video:focus-visible {
  outline: 2px solid #007acc;
  outline-offset: -2px;
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .md-button,
  .mdx-users__testimonial img,
  .black-and-white,
  .card,
  .card:hover,
  .card:focus-visible,
  .card:active,
  .md-banner a[rel="me noopener noreferrer"] {
    transition: none !important;
    transform: none !important;
  }
}

/* Fix accessibility contrast in banner and footer */
.md-banner a[rel="me noopener noreferrer"],
.md-banner a[rel="me noopener noreferrer"] > strong {
  color: #ffffff !important;
}

.md-copyright {
  color: rgba(255, 255, 255, 0.7) !important;
}

.md-copyright a {
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 2px !important;
  transition: opacity 0.2s ease-in-out, outline 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
  border-radius: 4px;
}

.md-copyright a:hover,
.md-copyright a:focus-visible {
  opacity: 0.8;
  text-decoration-color: #ffffff !important;
}

.md-copyright a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.md-banner a[rel="me noopener noreferrer"] {
  transition: opacity 0.2s ease-in-out, outline 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
  border-radius: 4px;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 2px !important;
}

.md-banner a[rel="me noopener noreferrer"]:hover,
.md-banner a[rel="me noopener noreferrer"]:focus-visible {
  opacity: 0.8;
  text-decoration-color: #ffffff !important;
}

.md-banner a[rel="me noopener noreferrer"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* UX/A11y Standard: Inline links within text blocks must be distinguishable from surrounding text */
.md-typeset a:not(.md-button):not(.card):not(.headerlink):not(.md-content__button) {
  text-decoration: underline;
  text-decoration-color: var(--md-accent-fg-color-transparent, rgba(64, 81, 181, 0.3));
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease-in-out;
}

.md-typeset a:not(.md-button):not(.card):not(.headerlink):not(.md-content__button):hover,
.md-typeset a:not(.md-button):not(.card):not(.headerlink):not(.md-content__button):focus-visible {
  text-decoration-color: currentColor;
}

.md-typeset a:not(.md-button):not(.card):not(.headerlink):focus-visible {
  outline: 2px solid #007acc;
  outline-offset: 4px;
  border-radius: 2px;
}

.workflow-teaser video:focus-visible {
  outline: 2px solid #007acc;
  outline-offset: -2px;
}