/* Styles for auth-bar.hbs — the pinned mobile sign-up bar.
   Ported from the legacy `pages/index.vue` (`.fixed-auth-btn`). */

.auth-bar {
  position: fixed;
  /* Sits above the home-indicator area on iOS rather than under it. */
  bottom: env(safe-area-inset-bottom, 0);
  left: 0;
  right: 0;
  /* Below the mobile sidebar (999) and the header (40), so an open menu covers it. */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  background-color: var(--gray-0);
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.auth-bar-link {
  width: 100%;
  height: 48px;
  padding: 12px 24px;
  font-size: 16px;
}

/* From the tablet breakpoint up the header's own sign-up link is always in view. */
@media (min-width: 600px) {
  .auth-bar {
    display: none;
  }
}