/*!
 * GuardHound — Global "Back to top" control
 * TASK: GUARDHOUND-GLOBAL-BACK-TO-TOP-V1
 * ---------------------------------------------------------------------------
 * ONE shared implementation for all 9 public language hosts.
 * Pure CSS. No libraries, no CDN, no @import, no external icon font.
 *
 * Namespacing: every selector is prefixed .gh-btt so no existing page rule is
 * touched, matched or overridden. Append-only.
 *
 * Visual language (taken from the live GuardHound tokens, not invented):
 *   surface  warm-white translucent  (#FFFDF9 family, the consent surface)
 *   border   #E3D8CC (--ghc-border)
 *   ink      #3E2E23 (--ghc-ink)
 *   surface2 #F6EFE6 (--ghc-surface-2) — the only hover change
 *   radius   10px (--ghc-radius) — the site's rounded-square, NOT a float ball
 *   z-index  95 — above the page floats (89), below the consent layer & modals
 *
 * The halo is translucent + blurred so the same control keeps contrast on both
 * the white body and the dark editorial sections (STYLE_MATCH_SITE on both).
 * The control also clears the mobile safe area (iOS home indicator / rounded
 * corner) through the optional --gh-btt-safe-bottom custom property.
 */

html {
  /* Notched devices only; resolves to 0px everywhere else. Kept on :root so the
     control's bottom offset can add it without affecting any other element. */
  --gh-btt-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.gh-btt {
  position: fixed;
  /* physical `right`, NOT inset-inline-end: the control is contractually
     bottom-RIGHT, and must not mirror itself on ar.guardhound.net */
  right: var(--gh-btt-right, 30px);
  bottom: var(--gh-btt-bottom, 30px);
  z-index: 95;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  font: inherit;
  /* Arrow ink. A darker step of the same warm-dark family as --ghc-ink, chosen
     so the 2.1px stroke reads clearly on the translucent warm-white surface
     (~9:1). The button BACKGROUND is unchanged. */
  color: var(--gh-btt-ink, #2A1F18);
  background: var(--gh-btt-surface, rgba(255, 253, 249, .9));
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid var(--gh-btt-border, #E3D8CC);
  border-radius: var(--gh-btt-radius, 10px);
  box-shadow: 0 1px 2px rgba(15, 21, 35, .07), 0 4px 14px rgba(15, 21, 35, .07);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* hidden state — never occupies document flow (position: fixed) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s,
              background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gh-btt[data-visible="1"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s,
              background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gh-btt:hover {
  background: var(--gh-btt-surface-hover, rgba(246, 239, 230, .97));
  border-color: var(--gh-btt-border-hover, #D6C7B5);
  box-shadow: 0 2px 4px rgba(15, 21, 35, .09), 0 8px 22px rgba(15, 21, 35, .1);
}

.gh-btt:active {
  transform: translateY(1px) scale(.97);
  box-shadow: 0 1px 2px rgba(15, 21, 35, .1);
}

.gh-btt:focus-visible {
  outline: 2px solid var(--gh-btt-focus, #006BD6);
  outline-offset: 2px;
}

/* The arrow. Declared explicitly — never relying on a UA default or on an
   inherited fill/stroke that another sheet might reset — and sized a touch
   larger than the first pass so it reads at a glance on a 1x display. */
.gh-btt svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: 1;
  visibility: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* optical centring: a chevron's visual mass sits low inside its box */
  margin-top: -1px;
  pointer-events: none;
}

.gh-btt svg path,
.gh-btt svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .gh-btt {
    right: var(--gh-btt-right, 20px);
    bottom: var(--gh-btt-bottom, 20px);
    width: 40px;
    height: 40px;
  }
}

/* Large desktops: pull slightly further into the gutter, as the site does */
@media (min-width: 1600px) {
  .gh-btt { right: var(--gh-btt-right, 32px); }
}

/* Physical-property guard: an RTL document must NOT mirror this control */
html[dir="rtl"] .gh-btt {
  right: var(--gh-btt-right, 30px);
  left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .gh-btt {
    transition: opacity .01ms linear, visibility 0s linear .01ms,
                background-color .01ms linear, border-color .01ms linear, box-shadow .01ms linear;
    transform: none;
  }
  .gh-btt[data-visible="1"] { transform: none; }
  .gh-btt:active { transform: none; }
}