/* ------------------------------------------------------------------
   HS GovTech — consent gate
   Companion to consent.js. Uses only the custom properties already
   declared in site.css :root; adds no color of its own.
   ------------------------------------------------------------------ */

/* ---------------- banner ----------------
   Fixed to the bottom, full width, above everything. Not a modal and not
   an overlay: the page behind it stays readable and clickable, so a
   visitor who wants to read before deciding can. */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 9999;
  background: var(--surface);
  border-top: 3px solid var(--sky);
  box-shadow: var(--shadow-lg);
  animation: consent-rise 0.28s var(--ease) both;
}

.consent-inner {
  width: min(1180px, 100% - 2.5rem); margin: 0 auto;
  padding: 1.1rem 0 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}

.consent-text {
  flex: 1 1 22rem; min-width: 0;
  font-family: var(--font-body); font-size: 0.92rem; color: var(--muted);
}
.consent-text strong { color: var(--ink); }
.consent-text a { color: var(--accent-ink); text-decoration: none; border-bottom: 2px solid var(--sky); }
.consent-text a:hover { border-bottom-color: var(--coral); }

/* Equal footprint on both buttons is deliberate. Reject is not a smaller,
   greyer, harder-to-hit afterthought than Accept — it is the same target,
   in the same row, one tab stop away. */
.consent-actions { display: flex; gap: 0.6rem; flex: none; }
.consent-actions .btn { min-width: 8.5rem; }

/* site.css sets a global :focus-visible ring; this restates it on the
   banner's own controls so the rule survives being lifted into the
   production build on its own. */
.consent .btn:focus-visible,
.consent a:focus-visible {
  outline: 3px solid var(--sky); outline-offset: 3px;
}

@keyframes consent-rise {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (max-width: 640px) {
  .consent-inner { padding: 1rem 0 1.1rem; gap: 0.9rem; }
  /* On a phone this notice ran to roughly 40% of the screen and buried
     the hero call to action. Every word is kept — the panel is capped
     and scrolls instead. */
  /* Keep Accept and Reject on screen no matter how long the notice runs:
     the text scrolls inside its own box, the buttons never move off it. */
  .consent-inner { display: block; }
  .consent-text { font-size: 0.86rem; line-height: 1.5; max-height: 22vh; overflow-y: auto; overscroll-behavior: contain; }
  .consent-actions { margin-top: 0.9rem; }
  .consent-actions .btn { min-height: 44px; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1 1 0; min-width: 0; }
}

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