/* =========================================================================
   cookie-consent.css — the consent banner

   Pairs with cookie-consent.js. Every colour is a token, because the site
   ships two palettes (default and [data-theme="v3"], the cream one every
   page actually sets) and a hardcoded value would be wrong on one of them.

   🔴 Decline and Accept are deliberately the SAME SIZE, the same shape and
   the same weight. A consent choice where one option is a button and the
   other is faint grey text is not a choice. If someone asks to make Accept
   "stand out," that is the request to push back on.
   ========================================================================= */

.ck-banner {
  position: fixed;
  z-index: 1600; /* above the concierge launcher at 1400 and its panel at 1500 */
  left: 0;
  right: 0;
  bottom: 0;
  /* base.css:526 sets `section { padding: var(--section-py) 0 }` — 72px top
     AND bottom. Unopposed, that made this banner 292px tall for 147px of
     content. This is a fixed bar, not a page section. */
  padding: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(31, 42, 38, 0.10);
  /* Fixed, so it is out of flow and cannot shift the page — no CLS. */
}

.ck-banner[hidden] { display: none; }

.ck-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.ck-copy { flex: 1 1 auto; min-width: 0; }

/* 🔴 `:root:root` on these two is NOT a typo and not cargo cult.
   v3.css:651 sets `:root:root p, :root:root .body { font-size: var(--fs-body) }`
   — specificity 0-2-1, which outranks any single class. The comment at
   v3.css:644 says that is deliberate: "page sheets still do not outrank the
   body scale". So a component that genuinely needs a different size has to
   escalate the same way. 0-3-0 beats 0-2-1.

   Without it both of these render at --fs-body (17px) instead of 11px and
   13px, and the banner grows by roughly a third. Same trap for any new
   component that styles a bare <p>. */
:root:root .ck-title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-mid);
}

/* Atkinson Hyperlegible, matching the form consent text. Same reasoning:
   this is a disclosure someone has to read and act on. */
:root:root .ck-text {
  margin: 0;
  font-family: 'Atkinson Hyperlegible', var(--font-sans);
  font-size: var(--fs-note);
  line-height: 1.55;
  color: var(--fg);
}

.ck-link {
  color: var(--accent-deep);
  text-underline-offset: 2px;
  white-space: nowrap;
}

.ck-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

.ck-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  /* 44px minimum target, same rule the form consent checkbox follows. */
  min-height: 44px;
  min-width: 116px;
  padding: 13px 22px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}

.ck-btn:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

/* Equal weight. Different colour so they are distinguishable, identical
   prominence so neither is the path of least resistance. */
.ck-accept {
  background: var(--accent-deep);
  border: 1.5px solid var(--accent-deep);
  color: #fff;
}
.ck-accept:hover { background: var(--fg-strong); border-color: var(--fg-strong); }

.ck-decline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--fg-strong);
}
.ck-decline:hover { border-color: var(--fg-strong); }

/* ---------- Footer "Cookie choices" ----------
   A <button>, not an <a href="#">, because it performs an action rather than
   navigating — so it needs the browser's button chrome stripped to sit in the
   legal row beside Privacy and Refund. It carries .footer-legal for colour and
   hover (v3.css:1573); everything below is only undoing <button> defaults. */
.footer-cookie-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--fs-note);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.footer-cookie-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* The launcher stands down while the banner is up. `[DECISION — Jacob, 10 Aug 2026]`
   Lifting it clear of the banner was the earlier answer and it worked at 1440,
   where there is room above the bar. On a phone there is not: at 390 the banner
   is 214px, so the lifted launcher landed in the middle of the hero paragraph
   and covered the sentence on every condition page at first load.

   Two calls to action stacked in the bottom third, one of them over body copy,
   is also two decisions asked at once when only one of them is the reader's to
   make right now. The banner is the blocking choice; it goes first. Dismissing
   it returns the launcher, unchanged, in its own position.

   Matches how concierge.css:51 stands the launcher down for its own panel.
   --ck-banner-h is still measured and published by the JS — nothing reads it
   now, and it stays because it is the honest way to do this if the launcher is
   ever brought back alongside the banner. */
.ck-open .cc-launcher {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* ---------- Narrow ---------- */
@media (max-width: 860px) {
  .ck-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
  }
  .ck-actions { width: 100%; }
  /* Both full width and equal — the small-screen version of the same rule. */
  .ck-btn { flex: 1 1 0; min-width: 0; }
}

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