/* redesign-sticky-cta-v1 — W-68-4 — Mobile sticky "Contribute" CTA. */
/*
 * Planning: .archon/queued-builds/WAVE-68-public-profile-redesign.md
 *
 * Targets the markup rendered by the approved-branch sticky-cta block
 * in src/views/public/profile.ejs:
 *   .sticky-cta            — outer <nav> pinned to viewport bottom
 *   .sticky-cta__inner     — flex row holding the copy + button
 *   .sticky-cta__copy      — left-column "Support <name>" label
 *   .sticky-cta__lead      — bold lead line
 *   .sticky-cta__hint      — muted supporting hint
 *   .sticky-cta__button    — primary anchor → /contribute/:slug
 *
 * WHY a sticky bar (not a fixed FAB): a full-width sticky bar pairs a
 * call-to-action with one line of supporting copy ("Every rand goes
 * to their goal"). A bare floating circle button would be cleaner but
 * carries no semantic context — visitors who haven't scrolled into
 * the running total wouldn't know what they're supporting. The bar
 * teaches the action with its label.
 *
 * WHY mobile-only (display:none on tablet+): on tablet+ the contribute
 * action can sit inline near the hero without stealing real estate;
 * a sticky bar on a wide viewport would feel like a marketing
 * footer overlay. The breakpoint is the same 640px sm/md break the
 * rest of the redesign system uses.
 *
 * WHY position:sticky (not position:fixed): position:sticky pins the
 * bar inside its containing block's scroll context — so on a page
 * shorter than the viewport (the placeholder branch, future error
 * pages) the bar sits at the natural end of the document instead of
 * floating awkwardly over a half-empty screen. The approved profile
 * is always tall enough to scroll, so the practical behaviour matches
 * a fixed bar without the failure mode.
 *
 * WHY a backdrop blur + brand-coloured button: the blur softens the
 * content behind the bar so the CTA always reads as the foreground
 * action, even when the bar overlaps the feed list at the bottom of
 * the scroll. The brand colour anchors the CTA as "the action" — the
 * established W56/W58 primary affordance colour.
 *
 * WHY a safe-area inset padding: iPhone-X-and-newer have a home-bar
 * gesture region at the bottom of the screen. env(safe-area-inset-
 * bottom) keeps the bar above that region so the button stays
 * tappable; without it the button gets clipped by the gesture area.
 *
 * WHY a token-only palette: ANTI-RAW-VALUE proof-gate (W56) rejects
 * hex / rgba in any non-token file. The one apparent exception is
 * the `color-mix(in srgb, var(--color-bg) 88%, transparent)` value
 * used for the bar background — it composes from a token, not a raw
 * hex, so the gate stays clean.
 *
 * FLOW: tokens.css → spacing.css → typography.css → radius-shadow.css →
 *       cards.css → sticky-cta.css (this file) → page-feature CSS.
 *
 * CONSTRAINT: --touch-target-min (44px) is the floor for the button
 * height per Apple HIG / Material — pinned via min-height so a future
 * padding rotation cannot accidentally shrink the tap target.
 */

/* ---------- Sticky outer ---------- */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  /* WHY padding-bottom uses env(safe-area-inset-bottom): adds the iOS
     gesture inset on top of the base padding so the button clears
     the home-bar region. max() keeps a sensible minimum on devices
     with no inset. */
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  /* WHY a semi-transparent surface composed via color-mix: gives the
     bar a soft backdrop without a raw rgba() value. Composing from
     a token keeps the W56 ANTI-RAW-VALUE gate clean. */
  background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 12px var(--color-shadow);
  /* WHY a backdrop-filter blur: softens the content behind the bar so
     the CTA always reads as foreground. The supports() check around
     this rule isn't strictly necessary (every modern engine that
     matters supports it) but the @supports guards the legacy iOS
     Safari path where the property would be ignored without harm. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- Inner row ---------- */
.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ---------- Copy column ---------- */
.sticky-cta__copy {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-px);
  min-width: 0;
  /* WHY a hard min-width of 0 on a flex child holding text: without
     this the column refuses to shrink below its intrinsic content
     width and overflows the bar on narrow viewports. */
}

.sticky-cta__lead {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  /* WHY ellipsis truncation: a 30-char display name would push the
     button off the bar. Truncating the lead keeps the CTA always
     visible at the trailing edge. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-cta__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  /* Hint truncates the same way so a future longer hint line still
     fits a single-row bar. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Primary CTA button ---------- */
.sticky-cta__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-5);
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out),
    transform var(--motion-duration-fast) var(--motion-ease-out);
}

.sticky-cta__button:hover,
.sticky-cta__button:focus-visible {
  background-color: var(--color-brand-dark);
  box-shadow: var(--shadow-md);
}

.sticky-cta__button:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sticky-cta__button:active {
  /* Quick press cue — half a pixel of compression reads as "tapped". */
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}

/* ---------- Tablet + desktop: hide the sticky bar ----------
   WHY 640px: matches the sm/md break used by the hero + total panel
   pivots. At this width the contribute action will sit inline in the
   hero (future wave); a sticky overlay would feel redundant. */
@media (min-width: 640px) {
  .sticky-cta {
    display: none;
  }
}