/* ============================================================================
   Cookie consent banner — issue #151. Same paper/ink/brass tokens as
   site.css/exit-intent.css, no new visual system.
   ============================================================================ */

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
}

.consent-banner[hidden] { display: none; }

.consent-banner-card {
  pointer-events: auto;
  width: min(760px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  padding: var(--space-5);
}

@media (prefers-reduced-motion: no-preference) {
  .consent-banner-card {
    animation: consent-banner-rise 220ms ease;
  }
}

@keyframes consent-banner-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.consent-banner-copy {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.consent-banner-copy a {
  color: var(--color-signet);
  text-decoration: underline;
}

.consent-banner-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Re-open control — small persistent footer/floating link so a visitor can
   change their mind after the banner is dismissed. Lives in the footer
   legal row (see layout.html); styled to match the other footer legal text
   rather than as a competing floating button. */
.consent-settings-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  cursor: pointer;
}

.consent-settings-link:hover { color: var(--color-ink); }

@media (max-width: 560px) {
  .consent-banner { padding: var(--space-3); }
  .consent-banner-card { padding: var(--space-4); flex-direction: column; align-items: stretch; }
  /* In the column layout the copy's `flex: 1 1 320px` (meant for the row
     layout's 320px WIDTH basis) would apply to the VERTICAL axis, forcing the
     card ~320px taller with a big empty gap. Reset it so the card hugs its
     content. */
  .consent-banner-copy { flex: 0 0 auto; }
  .consent-banner-actions { width: 100%; }
  .consent-banner-actions .btn { flex: 1 1 auto; }
}