/* ──────────────────────────────────────────────────────────────
   Spanish Buddy · CookieConsent v3 theme overrides
   Maps Orest Bida's CookieConsent v3 CSS variables onto the
   SpanishBuddy palette (see colors_and_type.css).
   Load this AFTER the upstream cookieconsent.css.
   ────────────────────────────────────────────────────────────── */

#cc-main {
  /* ── Typography ───────────────────────────────────────────── */
  --cc-font-family: var(--sb-font-body, 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif);

  /* ── Surfaces & text ──────────────────────────────────────── */
  --cc-bg:                              var(--sb-cream-2);
  --cc-primary-color:                   var(--sb-ink);
  --cc-secondary-color:                 var(--sb-ink-soft);
  --cc-link-color:                      var(--sb-green-dark);

  /* ── Primary button: Accept all (brand green) ─────────────── */
  --cc-btn-primary-bg:                  var(--sb-green);
  --cc-btn-primary-color:               var(--sb-cream-2);
  --cc-btn-primary-border-color:        var(--sb-green);
  --cc-btn-primary-hover-bg:            var(--sb-green-dark);
  --cc-btn-primary-hover-color:         var(--sb-cream-2);
  --cc-btn-primary-hover-border-color:  var(--sb-green-dark);

  /* ── Secondary button: Reject (peach tonal, equal weight) ── */
  --cc-btn-secondary-bg:                var(--sb-peach-soft);
  --cc-btn-secondary-color:             var(--sb-ink);
  --cc-btn-secondary-border-color:      var(--sb-peach-soft);
  --cc-btn-secondary-hover-bg:          var(--sb-peach);
  --cc-btn-secondary-hover-color:       var(--sb-cream-2);
  --cc-btn-secondary-hover-border-color: var(--sb-peach);

  /* ── Category blocks (preferences modal) ──────────────────── */
  --cc-cookie-category-block-bg:                var(--sb-cream);
  --cc-cookie-category-block-border:            var(--sb-cream-edge);
  --cc-cookie-category-block-hover-bg:          var(--sb-cream-2);
  --cc-cookie-category-block-hover-border:      var(--sb-cream-edge);
  --cc-cookie-category-expanded-block-bg:       var(--sb-cream);
  --cc-cookie-category-expanded-block-hover-bg: var(--sb-cream-2);
  --cc-section-category-border:                 var(--sb-cream-edge);

  /* ── Overlay (dimmed page behind modal) ───────────────────── */
  --cc-overlay-bg:      rgba(26, 20, 16, 0.55);
  --cc-overlay-opacity: 1;

  /* ── Toggles (green = on, cream-edge = off) ───────────────── */
  --cc-toggle-bg-on:         var(--sb-green);
  --cc-toggle-bg-off:        var(--sb-cream-edge);
  --cc-toggle-bg-readonly:   var(--sb-ink-faint);
  --cc-toggle-knob-bg:       #ffffff;
  --cc-toggle-knob-icon-color: var(--sb-green);

  /* ── Radii (match SpanishBuddy: 18px cards, 14px buttons) ── */
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius:   14px;
  --cc-pm-toggle-border-radius: 999px;

  /* ── Motion ───────────────────────────────────────────────── */
  --cc-modal-transition-duration: 0.32s;
}

/* ── Display-font treatment for modal titles ─────────────────── */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
  font-family: var(--sb-font-display, 'Fraunces', Georgia, 'Times New Roman', serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

#cc-main .cm__title {
  font-size: 22px;
  line-height: 1.2;
}

#cc-main .pm__title {
  font-size: 24px;
  line-height: 1.2;
}

/* ── Banner + modal cards: warm shadow, soft edge ────────────── */
#cc-main .cm,
#cc-main .pm {
  box-shadow:
    0 18px 48px rgba(60, 40, 20, 0.16),
    0 6px 16px rgba(60, 40, 20, 0.08);
  border: 1px solid var(--sb-cream-edge);
}

/* ── Buttons: SpanishBuddy weight + slight lift on hover ─────── */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#cc-main .cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 124, 102, 0.20);
}

/* ── Footer "Cookie preferences" trigger button ──────────────── */
/* Renders <button class="lp-cookie-prefs" data-cc="show-preferencesModal">
   to look like a plain link inside the footer's link row. */
.lp-cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}

/* Dark "legal" footer (privacy / terms / contact): match the
   sibling anchors' color, opacity, and left margin. */
.legal-footer-inner .lp-cookie-prefs {
  color: var(--sb-cream-2);
  opacity: 0.8;
  margin-left: 16px;
}
.legal-footer-inner .lp-cookie-prefs:hover {
  opacity: 1;
  color: var(--sb-green);
}
@media (max-width: 600px) {
  .legal-footer-inner .lp-cookie-prefs {
    margin-left: 0;
    margin-right: 16px;
  }
}

/* Landing-page footer-bottom link row. */
.lp-footer-bottom .lp-cookie-prefs:hover {
  color: var(--sb-green);
}