/* Site-native restyle of Klaro's bundled CSS.
 *
 * Loaded after Klaro injects its <style> at runtime, so we use two strategies:
 *   1. CSS variables — propagate via inheritance regardless of specificity.
 *      Killing greens/blues/grays at the .klaro {} scope automatically
 *      restyles every internal element that reads them (buttons, toggles,
 *      borders, descriptions).
 *   2. Selectors with !important for elements that need overrides beyond
 *      what variables can do. Klaro itself uses !important exactly once
 *      in the bundle, so this is the lightest reliable override pattern.
 *
 * Goal: make Klaro feel like part of the site. Geologica everywhere,
 * binary #0a0a0a / #f5f5f5 / #999 palette, .contact-btn-style pill buttons
 * with 0.3s inversion-on-hover.
 */

/* ─── Theme tokens (Klaro reads these via var() in its bundle) ─── */
.klaro {
  /* Typography */
  --font-family: "Geologica", sans-serif;
  --title-font-family: "Geologica", sans-serif;
  --font-size: 14px;

  /* Surfaces — dark scale */
  --dark1: #0a0a0a;       /* notice + modal card background (Klaro default #333) */
  --dark2: #333333;       /* dividers, borders, secondary surfaces (was #5c5c5c) */
  --dark3: #999999;       /* description text (was #7c7c7c) */

  /* Text — light scale */
  --light1: #f5f5f5;      /* primary text (was #fafafa) */
  --light2: #f5f5f5;      /* (was #c8c8c8 — was a faint gray for some borders) */
  --light3: #999999;      /* caret, faint accents (was #a0a0a0) */

  /* Kill greens — they were the success/accept/toggle-on accent */
  --green1: #f5f5f5;      /* primary "Accept all" + toggle on state */
  --green2: #f5f5f5;      /* "Accept selected" + only-required state */
  --green3: #f5f5f5;

  /* Kill blues — info button + link accent */
  --blue1: #f5f5f5;
  --blue2: #999999;

  /* Toggle slider track + knob (off state) */
  --white2: #333333;      /* slider track when off (was #f2f2f2 light gray) */
  --white3: #999999;      /* slider knob fill (was #e6e6e6) */

  /* Default text-on-button color (was white; we want dark on white-fill) */
  --button-text-color: #0a0a0a;

  /* Borders */
  --border-color: #333333;
  --border-width: 1px;
}

/* Force Geologica on EVERY text node inside the widget. Browsers reset
 * font-family on form controls (button, input, select) so cascade alone
 * isn't enough — apply directly. */
.klaro,
.klaro *,
.klaro button,
.klaro input,
.klaro select,
.klaro a {
  font-family: "Geologica", sans-serif !important;
}

/* ─── Anchors (privacy-policy link inside descriptions) ───
 * Klaro doesn't style <a> tags itself; they fall back to browser-default
 * blue. Style explicitly with site's white→muted-gray pattern. */
.klaro a,
.klaro a:link,
.klaro a:visited,
.klaro a:active {
  color: #f5f5f5 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 0.3s ease !important;
}
.klaro a:hover {
  color: #999999 !important;
  text-decoration: underline !important;
}

/* Description paragraphs — explicit color in case --dark3 inheritance loses
 * to a higher-specificity Klaro rule. */
.klaro .cm-list-description,
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description,
.klaro .context-notice .cm-list-description {
  color: #999999 !important;
}

/* ─── Hide non-essential UI ─── */

/* Klaro's master "Enable or disable all services" toggle — confusing when
 * its state drifts from individual service toggles. Footer Accept-all /
 * I-decline buttons cover the same use case. */
.cm-modal .cm-toggle-all {
  display: none;
}
.cm-modal .cm-toggle-all + .cm-purposes,
.cm-modal .cm-purposes + .cm-toggle-all {
  border-top: 0;
}

/* "Powered by Klaro" attribution. BSD-3 license permits hiding. */
.klaro .cm-powered-by {
  display: none !important;
}

/* ─── Buttons — site's .contact-btn aesthetic ───
 * Pill shape, 2px border, weight 500, 0.3s ease inversion-on-hover.
 * Matches the CTA language used throughout the site (header, footer, hero).
 *
 * Klaro emits these button roles in our config:
 *   .cm-btn-success / .cm-btn-accept-all   → "Accept all"        → primary (filled white)
 *   .cm-btn-success-var / .cm-btn-accept   → "Accept selected"   → secondary (outline)
 *   .cm-btn-decline / .cm-btn-danger       → "I decline"         → secondary (faint outline)
 *   .cm-btn-info / .cm-btn-lern-more       → "Learn more"        → tertiary (text link)
 *
 * Klaro scopes button rules with .cookie-modal/.cookie-notice/.context-notice
 * (4 classes), so !important is the lightest reliable override here.
 */

.klaro .cm-btn {
  font-family: "Geologica", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Primary — Accept all (filled white, like `.dark .contact-btn:hover`) */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all {
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f5 !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
  background-color: transparent !important;
  color: #f5f5f5 !important;
  border-color: #f5f5f5 !important;
}

/* Secondary — Accept selected (outline, like `.dark .contact-btn`) */
.klaro .cm-btn.cm-btn-success-var,
.klaro .cm-btn.cm-btn-accept {
  background-color: transparent !important;
  color: #f5f5f5 !important;
  border-color: #f5f5f5 !important;
}
.klaro .cm-btn.cm-btn-success-var:hover,
.klaro .cm-btn.cm-btn-accept:hover {
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f5 !important;
}

/* Secondary — Decline (faint outline at lower emphasis) */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger {
  background-color: transparent !important;
  color: #f5f5f5 !important;
  border-color: rgba(245, 245, 245, 0.4) !important;
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover {
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f5 !important;
}

/* Tertiary — Learn more / Manage preferences (text link, no pill) */
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-lern-more {
  background-color: transparent !important;
  color: #f5f5f5 !important;
  border-color: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  padding: 0.6rem 0.5rem !important;
  border-radius: 0 !important;
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cm-btn.cm-btn-lern-more:hover {
  background-color: transparent !important;
  color: #999999 !important;
  border-color: transparent !important;
  text-decoration: underline !important;
}

/* Close (×) button in the modal corner */
.klaro .cm-btn.cm-btn-close {
  background-color: transparent !important;
  color: #999999 !important;
  border-color: transparent !important;
}
.klaro .cm-btn.cm-btn-close:hover {
  background-color: transparent !important;
  color: #f5f5f5 !important;
  border-color: transparent !important;
}

/* ─── Toggle switches — site's binary inversion ───
 * Off:  dark gray track (#333) + medium-gray knob (#999)
 * On:   white track (#f5f5f5) + black knob (#0a0a0a)  ← inverts like .contact-btn
 *
 * Off colors come from --white2/--white3 vars (above). On colors come from
 * --green1 (track) and an explicit knob override (below). */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before {
  background-color: #0a0a0a !important;
}

/* Required service ("always on", greyed out) — keep visually distinct
 * from active toggles by using a dimmer white. */
.klaro .cookie-modal .cm-list-input.required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required + .cm-list-label .slider {
  background-color: rgba(245, 245, 245, 0.4) !important;
}
.klaro .cookie-modal .cm-list-input.required + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.required + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input.required + .cm-list-label .slider::before {
  background-color: #999999 !important;
}