/* The cookie consent banner and preferences dialog (cookie consent, owner decision 2026-10-11).
   The structure and behaviour are the vendored vanilla-cookieconsent's (cookieconsent.css, loaded
   just before this file and never edited). All this file does is re-point the library's --cc-*
   custom properties at our design tokens, so light and dark follow the site theme on their own
   (the tokens already change under :root[data-theme="dark"] and the OS-dark block) and the library's
   own .cc--darkmode class is never needed. Tokens only: no raw colour and no primitive ramp name.

   The banner is a compact fixed bar along the bottom edge. It overlays the page rather than pushing
   it, so choosing never shifts content, and on a narrow screen the library stacks its buttons. */
#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: var(--radius-lg);
  --cc-btn-border-radius: var(--radius-md);
  --cc-modal-transition-duration: var(--duration-slow);
  --cc-z-index: var(--z-toast);

  --cc-bg: var(--color-surface-raised);
  --cc-primary-color: var(--color-text);
  --cc-secondary-color: var(--color-text-muted);
  --cc-link-color: var(--color-link);
  --cc-overlay-bg: var(--color-overlay);

  /* Every choice is the same quiet outlined button, so no choice is dressed as the preferred one
     (Accept all and Reject all carry equal weight, equalWeightButtons). The primary and secondary
     variables are therefore the same colours. */
  --cc-btn-primary-bg: var(--color-surface);
  --cc-btn-primary-color: var(--color-text-strong);
  --cc-btn-primary-border-color: var(--color-border-strong);
  --cc-btn-primary-hover-bg: var(--color-surface-hover);
  --cc-btn-primary-hover-color: var(--color-text-strong);
  --cc-btn-primary-hover-border-color: var(--color-border-strong);

  --cc-btn-secondary-bg: var(--color-surface);
  --cc-btn-secondary-color: var(--color-text-strong);
  --cc-btn-secondary-border-color: var(--color-border-strong);
  --cc-btn-secondary-hover-bg: var(--color-surface-hover);
  --cc-btn-secondary-hover-color: var(--color-text-strong);
  --cc-btn-secondary-hover-border-color: var(--color-border-strong);

  --cc-separator-border-color: var(--color-border);
  --cc-section-category-border: var(--color-border);
  --cc-cookie-category-block-bg: var(--color-surface-sunken);
  --cc-cookie-category-block-border: var(--color-border);
  --cc-cookie-category-block-hover-bg: var(--color-surface-hover);
  --cc-cookie-category-block-hover-border: var(--color-border-strong);
  --cc-cookie-category-expanded-block-bg: var(--color-surface-sunken);
  --cc-cookie-category-expanded-block-hover-bg: var(--color-surface-hover);

  --cc-toggle-on-bg: var(--color-action);
  --cc-toggle-off-bg: var(--color-border-input);
  --cc-toggle-on-knob-bg: var(--color-surface);
  --cc-toggle-off-knob-bg: var(--color-surface);
  --cc-toggle-enabled-icon-color: var(--color-action);
  --cc-toggle-disabled-icon-color: var(--color-border-input);
  --cc-toggle-readonly-bg: var(--color-border-strong);
  --cc-toggle-readonly-knob-bg: var(--color-surface);
  --cc-toggle-readonly-knob-icon-color: var(--color-border-strong);

  --cc-footer-bg: var(--color-surface-sunken);
  --cc-footer-color: var(--color-text-muted);
  --cc-footer-border-color: var(--color-border);
  --cc-webkit-scrollbar-bg: var(--color-border);
  --cc-webkit-scrollbar-hover-bg: var(--color-border-strong);
}

/* Our focus ring on every control the library draws, so keyboard focus matches the rest of the site. */
#cc-main button:focus-visible,
#cc-main a:focus-visible,
#cc-main input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Compact copy: the bar uses the small body size so it stays two lines on a laptop and a few on a phone. */
#cc-main .cm__desc {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

/* Links in the copy read as links: our link colour, underlined. */
#cc-main .cm__desc a,
#cc-main .pm__section-desc a {
  color: var(--color-link);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

/* A compact bar: the same control height and type size as our own buttons, the three choices on ONE
   row beside the copy from the tablet width up and on one row under it on a phone. The library's own
   rules stack them in a column, which makes a tall bar that covers content, so these restate the
   direction. Its mobile rules carry !important, hence the same here. */
#cc-main .cm__btn {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  font-size: var(--text-md);
}

#cc-main .cm--bar.cm--inline .cm__body {
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-2) 0;
}

#cc-main .cm--bar.cm--inline .cm__btns {
  flex-direction: row;
  flex-shrink: 0;
  max-width: none;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

#cc-main .cm--bar.cm--inline .cm__btn-group {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

#cc-main .cm--bar.cm--inline .cm__btn-group + .cm__btn-group,
#cc-main .cm--bar.cm--inline .cm__btn + .cm__btn {
  margin: 0;
}

#cc-main .cm--bar.cm--inline .cm__btn {
  min-width: 0;
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  #cc-main .cm__body {
    flex-direction: column !important;
    align-items: stretch;
    gap: 0;
  }

  #cc-main .cm__texts {
    padding-top: var(--space-3);
  }

  #cc-main .cm__btns {
    flex-direction: row !important;
    align-self: stretch;
    width: 100%;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3) var(--space-3) !important;
    border-top: 0 !important;
  }

  #cc-main .cm__btn-group {
    flex-direction: row !important;
    min-width: 0 !important;
    flex: 2;
    gap: var(--space-1-5);
  }

  #cc-main .cm__btn-group + .cm__btn-group {
    flex: 1;
  }

  #cc-main .cm__btn {
    flex: 1 1 0 !important;
    padding: 0 var(--space-1) !important;
    font-size: var(--text-sm);
  }

  #cc-main .cm__desc {
    padding-bottom: var(--space-2) !important;
    font-size: var(--text-sm);
  }
}