/* Rue221 styles loaded on every Wagtail admin page (home/wagtail_hooks.py). */

/* Website colours. Wagtail derives every shade from these hue/saturation/lightness triplets.
   Primary (sidebar, headings): navy #05254c. Secondary (links, outlines): muted navy #1d3458.
   Primary buttons use the website's yellow CTA style: #f7bb34 with navy text. */
:root {
  --w-color-primary-hue: 213;
  --w-color-primary-saturation: 87.7%;
  --w-color-primary-lightness: 15.9%;
  --w-color-secondary-hue: 216.6;
  --w-color-secondary-saturation: 50.4%;
  --w-color-secondary-lightness: 22.9%;

  --w-color-surface-button-default: #f7bb34;
  --w-color-surface-button-hover: #f5ac0a;
  --w-color-text-button: #05254c;
}

/* Dark theme: navy text would disappear, so links and outline buttons switch to yellow. */
.w-theme-dark {
  --w-color-surface-button-default: #f7bb34;
  --w-color-surface-button-hover: #f5ac0a;
  --w-color-text-button: #05254c;
  --w-color-text-link-default: #f7bb34;
  --w-color-text-link-hover: #fad57f;
  --w-color-text-button-outline-default: #f7bb34;
  --w-color-text-button-outline-hover: #fad57f;
  --w-color-border-button-outline-default: #f7bb34;
  --w-color-border-button-outline-hover: #fad57f;
}

@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --w-color-surface-button-default: #f7bb34;
    --w-color-surface-button-hover: #f5ac0a;
    --w-color-text-button: #05254c;
    --w-color-text-link-default: #f7bb34;
    --w-color-text-link-hover: #fad57f;
    --w-color-text-button-outline-default: #f7bb34;
    --w-color-text-button-outline-hover: #fad57f;
    --w-color-border-button-outline-default: #f7bb34;
    --w-color-border-button-outline-hover: #fad57f;
  }
}

/* Active sidebar item: yellow marker, as on the website's navigation. */
.sidebar-menu-item--active {
  border-inline-start-color: #f7bb34;
}

.sidebar-custom-branding {
  margin: 1.25rem auto 1.5rem;
  padding: 0.5rem 1rem;
}

.sidebar--slim .sidebar-custom-branding {
  padding: 1.5rem 0;
}

.r221-admin-logo {
  display: block;
  height: auto;
  margin: 0 auto;
}

.r221-admin-logo--full {
  width: 100%;
  max-width: 10.5rem;
}

.r221-admin-logo--mark {
  display: none;
  width: 2.75rem;
}

.sidebar--slim .r221-admin-logo--full {
  display: none;
}

.sidebar--slim .r221-admin-logo--mark {
  display: block;
}