/* ── Cookie consent ───────────────────────────────────────────────────────
   Re-themed onto the site's own tokens. It previously shipped its own palette
   (#2c3e50 slab, #2980b9 accept, #c0392b decline) and its own typeface
   ('Inter'), neither of which appears anywhere else on the site — so the one
   element pinned to the bottom of every page was the one element that looked
   borrowed from somewhere else.

   Layout was `text-align: center` over an inline <p> and two inline-block
   buttons separated by margin-left. At 390px that wrapped mid-sentence, left
   Accept beside the text and pushed Decline onto a line of its own, centred
   under nothing, in the corner the floating chat launcher occupies. It is now
   a wrapping flex row: one line on a wide screen, and on a narrow one the
   sentence takes the full width so the two buttons share the row beneath it.

   Visibility is a class rather than an inline style (see js/cookie-consent.js)
   so this file owns `display` and the flex layout is not overridden the moment
   the banner is shown. */

#cookie-consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;

  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;

  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

  background-color: var(--ink, #0b1020);
  color: rgba(255, 255, 255, .86);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .8);

  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}

#cookie-consent-banner.is-visible {
  display: flex;
}

#cookie-consent-banner p {
  margin: 0;
}

#cookie-consent-banner a {
  color: #93b4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#cookie-consent-banner a:hover {
  color: #c7d7ff;
}

#cookie-consent-banner button {
  margin: 0;
  padding: 11px 22px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}

#cookie-consent-banner button:focus-visible {
  outline: 2px solid #93b4ff;
  outline-offset: 2px;
}

#cookie-consent-banner #accept-cookie-btn {
  background-color: var(--brand, #1d4ed8);
  color: #ffffff;
}

#cookie-consent-banner #accept-cookie-btn:hover {
  background-color: var(--brand-2, #3b82f6);
}

/* Declining is an ordinary choice, not a destructive one. The red fill read as
   a warning and fought the blue beside it; a ghost button gives the two equal
   weight without the clash. */
#cookie-consent-banner #decline-cookie-btn {
  background-color: transparent;
  color: rgba(255, 255, 255, .86);
  border-color: rgba(255, 255, 255, .30);
}

#cookie-consent-banner #decline-cookie-btn:hover {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .48);
}

@media (max-width: 640px) {
  #cookie-consent-banner {
    text-align: center;
    padding-inline: 16px;
  }

  /* Full width forces the wrap, so the two buttons share the line below rather
     than one of them trailing the sentence. */
  #cookie-consent-banner p {
    flex: 1 0 100%;
  }

  /* Sized to their labels and centred as a pair, NOT stretched edge to edge.
     Full-bleed buttons run under the Flowise chat launcher in the bottom-right
     corner — it lives in a shadow root and is fixed to the viewport, so this
     stylesheet cannot move it. Centring a narrower pair keeps both corners
     clear without a one-sided gutter, which would have pushed the whole banner
     visibly off-centre.

     Why 96 and 16 specifically. The launcher measures 48px wide with a 20px
     margin, so its left edge sits at viewportWidth - 68. The centred pair's
     right edge is at (viewportWidth + pairWidth) / 2, so the two collide
     whenever pairWidth > viewportWidth - 136. At 96px a side plus a 16px gap
     the pair is 208px, which clears the launcher down to a 344px viewport —
     narrower than any phone still in use. The previous 120/20 pair was 260px
     and overlapped Decline by 3px at 390px, measured in the browser. */
  #cookie-consent-banner {
    column-gap: 16px;
  }

  #cookie-consent-banner button {
    flex: 0 1 auto;
    min-width: 96px;
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cookie-consent-banner button { transition: none; }
}