/* Custom Wagtail Theme - Teal/Turquoise Palette */

:root {
  /* Primary color palette - based on water/droplet theme */
  --color-primary: #2c8c99; /* Medium teal */
  --color-primary-hover: #3ba6b5; /* Light teal */
  --color-primary-dark: #1f6570; /* Dark teal */
  --color-secondary: #5bc0be; /* Bright turquoise */
  --color-accent: #7dd3c0; /* Light turquoise */
  --color-dark: #1a3d47; /* Deep blue-grey */
  --color-darker: #0f2932; /* Darker blue-grey */

  /* Status colors */
  --color-success: #3ba6b5;
  --color-info: #5bc0be;
  --color-warning: #7dd3c0;
}

/* Main header/navigation */
.w-slim-header,
[data-wagtail-slim-header] {
  background-color: var(--color-dark) !important;
}

/* Sidebar navigation */
.sidebar,
[data-wagtail-sidebar],
nav[aria-label="Main menu"] {
  background-color: var(--color-darker) !important;
}

.sidebar__inner {
  background-color: var(--color-darker) !important;
}

/* Sidebar links */
.sidebar-menu-item a,
.sidebar a,
[data-wagtail-sidebar] a {
  color: #e8f4f5 !important;
}

.sidebar-menu-item a:hover,
.sidebar a:hover,
[data-wagtail-sidebar] a:hover {
  background-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
}

/* Active/selected sidebar item */
.sidebar-menu-item.active a,
.sidebar a.active,
[data-wagtail-sidebar] a[aria-current="page"],
.sidebar-menu-item a[aria-current="true"],
.sidebar .nav-main a[aria-current],
[data-wagtail-sidebar] .w-sidebar-item--active,
[data-wagtail-sidebar] .w-sidebar-item[aria-current="page"] {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Submenu panels */
.sidebar-submenu,
.sidebar .nav-submenu,
[data-wagtail-sidebar] .w-submenu,
.w-sidebar-submenu,
.sub-menu-panel,
.sidebar-sub-menu-panel {
  background-color: var(--color-dark) !important;
}

/* Submenu items */
.sidebar-sub-menu li,
.sidebar .nav-submenu li,
[data-wagtail-sidebar] .w-submenu li,
.sub-menu-panel li,
.sidebar-sub-menu-item,
.sidebar-menu-item--active,
.sidebar-sub-menu-item--open {
  background-color: var(--color-dark) !important;
}

.sidebar-submenu a,
.sidebar .nav-submenu a,
[data-wagtail-sidebar] .w-submenu a,
.submenu-panel a {
  color: #e8f4f5 !important;
  background-color: transparent !important;
}

.sidebar-submenu a:hover,
.sidebar .nav-submenu a:hover,
[data-wagtail-sidebar] .w-submenu a:hover,
.submenu-panel a:hover {
  background-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
}

/* Primary buttons */
.button,
.button-small,
.button-secondary,
button[type="submit"],
.w-button,
.button.action-save {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.button:hover,
.button-small:hover,
.button-secondary:hover,
button[type="submit"]:hover,
.w-button:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

/* Links and interactive elements */
a,
.w-link {
  color: var(--color-primary) !important;
}

a:hover,
.w-link:hover {
  color: var(--color-primary-hover) !important;
}

/* Tabs */
.tab-nav a,
.w-tabs__tab {
  color: var(--color-primary) !important;
}

.tab-nav a.active,
.tab-nav a:hover,
.w-tabs__tab[aria-selected="true"],
.w-tabs__tab:hover {
  border-bottom-color: var(--color-primary) !important;
  color: var(--color-primary-dark) !important;
}

/* Status indicators */
.status-tag.primary,
.w-status__primary {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.status-tag,
.w-status__label {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
}

/* Form fields focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.w-field__input:focus {
  border-color: var(--color-primary) !important;
  outline-color: var(--color-primary) !important;
}

/* Dropdown menus */
.dropdown ul,
.w-dropdown__content {
  background-color: var(--color-dark) !important;
}

.dropdown li a:hover,
.w-dropdown__item:hover {
  background-color: var(--color-primary) !important;
}

/* Header actions and icons */
.header-meta,
.w-slim-header__item {
  color: #e8f4f5 !important;
}

/* Action buttons in listings */
.listing .actions a,
.w-listing__item-actions a {
  color: var(--color-primary) !important;
}

.listing .actions a:hover,
.w-listing__item-actions a:hover {
  color: var(--color-primary-hover) !important;
}

/* Breadcrumbs */
.breadcrumb a,
.w-breadcrumbs__link {
  color: var(--color-primary) !important;
}

/* Messages/notifications */
.messages .success,
.w-messages__success {
  background-color: var(--color-success) !important;
  border-color: var(--color-primary-dark) !important;
}

.messages .info,
.w-messages__info {
  background-color: var(--color-info) !important;
  border-color: var(--color-primary) !important;
}

/* Editor toolbar */
.Draftail-Toolbar,
.prose-mirror-toolbar {
  background-color: #f5f5f5 !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

.Draftail-ToolbarButton:hover,
.prose-mirror-toolbar button:hover {
  background-color: var(--color-accent) !important;
}

/* Panel headers in edit views */
.panel__title,
.w-panel__heading {
  color: var(--color-primary-dark) !important;
}

/* Toggle switches */
.switch input:checked + label,
.w-switch__input:checked + .w-switch__track {
  background-color: var(--color-primary) !important;
}

/* Loading indicators */
.loading-mask,
.w-spinner {
  border-color: var(--color-accent) !important;
}

/* Snippet chooser modal */
.modal-body,
.w-dialog__content {
  border-top: 3px solid var(--color-primary) !important;
}

/* Search fields */
.search-form input,
.w-field--search_query input {
  border-color: var(--color-primary) !important;
}

/* Add button (+ icon buttons) */
.button.bicolor,
.button.button-longrunning,
.w-button--primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.button.bicolor:hover,
.w-button--primary:hover {
  background-color: var(--color-primary-hover) !important;
}

/* Secondary button hover states */
.button-secondary:hover {
  background-color: var(--color-secondary) !important;
}

/* Icons with brand color */
.icon.icon-wagtail,
.w-icon--wagtail {
  color: var(--color-primary) !important;
}

/* Dashboard panels */
.panel,
.w-panel {
  border-left: 3px solid var(--color-primary) !important;
}

/* Help text */
.help-block,
.w-help-text {
  color: var(--color-primary-dark) !important;
}

/* Pagination */
.pagination .current,
.w-pagination__item--active {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.pagination a:hover,
.w-pagination__link:hover {
  background-color: var(--color-accent) !important;
}

/* Tag labels */
.tag,
.w-tag {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
}

/* Checkbox and radio button checked states */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--color-primary) !important;
}

/* Progress bars */
.progress-bar,
.w-progress__bar {
  background-color: var(--color-primary) !important;
}

/* Additional submenu styling - catch all purple backgrounds */
ul[role="group"],
.sidebar ul[role="group"],
[data-wagtail-sidebar] ul[role="group"] {
  background-color: var(--color-dark) !important;
}

/* Menu items with aria-expanded */
.sidebar a[aria-expanded="true"],
[data-wagtail-sidebar] a[aria-expanded="true"] {
  background-color: var(--color-primary-dark) !important;
}

/* Additional selected state coverage */
.sidebar li[aria-current],
[data-wagtail-sidebar] li[aria-current],
.sidebar .active,
[data-wagtail-sidebar] .active {
  background-color: var(--color-primary) !important;
}

/* Ensure nested menu items inherit dark background */
.sidebar li li,
[data-wagtail-sidebar] li li {
  background-color: var(--color-dark) !important;
}

/* Force override any remaining purple */
.sidebar *[style*="background"],
[data-wagtail-sidebar] *[style*="background"] {
  background-color: var(--color-dark) !important;
}

/* Sidebar footer account button */
.sidebar-footer__account,
.w-bg-surface-menus,
button.w-bg-surface-menus {
  background-color: var(--color-darker) !important;
}

.sidebar-footer__account:hover,
.sidebar-footer__account:focus,
button.w-bg-surface-menus:hover,
button.w-bg-surface-menus:focus {
  background-color: var(--color-primary-dark) !important;
}

/* Tune this to match your Wagtail header/breadcrumb stack height */
:root {
  --wagtail-sticky-ui-offset: 72px; /* e.g. 56px header + ~16px breadcrumbs */
  --wagtail-sticky-ui-gap: 8px;
}

/* Scroll the prose field, keep menubar visible */
.w-field__input .prose-editor {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

.w-field__input .prose-editor .prose-menubar {
  position: sticky;
  top: calc(var(--wagtail-sticky-ui-offset) + var(--wagtail-sticky-ui-gap));
  z-index: 100; /* keep below Wagtail chrome if it’s higher */
  background: #fff;
}

/* Tune this to match your Wagtail header/breadcrumb stack height */
:root {
  --wagtail-sticky-ui-offset: 72px; /* e.g. 56px header + ~16px breadcrumbs */
  --wagtail-sticky-ui-gap: 8px;
}

/* Scroll the prose field, keep menubar visible */
.w-field__input .prose-editor {
  overflow: visible;
}

.w-field__input .prose-editor .prose-menubar {
  position: sticky;
  top: 50px;
  z-index: 10;
  background: #fff;
}
/* Hide the search box in the sidebar */
form[action*="/pages/search/"] {
  display: none !important;
}

.ProseMirror {
  max-height: calc(100vh - 300px);
  overflow: auto;
}
.w-dropdown__content {
  background-color: white !important;
}
.pagination li.pagination__page-number.pagination__page-number--current a {
  background-color: hsl(180.5deg 100% 24.7% / 25%) !important;
}