:root {
  /* Menu - Dropdown - Link */
  --menu--dropdown--link--padding: clamp(1rem, 1.5rem + 1vh, 15px) 0;
  /* Menu - Dropdown - Drop tray */
  --menu--dropdown--droptray--background_colour: var(--dark_3, #002147);
  --menu--dropdown--droptray--padding: 0 clamp(1.25rem, 2rem + 1.5vh, 24px);
    /* Menu - Dropdown - Drop tray -Item */
  --menu--dropdown--droptray-item--gap: 33px;
  --menu--dropdown--droptray-item--background_colour: transparent;
  --menu--dropdown--droptray-item--text_colour: var(--light_1, #ffffff);
  --menu--dropdown--droptray-item--margin: 0 0 0 24px;
  --menu--dropdown--droptray-item--font_family: 'DM Sans';
  --menu--dropdown--droptray-item--font_size: 1rem;
  --menu--dropdown--droptray-item--font_weight: 500;
  --menu--dropdown--droptray-item--font_style: normal;
  --menu--dropdown--droptray-item--line_height: 1.5rem;
  /* Menu - Dropdown - Drop tray - Item - Icon */
  --menu--dropdown--droptray-item--icon--text_colour: #49B6FF;
    /* Menu - Dropdown - Drop tray - Button */
  --menu--dropdown--droptray--button--border_colour: var(--dark_2, rgba(255 255 255 / 20%));
  --menu--dropdown--droptray--button--padding: clamp(1rem, 1.5rem + 1vh, 15px) clamp(1.25rem, 2rem + 1.5vh, 24px);
}
/* Main styling */
li.oxfcms-menu-link-dropdown {
  > .menu-item-text,
  > span,
  > a,
  > button {
    padding: var(--menu--dropdown--link--padding);
    background-color: var(--menu--dropdown--droptray-item--background_colour);
    color: var(--menu--dropdown--droptray-item--text_colour);
    font-family: var(--menu--dropdown--droptray-item--font_family);
    font-size: var(--menu--dropdown--droptray-item--font_size);
    font-weight: var(--menu--dropdown--droptray-item--font_weight);
    font-style: var(--menu--dropdown--droptray-item--font_style);
    line-height: var(--menu--dropdown--droptray-item--line_height);
    width: 100%;
    display: inline-block;
    text-align: left;
    border: 0;
  }
  > .menu-item-text {
    cursor: pointer;
    &::after {
      color: var(--menu--dropdown--droptray-item--icon--text_colour);
      content: '\f078';
      font-family: "Font Awesome 6 Free";
      font-weight: 600;
      margin-left: 10px;;
    }
  }
  &:has(.menu-droptray.active) {
    > .menu-item-text {
      &::after {
        color: var(--menu--dropdown--droptray-item--icon--text_colour);
        content: '\f077';
        font-family: "Font Awesome 6 Free";
        font-weight: 600;
      }
    }
  }
  > .menu-droptray {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    visibility: hidden;
    opacity: 0%;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    &.active {
      background-color: var(--menu--dropdown--droptray--background_colour);
      border-top-color: var(--menu--dropdown--droptray--button--border_colour);
      border-top-width: 0;
      border-top-style: solid;
      visibility: visible;
      opacity: 100%;
      .menu-droptray {
        &.active {
          top: 0;
        }
      }
    }
    > .menu-item-submenu {
      > .previous-menu-link {
        button {
          color: var(--menu--dropdown--droptray-item--text_colour);
          padding: var(--menu--dropdown--droptray--button--padding);
          border: 0;
          border-bottom-width: 0;
          border-bottom-style: solid;
          border-bottom-color: var(--menu--dropdown--droptray--button--border_colour);
          background-color: transparent;
          display: inline-block;
          width: 100%;
          text-align: left;
          &::before {
            color: var(--menu--dropdown--droptray-item--icon--text_colour);
            content: '\f060';
            font-family: "Font Awesome 6 Free";
            font-weight: 600;
            margin-right: 10px;
            text-decoration: none;
            display: inline-block;
          }
          &:hover {
            cursor: pointer;
          }
        }
      }
      > .parent-link {
        a {
          padding: var(--menu--dropdown--droptray--button--padding);
          border-bottom-color: var(--menu--dropdown--droptray--button--border_colour);
          border-bottom-width: 0;
          border-bottom-style: solid;
          display: inline-block;
          width: 100%;
          &::after {
            color: var(--menu--dropdown--droptray-item--icon--text_colour);
            content: '\f061';
            font-family: "Font Awesome 6 Free";
            font-weight: 600;
            margin-left: 10px;
            text-decoration: none;
            display: inline-block;
          }
        }
        &:has(button) {
          display: none;
        }
      }
      > .close-link {
        position: absolute;
        top: 0;
        right: 0;
        button {
          color: var(--menu--dropdown--icon--text_colour);
          padding: var(--menu--dropdown--droptray--button--padding);
          border: 0;
          border-left-color: var(--menu--dropdown--droptray--button--border_colour);
          border-left-width: 0;
          border-left-style: solid;
          background-color: transparent;
          display: block;
        }
      }
      > li > ul.oxfcms-menu-link-dropdown {
        column-gap: var(--menu--dropdown--droptray-item--gap);
        padding: var(--menu--dropdown--droptray--padding);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        > li {
          flex-grow: 1;
          flex-basis: 22.5%;
          max-width: 22.5%;
          .menu-item-text {
            width: 100%;
            &::after {
              content: '\f054';
            }
          }
        }
      }
    }
  }
}
/* Breakpoint - Small Desktop */

@media (width < 1280px) {
  li.oxfcms-menu-link-dropdown {
    > .menu-droptray {
      > .menu-item-submenu {
        > ul.oxfcms-menu-link-dropdown {
          > li {
            flex-basis: 30%;
            max-width: 30%;
          }
        }
      }
    }
  }
}
/* Breakpoint - Tablet/Small Desktop */
@media (width < 991px) {
  li.oxfcms-menu-link-dropdown {
    > .menu-droptray {
      > .menu-item-submenu {
        > ul.oxfcms-menu-link-dropdown {
          > li {
            flex-basis: 45%;
            max-width: 45%;
          }
        }
      }
    }
  }
}
/* Breakpoint - Tablet */
@media (width < 768px) {
  li.oxfcms-menu-link-dropdown {
    --menu--dropdown--droptray--padding: 0 clamp(1rem, 1.5rem + 1vh, 16px);
    --menu--dropdown--droptray--button--padding: clamp(1.5rem, 2rem + 1.5vh, 24px) clamp(1rem, 1.5rem + 1vh, 16px);
    > .menu-droptray {
      > .menu-item-submenu {
        > ul.oxfcms-menu-link-dropdown {
          > li {
            flex-basis: 100%;
            max-width: 100%;
            .menu-item-text,
            a {
              width: 100%;
            }
          }
        }
      }
    }
  }
}