:root {
  /* Local Navigation */
  --local-navigation--width: 25%;
  --local-navigation--top-gap: var(--spacing--x-large, 66px);
  /* Local Navigation - Current Item */
  --local-navigation--current-item--background_colour: var(--oxfcms-heading--background_colour, transparent);
  --local-navigation--current-item--text_colour: var(--oxfcms-heading--h3--text_colour, #002147);
  --local-navigation--current-item--text_decoration: var(--oxfcms-heading--underline, none);
  --local-navigation--current-item--font_family: var(--oxfcms-heading--h3--font_family, 'Noto Serif');
  --local-navigation--current-item--font_size: var(--oxfcms-heading--h3--font_size, 2.125rem);
  --local-navigation--current-item--font_weight: var(--oxfcms-heading--h3--font_weight, 400);
  --local-navigation--current-item--font_style: var(--oxfcms-heading--h3--font_style, normal);
  --local-navigation--current-item--line_height: var(--oxfcms-heading--h3--line_height, 120%);
  --local-navigation--current-item--margin: 0 0 var(--spacing--x-large, 66px) 0;
  /* Local Navigation - Menu - Single Item */
  --local-navigation--menu--single-item--background_colour: transparent;
  --local-navigation--menu--single-item--text_colour: #61615f;
  --local-navigation--menu--single-item--text_decoration: underline;
  --local-navigation--menu--single-item--font_family: "Roboto";
  --local-navigation--menu--single-item--font_size: 1.5rem;
  --local-navigation--menu--single-item--font_weight: 400;
  --local-navigation--menu--single-item--font_style: normal;
  --local-navigation--menu--single-item--line_height: 120%;
  --local-navigation--menu--single-item--margin: 0 0 var(--spacing--small, 22px) 0;
  /* Local Navigation - Menu - Single Item - Active */
  --local-navigation--menu--single-item--active--background_colour: transparent;
  --local-navigation--menu--single-item--active--text_colour: #002147;
  --local-navigation--menu--single-item--active--text_decoration: underline;
  --local-navigation--menu--single-item--active--font_family: "Roboto";
  --local-navigation--menu--single-item--active--font_size: 1.5rem;
  --local-navigation--menu--single-item--active--font_weight: 400;
  --local-navigation--menu--single-item--active--font_style: normal;
  --local-navigation--menu--single-item--active--line_height: 120%;
}
.node__content {
  &:has(.local-navigation) {
    width: var(--oxfcms-section--width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .local-navigation {
      flex-basis: var(--local-navigation--width);
      padding-top: var(--local-navigation--top-gap);
      + .field--name-field-content {
        --oxfcms-section--width: 100%;
        flex-basis: 75%;
      }
      .current-item {
        background-color: var(--local-navigation--current-item--background_colour);
        text-decoration: var(--local-navigation--current-item--text_decoration);
        color: var(--local-navigation--current-item--text_colour);
        font-family: var(--local-navigation--current-item--font_family);
        font-size: var(--local-navigation--current-item--font_size);
        font-weight: var(--local-navigation--current-item--font_weight);
        font-style: var(--local-navigation--current-item--font_style);
        line-height: var(--local-navigation--current-item--line_height);
        margin: var(--local-navigation--current-item--margin);
      }
      .menu {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          margin: var(--local-navigation--menu--single-item--margin);
          a,
          button,
          span {
            background-color: var(--local-navigation--menu--single-item--background_colour);
            text-decoration: var(--local-navigation--menu--single-item--text_decoration);
            color: var(--local-navigation--menu--single-item--text_colour);
            font-family: var(--local-navigation--menu--single-item--font_family);
            font-size: var(--local-navigation--menu--single-item--font_size);
            font-weight: var(--local-navigation--menu--single-item--font_weight);
            font-style: var(--local-navigation--menu--single-item--font_style);
            line-height: var(--local-navigation--menu--single-item--line_height);
            border: 0;
            padding: 0;
            &:hover,
            &:focus {
              background-color: var(--local-navigation--menu--single-item--active--background_colour);
              text-decoration: var(--local-navigation--menu--single-item--active--text_decoration);
              color: var(--local-navigation--menu--single-item--active--text_colour);
              font-family: var(--local-navigation--menu--single-item--active--font_family);
              font-size: var(--local-navigation--menu--single-item--active--font_size);
              font-weight: var(--local-navigation--menu--single-item--active--font_weight);
              font-style: var(--local-navigation--menu--single-item--active--font_style);
              line-height: var(--local-navigation--menu--single-item--active--line_height);
            }
          }
          button,
          span {
            text-decoration: none;
            &:hover,
            &:focus {
              text-decoration: none;
            }
          }
          &.menu-item--active-trail {
            a {
              font-weight: bold;
            }
          }
        }
      }
      .sticky {
        position: sticky;
        top: var(--local-navigation--top-gap);
      }
    }
  }
}
/* Mercury-specific styling */
.is-mercury-edit-mode {
  .node__content {
    &:has(.local-navigation) {
      width: 100%;
      > .lp-builder {
        flex-basis: 75%;
      }
    }
  }
}
/* Breakpoint - Mobile */
@media (width < 768px) {
  .node__content {
    &:has(.local-navigation) {
      --local-navigation--width: 100%;
      .local-navigation {
        + .field--name-field-content {
          flex-basis: 100%;
        }
      }
    }
  }
}