/* =========================================================================
   Parallax Thinking: cookie consent banner.

   A small, on-brand consent prompt that gates Google Analytics and Microsoft
   Clarity (both loaded through GTM) until the visitor chooses. It is loaded
   site-wide by functions/_middleware.js only when a real GTM_ID is set, and on
   its own by /consent-preview.html for review.

   The palette values below mirror the locked five-colour brand tokens in
   parallax-foundations-tokens.css. They are restated locally so the banner
   renders correctly on any page, including ones that do not link that sheet.

   This is a draft for Scott to finalise. Wording, weight, and placement are
   his to settle.
   ========================================================================= */

.pt-consent {
  /* Locked palette, mirrored from the brand tokens. */
  --c-ink: #4A5469;        /* Deep Space */
  --c-surface: #F7F5F1;    /* Soft Stone */
  --c-ink-06: rgba(74, 84, 105, 0.06);
  --c-ink-12: rgba(74, 84, 105, 0.12);

  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 2147483000;
  width: calc(100% - 48px);
  max-width: 384px;
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Hidden until shown, then eased in. Motion is short and restrained. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.pt-consent.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The banner takes focus when it appears so screen readers announce it. The
   site's global focus style is a Solar Gold ring, and we do not want that
   running around the whole card, so suppress the outline on the container
   itself. The buttons keep their own Deep Space focus ring below. */
.pt-consent:focus,
.pt-consent:focus-visible {
  outline: none;
}

.pt-consent__inner {
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-ink-12);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(74, 84, 105, 0.06), 0 8px 24px rgba(74, 84, 105, 0.10);
  padding: 20px 20px 16px;
}

.pt-consent__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Deep Space, not Pale Lunar, so this label clears WCAG AA on its own.
     Soften to a Pale Lunar (#8E929E) eyebrow if you prefer the lighter look. */
  color: var(--c-ink);
}

.pt-consent__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--c-ink);
}

.pt-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Both choices carry equal weight, so declining is exactly as easy as
   accepting. The brand favours a considered outline over a heavy filled
   button, so neither is dressed up as the "right" answer. */
.pt-consent__btn {
  flex: 1 1 auto;
  min-width: 120px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-ink);
  border-radius: 2px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1);
}

.pt-consent__btn:hover {
  background: var(--c-ink-06);
}

.pt-consent__btn:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .pt-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-consent {
    transition: none;
    transform: none;
  }
}