/*
 * CS Lewis admin brand theme — blue/navy, inspired by the app entry screen
 * (Figma RtD5iFi3tWuz1X3Y19dbf2 node 12117-30572: deep navy #00060e → #051123).
 *
 * Wagtail builds every colour as hsl(var(--*-hue) var(--*-saturation) var(--*-lightness)).
 * We retint the *hue + saturation* across the palette and keep each shade's *lightness*,
 * so light/dark contrast is preserved. Dark-mode surfaces (page, sidebar, fields) derive
 * from the GREY scale, so those are retinted too — that's what turns the whole admin navy,
 * not just the login background.
 */
:root {
  /* Neutrals → blue-grey: drive all dark-mode surfaces (page, menus, fields, borders). */
  --w-color-grey-800-hue: 214; --w-color-grey-800-saturation: 42%;
  --w-color-grey-700-hue: 214; --w-color-grey-700-saturation: 36%;
  --w-color-grey-600-hue: 214; --w-color-grey-600-saturation: 32%;
  --w-color-grey-500-hue: 214; --w-color-grey-500-saturation: 26%;
  --w-color-grey-400-hue: 214; --w-color-grey-400-saturation: 22%;
  --w-color-grey-200-hue: 214; --w-color-grey-200-saturation: 18%;
  --w-color-grey-150-hue: 214; --w-color-grey-150-saturation: 16%;
  --w-color-grey-100-hue: 214; --w-color-grey-100-saturation: 14%;
  --w-color-grey-50-hue: 214;  --w-color-grey-50-saturation: 12%;
  --w-color-white-hue: 214;    --w-color-white-saturation: 18%;
  --w-color-black-hue: 214;    --w-color-black-saturation: 60%;

  /* Accent (buttons, links, active nav) → vivid blue. */
  --w-color-primary-hue: 214;     --w-color-primary-saturation: 82%;
  --w-color-primary-200-hue: 214; --w-color-primary-200-saturation: 82%;

  /* Secondary scale → navy. */
  --w-color-secondary-hue: 214;     --w-color-secondary-saturation: 60%;
  --w-color-secondary-50-hue: 214;  --w-color-secondary-50-saturation: 40%;
  --w-color-secondary-75-hue: 214;  --w-color-secondary-75-saturation: 45%;
  --w-color-secondary-100-hue: 214; --w-color-secondary-100-saturation: 50%;
  --w-color-secondary-400-hue: 214; --w-color-secondary-400-saturation: 60%;
  --w-color-secondary-600-hue: 214; --w-color-secondary-600-saturation: 60%;
}

/* Dark mode: the navy accent hue (214) has low perceptual luminance, so at
   Wagtail's dark-theme text lightness it fails contrast as link text. Brighten
   link/accent TEXT for legibility; surfaces keep the dark navy from the grey
   retint above. Scoping mirrors Wagtail: always-dark theme + system-follows-OS. */
.w-theme-dark {
  --w-color-text-link-default: hsl(214 88% 72%);
  --w-color-text-link-hover: hsl(214 88% 82%);
}
@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --w-color-text-link-default: hsl(214 88% 72%);
    --w-color-text-link-hover: hsl(214 88% 82%);
  }
}

/* Login: navy gradient matching the app's entry screen (body class is `login`). */
body.login {
  background: linear-gradient(180deg, #051123 0%, #00060e 100%);
}

/* Login: stack the CS Lewis mark on top, centred above the "Sign in" heading. */
body.login h1 {
  text-align: center;
}
body.login .cslewis-login-logo {
  display: block;
  margin: 0 auto 0.75rem;
}

/* Sidebar brand mark: Wagtail's slot renders it tiny by default. Size it up in
   the expanded sidebar; shrink in slim mode (the rail is only ~40px wide). */
.sidebar-custom-branding img {
  width: 56px;
  height: 56px;
}
.sidebar--slim .sidebar-custom-branding img {
  width: 32px;
  height: 32px;
}

/* Flat sidebar grouped into editorial zones with section headers. Wagtail's
   sidebar has no native section header; the `cms-menu-zone-start` class + a
   `data-zone-label` attr are attached to each zone's first menu item in
   wagtail_hooks.construct_main_menu, and land on the item's
   <a class="sidebar-menu-item__link …">. Render the label in the gap above the
   item via a pseudo-element (the header text lives in Python, not the CSS). */
.sidebar-menu-item__link.cms-menu-zone-start {
  position: relative;
  margin-top: 1.75rem;
}
.sidebar-menu-item__link.cms-menu-zone-start::before {
  content: attr(data-zone-label);
  position: absolute;
  top: -1.35rem;
  left: 0.9rem;
  right: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-color-text-label-menus-default, rgba(255, 255, 255, 0.55));
  pointer-events: none;
}
/* Slim (collapsed) rail is ~40px wide — labels are hidden there anyway, so drop
   the header text and keep just a little breathing room between zones. */
.sidebar--slim .sidebar-menu-item__link.cms-menu-zone-start {
  margin-top: 0.5rem;
}
.sidebar--slim .sidebar-menu-item__link.cms-menu-zone-start::before {
  content: none;
}