/* Consent banner — for the standalone pages only.
 *
 * /checklist/, /fair-split-calculator/ and /thank-you/ were built as
 * self-contained conversion pages: their own stylesheet, no header, no footer,
 * and — until #22 — no consent banner either. That last one was a hole rather
 * than a decision. Someone arriving on the calculator straight from an ad had
 * no way to accept or refuse anything, so on the busiest entry points on the
 * site the choice was simply never offered.
 *
 * Linking site.css on those pages instead would drag in the whole global
 * stylesheet and restyle three pages another workstream deliberately kept
 * plain. So: just the banner, self-contained.
 *
 * The rules mirror the CONSENT BANNER block in site.css. The tokens are
 * written out as literals because these pages do not load site.css and so have
 * none of its custom properties:
 *
 *   --dark-bg #161F19 · --dark-text #fff · --dark-muted #B9C4B8
 *   --brand-on-dark #8FBF9F
 *
 * Keep the two in step. If site.css ever moves the banner into its own file,
 * delete this one and link that instead.
 */

.consent {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  background: #161F19; color: #ffffff;
  border-top: 2px solid #8FBF9F;
  padding-block: 1.1rem;
  font-family: inherit;
}
.consent[hidden] { display: none; }

.consent__inner {
  display: grid; gap: 1rem;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter, 1.25rem);
}
@media (min-width: 48em) {
  .consent__inner { grid-template-columns: 1fr auto; align-items: center; }
}

.consent p { margin: 0; font-size: .8125rem; color: #B9C4B8; max-width: 44rem; }
.consent p a { color: #ffffff; }

.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.consent__actions button {
  display: inline-block;
  padding: .55rem 1.15rem;
  font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.3;
  text-align: center; cursor: pointer;
  border-radius: 999px;
  border: 2px solid #8FBF9F;
  background: #8FBF9F; color: #0d1612;
  transition: background .15s, border-color .15s;
}
.consent__actions button:hover { background: #a8d2bc; border-color: #a8d2bc; }

.consent__actions button[data-consent="essential"] {
  background: transparent; color: #ffffff;
  border-color: rgba(255, 255, 255, .35);
}
.consent__actions button[data-consent="essential"]:hover {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6);
}

@media (prefers-reduced-motion: reduce) {
  .consent__actions button { transition: none; }
}