/* Inline term highlight, e.g. <mark class="search-match">industrie</mark>.
 * Colours are themeable via CSS custom properties (no :root defaults here, so a
 * project's :root value always wins regardless of stylesheet order). */
.search-match {
  background-color: var(--search-highlight-bg, #fff3a3);
  color: var(--search-highlight-fg, inherit);
  padding: 0 2px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Transient flash on the element a search result deep-links to. */
.search-target-highlight {
  animation: search-target-flash 2.4s ease-out 1;
  scroll-margin-top: 6rem; /* sticky header buffer */
}

@keyframes search-target-flash {
  0% {
    background-color: var(--search-target-flash, rgba(255, 235, 59, 0.45));
    box-shadow: 0 0 0 10px var(--search-target-flash, rgba(255, 235, 59, 0.45));
  }
  40% {
    background-color: var(--search-target-flash, rgba(255, 235, 59, 0.45));
    box-shadow: 0 0 0 10px var(--search-target-flash, rgba(255, 235, 59, 0.45));
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-target-highlight {
    animation: none;
    outline: 3px solid var(--search-highlight-bg, #fff3a3);
    outline-offset: 4px;
  }
}