/* ==========================================================================
   DOCK — the sticky CTA bar, below desktop only
   R17b, by direction: "after the hero is scrolled from view the hidden header
   button appears, at the bottom of the page like a sticky button."

   ⚠ A NEW COMPONENT. §19 rule 3 says stop and ask before building one; this
   was asked for directly. It exists because R17's header rule hides the nav
   CTA below 992, which left the page with no persistent route to its only
   conversion point — a cost that rule recorded and this closes.

   ≤991, the same line the logo-only header uses. Above it the nav CTA is
   back and a second fixed control would be two of the same button on screen.
   ========================================================================== */

.dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--layer-nav);

  padding-block-start: var(--space-sm);
  /* The home indicator on a modern phone sits over the bottom of the
     viewport. env() falls back to 0 where there is no inset, so this is the
     same 16px everywhere else. */
  padding-block-end: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));

  background-color: var(--color-surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
          backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
  border-block-start: var(--border-hairline) solid var(--color-border-default);

  /* HIDDEN WITH visibility, NOT opacity — and that is the accessibility part
     of this component rather than a detail. `visibility: hidden` takes the
     button out of the tab order AND out of the accessibility tree, so while
     the bar is down there is no invisible control for a keyboard or screen
     reader user to land on. `opacity: 0` would leave a fully focusable button
     sitting over the page. Nothing else is needed: no aria-hidden, no inert. */
  visibility: hidden;
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-standard),
              visibility var(--duration-base) var(--ease-standard);
}

.dock.is-visible {
  visibility: visible;
  transform: none;
}

/* Full width across the whole dock range. .btn--primary only takes width:100%
   at ≤767, so without this the button would sit auto-width and centred
   through the 768–991 band. */
.dock .btn--primary {
  display: flex;
  width: 100%;
}

/* Under reduced motion the bar simply is or is not there. base.css already
   collapses the duration; dropping the transform as well means it does not
   arrive with an instant 100% jump, which is the same correction .media
   needed — killing a transition is not the same as killing a transform. */
@media (prefers-reduced-motion: reduce) {
  .dock { transform: none; }
}

@media (min-width: 992px) {
  .dock { display: none; }
}