/* ============================================================
   GLOBAL FLOATING ACTIONS  ·  v1
   Two persistent quick-action links (Facebook, Website) rendered
   ONCE in index.html, outside every .screen -- exactly the same
   "single global fixed element" pattern already proven by
   components/footer/footer.css .sudegy-sig, so it survives every
   showScreen() swap with zero JS and zero per-screen duplication.

   PLACEMENT: fixed to the viewport, right edge. Chosen deliberately
   over a bottom-corner dock because every CTA in this app (.btn-start,
   .q-footer, lead-capture footer) is FULL-WIDTH inside the app column
   -- a bottom-anchored dock would sit either behind or on top of
   whichever CTA the current screen has.

   v5.8: `top` is now a calc() tied to the SAME vw-driven formula as
   .hero-visual's own height (features/landing/landing.css), landing
   the dock inside the image's own lower fade band regardless of
   viewport HEIGHT/aspect ratio. A plain viewport-height percentage
   (the previous approach) drifted onto the headline text on short
   viewports once the hero grew taller and the headline moved up to
   overlap the fade tail (v5.8) -- tying to the same width-based
   formula keeps the two in lockstep. header height + .s0-body's own
   18px top padding + ~82% of the hero-visual height formula lands
   just above where the fade finishes and the headline begins. On
   every OTHER screen (no hero-visual present) this still resolves to
   a sane fixed-ish position in the upper-middle of the viewport,
   clearing every bottom CTA / .sudegy-sig band exactly as the old
   66% value did. */
.global-fab-dock {
  position: fixed;
  top: calc(var(--header-h) + 18px + min(137.76vw, 557.6px));
  transform: translateY(-50%);
  right: max(14px, calc((100vw - 480px) / 2 + 14px));
  z-index: 70; /* above screen content (0-10) and the sticky header (60), below the splash boot overlay (9999) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* dock itself is inert; only the buttons inside are interactive */
}
.global-fab {
  position: relative;
  pointer-events: auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-raised);
  box-shadow: var(--edge-light-strong), 0 0 0 1px var(--panel-border), 0 6px 18px rgba(8,7,5,.45);
  color: var(--gold-bright);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
}
.global-fab svg { width: 20px; height: 20px; }
.global-fab:active { transform: scale(.92); }
@media (pointer: fine) {
  .global-fab:hover {
    transform: translateX(-2px);
    background: var(--panel-raised);
    box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(196,154,74,.45), var(--glow-gold-md), 0 8px 22px rgba(8,7,5,.5);
    color: var(--gold-ember);
  }
  [dir="ltr"] .global-fab:hover { transform: translateX(2px); }
}
.global-fab:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 2px;
}

/* Distinguish the two at a glance: Website keeps the neutral
   gold-on-charcoal treatment (secondary). Facebook is now the
   recognizable brand-blue fill (#1877F2, official Facebook blue) per
   the reference direction -- still built from the same edge-light +
   layered-shadow vocabulary as the rest of the system (var(--edge-light-strong)
   for the top-lit lip, a warm-dark drop shadow, plus a blue glow) so
   it reads as "this app's floating action, in Facebook's color" and
   not as a foreign, unrelated widget. */
.global-fab-fb {
  background: linear-gradient(160deg, #2E87F5 0%, #1877F2 55%, #1465D8 100%);
  color: #fff;
  box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(255,255,255,.14), 0 6px 18px rgba(8,7,5,.5), 0 0 20px rgba(24,119,242,.35);
}
@media (pointer: fine) {
  .global-fab-fb:hover {
    background: linear-gradient(160deg, #3D91F6 0%, #1E7CF3 55%, #1465D8 100%);
    color: #fff;
    box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(255,255,255,.22), 0 8px 22px rgba(8,7,5,.55), 0 0 28px rgba(24,119,242,.5);
  }
}

@media (max-width: 375px) {
  /* At the narrowest widths the fixed (non-vw-scaling) header/padding
     offset in the `top` calc above eats proportionally more of the
     hero, leaving almost no clearance before the specimen-tag pill
     below the fade (measured ~0px at 320px) -- nudge the dock up
     slightly here only; every wider breakpoint already clears by
     15px+ with the base formula. */
  .global-fab-dock { top: calc(var(--header-h) + 18px + min(137.76vw, 557.6px) - 18px); right: max(10px, calc((100vw - 480px) / 2 + 10px)); gap: 10px; }
  .global-fab { width: 42px; height: 42px; }
  .global-fab svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .global-fab { transition: none; }
  .global-fab:active { transform: none; }
  @media (pointer: fine) {
    .global-fab:hover { transform: none; }
    [dir="ltr"] .global-fab:hover { transform: none; }
  }
}