/* ==========================================================================
   KOBIL — Cookie consent (vanilla-cookieconsent v3 theme)

   The library ships its own stylesheet (`css/vendor/cookieconsent.css`) and
   exposes every colour as a `--cc-*` custom property, so this file re-points
   those at the project's tokens instead of restyling the widget's DOM. That is
   deliberate: the vendor file can be replaced on a version bump without this
   theme needing a rewrite, and no selector here depends on the library's
   internal class names beyond the two radii it does not expose.
   ========================================================================== */

#cc-main {
  --cc-font-family: var(--font-sans);

  --cc-bg: var(--white);
  --cc-primary-color: var(--navy);
  --cc-secondary-color: var(--navy-70);

  /* Buttons are the site's pill shape (40px), not the library's 4px. */
  --cc-btn-border-radius: 40px;

  /* Primary buttons carry the navbar's colour (`--navy`, the same fill
     `css/sections/header.css` uses for the header bar and its pill), so the
     dialog reads as part of the site chrome rather than as a third accent
     competing with the page's Go Blue CTAs. Hover deepens to `--navy-900`,
     which is the darkest step in the scale. */
  --cc-btn-primary-bg: var(--navy);
  --cc-btn-primary-color: var(--white);
  --cc-btn-primary-border-color: var(--navy);
  --cc-btn-primary-hover-bg: var(--navy-900);
  --cc-btn-primary-hover-color: var(--white);
  --cc-btn-primary-hover-border-color: var(--navy-900);

  --cc-btn-secondary-bg: var(--navy-20);
  --cc-btn-secondary-color: var(--navy);
  --cc-btn-secondary-border-color: var(--navy-40);
  --cc-btn-secondary-hover-bg: var(--navy-30);
  --cc-btn-secondary-hover-color: var(--navy);
  --cc-btn-secondary-hover-border-color: var(--navy-50);

  --cc-separator-border-color: var(--navy-40);
  --cc-toggle-on-bg: var(--navy);
  --cc-toggle-off-bg: var(--navy-60);
  --cc-toggle-on-knob-bg: var(--white);
  --cc-toggle-off-knob-bg: var(--white);
  --cc-toggle-readonly-bg: var(--navy-40);
  --cc-toggle-readonly-knob-bg: var(--white);
  --cc-toggle-readonly-knob-icon-color: var(--navy-65);

  --cc-cookie-category-block-bg: var(--navy-20);
  --cc-cookie-category-block-border: var(--navy-40);
  --cc-cookie-category-block-hover-bg: var(--navy-30);
  --cc-cookie-category-block-hover-border: var(--navy-50);
  --cc-cookie-category-expanded-block-bg: var(--white);
  --cc-cookie-category-expanded-block-hover-bg: var(--navy-20);

  --cc-overlay-bg: rgba(17, 36, 74, 0.55);   /* --navy at 55% */
  --cc-footer-bg: var(--navy-20);
  --cc-footer-color: var(--navy-70);
  --cc-footer-border-color: var(--navy-40);

  --cc-link-color: var(--blue);
}

/* The two radii the library hardcodes. `--radius-sm` (12px) is the same corner
   the page surfaces and cards use, so the dialog reads as part of the system. */
#cc-main .cm,
#cc-main .pm {
  border-radius: var(--radius-sm);
}

/* The library's default shadow is a flat grey. This is the site's own elevation:
   navy-tinted, so it sits on the page ground without turning it muddy. */
#cc-main .cm,
#cc-main .pm {
  box-shadow: 0 12px 40px rgba(17, 36, 74, 0.16);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Body copy tracks the site's UI font rather than the display face. */
#cc-main .cm__desc,
#cc-main .pm__section-desc,
#cc-main .pm__badge {
  font-family: var(--font-ui);
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--font-ui);
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* Focus ring matches the rest of the site (see base.css / the resources cards):
   Go Blue, 2px, offset 4 — the library's default is a thin browser outline. */
#cc-main button:focus-visible,
#cc-main a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}