/* ============================================================================
   COOKIE CONSENT — brand theme.

   The vendored library ships a light default. Rather than fork its CSS, this
   maps its theming variables onto OUR design tokens, so the banner and the
   preferences modal inherit the same black/cyan/Alegreya system as the rest of
   both halves — and follow any future token change automatically.

   Loaded AFTER vendor/cookieconsent/cookieconsent.css. Nothing here restyles
   the library's internals; it only sets the variables it exposes.
   ========================================================================== */

#cc-main {
  /* Type */
  --cc-font-family: var(--font-ui);

  /* Surfaces */
  --cc-bg: var(--color-surface-1);
  --cc-primary-color: var(--color-text);
  --cc-secondary-color: var(--color-text-muted);
  --cc-link-color: var(--color-accent);

  --cc-modal-border-radius: var(--radius-lg);
  --cc-btn-border-radius: var(--radius);
  --cc-overlay-bg: rgba(0, 0, 0, 0.72);

  /* Primary button = the site's accent CTA */
  --cc-btn-primary-bg: var(--color-accent);
  --cc-btn-primary-color: var(--color-on-accent);
  --cc-btn-primary-border-color: var(--color-accent);
  --cc-btn-primary-hover-bg: var(--color-heading);
  --cc-btn-primary-hover-color: #000;
  --cc-btn-primary-hover-border-color: var(--color-heading);

  /* Secondary button = quiet, outlined */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--color-text);
  --cc-btn-secondary-border-color: var(--color-border-strong);
  --cc-btn-secondary-hover-bg: var(--color-surface-3);
  --cc-btn-secondary-hover-color: var(--color-heading);
  --cc-btn-secondary-hover-border-color: var(--color-heading);

  /* Category rows in the preferences modal */
  --cc-cookie-category-block-bg: var(--color-surface-2);
  --cc-cookie-category-block-border: var(--color-border);
  --cc-cookie-category-block-hover-bg: var(--color-surface-3);
  --cc-cookie-category-block-hover-border: var(--color-border-strong);
  --cc-cookie-category-expanded-block-bg: var(--color-surface-2);
  --cc-cookie-category-expanded-block-hover-bg: var(--color-surface-3);
  --cc-section-category-border: var(--color-border);
  --cc-separator-border-color: var(--color-border);

  /* Toggles: on = accent, off = a plain dark track */
  --cc-toggle-on-bg: var(--color-accent);
  --cc-toggle-on-knob-bg: var(--color-on-accent);
  --cc-toggle-off-bg: var(--color-surface-3);
  --cc-toggle-off-knob-bg: var(--color-text-muted);
  --cc-toggle-enabled-icon-color: var(--color-on-accent);
  --cc-toggle-disabled-icon-color: var(--color-surface-1);
  /* Read-only (strictly necessary) reads as locked, not as a live control. */
  --cc-toggle-readonly-bg: var(--color-surface-3);
  --cc-toggle-readonly-knob-bg: var(--color-text-faint);
  --cc-toggle-readonly-knob-icon-color: var(--color-surface-1);

  /* Footer strip of the modal */
  --cc-footer-bg: var(--color-surface-2);
  --cc-footer-color: var(--color-text-muted);
  --cc-footer-border-color: var(--color-border);

  --cc-webkit-scrollbar-bg: var(--color-surface-3);
  --cc-webkit-scrollbar-hover-bg: var(--color-border-strong);
}

/* Titles use the display face, like every other heading on the site. */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
  font-family: var(--font-display);
  color: var(--color-heading);
}

/* The library's own border sits on a light assumption; make it read on black. */
#cc-main .cm,
#cc-main .pm {
  border: 1px solid var(--color-border);
}