/*
  CatalystDev Admin Theme — Wagtail 7
  Brand (matches catalystdv.com): Epilogue / Purple #3C0063 / Lime #D8FF36 (accent on dark only)
  / Ink #1B252E / Night #101218. Lime never sits on white as text — it fails contrast.
*/

/* ── Typography ───────────────────────────────────────────────────────────── */
:root {
  --w-font-sans: "Epilogue", system-ui, -apple-system, sans-serif;
  --w-font-mono: "Epilogue", ui-monospace, "SF Mono", monospace;
}

body,
.sidebar,
.w-field__label,
.w-label,
h1, h2, h3, h4, h5, h6,
.sidebar-menu-item__link,
.button,
input, textarea, select,
.w-dialog,
.tippy-box {
  font-family: "Epilogue", system-ui, sans-serif !important;
}

/* ── Primary colour → dark slate (HSL 218 23% 23%) ────────────────────────
   Using a conservative charcoal as the Wagtail primary so that page-explorer
   active fills, checkboxes, toggles, tags etc. render in a professional dark
   tone rather than the brand lime. Lime is reserved as an explicit accent.    */
:root {
  /* Brand purple as the Wagtail primary (buttons, toggles, active states). */
  --w-color-primary-hue: 277;
  --w-color-primary-saturation: 72%;
  --w-color-primary-lightness: 30%;
}

/* ── Sidebar background → logo purple #3C0063 ─────────────────────────────── */
:root {
  --w-color-surface-menus: #3C0063;
}

.sidebar,
.sidebar-loading,
[data-controller="w-sidebar"],
[data-controller="w-sidebar"] > .sidebar {
  background-color: #3C0063 !important;
}

.sidebar__inner,
.sidebar-panel,
.sidebar-sub-menu-item__link,
.sidebar-footer {
  background-color: #3C0063;
}

/* ── Sidebar active & hover → lime accent (explicit override) ─────────────── */
.sidebar-menu-item__link--active,
.sidebar-menu-item__link.sidebar-menu-item__link--active,
.sidebar-top-level-item--active .sidebar-menu-item__link,
.sidebar-menu-item__link:hover,
.sidebar-menu-item__link:focus-visible {
  color: #D8FF36 !important;
  background-color: rgba(216, 255, 54, 0.10) !important;
}

.sidebar-menu-item__link--active::before,
.sidebar-top-level-item--active .sidebar-menu-item__link::before {
  background-color: #D8FF36 !important;
}

/* ── Primary buttons → black pill, lime on hover ──────────────────────────── */
.button,
.button.button--primary,
button[type="submit"].button,
.button-longrunning {
  font-family: "Epilogue", sans-serif !important;
  font-weight: 700;
  border-radius: 66px !important;
  letter-spacing: 0;
}

.button.button--primary,
button[type="submit"]:not(.button--secondary):not(.button--warning):not(.button--critical),
.button-longrunning.button--primary {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.button.button--primary:hover,
.button.button--primary:focus-visible,
button[type="submit"]:not(.button--secondary):not(.button--warning):not(.button--critical):hover,
button[type="submit"]:not(.button--secondary):not(.button--warning):not(.button--critical):focus-visible,
.button-longrunning.button--primary:hover {
  background-color: #D8FF36 !important;
  border-color: #D8FF36 !important;
  color: #000000 !important;
}

/* Secondary / outline */
.button.button--secondary {
  border-color: #000000 !important;
  color: #000000 !important;
  border-radius: 66px !important;
  font-family: "Epilogue", sans-serif !important;
  font-weight: 700;
  background: transparent !important;
}
.button.button--secondary:hover,
.button.button--secondary:focus-visible {
  background-color: #D8FF36 !important;
  border-color: #D8FF36 !important;
  color: #000000 !important;
}

/* ── Focus ring → lime ────────────────────────────────────────────────────── */
:focus-visible {
  outline-color: #D8FF36 !important;
}
.w-focus-visible,
[data-focus-visible] {
  outline-color: #D8FF36 !important;
}

/* ── Top header bar ───────────────────────────────────────────────────────── */
.w-slim-header,
.w-header,
header[data-controller] {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── Heading weights ──────────────────────────────────────────────────────── */
h1, h2, h3,
.w-panel__heading,
.w-slim-header__title,
.w-header__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a:not(.button):not(.sidebar-menu-item__link) {
  color: inherit;
  transition: color 0.2s ease;
}
a:not(.button):not(.sidebar-menu-item__link):hover {
  color: #7828AA;
}

/* ── Wagtail userbar on the public site ───────────────────────────────────── */
wagtail-userbar .w-userbar__action a:hover {
  color: #D8FF36;
}


/* ── Catalystdev dashboard panel ─────────────────────────────────────────── */
.cd-admin-panel { border-radius: 18px; background: #101218; color: #F3F0F6; padding: 28px 30px; margin-bottom: 28px; }
.cd-admin-panel h2 { color: #fff; font-size: 1.35rem; margin: 0 0 4px; }
.cd-admin-panel p.cd-admin-sub { color: #B9A8C8; margin: 0 0 22px; font-size: .95rem; }
.cd-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cd-admin-card { border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,.03); }
.cd-admin-card h3 { color: #fff; font-size: 1rem; margin: 0 0 6px; }
.cd-admin-card .cd-admin-status { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 20px; padding: 3px 10px; background: #D8FF36; color: #111; margin-bottom: 10px; }
.cd-admin-card .cd-admin-status.is-upcoming { background: #3C0063; color: #E9DDF4; }
.cd-admin-card a { color: #D8FF36 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-right: 12px; font-size: .9rem; }
.cd-admin-card a:hover { color: #fff !important; }
.cd-admin-requests { margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap; }
.cd-admin-requests a { display: inline-flex; gap: 10px; align-items: center; background: #D8FF36; color: #111 !important; border-radius: 40px; padding: 10px 18px; font-weight: 700; text-decoration: none; }
.cd-admin-requests a:hover { background: #fff; color: #3C0063 !important; }
.cd-admin-requests .count { background: #111; color: #D8FF36; border-radius: 20px; padding: 1px 9px; font-size: .8rem; }