/*
  Site customisations for XS4 Face docs. Loaded automatically by the theme's
  custom-header.html partial — it does not need to be referenced anywhere.
*/

/* ---------------------------------------------------------------------------
   Sidebar version indicator

   Rendered by layouts/partials/menu-footer.html. Shows the released tag, or
   "dev" for local builds and pull request previews.
   --------------------------------------------------------------------------- */

.site-version {
  font-size: 0.75rem;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.site-version a {
  text-decoration: none;
}

.site-version a:hover,
.site-version a:focus-visible {
  text-decoration: underline;
}

.site-logo {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Copy page as Markdown

   Rendered by layouts/partials/content-header.html into <header class="headline">
   alongside the page tags. Tags stay left, the control sits right.
   --------------------------------------------------------------------------- */

.headline:has(.copy-page) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.copy-page {
  display: inline-flex;
  align-items: stretch;
  margin-inline-start: auto;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

.copy-page__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.7em;
  border: 1px solid var(--INTERNAL-MAIN-TOPBAR-BORDER-color, rgba(128, 128, 128, 0.35));
  border-radius: 4px;
  background-color: transparent;
  color: var(--INTERNAL-MAIN-TEXT-color, inherit);
  font: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.copy-page__button:hover,
.copy-page__button:focus-visible {
  opacity: 1;
  background-color: var(--INTERNAL-MAIN-BUTTON-HOVER-color, rgba(128, 128, 128, 0.12));
  color: var(--INTERNAL-MAIN-TEXT-color, inherit);
}

.copy-page.is-copied .copy-page__button {
  opacity: 1;
  color: var(--INTERNAL-MAIN-LINK-color, inherit);
}

.copy-page.is-failed .copy-page__button {
  opacity: 1;
}

/* Reserve the widest label so the control does not resize mid-feedback. */
.copy-page__label {
  display: inline-block;
  min-width: 9.5ch;
}

@media screen and (max-width: 48rem) {
  .copy-page__label {
    /* Icons alone on narrow screens; titles still carry the meaning. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media print {
  .copy-page {
    display: none;
  }
}