/* ButterCut brand theme for Klaro — layered on top of the vendored klaro.css.
 *
 * Keep klaro.css pristine (it's upstream BSD-3-Clause) and do all branding here.
 * Loaded AFTER klaro.css in _layouts/default.html. The accent colours are set via
 * klaro's own CSS custom properties; the literal surface/button overrides carry
 * !important because klaro can re-assert its base styles at runtime (so plain
 * source-order isn't enough to win the cascade).
 *
 * Look: a white card with ink text and brand-blue accents, matching the site
 * (cream/#FAFAF7 bg, ink/#171614 text, bc-blue/#2D4FDB). klaro reuses --green1
 * for both the primary button and the "on" toggle — on a light surface both want
 * to be blue, so the single override covers both. */

.klaro {
  /* Accent: recolor klaro's greens/blues to the brand blue. */
  --green1: #2D4FDB; /* primary button bg + toggle ON */
  --green2: #2442C9; /* hover / success-var */
  --green3: rgba(45, 79, 219, 0.35); /* focus ring */
  --blue1: #2D4FDB; /* "Save" (info) button */
  --blue2: #2D4FDB; /* links on dark surfaces (unused here, kept on-brand) */

  /* Muted text: darken klaro's light grey so it's readable on white. */
  --light3: #6B6862;

  /* Shape + type to match the site. */
  --border-radius: 12px;
  --font-family: inherit;
  --title-font-family: inherit;
}

/* --- Surfaces: flip klaro's dark notice/modal to a white card with ink text --- */
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal-notice {
  background-color: #fff !important;
  color: #171614 !important;
  border: 1px solid #E7E5DE !important;
}

/* Ensure nested text (klaro sets some to its light colour) reads as ink. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal .cm-modal.cm-klaro p,
.klaro .cookie-modal .cm-modal.cm-klaro h1,
.klaro .cookie-modal .cm-modal.cm-klaro span.cm-list-title,
.klaro .cookie-modal-notice,
.klaro .cookie-modal-notice p {
  color: #171614 !important;
}

/* Hairline dividers (klaro uses a dark grey) -> match the site's. */
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
  border-color: #E7E5DE !important;
}

/* Close (X) icon: dark on a light modal. */
.klaro .cookie-modal .cm-modal .hide svg {
  stroke: #171614 !important;
}

/* --- Links --- */
.klaro .cookie-notice:not(.cookie-modal-notice) a,
.klaro .cookie-modal a,
.klaro .cookie-modal-notice a {
  color: #2D4FDB !important;
}

/* Keep the small "powered by Klaro" attribution muted, not a brand-blue link. */
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: #9A958C !important;
}

/* --- Buttons --- */
/* Shape: pill-rounded with a little more padding to echo the site's buttons.
 * Kept a touch tighter than the full-size site CTAs. Scoped to .cm-btn so the
 * modal/notice corners keep their 12px radius. */
.klaro .cm-btn {
  border-radius: 9999px !important;
  padding: 0.55em 1.1em !important;
}

/* Primary buttons (Accept all / Save) get brand blue + white text from klaro's
 * --green1 / --blue1 vars + its #fff button text, so they need no rule here.
 * Only the secondary actions (Decline / close) need recolouring: klaro tags them
 * cm-btn-danger / cn-decline / cm-btn-close, which fall back to its dark base. */
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-close {
  background-color: #EFEEEA !important;
  color: #171614 !important;
}
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-close:hover {
  background-color: #E4E2DC !important;
}