:root {
  /* Menu - Dropdown */
  --menu--dropdown--padding: 0 clamp(1.25rem, 2rem + 1.5vh, 24px);
  --menu--dropdown--background_colour: #002147;
  --menu--dropdown--item--gap: 33px;
  /* Menu - Dropdown - First level */
  --menu--dropdown--first-level--padding: clamp(1rem, 1.5rem + 1vh, 15px) 0;
  /* Menu - Dropdown - Mobile - Quicklinks */
  --menu--dropdown--mobile--quick-links--background_colour: #211D1C;
  --menu--dropdown--mobile--quick-links--text_colour: #49B6FF;
  --menu--dropdown--mobile--quick-links--border_colour: var(--dark_2, rgba(255 255 255 / 20%));
  --menu--dropdown--mobile--quick-links--padding: clamp(1.5rem, 2rem + 1.5vh, 24px) 0;
  /* Menu - Dropdown - Mobile - Quicklinks - Button */
  --menu--dropdown--mobile--quick-links--button--text_colour: var(--header--action-area--text_colour);
  --menu--dropdown--mobile--quick-links--button--font_family: var(--header--action-area--font_family);
  --menu--dropdown--mobile--quick-links--button--font_size: var(--header--action-area--font_size);
  --menu--dropdown--mobile--quick-links--button--font_weight: var(--header--action-area--font_weight);
  --menu--dropdown--mobile--quick-links--button--font_style: var(--header--action-area--font_style);
  --menu--dropdown--mobile--quick-links--button--line_height: var(--header--action-area--line_height);
}
/* Main styling */
.oxfcms-menu-dropdown {
  padding: var(--menu--dropdown--padding);
  nav {
    /* Mobile trigger */
    .mobile-menu-trigger {
      display: none;
      visibility: hidden;
    }
    /* Top level menu */
    .menu-top-level {
      gap: var(--menu--dropdown--item--gap);
      display: flex;
      flex-direction: row;
      /* Top level menu items */
      > li {
        /* Item has sub-items */
        &:has(.menu-droptray) {
          /* Add chevron, make clickable */
          > span {
            cursor: pointer;
            &::after {
              content: '\f078';
              font-family: "Font Awesome 6 Free";
              font-weight: 600;
              margin-left: 10px;
            }
          }
          /* Droptray is active? */
          &:has(.menu-droptray.active) {
            /* Different chevron */
            > span {
              &::after {
                content: '\f077';
                font-family: "Font Awesome 6 Free";
                font-weight: 600;
              }
            }
          }
        }
        /* Singular item */
        > .menu-item-text,
        > span,
        > a {
          padding: var(--menu--dropdown--first-level--padding);
        }
        /* Droptray */
        > .menu-droptray {
          > .menu-item-submenu {
            > .previous-menu-link,
            .menu-droptray .close-link {
              display: none;
              visibility: hidden;
            }
          }
        }
      }
      /* Submenu */
      ul.oxfcms-menu-link-dropdown {
        /* Has an active droptray at the next level */
        &:has(> li > .menu-droptray.active) {
          > li {
            /* Hide the singular items at this level */
            /* This is to ensure that the new menu isn't overlaid over the previous menu */
            > .menu-item-text,
            > button,
            > a {
              display: none;
            }
          }
        }
      }
    }
  }
}
/* Breakpoint - Tablet */

@media (width < 768px) {
  .oxfcms-menu-dropdown {
    --menu--dropdown--padding: 0 clamp(1rem, 1.5rem + 1vh, 16px);
    --menu--dropdown--first-level--padding: clamp(.75rem, 1.5rem + .5vh, 12px) 0;
    nav {
      .mobile-menu-trigger {
        text-decoration: none;;
        display: inline-block;
        visibility: visible;
        padding: clamp(1rem, 1.5rem + 1vh, 15px) 0;
        border: 0;
        background-color: transparent;
        color: #ffffff;
        span.text {
          margin-right: 10px;
          text-decoration: underline;
        }
      }
      .menu-top-level {
        flex-direction: column;
        gap: 0;
        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;
        padding: clamp(1rem, 2rem + 1vh, 20px) 0 0;
        &.active {
          background-color: var(--menu--dropdown--background_colour);
          border-top-color: var(--menu--dropdown--droptray--button--border_colour);
          border-top-width: 1px;
          border-top-style: solid;
          visibility: visible;
          opacity: 100%;
          .menu-droptray {
            &.active {
              top: 0;
            }
          }
        }
        > li {
          width: var(--oxfcms-section--width);
          margin: auto;
          > .menu-item-text,
          > a,
          > button {
            width: 100%;
          }
          &:has(.menu-droptray.active) {
            ~ li,
            ~ .header-links {
              display: none;
            }
          }
        }
        .header-links {
          background-color: var(--menu--dropdown--mobile--quick-links--background_colour);
          padding: var(--menu--dropdown--mobile--quick-links--padding);
          border-top-color: var(--menu--dropdown--mobile--quick-links--border_colour);
          border-top-width: 1px;
          border-top-style: solid;
          margin-top: 20px;
          ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: var(--oxfcms-section--width);
            margin: auto;
            li {
              flex-basis: 45%;
              max-width: 50%;
              min-width: 45%;
              display: inline-block;
              a {
                padding: clamp(.5rem, 1rem + 0.25vh, 8px) 0;
                display: inline-block;
                width: 100%;
                &::after {
                  color: var(--menu--dropdown--mobile--quick-links--text_colour);
                  content: '\f05a';
                  font-family: "Font Awesome 6 Free";
                  font-weight: 600;
                  margin-left: 10px;
                  display: inline-block;
                }
              }
              button {
                color: var(--menu--dropdown--mobile--quick-links--button--text_colour);
                font-family: var(--menu--dropdown--mobile--quick-links--button--font_family);
                font-size: var(--menu--dropdown--mobile--quick-links--button--font_size);
                font-weight: var(--menu--dropdown--mobile--quick-links--button--font_weight);
                font-style: var(--menu--dropdown--mobile--quick-links--button--font_style);
                line-height: var(--menu--dropdown--mobile--quick-links--button--line_height);
                padding: clamp(.5rem, 1rem + 0.25vh, 8px) 0;
                display: inline-block;
                background-color: transparent;
                border: 0;
              }
            }
          }
        }
      }
      /* For all menu levels */
      ul {
        /* Have an active droptray directly below the menu item */
        &:has(> li > .menu-droptray.active) {
          > li {
            /* Hide singular menu items */
            > .menu-item-text,
            > button,
            > a {
              display: none;
            }
          }
        }
      }
    }
  }
}