@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap');

:root {
  --w-font-sans: 'Inter';
  /*--w-font-mono: Inconsolata;*/
  --w-color-primary-hue: 160;
  --w-color-secondary-hue: 160;
  --w-color-grey-50: #eceae6;
  --w-color-grey-100: #e1dfda;
  --w-color-grey-150: #d8d5cf;
  --w-color-grey-200: #cbc7c1;
  --w-color-grey-400: #88847c;
  --w-color-grey-500: #726e67;
  --w-color-grey-600: #5c5853;
  --w-color-grey-700: #46423e;
  --w-color-grey-800: #302d2b;

  --w-login-fullscreen-background: radial-gradient(
    100% 300.28% at 100% 0%,
    var(--w-color-primary) 0%,
    var(--w-color-primary) 32.94%,
    var(--w-color-primary) 49.9%,
    var(--w-color-primary) 50.2%,
    var(--w-color-secondary) 100%
  );
  --w-color-surface-menus: var(--w-color-grey-700);
  --w-color-surface-menu-item-active: var(--w-color-grey-800);
  --w-color-text-label-menus-default: var(--w-color-white);
  --w-color-text-label-menus-active: var(--w-color-grey-50);

  &.w-theme-dark {
    --w-color-text-link-default: #c0f5d2;
    --w-color-secondary-100: #c0f5d2;
    --w-color-critical-200: #e37d7d;
  }
}

.sidebar-custom-branding {
  margin: 1rem auto;
}

.sidebar--slim .sidebar-custom-branding {
  padding: 10px 0;
}

.active-plan-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  padding: 0.5rem;
}

.active-plan-name {
  line-height: 1.2;
  color: var(--w-color-text-label-menus-default);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-plan-status {
  color: var(--w-color-grey-200);
  padding: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.active-plan-status svg {
  height: 0.5rem;
  width: 0.5rem;
}

.active-plan-version-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 15ch;
}

.active-plan-live {
  text-transform: uppercase;
  font-weight: bold;
}

.active-plan-live.public {
  color: var(--w-color-warning-100);
}

.sidebar--slim .active-plan-info {
  display: none;
}

.login .login-logo {
  width: 3.5rem;
}

.w-header h1 {
  font-weight: 600;
}

.w-panel span.field-visibility-label {
  font-weight: bold;
}

.w-panel span.field-visibility-label.w-status--primary {
  color: var(--w-color-grey-800);
}

section[role='tabpanel'] .help-block:has(> .field-visibility-label) {
  /*
  We are using this to make the "public" vs "non-public" field labels
  prettier when they are rendered inside a .help-block, which happens
  when the field in question has its own tab, for example "contant persons".
  (The label is rendered right below the tab header.)

  We do not want to match other help blocks since they may contain
  validation errors which we want to be highlighted with colors.
  */
  background-color: inherit;
  padding-left: 0;
  span.field-visibility-label.w-status--primary {
    color: var(--w-color-grey-800);
    font-size: 0.8rem;
    font-weight: bold;
  }
  svg {
    display: none;
  }
}

.page-explorer .w-breadcrumb li:only-child a,
.page-explorer .w-breadcrumb li[hidden] ~ li:last-child a {
  font-weight: 600;
}

.chooser__preview {
  padding: 2px;
}

.chooser__preview svg {
  max-width: 100%;
  max-height: 100%;
}

/* Wagtail notifications */
.messages {
  z-index: 1;
}

.w-tabs__tab {
  color: var(--w-color-grey-600);
}

.w-field__help .help {
  color: var(--w-color-grey-600);
}

/* Modeladmin fixes */
.modeladmin .listing tbody tr ul.actions {
  visibility: hidden;
  display: inline-block;
  min-width: 9em;
  white-space: normal;
  overflow-wrap: break-word;
  height: auto;
  float: inline-start;
}
/* Hack to fix https://app.asana.com/0/1206017643443542/1208668942052483 */
.modeladmin .result-list ul {
  width: 100%;
}
/* Need to repeat this here from modeladmin's CSS because our custom React-based components won't use that file */
.modeladmin .listing tbody tr:hover ul.actions {
  visibility: visible;
}
/* Fix footer in, e.g., custom React-based action index view since Wagtail upgrade */
.footer__container--hidden {
  display: block;
}
/* Fix space between action buttons */
.listing .actions > li {
  margin: 0 0 0.5em;
}
/* Fix text being cropped when action buttons have long texts */
.actions .button {
  height: auto; /* originally 2em */
  min-height: 2em; /* adding this to make sure things don't change for short texts */
}
/* Fix weird inline block issues on, e.g., category list (unfiltered by category type) */
.listing .title .title-wrapper,
.listing .title h2 {
  display: block;
}

.screen-reader-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Accessibility: Ensure form fields wrap on narrow or zoomed in screens */
.w-slim-header__search-form {
  flex-wrap: wrap;
}

/* Intrusive accessibility fixes for customers with plan.features.admin_accessibility_conformance_level == 'high'

In the end, we would like to move away from these and provide fixes compatible
with Wagtail's styles but so far these are required.

 */

:root > body.watch-active-accessibility-level-high {
  a {
    text-decoration: underline;
  }
  button.sidebar-menu-item__link {
    text-decoration: underline;
  }
  a.button {
    text-decoration: none;
  }
  .listing .title .title-wrapper a {
    text-decoration: underline;
  }
}