/* ============================================================
   COOKIE BANNER — consent for analytics cookies.
   Built 5 Oct 2026, when Google Analytics (G-T2L9Z684WN) went on.

   WHY IT EXISTS: in the UK, analytics cookies need the visitor's
   consent BEFORE they are set (PECR reg. 6). Google Analytics is
   therefore held back until someone presses Accept. See
   scripts/cookie-banner.js for the gating.

   SHAPE: a small card in the bottom-left corner, not a full-width
   bar (Rebecca, 5 Oct 2026: "needs to be smaller, something that
   is a small card"). It is ~380px wide and everything stacks.

   DESIGN: follows the house rules, nothing invented.
     · white card, 24px radius, #E6ECF4 border  (Cards)
     · deeper shadow than a resting card because it floats
     · Accept  = sky background + NAVY text. ⚠ Not white text:
       foundation.css line 178 sets .btn--primary that way and it
       is the accessible pair (7.4:1). Sky on white fails AA.
     · Reject  = navy ghost, the standard secondary
     · both buttons are the SAME SIZE and share a row 50/50. The
       ICO expects rejecting to be as easy as accepting, so
       neither is made smaller or quieter than the other.
     · 44px minimum touch target, focus ring on everything
     · fade + 14px rise, 360ms, cut out by prefers-reduced-motion
   ============================================================ */

.ckb {
  position: fixed;
  z-index: 9000;
  left: 24px;
  bottom: 24px;
  width: 380px;
  max-width: calc(100vw - 48px);
  display: none;                      /* JS shows it only when a choice is owed */
  box-sizing: border-box;
  padding: 20px 22px 22px;
  background: #fff;
  border: 1px solid #E6ECF4;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(15, 20, 56, 0.16);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ge-navy, #0F1438);
}

.ckb.is-open { display: block; opacity: 1; }

/* ⚠ THE ENTRANCE ANIMATES POSITION ONLY, NEVER OPACITY, AND NEVER WITH A
   "both" FILL. This is the one element on the site that has to be visible
   no matter what: if the visitor cannot see it, they cannot consent, and
   the analytics stay switched off for everybody.
   An animation that starts at opacity 0 holds the card invisible for as
   long as it fails to advance, and it does fail: Chrome under
   --virtual-time-budget reports "ckb-in:running@0" indefinitely, and
   anything that throttles or pauses animations does the same.
   Animating the 14px rise alone is safe. Stuck at 0% the card simply sits
   14px lower, fully opaque and fully clickable. */
@media (prefers-reduced-motion: no-preference) {
  .ckb.is-open {
    animation: ckb-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes ckb-in {
    from { transform: translateY(14px); }
    to   { transform: translateY(0); }
  }
}

/* ---- heading row: icon sits beside the title ---- */
.ckb .ckb__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ckb .ckb__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;                /* icon tile, per the house rule */
  background: var(--ge-bg-light, #F3F7FA);
  color: var(--ge-navy, #0F1438);
}
.ckb .ckb__icon svg { width: 18px; height: 18px; }

.ckb .ckb__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;                   /* headings are SemiBold */
  line-height: 1.3;
  color: var(--ge-navy, #0F1438);
}

.ckb .ckb__text {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #4A5876;                     /* WCAG-safe secondary */
}

.ckb .ckb__text a {
  color: var(--ge-blue, #1B367E);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ckb .ckb__text a:hover { color: var(--ge-navy, #0F1438); }

/* ---- the two buttons share the row equally ---- */
.ckb .ckb__actions {
  display: flex;
  gap: 10px;
}

.ckb .ckb__btn {
  flex: 1 1 0;                        /* equal width, equal weight */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                   /* touch target */
  padding: 11px 14px;
  border-radius: 999px;               /* pill, never rounded-rect */
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              color 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ckb .ckb__btn--accept {
  background: var(--ge-sky, #2FB7F1);
  color: var(--ge-navy, #0F1438);
  border-color: var(--ge-sky, #2FB7F1);
}
.ckb .ckb__btn--accept:hover {
  background: var(--ge-blue, #1B367E);
  border-color: var(--ge-blue, #1B367E);
  color: #fff;
}

.ckb .ckb__btn--reject {
  background: #fff;
  color: var(--ge-navy, #0F1438);
  border-color: var(--ge-navy, #0F1438);
}
.ckb .ckb__btn--reject:hover {
  background: var(--ge-navy, #0F1438);
  color: #fff;
}

.ckb .ckb__btn:focus-visible,
.ckb__settings:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45);
}

/* The "change your mind" link the JS drops into the footer. */
.ckb__settings {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
}

/* ---- phone: full width across the bottom, still a card ---- */
@media (max-width: 600px) {
  .ckb {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    padding: 18px 18px 20px;
  }
}