/*
 * Scirator cookie banner skin. Sits on top of cookieconsent.css (vanilla-cookieconsent v3, MIT).
 * To recolour a journal, change the four --scc-* values in the first block only.
 */

#cc-main {
  --scc-dark: #0a1f1e;        /* banner background and primary buttons in the preferences panel */
  --scc-accent: #0f766e;      /* toggles and links in the preferences panel (must be dark enough for white text) */
  --scc-light-link: #5eead4;  /* links and focus ring on the dark banner */
  --scc-button-hover: #ccfbf1;/* hover colour of the white banner buttons */

  --cc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The library also uses this value for the expandable cookie sections, so keep it moderate
     and make only the buttons fully round (rules below). */
  --cc-btn-border-radius: 14px;
  --cc-modal-border-radius: 16px;
  --cc-modal-margin: 1rem;
}
#cc-main .cm__btn,
#cc-main .pm__btn { border-radius: 999px; }
#cc-main .pm__close-btn { border-radius: 50%; }

/* ---------- First layer: dark bar, white pill buttons of equal weight ---------- */
#cc-main .cm {
  --cc-bg: var(--scc-dark);
  --cc-primary-color: #ffffff;
  --cc-secondary-color: #d3e4e2;
  --cc-link-color: var(--scc-light-link);
  --cc-separator-border-color: rgba(255, 255, 255, 0.16);

  /* Accept all and Reject all: identical */
  --cc-btn-primary-bg: #ffffff;
  --cc-btn-primary-color: var(--scc-dark);
  --cc-btn-primary-border-color: #ffffff;
  --cc-btn-primary-hover-bg: var(--scc-button-hover);
  --cc-btn-primary-hover-color: var(--scc-dark);
  --cc-btn-primary-hover-border-color: var(--scc-button-hover);

  /* Manage preferences: outlined, same height and shape */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.65);
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: #ffffff;

  color: var(--cc-primary-color); /* text colour is inherited as a value, so set it here too */
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.28);
}
#cc-main .cm__title { font-size: 1.12em; letter-spacing: -0.005em; }
#cc-main .cm__desc  { font-size: 0.9em; line-height: 1.55; }
#cc-main .cm--bar.cm--inline .cm__body { padding: 0.35em 0; }

/* ---------- Second layer: light panel ---------- */
#cc-main .pm {
  --cc-bg: #ffffff;
  --cc-primary-color: #0a1f1e;
  --cc-secondary-color: #3f5453;
  --cc-link-color: var(--scc-accent);
  --cc-btn-primary-bg: var(--scc-dark);
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: var(--scc-dark);
  --cc-btn-primary-hover-bg: #000000;
  --cc-btn-primary-hover-border-color: #000000;
  --cc-btn-secondary-bg: #e6f0ef;
  --cc-btn-secondary-color: var(--scc-dark);
  --cc-btn-secondary-border-color: #e6f0ef;
  --cc-btn-secondary-hover-bg: #d2e3e1;
  --cc-btn-secondary-hover-border-color: #d2e3e1;
  --cc-toggle-on-bg: var(--scc-accent);
  --cc-toggle-off-bg: #5d6f6e;
  --cc-toggle-readonly-bg: #c4d6d4;
  --cc-section-category-border: #dce8e6;
  --cc-cookie-category-block-bg: #f1f7f6;
  --cc-cookie-category-block-border: #f1f7f6;
  --cc-cookie-category-block-hover-bg: #e5f0ee;
  --cc-cookie-category-block-hover-border: #e5f0ee;
  --cc-separator-border-color: #e3ecea;
  --cc-footer-bg: #f1f7f6;
  --cc-footer-border-color: #e3ecea;
  color: var(--cc-primary-color);
}
#cc-main .pm__badge {
  background: var(--scc-accent);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.15em 0.7em;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* In the preferences panel the footer buttons also have equal weight: make it explicit */
#cc-main .pm__footer .pm__btn { min-height: 42px; }

/* ---------- Keyboard focus must always be visible ---------- */
#cc-main .cm :focus-visible { outline: 2px solid var(--scc-light-link); outline-offset: 2px; }
#cc-main .pm :focus-visible { outline: 2px solid var(--scc-accent);     outline-offset: 2px; }

/* ---------- Small screens: keep the bar compact, buttons full width ---------- */
@media (max-width: 640px) {
  #cc-main .cm--bar.cm--inline .cm__btns { max-width: none; }
  #cc-main .cm__desc { font-size: 0.86em; }
}

@media (prefers-reduced-motion: reduce) {
  #cc-main { --cc-modal-transition-duration: 0s; }
}