/* Cookie consent banner theme — matches design.md tokens (colors, type, pill buttons) */
#cc-main {
  --cc-font-family: var(--font-body);
  --cc-bg: var(--parchment);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--ink-mid);
  --cc-overlay-bg: rgba(7, 22, 16, 0.6);

  --cc-modal-border-radius: 1rem;
  --cc-modal-margin: 1rem;

  --cc-btn-border-radius: 100vw;
  --cc-btn-primary-bg: var(--sand);
  --cc-btn-primary-color: var(--forest-deep);
  --cc-btn-primary-border-color: var(--sand);
  --cc-btn-primary-hover-bg: var(--sand-light);
  --cc-btn-primary-hover-color: var(--forest-deep);
  --cc-btn-primary-hover-border-color: var(--sand-light);

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--forest);
  --cc-btn-secondary-border-color: var(--forest);
  --cc-btn-secondary-hover-bg: var(--parchment-dk);
  --cc-btn-secondary-hover-color: var(--forest);
  --cc-btn-secondary-hover-border-color: var(--forest);

  --cc-toggle-on-bg: var(--forest);
  --cc-toggle-on-knob-bg: var(--cream);
  --cc-toggle-off-bg: var(--parchment-dk);
  --cc-toggle-off-knob-bg: var(--cream);
  --cc-toggle-readonly-bg: var(--parchment-dk);
  --cc-toggle-readonly-knob-bg: var(--sage-light);
  --cc-toggle-readonly-knob-icon-color: var(--cream);
  --cc-toggle-enabled-icon-color: var(--cream);
  --cc-toggle-disabled-icon-color: var(--ink-mid);

  --cc-cookie-category-block-bg: var(--cream);
  --cc-cookie-category-block-border: var(--parchment-dk);
  --cc-cookie-category-block-hover-bg: var(--parchment-dk);
  --cc-cookie-category-expanded-block-bg: var(--cream);
  --cc-cookie-category-expanded-block-hover-bg: var(--parchment-dk);
  --cc-section-category-border: var(--parchment-dk);
  --cc-separator-border-color: var(--parchment-dk);

  --cc-footer-bg: var(--cream);
  --cc-footer-border-color: var(--parchment-dk);
  --cc-footer-color: var(--ink);

  --cc-webkit-scrollbar-bg: var(--parchment-dk);
  --cc-webkit-scrollbar-hover-bg: var(--sage);
}

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

/* The library ties category-block radius to --cc-btn-border-radius (pill, 100vw),
   which is correct for buttons but looks broken on expandable blocks. Override
   the exact selectors it uses (same specificity, later in the cascade) so
   blocks get a normal card radius instead. */
#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section-title {
  border-radius: 1rem;
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border-radius: 1rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#cc-main .pm__section--toggle.is-expanded .pm__section-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#cc-main a {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.2em;
}

#cc-main a:hover,
#cc-main a:focus-visible {
  color: var(--sand);
}

#cc-main a:focus-visible,
#cc-main button:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #cc-main * {
    transition: none !important;
    animation: none !important;
  }
}

/* Persistent "manage cookies" trigger, injected by js/cookie-consent.js.
   Bottom-left (mirrors .wa-float's bottom-right) so it never overlaps
   the floating WhatsApp button. */
.cc-manage-btn {
  position: fixed;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  color: var(--parchment);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(7, 22, 16, 0.35);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.2s ease;
}

.cc-manage-btn:hover {
  transform: scale(1.1);
  background: var(--forest-mid);
}

.cc-manage-btn:active {
  transform: scale(1.02);
}

.cc-manage-btn:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cc-manage-btn {
    transition: none;
  }
}