/* Cookie consent w stylu noraline (Editorial Clarity).
   Ladowany PO cookieconsent.min.css (config/themes/noraline/assets.yaml -> footer_styles),
   dlatego nadpisuje biblioteke kolejnoscia, bez !important przy rownej specyficznosci.
   Dotyczy wylacznie theme noraline - pozostale projekty tego pliku nie laduja. */

/* ---- Tokeny biblioteki przemapowane na palete noraline ---- */
#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-bg: #fff;
  --cc-primary-color: var(--nl-ink);
  --cc-secondary-color: var(--nl-muted);
  --cc-link-color: var(--color-primary);
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius: 10px;
  --cc-separator-border-color: rgba(28, 18, 51, .14);

  /* Przycisk glowny - amber. Kontur i rozmiar identyczne jak w secondary,
     zeby obie opcje zgody mialy rowna prominencje (RODO). */
  --cc-btn-primary-bg: var(--nl-amber);
  --cc-btn-primary-color: var(--nl-ink);
  --cc-btn-primary-border-color: var(--nl-ink);
  --cc-btn-primary-hover-bg: #ffb63f;
  --cc-btn-primary-hover-color: var(--nl-ink);
  --cc-btn-primary-hover-border-color: var(--nl-ink);

  --cc-btn-secondary-bg: #fff;
  --cc-btn-secondary-color: var(--nl-ink);
  --cc-btn-secondary-border-color: var(--nl-ink);
  --cc-btn-secondary-hover-bg: var(--color-secondary-light);
  --cc-btn-secondary-hover-color: var(--nl-ink);
  --cc-btn-secondary-hover-border-color: var(--nl-ink);

  --cc-toggle-on-bg: var(--color-primary);
  --cc-toggle-off-bg: var(--nl-muted);
  --cc-toggle-readonly-bg: var(--color-secondary);
  --cc-cookie-category-block-bg: #faf8ff;
  --cc-cookie-category-block-border: rgba(28, 18, 51, .14);
  --cc-cookie-category-block-hover-bg: var(--color-secondary-light);
}

/* ---- Komiksowa ramka jak .nl-panel ---- */
#cc-main .cm,
#cc-main .pm {
  border: 2px solid var(--nl-ink);
}

#cc-main .cm {
  /* overflow:hidden z biblioteki przycinalby grafike wychylona nad box */
  overflow: visible;
  box-shadow: -8px 8px 0 var(--nl-amber);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-display);
  font-size: 1.25em;
  font-weight: 560;
  letter-spacing: -.02em;
}

#cc-main .cm__btn {
  border-width: 2px;
  font-weight: 600;
}

/* ---- Szymon wychylony zza gornej krawedzi banera ----
   Pseudo-element, nie <img> w tresci: .cm__desc ma overflow-y:auto,
   wiec obrazek wstawiony do opisu bylby przyciety przez scroll container.
   Grafika jest czysto dekoracyjna, wiec brak alt jest tu poprawny. */
#cc-main .cm::before {
  content: '';
  position: absolute;
  right: 18px;
  bottom: 100%;
  margin-bottom: -2px;          /* wchodzi na obramowanie boxa */
  width: 150px;
  height: 109px;
  background: url('../images/cookie-szymon.png') no-repeat center bottom / contain;
  pointer-events: none;
}

@media screen and (max-width: 640px) {
  #cc-main .cm::before {
    right: 10px;
    width: 104px;
    height: 76px;
  }
  #cc-main .cm {
    box-shadow: -6px 6px 0 var(--nl-amber);
  }
}