/* =====================================================================
   CONSENT BANNER
   =====================================================================
   A bar at the bottom of the viewport, above everything, that appears only
   when there is no stored decision. See assets/js/consent.js for why the
   analytics tags do not load until this is answered.

   Design constraints, in priority order:

   1. Refusing must be as easy as accepting. Both buttons are the same size
      and both are visible. No "manage preferences" link that is really the
      only way to decline, no reject hidden in a footer, no pre-ticked
      toggles. A dialog that makes refusal harder is not a valid choice under
      GDPR, whatever it is labelled.

   2. It must not move the page. position: fixed, so accepting does not
      reflow the document under the visitor's cursor.

   3. It must not trap focus. It is a non-modal bar over content the visitor
      is entitled to read. aria-modal is deliberately absent from the
      JavaScript for the same reason.

   4. It must respect the safe area on a phone, and the browser's own bottom
      inset, or it sits under the home indicator.
   ===================================================================== */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 32px rgba(14, 42, 61, .12);
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
  /* Respect a reduced-motion preference: the bar does not animate at all
     normally, but the shadow transition below is removed for safety. */
  animation: consent-in .22s ease-out;
}

@keyframes consent-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

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

.consent[hidden] { display: none; }

.consent__inner {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.consent__text { flex: 1 1 22rem; min-width: 0; }

.consent__title {
  margin: 0 0 .25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.consent__body {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-2);
  /* The body text is the part a visitor may genuinely want to read in full.
     Do not clamp it. */
}

.consent__actions {
  display: flex;
  gap: .625rem;
  flex: 0 0 auto;
}

.consent__btn {
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

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

/* Accept: the brand fill. */
.consent__btn--primary {
  background: var(--brand);
  color: #fff;
}
.consent__btn--primary:hover { background: var(--brand-ink); }

/* Decline: a real button, visually quieter, but the same size and weight as
   accept. The difference is emphasis, not accessibility. */
.consent__btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2);
}
.consent__btn--ghost:hover {
  background: var(--surface-3);
  color: var(--ink);
}

/* Phone: stack the text above the buttons, full-width targets. */
@media (max-width: 560px) {
  .consent__inner { gap: 1rem; }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 0; text-align: center; }
}

/* RTL: the bar is anchored to the bottom edge, which is direction-agnostic,
   but the button order should follow reading order. */
[dir="rtl"] .consent__actions { flex-direction: row-reverse; }

/* Dark mode. The site declares color-scheme: light dark in its meta tags but
   ships no dark palette, so rather than guess at one here, the banner sticks
   to the tokens it can see. When a dark palette lands in base.css this picks
   it up for free. */
@media (prefers-color-scheme: dark) {
  .consent {
    background: var(--surface);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .4);
  }
}

/* The footer link that lets a visitor change or withdraw a decision. */
[data-consent-settings] { display: inline-flex; }

.consent-settings {
  font: inherit;
  font-size: .8125rem;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-settings:hover { color: var(--ink-2); }
.consent-settings:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }