/* LeaderboardKing themes for the self-hosted Klaro consent banner (docs/00-CONVENTIONS.md "Cookie
   consent"). Loaded AFTER klaro.css. Two brand looks, selected by a body class:
     - default (`.klaro`)                    -> APPLICATION look: light lbk-blue shade, thick darker-blue
                                                outline, rounded corners, lbk-blue + lbk-gold buttons,
                                                dark-blue text.
     - `body.klaro-theme-marketing .klaro`   -> MARKETING look: dark navy + gold (Championship Board),
                                                set by layouts/marketing's <body class="… klaro-theme-marketing">.
   Colors reference the brand palette (`--color-brand-*` on :root, app/assets/tailwind/application.css).

   Two things about Klaro's CSS drive the approach here:
   1. It defaults to a DARK theme (dark bg via `--dark1`, light text via `--light1`) and sets the container
      BACKGROUND on high-specificity selectors -- so we recolor the background by overriding the `--dark1`
      VARIABLE (Klaro's own rule then resolves to our color, no specificity fight).
   2. Any banner text element Klaro does NOT explicitly colour INHERITS the host <body>'s text colour
      (e.g. the marketing layout's `text-brand-blue-950`), which paints dark text onto the dark banner. So
      we set `color` on the CONTAINER *and* on every text element per theme -- app dark, marketing light --
      each scoped so marketing (higher specificity) wins over the app default. `--light1` is left alone (it
      also paints the white toggle knob + a caret). */

/* ---- shared ---- */
.klaro {
  --border-radius: 12px;
  --font-family: inherit;
  --title-font-family: inherit;
  --button-text-color: #fff; /* text on the blue/navy neutral buttons */
}

/* Small screens: Klaro pins the notice flush to the viewport edges below 1024px (width:100%, bottom/
   right:0) and only rounds the corners at >=1024px -- so the rounded corners + border are lost on mobile.
   Float it with a small inset instead, and round it here too. Desktop keeps Klaro's bottom-right card. */
@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    border-radius: var(--border-radius, 12px);
  }
}

/* ============================ APPLICATION (default, light) ============================ */
.klaro {
  --dark1: var(--color-brand-blue-50);   /* container background -> light lbk-blue */
  --dark2: var(--color-brand-blue-600);  /* neutral/decline button + off-toggle track */
  --dark3: var(--color-brand-blue-500);  /* secondary/description text */
  --green1: var(--color-brand-gold-500); /* primary accept + notice links */
  --green2: var(--color-brand-gold-400); /* "accept all" variant */
  --green3: var(--color-brand-gold-300);
  --blue1: var(--color-brand-blue-600);  /* info button */
  --blue2: var(--color-brand-blue-700);  /* modal links */
}
/* Text -> dark blue: the container (so un-classed text inherits it) AND the elements Klaro explicitly
   colours light via --light1 (which would otherwise be invisible on the light bg). */
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li,
.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 h2,
.klaro .cookie-modal .cm-modal.cm-klaro .cm-list-title {
  color: var(--color-brand-blue-900);
}
/* Thicker, darker outline (Klaro sets no border on the container). Marketing overrides the colour below. */
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal.cm-klaro {
  border: 2px solid var(--color-brand-blue-600);
}
/* Gold accept buttons take DARK text (white-on-gold fails contrast) -- true in both themes. */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var {
  color: var(--color-brand-blue-950);
  font-weight: 600;
}

/* ============================ MARKETING (dark navy + gold) ============================ */
body.klaro-theme-marketing .klaro {
  --dark1: var(--color-brand-blue-950);  /* container background -> navy */
  --dark2: var(--color-brand-blue-800);  /* neutral button */
  --dark3: var(--color-brand-blue-200);  /* secondary/description text -> light muted on navy */
  --green1: var(--color-brand-gold-500); /* accept + notice links -> gold */
  --green2: var(--color-brand-gold-400);
  --green3: var(--color-brand-gold-300);
  --blue1: var(--color-brand-gold-400);  /* info -> gold */
  --blue2: var(--color-brand-gold-300);  /* modal links -> gold */
}
/* Text -> light (overrides both Klaro's default AND the marketing <body>'s dark inherited colour). Higher
   specificity than the app rule above, so it wins on marketing pages. */
body.klaro-theme-marketing .klaro .cookie-notice:not(.cookie-modal-notice),
body.klaro-theme-marketing .klaro .cookie-notice p,
body.klaro-theme-marketing .klaro .cookie-notice strong,
body.klaro-theme-marketing .klaro .cookie-notice h1,
body.klaro-theme-marketing .klaro .cookie-notice h2,
body.klaro-theme-marketing .klaro .cookie-notice ul,
body.klaro-theme-marketing .klaro .cookie-notice li,
body.klaro-theme-marketing .klaro .cookie-modal .cm-modal.cm-klaro,
body.klaro-theme-marketing .klaro .cookie-modal .cm-modal.cm-klaro p,
body.klaro-theme-marketing .klaro .cookie-modal .cm-modal.cm-klaro h1,
body.klaro-theme-marketing .klaro .cookie-modal .cm-modal.cm-klaro h2,
body.klaro-theme-marketing .klaro .cookie-modal .cm-modal.cm-klaro .cm-list-title {
  color: #f7fafc;
}
/* Thicker gold outline. */
body.klaro-theme-marketing .klaro .cookie-notice:not(.cookie-modal-notice),
body.klaro-theme-marketing .klaro .cookie-modal .cm-modal.cm-klaro {
  border: 2px solid var(--color-brand-gold-500);
}