/* ============ Cookie consent bar =========================================
   Loaded only while the bar is on the page -- see inc/consent.php.

   Above everything: the case study modal is 60 and the header 50, and this
   has to be reachable whatever else is open, because until it is answered
   nothing else on the page is allowed to measure anything.

   Along the foot rather than across the middle. The hero is a full-viewport
   gesture sequence and a box in the centre of it would be both an eyesore
   and, worse, something the wheel gesture had to be aimed around. Sitting on
   one edge it is out of the way of the tear and out of the way of the wheel:
   the bar takes pointer events over its own strip and nowhere else, and it
   never listens for wheel or scroll. */
/* Printed hidden; js/consent.js takes the attribute off after the hero
   (2026-09-06). The display:flex below would beat the UA's [hidden] rule on
   its own, so the attribute has to be honoured here explicitly. */
.a3-consent[hidden] {
  display: none;
}

.a3-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: center;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--a2-border, #e4e4e4);
  box-shadow: 0 -6px 24px rgba(20, 20, 20, 0.08);
}

.a3-consent-text {
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--a2-ink, #141414);
}

/* The privacy-policy link at the end of the text (2026-09-06). Same colour as
   the sentence it belongs to; the underline is what says it is a link. */
.a3-consent-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.a3-consent-link:hover {
  text-decoration-thickness: 2px;
}

.a3-consent-link:focus-visible {
  outline: 2px solid var(--a2-ink, #141414);
  outline-offset: 2px;
}

.a3-consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

/* Both buttons carry the same weight on purpose. "Decline" as a faint link
   beside a solid "Accept" is not a choice being offered, and the consent it
   collects is not consent. These two change together or not at all. */
.a3-consent-btn {
  min-width: 9em;
  padding: 9px 18px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--a2-ink, #141414);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--a2-ink, #141414);
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.a3-consent-btn:hover {
  background: rgba(20, 20, 20, 0.06);
}

.a3-consent-btn--yes {
  color: #fff;
  background: var(--a2-ink, #141414);
}

.a3-consent-btn--yes:hover {
  background: #333;
}

.a3-consent-btn:focus-visible {
  outline: 2px solid var(--a2-ink, #141414);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .a3-consent {
    justify-content: stretch;
    text-align: left;
  }

  .a3-consent-actions {
    width: 100%;
  }

  .a3-consent-btn {
    flex: 1;
    min-width: 0;
  }
}

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