/* ==========================================================================
   Tulsa Bricks — cookie consent theme
   Brand override for CookieConsent v3 (Orest Bida, MIT).
   Load order on every page:
     <link rel="stylesheet" href="/css/cookieconsent.css">   (library base)
     <link rel="stylesheet" href="/css/consent.css">         (this file)
   Fonts: Fredoka for headers, Space Mono for body. Scoped to the banner so
   the rest of the site keeps DM Sans / Outfit.
   ========================================================================== */

/* Banner-only fonts. Site fonts are untouched. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

#cc-main {
  /* ---- palette: LEGO primaries + accent, orange present not dominant ---- */
  --tb-red:    #FF1020;
  --tb-blue:   #155CF4;
  --tb-blue-d: #0E45BE;
  --tb-yellow: #F5BE00;
  --tb-pink:   #F03D93;
  --tb-green:  #2CC84D;
  --tb-orange: #FF7A1A;   /* signature accent — used as a thin top rule only */
  --tb-ink:    #221F24;
  --tb-paper:  #FFFFFF;
  --tb-cream:  #F2F0EC;
  --tb-line:   rgba(34, 31, 36, 0.12);
  --tb-ink-soft: rgba(34, 31, 36, 0.68);

  /* ---- type ---- */
  --cc-font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- surfaces ---- */
  --cc-bg: var(--tb-paper);
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius: 999px;     /* pill buttons, playful */
  --cc-pm-toggle-border-radius: 999px;
  --cc-modal-margin: 1rem;
  --cc-z-index: 2147483600;

  /* ---- text ---- */
  --cc-primary-color: var(--tb-ink);
  --cc-secondary-color: var(--tb-ink-soft);
  --cc-link-color: var(--tb-blue);

  /* ---- primary button = LEGO blue, the "accept" action ---- */
  --cc-btn-primary-bg: var(--tb-blue);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--tb-blue);
  --cc-btn-primary-hover-bg: var(--tb-blue-d);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--tb-blue-d);

  /* ---- secondary button = quiet outline ---- */
  --cc-btn-secondary-bg: var(--tb-cream);
  --cc-btn-secondary-color: var(--tb-ink);
  --cc-btn-secondary-border-color: var(--tb-cream);
  --cc-btn-secondary-hover-bg: #E4E1DC;
  --cc-btn-secondary-hover-color: var(--tb-ink);
  --cc-btn-secondary-hover-border-color: #E4E1DC;

  /* ---- toggles ---- */
  --cc-toggle-on-bg: var(--tb-green);
  --cc-toggle-off-bg: #BDBABF;
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-readonly-bg: #D9D6D2;
  --cc-toggle-readonly-knob-bg: #fff;
  --cc-toggle-readonly-knob-icon-color: var(--tb-ink-soft);
  --cc-toggle-enabled-icon-color: #fff;
  --cc-toggle-disabled-icon-color: #fff;

  /* ---- category cards + footer ---- */
  --cc-cookie-category-block-bg: var(--tb-cream);
  --cc-cookie-category-block-border: var(--tb-cream);
  --cc-cookie-category-block-hover-bg: #E9E6E1;
  --cc-cookie-category-block-hover-border: #E9E6E1;
  --cc-cookie-category-expanded-block-bg: #E4E1DC;
  --cc-cookie-category-expanded-block-hover-bg: #DBD8D3;
  --cc-separator-border-color: var(--tb-line);
  --cc-section-category-border: var(--tb-line);
  --cc-cookie-category-block-border: var(--tb-line);
  --cc-footer-bg: var(--tb-cream);
  --cc-footer-color: var(--tb-ink-soft);
  --cc-footer-border-color: var(--tb-line);
  --cc-overlay-bg: rgba(34, 31, 36, 0.55);
  --cc-webkit-scrollbar-bg: #C9C6C2;
  --cc-webkit-scrollbar-hover-bg: var(--tb-ink-soft);
}

/* Headers in Fredoka, a touch bolder than the library default. */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tb-ink);
}

#cc-main .cm__title { font-size: 1.18rem; }

/* Buttons: Fredoka, pill, no shouty all-caps. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* The one orange moment: a thin signature rule across the top of the box. */
#cc-main .cm,
#cc-main .pm {
  border-top: 4px solid var(--tb-orange);
  box-shadow: 0 18px 50px -12px rgba(34, 31, 36, 0.30);
}

/* Body copy a hair smaller so Space Mono doesn't run long. */
#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Tidy box dimensions — clean, plenty of air. */
#cc-main .cm--box { max-width: 25rem; }

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