/* ═══════════════════════════════════════════════════════════════════════════
   CookieYes consent banner, restyled to the RoboPharma design.

   Its own file rather than another 200 lines in components.css, because this
   styles markup we do not own. If CookieYes is ever swapped out, this file is
   deleted whole and nothing else is touched.

   ── TWO separate reasons a rule here can silently do nothing ────────────────
   The first draft of this file got this wrong and half of it did not apply,
   so both mechanisms are written down.

   1. COLOUR is set INLINE. CookieYes writes its dashboard colour settings onto
      the elements themselves — the bar carries style="background-color:#FFFFFF",
      the title style="color:#212121", each button its own blue #1863dc. Inline
      beats every selector at every specificity, so colour needs !important.
      There is no way around that from a stylesheet.

   2. EVERYTHING ELSE loses on SOURCE ORDER. CookieYes injects its stylesheet
      into the document at RUNTIME, so it always lands after this file however
      the theme enqueues it. Its `.cky-btn` and a bare `.cky-btn` here are both
      (0,1,0) — a tie — and the later sheet wins every tie. It also ships
      `.cky-consent-container .cky-consent-bar` at (0,2,0), which outranks a
      bare `.cky-consent-bar` outright.

      So every selector here is prefixed with `body`. That lifts them to
      (0,2,1) or better and puts them above both. The prefix is load-bearing:
      remove it and the pill shape, the mono type and the radius silently
      revert to CookieYes's defaults while the colours stay correct, which is
      a confusing half-broken state to debug.

   Diagnosing a rule that does nothing: check the element's style attribute
   first (reason 1), then compare specificity against their injected sheet
   (reason 2). Do not just add !important and move on.

   The alternative is setting the colours in the CookieYes dashboard so the
   inline values are already on-brand. That is cleaner and worth doing if
   someone has access, but it cannot produce pill buttons, the mono type or
   the letter-spacing — this file would still exist for the shape.

   Typography note: the banner already inherits "Funnel Sans" from the page, so
   the body copy needed no font change, only its scale and colour.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The card ─────────────────────────────────────────────────────────────── */
body .cky-consent-container .cky-consent-bar {
  background-color: var(--rp-paper) !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 14px;
  box-shadow: 0 24px 60px -28px rgb(18 33 46 / 0.45);
  padding: 26px 26px 22px;
}

/* ── Title ────────────────────────────────────────────────────────────────── */
/* `.cky-consent-container` is in this selector and `body` alone was not enough.
   CookieYes ships `.cky-consent-container .cky-title` at (0,2,0); `body
   .cky-title` is (0,1,1), and two classes beat one class plus an element. The
   colour and family still applied — they are not in that rule — so the only
   symptom was the size staying at 18px, which is the kind of half-applied
   result that reads as "the CSS is fine, the design is just off". */
body .cky-consent-container .cky-title {
  color: var(--rp-navy) !important;
  font-family: var(--rp-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

/* ── Body copy ────────────────────────────────────────────────────────────── */
body .cky-notice-des,
body .cky-notice-des * {
  color: var(--rp-slate) !important;
  font-family: var(--rp-font-body);
  font-size: 0.875rem;
  font-weight: var(--rp-body-weight);
  line-height: 1.55;
}

body .cky-notice-des a {
  color: var(--rp-burnt-bright) !important;
  text-underline-offset: 2px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* The site's button language: a pill, mono, uppercase, letter-spaced. Sized
   down from .rp-btn's 17px/28px because this is a compact card, not a hero. */
body .cky-btn {
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: var(--rp-label-weight);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 12px 20px;
  min-height: 40px;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Accept and Reject are deliberately the SAME size, weight and padding, and
   differ only in fill. Under GDPR refusing has to be as easy as accepting, and
   a reject button that is visibly smaller or quieter than accept is the exact
   pattern regulators call out. CookieYes shipped them identical blue — which
   is compliant but off-brand; this keeps the parity and fixes the colour. */
body .cky-btn-accept {
  background-color: var(--rp-amber) !important;
  border-color: var(--rp-amber) !important;
  color: var(--rp-navy) !important;
}

body .cky-btn-accept:hover {
  background-color: #ffb92e !important;
  border-color: #ffb92e !important;
}

body .cky-btn-reject {
  background-color: transparent !important;
  border-color: var(--rp-navy) !important;
  color: var(--rp-navy) !important;
}

body .cky-btn-reject:hover {
  background-color: var(--rp-navy) !important;
  border-color: var(--rp-navy) !important;
  color: var(--rp-white) !important;
}

/* Customize is the tertiary action: same pill, no border, reads as a control
   rather than a choice. It is not a decision the visitor has to make. */
body .cky-btn-customize {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--rp-slate) !important;
  padding-left: 12px;
  padding-right: 12px;
}

body .cky-btn-customize:hover {
  background-color: var(--rp-sand-mid) !important;
  border-color: var(--rp-sand-mid) !important;
  color: var(--rp-navy) !important;
}

body .cky-notice-btn-wrapper {
  gap: 8px;
  padding-top: 4px;
}

/* ── The revisit pill ─────────────────────────────────────────────────────── */
/* The floating badge that reopens preferences after a choice has been made.
   CookieYes styles the WRAPPER, not the button, and makes it a 45px circle —
   so the colour has to be set there or the blue stays. */
body .cky-btn-revisit-wrapper {
  background: var(--rp-navy) !important;
  box-shadow: 0 10px 26px -12px rgb(18 33 46 / 0.5);
}

body .cky-btn-revisit-wrapper .cky-btn-revisit {
  background: none !important;
}

/* ── Preference centre ────────────────────────────────────────────────────── */
body .cky-preference-center {
  background-color: var(--rp-paper) !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 14px;
}

body .cky-preference-title {
  color: var(--rp-navy) !important;
  font-family: var(--rp-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

body .cky-preference-content-wrapper,
body .cky-preference-content-wrapper *,
body .cky-accordion-header-des,
body .cky-accordion-header-des * {
  color: var(--rp-slate) !important;
  font-family: var(--rp-font-body);
  font-weight: var(--rp-body-weight);
}

body .cky-accordion-btn,
body .cky-accordion-btn * {
  color: var(--rp-navy) !important;
  font-family: var(--rp-font-display);
  font-weight: 500;
}

/* The category toggles pick up the amber so the "on" state reads as ours. */
body .cky-switch input:checked {
  background-color: var(--rp-amber) !important;
  border-color: var(--rp-amber) !important;
}

/* "Save my preferences" — the third action, and the one missed on the first
   pass because it only exists once the preference centre is open.

   Navy fill rather than amber or an outline: the row reads REJECT ALL (navy
   outline) / SAVE MY PREFERENCES (navy fill) / ACCEPT ALL (amber). Three
   distinct treatments at one size, with the amber reserved for the same job it
   does everywhere else on the site. Saving a considered choice is not the same
   act as accepting everything, so it should not look like it.

   `.cky-preference-center` is in the selector for the reason in the header:
   CookieYes's own rule is (0,2,0), so `body .cky-btn-preferences` at (0,1,1)
   would lose. Colours carry !important because they are inline. */
body .cky-preference-center .cky-btn-preferences {
  background-color: var(--rp-navy) !important;
  border-color: var(--rp-navy) !important;
  color: var(--rp-white) !important;
}

body .cky-preference-center .cky-btn-preferences:hover {
  background-color: var(--rp-navy-deep) !important;
  border-color: var(--rp-navy-deep) !important;
  color: var(--rp-white) !important;
}

/* Two more from the same screenshot that were CookieYes defaults: the close
   glyph, and the green "Always Active" status on the Necessary category —
   green being the one colour that appears nowhere in tokens.css. */
body .cky-preference-header .cky-btn-close {
  color: var(--rp-slate) !important;
}

body .cky-preference-header .cky-btn-close:hover {
  color: var(--rp-navy) !important;
}

body .cky-always-active {
  color: var(--rp-navy) !important;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: var(--rp-label-weight);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body .cky-footer-wrapper .cky-btn {
  min-height: 38px;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
body .cky-overlay {
  background-color: rgb(11 22 38 / 0.55) !important;
}

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 30rem) {
  body .cky-consent-container .cky-consent-bar {
    padding: 20px 18px 18px;
    border-radius: 12px;
  }

  body .cky-consent-container .cky-title {
    font-size: 1.125rem;
  }

  /* Full-width stacked buttons keep accept and reject the same size, which is
     the parity point above — on a narrow screen it is easy to accidentally
     make accept the wide one and reject a scrap beside it. */
  body .cky-notice-btn-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  body .cky-notice-btn-wrapper .cky-btn {
    width: 100%;
  }
}