/* i2 Systems — kit/consent.css
   THE CONSENT LAYER. Venture-agnostic: no facts, no copy, no colours of its own —
   it reads theme tokens like the rest of the kit.

   Pairs with kit/consent.js.

   THE POSITION THIS ENCODES: the best cookie banner is no cookie banner. A site
   that stores nothing needs no consent, so the default state of anything built on
   this kit is BANNER-FREE. consent.js renders nothing unless the page actually
   declares something that needs consent. The banner is a consequence of adding a
   tracker, never a decoration.

   Consequently: if you are looking at this banner on one of our sites, something
   on that page is collecting. That is the point.
*/

/* ============ 1 · THE BAR ============
   A bar, not a modal. It does not cover content, does not trap focus, and does not
   stop a visitor reading or booking. Someone who ignores it forever gets a working
   site with nothing stored, which is the correct outcome — not a hostage situation. */
.k-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3, 16px);
  padding: var(--s-3, 16px) var(--page-margin, 20px);
  padding-bottom: calc(var(--s-3, 16px) + env(safe-area-inset-bottom));
  background: var(--panel); color: var(--on-panel, #fff);
  border-top: 1px solid var(--tint-line, rgba(255,255,255,.14));
  font-size: 15px; line-height: 1.5;
}

/* THE DISMISS BUG, FIXED HERE ONCE.
   `hidden` is a UA-stylesheet rule (display:none) and ANY author display value
   outranks it. A bar declared display:flex therefore ignores [hidden] entirely:
   consent gets stored and the bar stays on screen. This was a real shipped defect.
   Every kit component that sets display must restate this. */
.k-consent[hidden] { display: none !important; }

/* Sits above a sticky action bar rather than under it. */
.k-consent { margin-bottom: var(--k-bar-h, 0px); }

.k-consent-text { flex: 1 1 32ch; margin: 0; max-width: var(--measure, 68ch); }
.k-consent-text a { color: inherit; text-underline-offset: 3px; }

/* ============ 2 · THE BUTTONS ============
   REJECT IS NOT A LESSER BUTTON. Same size, same weight, same prominence, same
   number of clicks, and it comes FIRST in the DOM so keyboard and screen-reader
   users reach it first. A design where "accept" is a filled button and "reject" is
   a grey link is a dark pattern whoever drew it; this file makes that shape
   impossible to express without editing it deliberately. */
.k-consent-actions { display: flex; gap: var(--s-2, 12px); flex: 0 0 auto; }

.k-consent-btn {
  appearance: none; cursor: pointer;
  min-height: 44px; padding: 0 var(--s-3, 16px);
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; line-height: 1;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: transparent; color: inherit;
  transition: background var(--t-fast, 120ms) var(--e-standard, ease);
}
.k-consent-btn:hover { background: rgba(255,255,255,.12); }
.k-consent-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* The two choices are deliberately IDENTICAL. If a venture wants to tint one,
   it must override this rule by hand and own that decision in review. */
.k-consent-btn--accept,
.k-consent-btn--reject { background: transparent; }

@media (max-width: 560px) {
  .k-consent { flex-direction: column; align-items: stretch; }
  .k-consent-actions { width: 100%; }
  .k-consent-btn { flex: 1 1 0; }
}

/* ============ 3 · THE STANDING CONTROL ============
   Consent must be as easy to WITHDRAW as to give. A site that asks once and then
   hides the switch forever is not asking, it is collecting. Put .k-consent-reopen
   in the footer of every page that can set anything; consent.js wires it and hides
   it when the page has nothing to consent to. */
.k-consent-reopen {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.k-consent-reopen[hidden] { display: none !important; }

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