/* ehr2rl theme adjustments for Furo.
 *
 * Colors are set as Furo variables in conf.py (light_css_variables and
 * dark_css_variables) so both appearances come from one definition. This file
 * only adds layout, focus, and responsive rules, and never overrides Furo's
 * navigation behavior.
 */

/* Visible keyboard focus everywhere, using the theme accent. */
:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* Code scrolls inside its own box, so the page itself never overflows. */
.highlight pre {
  overflow-x: auto;
}

/* Landing page: two equally weighted audience routes. Scoped to
 * [role="main"] to match the specificity of Furo's .container reset. */
[role="main"] .role-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

[role="main"] .role-link {
  border: 1px solid var(--color-background-border);
  border-left: 4px solid var(--color-brand-primary);
  border-radius: 0.25rem;
  padding: 0.25rem 1rem 0.5rem;
  background: var(--color-background-secondary);
}

[role="main"] .role-link h3 {
  margin-top: 0.75rem;
}

[role="main"] .role-link ul {
  padding-left: 1.1rem;
}

@media (max-width: 760px) {
  [role="main"] .role-links {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 320px) {
  [role="main"] .role-link {
    padding: 0.25rem 0.75rem 0.5rem;
  }

  .highlight pre {
    font-size: 0.8em;
  }
}

/* -------------------------------------------------------------------------
 * Motion. Short, subtle transitions; all of them are switched off for readers
 * who ask for reduced motion (see the end of this file).
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@keyframes ehr2rl-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes ehr2rl-fade {
  from {
    opacity: 0;
  }
}

/* Content fades in on every page view, including in-place navigation (site.js
 * inserts new nodes, which restarts the animation). */
.article-container,
.related-pages {
  animation: ehr2rl-enter 220ms ease-out backwards;
}

.toc-drawer .toc-tree {
  animation: ehr2rl-fade 220ms ease-out backwards;
}

/* While the next page loads, dim the current one rather than blanking it. */
.main.is-leaving .article-container,
.main.is-leaving .related-pages,
.main.is-leaving .toc-tree {
  opacity: 0.4;
  transition: opacity 90ms ease-out;
}

a,
.sidebar-tree .reference,
.toc-tree .reference {
  transition:
    color 150ms ease,
    text-decoration-color 150ms ease,
    background-color 150ms ease;
}

.sidebar-search {
  transition: background-color 150ms ease;
}

[role="main"] .role-link {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

[role="main"] .role-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
}

/* Highlighted API signatures ease in on hover. */
dl.py > dt {
  transition: background-color 150ms ease;
}

/* -------------------------------------------------------------------------
 * "On this page": site.js marks the section being read with .toc-current.
 * Furo's own tracker (.scroll-current) only follows the first page loaded,
 * so its marker is neutralized.
 * ---------------------------------------------------------------------- */

.toc-tree li.scroll-current > .reference {
  color: var(--color-toc-item-text);
  font-weight: inherit;
}

.toc-tree li.toc-current > .reference {
  color: var(--color-toc-item-text--active);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Live search results under the sidebar search box.
 * ---------------------------------------------------------------------- */

/* Keep the results above positioned content in the article. */
.sidebar-sticky {
  z-index: 20;
}

.live-search {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.375rem);
  left: var(--sidebar-item-spacing-horizontal);
  width: min(26rem, calc(100vw - 2 * var(--sidebar-item-spacing-horizontal)));
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--color-background-border);
  border-radius: 0.5rem;
  background: var(--color-background-primary);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 140ms ease-out,
    transform 140ms ease-out;
}

.live-search.is-open {
  opacity: 1;
  transform: none;
}

.live-search-status:empty {
  display: none;
}

.live-search-status {
  margin: 0;
  padding: 0.5rem 0.625rem;
  color: var(--color-foreground-muted);
  font-size: var(--font-size--small);
}

.live-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.live-search-results a {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.45rem 0.625rem;
  border-radius: 0.375rem;
  color: var(--color-foreground-primary);
  text-decoration: none;
}

.live-search-results a:hover,
.live-search-results a[aria-selected="true"] {
  background: var(--color-background-hover);
}

.live-search-title {
  font-size: var(--font-size--small);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.live-search-meta {
  color: var(--color-foreground-muted);
  font-size: var(--font-size--small--2);
}

.live-search-results a.live-search-all {
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-background-border);
  border-radius: 0 0 0.375rem 0.375rem;
  color: var(--color-brand-content);
  font-size: var(--font-size--small);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}