/* ----------------- */
/* CUSTOM PROPERTIES */
/* ----------------- */

:root {
  --ixc-custom-nesting-spacer: 1rem;
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
  --w-color-border-furniture: rgba(var(--black-rgb), 0.1);
}

.w-theme-dark {
  --black-rgb: 255, 255, 255;
  --white-rgb: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --black-rgb: 255, 255, 255;
    --white-rgb: 0, 0, 0;
  }
}

/* -------------------------- */
/* MISC WAGTAIL DESIGN TWEAKS */
/* -------------------------- */

/* Ensure <a> links don't break Tables */

table {
  a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
  }
}

/* Make sidebar logo more prominent */
.sidebar-custom-branding,
.sidebar--slim .sidebar-custom-branding {
  min-height: 100px;
  max-width: 100px;
  margin: 0 auto;
  padding: 20px 0;
  transition: opacity 0.2s ease-in-out;

  img {
    display: block;
    transform: translateX(-6px);
  }
}

.sidebar--slim .sidebar-custom-branding {
  opacity: 0;
}

/* Tighten Sidebar Menu */
.sidebar-menu-item__link {
  padding: 10px 15px;
  font-size: 13px;
}

.sidebar-sub-menu-trigger-icon {
  height: 1em;
}

.menuitem-label {
  margin-inline-start: 0.75em;
  margin-inline-end: 0.5em;
  line-height: 1;
}

/* Make Tab Active State mor prominent */
.w-tabs__tab:after {
  height: 4px;
}

/* Make Page Editor Tabs Sticky */
#page-edit-form > .w-tabs {
  .w-tabs__wrapper {
    background-color: var(--w-color-surface-header);
    box-shadow: inset 0 -1px 0 var(--w-color-border-furniture);
    z-index: 9;
    position: sticky;
    top: 100px;

    @media screen and (min-width: 800px) {
      top: 50px;
    }

    .w-tabs__list {
      margin-bottom: 0;
      border-bottom: none;
    }
  }
}

/* Pagination Styling Tweaks */
.pagination {
  li {
    display: inline-block;
    padding: 0.1em;

    a,
    span {
      display: block;
      min-width: 2em;
      padding: 0.5em;
    }

    a {
      cursor: pointer;
      text-decoration: underline;
    }

    span {
      background-color: rgba(var(--black-rgb), 0.1);
    }
  }
}

/* Align the sidebar search UI */
#wagtail-sidebar {
  form[role="search"] {
    input#menu-search-q {
      padding-left: calc(18px + 1rem + 0.75em) !important;
    }

    button {
      padding-inline-start: 18px;
    }
  }
}

/* Optimise Tags */
.tag {
  font-size: 0.9rem;
  margin-right: 0.1em;
  padding-bottom: 0.3em;

  &::before {
    width: 20px;
  }
}

/* Tweak Page Explorer */
.c-page-explorer__header__title__inner {
  gap: 0.5rem;
}

.c-page-explorer__item__link {
  gap: 0.75rem;
}

/* Add a bit of breathing space to form labels */
.w-field__label {
  padding-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Help distinguish the help text */
.help {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--black-rgb), 0.7);
}

p.help,
div.help {
  max-width: 90ch;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  padding-inline-end: 3rem;
}

/* Align edge of Help Blocks */
.help-critical,
.help-info,
.help-warning {
  padding-inline-start: calc(var(--ixc-custom-nesting-spacer) * 2);
  padding-inline-end: 10%;

  .icon {
    width: var(--ixc-custom-nesting-spacer);
    height: var(--ixc-custom-nesting-spacer);
    inset-inline-start: calc(var(--ixc-custom-nesting-spacer) * 0.5);
  }
}

/* Allow more room for forms */
.w-form-width,
.w-panel__wrapper,
.w-field__wrapper {
  max-width: 1080px;
}

/* Tweak Certain Form Labels with Checkbox/Radio Inputs */
li:has(input[type="checkbox"]),
li:has(input[type="radio"]) {
  min-height: 22px;
  margin-top: 5px;
  margin-bottom: 5px;
}

label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  input[type="checkbox"],
  input[type="radio"] {
    vertical-align: top;
    transform: translateY(-1px);
  }
}

/* Bump up icon sizes for more crispness */
.w-minimap-item .icon,
.w-panel__icon {
  font-size: 16px;
}

/* Avoid long titles and file names breaking the modal view */
.modal-body .listing td.title + td {
  word-break: break-all;
}

/* Tighten Field Wrappers unless explicitely declared margin */
.w-field__wrapper:not([class*="w-mb"]) {
  margin-bottom: 1rem;
}

/* Don't collapse Table Title too much */
td.title {
  min-width: 100px;
}

/* Align first cell of listing view with panels when not full width */
table:not(.listing.full-width) {
  thead th:first-child:not(.bulk-actions-filter-checkbox),
  td.title:first-child {
    padding-inline-start: 0;
  }
}

/* Tweak Listing Actions Spacing */
.report__results--text + .w-status {
  margin-bottom: 0.5rem;
}

.listing .actions > li {
  padding-bottom: 0.25em;
}

/* Avoid URL Strings breaking comparison list */
.comparison__child-object dd {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
}

/* -------------------- */
/* CUSTOM PANEL STYLING */
/* -------------------- */

/* Guides */
/* .w-panel {
	background: rgba(0,255,0,0.1) !important;
}

.w-panel--nested {
	background: rgba(255,0,0,0.1) !important;
}

.w-panel__header,
.w-panel__anchor,
.w-panel__controls,
.w-panel__toggle,
.c-sf-add-button {
	background: rgba(0,0,255,0.1) !important;
} */

/* Add spacing between panel sections */
section.w-panel {
  margin-block-end: 1rem;
  position: relative;
}

section.w-panel--dashboard {
  margin-inline-start: 0;
}

/* Avoid Panels going over Footer */
footer.footer {
  z-index: 99;
}

/* Customise Panel Styling */
.w-panel,
.w-panel--nested {
  /* Reset Margins and Padding */
  &,
  .w-panel,
  .w-panel__content,
  .w-panel .w-panel__content,
  .w-field__input {
    margin: 0;
    margin-inline-start: 0;
    padding: 0;
    padding-inline-start: 0;
    transform: none;
  }

  /* Apply standard padding and margin to panels */
  &,
  .w-panel {
    margin-inline-start: var(--ixc-custom-nesting-spacer);
    padding-inline-start: var(--ixc-custom-nesting-spacer);
    padding-inline-end: var(--ixc-custom-nesting-spacer);
    padding-block-start: calc(var(--ixc-custom-nesting-spacer) * 0.5);
    padding-block-end: calc(var(--ixc-custom-nesting-spacer) * 0.5);
  }

  /* Outdent guidelines in proportion to padding */
  .w-panel__content,
  .w-panel .w-panel__content {
    margin-inline-start: calc(var(--ixc-custom-nesting-spacer) * -2);
    padding-inline-start: calc(var(--ixc-custom-nesting-spacer) * 2);
  }

  /* Align Streamfield UI */
  .c-sf-add-button {
    width: calc(var(--ixc-custom-nesting-spacer) * 1.5);
    margin-block-start: calc(var(--ixc-custom-nesting-spacer) * 0.5);
    margin-block-end: calc(var(--ixc-custom-nesting-spacer) * 0.5);
    margin-inline-start: calc(var(--ixc-custom-nesting-spacer) * -0.7);
    background: transparent;
  }

  /* Align Draftail Toolbar */
  .Draftail-BlockToolbar {
    inset-inline-start: calc(var(--ixc-custom-nesting-spacer) * -2);
    width: calc(var(--ixc-custom-nesting-spacer) * 2);

    .Draftail-BlockToolbar__trigger {
      width: var(--ixc-custom-nesting-spacer);
      height: var(--ixc-custom-nesting-spacer);
      transform: translate(-50%, -50%);
    }
  }
}

/* Customise Panel Heading Styling */
.w-panel__header {
  /* Reset Margins and Padding */
  margin: 0;
  margin-inline-start: 0;
  padding: 0;
  padding-inline-start: 0;
  transform: none;

  /* Add breathing space between panel header and first block */
  + .w-panel__content > *:first-child:has(.w-field__label) {
    padding-block-start: 1rem;
  }

  /* Outdent Header in proportion to panel padding and UI */
  &,
  .w-panel--nested .w-panel & {
    transform: none;
    margin-inline-start: calc(var(--ixc-custom-nesting-spacer) * -4.25);
  }

  /* Make heading breathing space proportional to padding and outdent */
  .w-panel__heading {
    margin-inline-start: calc(var(--ixc-custom-nesting-spacer) * 1.25);
  }

  /* Keep UI size proportional to padding and outdent */
  .w-panel__anchor,
  .w-panel__toggle {
    width: calc(var(--ixc-custom-nesting-spacer) * 1.5);
    height: calc(var(--ixc-custom-nesting-spacer) * 1.5);
  }

  /* Align anchor prefix and avoid conflicts with header alignment */
  .w-panel__anchor--prefix {
    display: inline-grid;
    transform: translateX(calc(var(--ixc-custom-nesting-spacer) * -0.5));
  }
}

/* Clearly define StreamField panels with subtle border and background shading */
.w-panel--nested {
  border: 1px solid var(--w-color-border-furniture);
  border-radius: 0.3125rem;
  background-color: rgba(var(--black-rgb), 0.02);

  /* Bit more breathing space when it is also a wrapper */
  &.w-panel__wrapper {
    margin-top: 2rem !important;
  }

  /* Align top-level StreamFields with other panels */
  .w-panel__content > & {
    margin-inline-start: 0;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  /* Increase contrast of nested Content Block with darker shading */
  .w-panel--nested {
    background-color: rgba(var(--black-rgb), 0.06);

    /* Establish relationship with a Content Blocks' nested items */
    /* No shading to blend in - Different border to help identify it */
    .w-panel--nested {
      background-color: transparent;
      border-width: 2px;
      border-style: dashed;
      border-radius: 0;

      > .w-panel__content {
        background-image: none;
      }
    }
  }

  /* Top-Level "Body" Panel is superfluos and doesn't need styling */
  .w-form-width > & {
    background-color: transparent;
    border-color: transparent;

    > .w-panel__content {
      background-image: none;
    }

    /* Move the stylinging heirrachy down a level */
    /* Page Section */
    .w-panel--nested {
      background-color: rgba(var(--black-rgb), 0.02);

      /* Content Block */
      .w-panel--nested {
        border: 1px solid var(--w-color-border-furniture);
        border-radius: 0.3125rem;
        background-color: rgba(var(--black-rgb), 0.06);

        > .w-panel__content {
          background-image: linear-gradient(
            to bottom,
            var(--guide-line-color, var(--w-color-border-furniture)) 50%,
            #fff0 0
          );
        }

        /* Content Block nested items */
        .w-panel--nested {
          background-color: transparent;
          border-width: 2px;
          border-style: dashed;
          border-radius: 0;

          > .w-panel__content {
            background-image: none;
          }
        }
      }
    }
  }
}

/* Layout adjustments for larger screens */
@media screen and (min-width: 1600px) {
  /* More breathing spacing */
  :root {
    --ixc-custom-nesting-spacer: 1.25rem;
  }

  /* Align top-level panel contents with breadcrumb and tab UI */
  .w-tabs__panel > .w-form-width > section.w-panel {
    margin-left: calc(var(--ixc-custom-nesting-spacer) * -1);

    > .w-panel__header > .w-panel__anchor--prefix {
      transform: translateX(calc(var(--ixc-custom-nesting-spacer) * 0.1));
    }
  }
}

/* ---------------------- */
/* CUSTOM MINIMAP STYLING */
/* ---------------------- */

/* Tweak Border */
.w-minimap {
  box-shadow: -1px 0 0 var(--w-color-border-furniture);
}

.w-minimap--expanded {
  box-shadow: none;
}

/* Reset spacing */
.w-minimap__header,
.w-minimap__list,
.w-minimap__footer {
  margin-inline-start: 0;
  padding-inline-start: 0;
}

/* Differentiate different levels of the MiniMap */
.w-minimap-item {
  width: auto;
  color: var(--w-color-text-label);

  .w-required-mark {
    display: none;
  }
}

.w-minimap-item--h3 {
  font-size: 0.8rem;
  color: var(--w-color-text-context);

  .icon {
    opacity: 0.6;
  }
}

/* Differentiate Page Section blocks */
.w-minimap-item:has(.icon-page-section-block) {
  font-weight: bold;
  color: var(--w-color-text-label);

  .icon {
    color: var(--w-color-text-label);
    opacity: 1;
  }
}

.w-minimap--expanded .w-minimap-item:not(:has(.icon-page-section-block)) {
  padding-inline-start: 3.6rem;
}

/* Differentiate nested blocks for greater clarity */
.w-minimap .w-minimap-item {
  &:has(svg[class*="block-nested"]) {
    height: 1.6rem;
    opacity: 0.4;
    font-size: 0.7rem;
  }

  /* Is it necessary to display all nested blocks in the MiniMap? */
  /* Probably not */
  &:has(svg[class*="block-nested"]) {
    display: none;
  }
}

/* Indent nested blocks when expanded */
.w-minimap--expanded .w-minimap-item {
  &:has(svg[class*="block-nested"]) {
    padding-inline-start: 5.1rem;
  }
}

/* Important - always hide that field all-together */
div[data-contentpath="mini_map_label"] {
  display: none;
}

/* ---------------------- */
/* CUSTOM USERBAR STYLING */
/* ---------------------- */

/* Declare Fontsize on parent elements */
.w-userbar-trigger,
.w-userbar-items,
.w-dialog--userbar {
  font-size: 16px;
}

/* Convert to em measurements to avoid conflicts with website stylesheets */

/* Userbar Trigger Button */
.w-userbar-trigger {
  .w-icon:before {
    font-size: 2em;
  }

  .w-userbar-axe-count {
    font-size: 1em;
    height: 1.5em;
    width: 1.5em;
  }
}

/* Userbar Menu */
.w-userbar-items {
  .w-userbar__item {
    font-size: 1em;
  }

  .w-userbar__item .w-action,
  .w-userbar__item a,
  .w-userbar__item button {
    font-size: 0.875em;
    padding: 0.875em;
  }

  .w-a11y-result__count {
    font-size: 0.875em;
    height: 1.75em;
    width: 1.75em;
    transform: translateX(-0.3em);
  }
}

/* Userbar Accessibility Dialog */
.w-dialog--userbar {
  padding-inline-end: 2em;

  .w-dialog__box {
    max-width: 600px;
  }

  .w-dialog__close-button {
    height: 2em;
    inset-inline-end: -1.25em;
    top: -1.25em;
    width: 2em;

    .w-dialog__close-icon {
      width: 1em;
      height: 1em;
    }
  }

  .w-dialog__title {
    font-size: 1.5em;
  }

  .w-dialog__subtitle {
    font-size: 0.875em;
    gap: 1em;
  }

  .w-a11y-result__header {
    gap: 2rem;
  }

  .w-a11y-result__count {
    font-size: 1em;
    height: 1.75em;
    width: 1.75em;
  }

  .w-a11y-result__subtotal_count {
    width: 1.5em;
  }

  .w-a11y-result__selector {
    border-radius: 0.3125em;
    margin-bottom: 0.625em;
    margin-inline-end: 0.625em;
    padding: 0.375em;
  }

  .w-a11y-result__icon {
    height: 0.875em;
    margin-inline-end: 0.625em;
    width: 0.875em;
  }
}

/* -------------------------- */
/* NGA SPECIFIC DESIGN TWEAKS */
/* -------------------------- */

.sidebar-custom-branding {
  min-height: 75px;
}

/* Internal name formatting */

.admin-internal-name {
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--black-rgb), 0.8);
  background-color: rgba(var(--black-rgb), 0.1);
  border-radius: 2px;
}

/* Custom Field Row styling */

#panel-child-content-accessibility_features-content,
#panel-child-cms_event-accessibility_features-content,
#panel-child-tessitura_event-accessibility_features-section,
#panel-child-exhibition-accessibility_features-content {
  .w-field-row {
    container-type: inline-size;
    container-name: field-row-container;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 0;

    > .w-panel__wrapper {
      display: flex;
      flex: 0 0 100%;

      @container field-row-container (width>=450px) {
        flex: 0 0 50%;
      }

      @container field-row-container (width>=675px) {
        flex: 0 0 33.3333333333%;
      }

      @container field-row-container (width>=900px) {
        flex: 0 0 25%;
      }

      > .w-field__label {
        order: 2;
        padding-top: 0.2rem;
        padding-right: 2rem;
        color: var(--w-color-text-context);
      }
    }
  }
}

/* Categories styling */
.categories-admin-widget,
#id_categories {
  container-type: inline-size;
  container-name: categories-admin-container;
  max-width: 1000px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  column-gap: 0;

  > div {
    display: flex;
    flex: 0 0 100%;

    @container categories-admin-container (width>=600px) {
      flex: 0 0 50%;
    }

    @container categories-admin-container (width>=900px) {
      flex: 0 0 33.3333333333%;
    }

    > label {
      padding-right: 2rem;
      font-size: 0.875rem;
      font-weight: 600;
    }
  }
}