/* ==========================================================================
   Floating "Back to home" button — shared by every version page.

   Usage (inside versionXX/index.html <head>):
     <link rel="stylesheet" href="../assets/shared/home-button.css">
     <script src="../assets/shared/home-button.js" defer></script>

   Pages can keep content clear of the button with the custom property
   --home-fab-clearance (the space the button occupies from the viewport
   edge), e.g.  .footer-bottom { padding-right: var(--home-fab-clearance); }
   ========================================================================== */

:root {
  --home-fab-size: 56px;
  --home-fab-offset: 24px;
  --home-fab-clearance: calc(var(--home-fab-size) + var(--home-fab-offset) + 8px);
  --home-fab-bg: #FFFFFF;        /* White — the blue building mark sits on it */
  --home-fab-edge-hover: #1E2228; /* Graphite outline on hover */
  --home-fab-fg: #1E2228;        /* tooltip background (Graphite) */
  --home-fab-ring: #1C479E;      /* focus ring (Brand Blue) */
  --home-fab-edge: #C9CDD4;      /* Light Gray outline */
}

.home-fab {
  position: fixed;
  right: calc(var(--home-fab-offset) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--home-fab-offset) + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;           /* above headers, menus and modals */
  width: var(--home-fab-size);
  height: var(--home-fab-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--home-fab-bg);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(30, 34, 40, .55), 0 0 0 2px var(--home-fab-edge);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.home-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(30, 34, 40, .6), 0 0 0 3px var(--home-fab-edge-hover);
}

.home-fab:active { transform: translateY(0); }

/* Two-tone ring stays visible on both light and dark backgrounds. */
.home-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--home-fab-ring);
}

/* Building mark from assets/logos/favicon.svg (wide, ~2:1), centred in the circle. */
.home-fab__icon {
  width: 64%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Tooltip */
.home-fab__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(6px, -50%);
  padding: 7px 12px;
  border-radius: 2px;
  background: var(--home-fab-fg);
  border: 1px solid var(--home-fab-edge);
  box-shadow: 0 8px 18px -8px rgba(30, 34, 40, .5);
  color: #FFFFFF;
  font: 600 13px/1.2 'DM Sans', system-ui, sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}

.home-fab:hover .home-fab__tip,
.home-fab:focus-visible .home-fab__tip {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Phones: smaller and tighter to the corner so it covers less content. */
@media (max-width: 768px) {
  :root {
    --home-fab-size: 48px;
    --home-fab-offset: 16px;
  }
}

/* No hover tooltips on touch screens. */
@media (hover: none) {
  .home-fab__tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-fab,
  .home-fab__tip { transition: none; }
  .home-fab:hover { transform: none; }
}

@media print {
  .home-fab { display: none; }
}