:root {
  /* Header - Container */
  --header--microsite--container--padding--sides: 0;
  /* Header - Top */
  --header--microsite--top--background_colour: #002147;
  --header--microsite--top--padding: 0;
  /* Header - Top - Quicklinks */
  --header--microsite--top--quick-links--text_colour: #ffffff;
  --header--microsite--top--quick-links--margin: 0 0 0 24px;
  --header--microsite--top--quick-links--padding: 12px 0 12px 22px;
  --header--microsite--top--quick-links--font_family: 'Roboto';
  --header--microsite--top--quick-links--font_size: 1.125rem;
  --header--microsite--top--quick-links--font_weight: 400;
  --header--microsite--top--quick-links--font_style: normal;
  --header--microsite--top--quick-links--line_height: 120%;
  /* Header - Main */
  --header--microsite--main--background_colour: #002147;
  --header--microsite--main--padding: 0 var(--header--microsite--container--padding--sides);
  --header--microsite--main--crest--margin: 27px 14px 0 0;
  --header--microsite--main--logo--margin: 27px 35px 0 0;
  /* Header - Main - Title */
  --header--microsite--main--title--text_colour: var(--light_1, #ffffff);
  --header--microsite--main--title--margin: 44px 0 30px;
  --header--microsite--main--title--padding: 0 var(--header--microsite--container--padding--sides) 0 0;
  --header--microsite--main--title--font_family: 'Noto Serif';
  --header--microsite--main--title--font_size: 2.625rem;
  --header--microsite--main--title--font_weight: 400;
  --header--microsite--main--title--font_style: normal;
  --header--microsite--main--title--line_height: 120%;
  /* Header - Main - Menu */
  --header--microsite--main--menu--text_colour: var(--light_1, #ffffff);
  --header--microsite--main--menu--font_family: 'Roboto';
  --header--microsite--main--menu--font_size: 1.375rem;
  --header--microsite--main--menu--font_weight: 400;
  --header--microsite--main--menu--font_style: normal;
  --header--microsite--main--menu--line_height: 120%;
  --header--microsite--main--menu--padding: 20px 20px 20px 0;
  --header--microsite--main--menu--margin: 22px 0 0 0;
  /* Header - Navigation */
  --header--microsite--main--menu--dropdown--droptray--item--icon--colour: var(--light_1, #ffffff);
  --header--microsite--main--menu--dropdown--droptray--subitem--icon--colour: #49B6FF;
  /* Header - Breadcrumb */
  --header--microsite--breadcrumb--font_size: 1.125rem;
  --header--microsite--breadcrumb--font_weight: 400;
  /* Header - Search */
  --header--microsite--search--background_colour: var(--dark_3, #002147);
  --header--microsite--search--border_radius: 6px;
  /* Header - Search - Title */
  --header--microsite--search--title--text_colour: var(--light_1, #ffffff);
  --header--microsite--search--title--margin: 24px 0;
  --header--microsite--search--title--font_family: 'Roboto';
  --header--microsite--search--title--font_size: 3rem;
  --header--microsite--search--title--font_weight: 700;
  --header--microsite--search--title--font_style: normal;
  --header--microsite--search--title--line_height: 120%;
  /* Header - Search - Intro text */
  --header--microsite--search--intro-text--text_colour: var(--light_1, #ffffff);
  --header--microsite--search--intro-text--margin: 0 0 50px;
  --header--microsite--search--intro-text--font_family: 'Roboto';
  --header--microsite--search--intro-text--font_size: 1.375rem;
  --header--microsite--search--intro-text--font_weight: 400;
  --header--microsite--search--intro-text--font_style: normal;
  --header--microsite--search--intro-text--line_height: 160%;
  /* Header - Search - Input */
  --header--microsite--search--input--background_colour: var(--light_1, #ffffff);
  --header--microsite--search--input--text_colour: var(--dark_3, #002147);
  --header--microsite--search--input--font_family: 'Roboto';
  --header--microsite--search--input--font_size: 1.375rem;
  --header--microsite--search--input--font_weight: 400;
  --header--microsite--search--input--font_style: normal;
  --header--microsite--search--input--line_height: 120%;
  --header--microsite--search--input--padding: 20px;
  --header--microsite--search--input--border_size: 1px;
  --header--microsite--search--input--border_style: solid;
  --header--microsite--search--input--border_colour: var(--light_1, #ffffff);
  /* Header - Search - Input - Placeholder */
  --header--microsite--search--input--placeholder--text_colour: var(--dark_2, #61615f);
  --header--microsite--search--input--placeholder--font_family: 'Roboto';
  --header--microsite--search--input--placeholder--font_size: 1.375rem;
  --header--microsite--search--input--placeholder--font_weight: 400;
  --header--microsite--search--input--placeholder--font_style: normal;
  --header--microsite--search--input--placeholder--line_height: 120%;
  /* Header - Search - Button */
  --header--microsite--search--button--background_colour: var(--light_accent, #49B6FF);
  --header--microsite--search--button--text_colour: var(--dark_3, #002147);
  --header--microsite--search--button--border_colour: transparent;
  --header--microsite--search--button--padding: 16px;
  --header--microsite--search--button--font_family: 'Roboto';
  --header--microsite--search--button--font_size: 1.375rem;
  --header--microsite--search--button--font_weight: 500;
  --header--microsite--search--button--font_style: normal;
  --header--microsite--search--button--line_height: 120%;
  --header--microsite--search--button--icon--font_size: 1.375rem;
  /* Header - Search - Button - Active */
  --header--microsite--search--button--active--background_colour: #002147;
  --header--microsite--search--button--active--text_colour: #49B6FF;
  --header--microsite--search--button--active--border_colour: #49B6FF;
}
/* Main styling */
.node--type-header-footer {
  position: static;
  .oxfcms-layout-header-microsite {
    .oxfcms-header-microsite {
      display: flex;
      flex-direction: column;
      .header-top {
        background-color: var(--header--microsite--top--background_colour);
        padding: var(--header--microsite--top--padding);
        display: flex;
        min-height: 45px;
        .header-action-area {
          color: var(--header--microsite--top--quick-links--text_colour);
          padding: var(--header--microsite--top--quick-links--padding);
          font-family: var(--header--microsite--top--quick-links--font_family);
          font-size: var(--header--microsite--top--quick-links--font_size);
          font-weight: var(--header--microsite--top--quick-links--font_weight);
          font-style: var(--header--microsite--top--quick-links--font_style);
          line-height: var(--header--microsite--top--quick-links--line_height);
          margin-left: auto;
          display: none;
          justify-content: flex-end;
          align-items: center;
          &:has(ul) {
            display: flex;
          }

          .header-links {
            display: flex;
            flex-direction: row-reverse;
            ul {
              display: flex;
              margin: 0;
              padding: 0;
              li {
                display: inline;
                text-wrap: nowrap;
                &::after {
                  content: "|";
                  padding: 0 10px;
                }
                &:last-of-type {
                  margin-right: 0;
                  &::after {
                    content: "";
                    padding: 0;
                  }
                }
                & .ck-list-bogus-paragraph {
                  display: inline;
                }
                > button,
                > a {
                  padding: 0;
                  background-color: transparent;
                  color: var(--header--microsite--top--quick-links--text_colour);
                  font-family: var(--header--microsite--top--quick-links--font_family);
                  font-size: var(--header--microsite--top--quick-links--font_size);
                  font-weight: var(--header--microsite--top--quick-links--font_weight);
                  font-style: var(--header--microsite--top--quick-links--font_style);
                  line-height: var(--header--microsite--top--quick-links--line_height);
                  border: 0;
                  text-underline-offset: 2px;
                  text-decoration-thickness: 1px;
                }
              }
            }
          }
        }
      }
      .header-main {
        background-color: var(--header--microsite--main--background_colour);
        display: flex;
        flex-flow: row wrap;
        position: relative;
        .width-limit-container {
          flex-flow: wrap;
          position: static;
        }
        .header-crest {
          margin: var(--header--microsite--main--crest--margin);
          display: flex;
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: content;
          align-items: center;
          align-self: baseline;
          &.square {
            a {
              display: flex;
            }
            img {
              width: 88px;
              height: 88px;
            }
          }
        }
        .header-logo {
          margin: var(--header--microsite--main--logo--margin);
          display: flex;
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: content;
          flex-direction: row;
          width: auto;
          .oxfcms-image {
            img {
              height: 88px;
              border-radius: 0;
            }
            .oxfcms-caption {
              display: none;
            }
          }
        }
        .header-title {
          color: var(--header--microsite--main--title--text_colour);
          margin: var(--header--microsite--main--title--margin);
          padding: var(--header--microsite--main--title--padding);
          font-family: var(--header--microsite--main--title--font_family);
          font-size: var(--header--microsite--main--title--font_size);
          font-weight: var(--header--microsite--main--title--font_weight);
          font-style: var(--header--microsite--main--title--font_style);
          line-height: var(--header--microsite--main--title--line_height);
          max-width: 70%;
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: min-content;
        }
        .header-menu-area {
          color: var(--header--microsite--main--menu--text_colour);
          font-family: var(--header--microsite--main--menu--font_family);
          font-size: var(--header--microsite--main--menu--font_size);
          font-weight: var(--header--microsite--main--menu--font_weight);
          font-style: var(--header--microsite--main--menu--font_style);
          line-height: var(--header--microsite--main--menu--line_height);
          margin: var(--header--microsite--main--menu--margin);
          flex: 1 100%;
          display: flex;
          width: 100%;
          .header-menu {
            display: inline-block;
            flex-grow: 1;
            .menu-mode-header {
              display: inline-block;
              padding: 0;
              nav {
                ul {
                  gap: 8px;
                  li {
                    .menu-item-text,
                    span,
                    a,
                    button {
                      color: var(--header--microsite--main--menu--text_colour);
                      font-family: var(--header--microsite--main--menu--font_family);
                      font-size: var(--header--microsite--main--menu--font_size);
                      font-weight: var(--header--microsite--main--menu--font_weight);
                      font-style: var(--header--microsite--main--menu--font_style);
                      line-height: var(--header--microsite--main--menu--line_height);
                      padding: var(--header--microsite--main--menu--padding);
                      margin: 0;
                      text-underline-offset: 2px;
                      text-decoration-thickness: 1px;
                      &::after {
                        color: var(--header--microsite--main--menu--dropdown--droptray--item--icon--colour);
                      }
                    }
                    .menu-droptray {
                      padding: 0 var(--header--microsite--container--padding--sides);
                      .parent-link > a,
                      ul {
                        padding-left: 0;
                        padding-right: 0;
                        li {
                          .menu-item-text,
                          span,
                          a,
                          button {
                            &::after {
                              color: var(--header--microsite--main--menu--dropdown--droptray--subitem--icon--colour);
                            }
                          }
                        }
                      }
                      .close-link {
                        max-width: var(--oxfcms-section--width);
                        width: 100%;
                        left: auto;
                        right: auto;
                        button {
                          right: 0;
                          position: absolute;
                          padding-right: 0;
                        }
                      }
                      & > .menu-item-submenu {
                        max-width: var(--oxfcms-section--width);
                        width: 100%;
                        margin: auto;
                      }
                    }
                  }
                }
              }
            }
          }
          .header-search {
            display: flex;
            margin-left: 30px;
            align-self: flex-end;
            justify-self: flex-end;
            float: none;
            flex-grow: 0;
            .search {
              display: flex;
              align-items: center;
              padding: 20px 0 20px 20px;
              span.text {
                margin-right: 10px;
                text-decoration: underline;
                text-underline-offset: 2px;
                text-decoration-thickness: 1px;
              }
              i {
                font-size: var(--header--microsite--top--quick-links-icon--font_size);
                line-height: var(--header--microsite--top--quick-links--line_height);
              }
              &:focus-within, &:hover {
                span.text {
                  text-decoration: underline;
                }
              }
            }
            .search:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
    .header-breadcrumb {
      .breadcrumb-wrapper {
        nav.breadcrumb {
          font-size: var(--header--microsite--breadcrumb--font_size);
          font-weight: var(--header--microsite--breadcrumb--font_weight);
          padding: 10px 0;
          ol, ul {
            padding: 0;
            li {
              a {
                font-size: var(--header--microsite--breadcrumb--font_size);
                font-weight: var(--header--microsite--breadcrumb--font_weight);
              }
              &:last-of-type {
                font-size: var(--header--microsite--breadcrumb--font_size);
                font-weight: var(--header--microsite--breadcrumb--font_weight);
              }
            }
          }
        }
      }
    }
    #search-overlay {
      &.search-overlay {
        background-color: var(--header--microsite--search--background_colour);
        color: var(--light_1);
        visibility: hidden;
        opacity: 0%;
        -webkit-transition: max-height 0.3s ease-out, opacity 0.5s ease-out, visibility 0.5s ease-out;
        -moz-transition: max-height 0.3s ease-out, opacity 0.5s ease-out, visibility 0.5s ease-out;
        -o-transition: max-height 0.3s ease-out, opacity 0.5s ease-out, visibility 0.5s ease-out;
        transition: max-height 0.3s ease-out, opacity 0.5s ease-out, visibility 0.5s ease-out;
        position: absolute;
        left: 0%;
        width: 100vw;
        height: 100%;
        max-height: 100%;
        padding: 0 20px;

        .search-overlay-heading {
          h2 {
            color: var(--header--microsite--search--title--text_colour);
            margin: var(--header--microsite--search--title--margin);
            font-family: var(--header--microsite--search--title--font_family);
            font-size: var(--header--microsite--search--title--font_size);
            font-weight: var(--header--microsite--search--title--font_weight);
            font-style: var(--header--microsite--search--title--font_style);
            line-height: var(--header--microsite--search--title--line_height);
          }
        }
        .search-overlay-intro {
          color: var(--header--microsite--search--intro-text--text_colour);
          margin: var(--header--microsite--search--intro-text--margin);
          font-family: var(--header--microsite--search--intro-text--font_family);
          font-size: var(--header--microsite--search--intro-text--font_size);
          font-weight: var(--header--microsite--search--intro-text--font_weight);
          font-style: var(--header--microsite--search--intro-text--font_style);
          line-height: var(--header--microsite--search--intro-text--line_height);
        }
        .search-overlay-search-form {
          input[type="text"] {
            border-top-left-radius: var(--header--microsite--search--border_radius);
            border-bottom-left-radius: var(--header--microsite--search--border_radius);
            background-color: var(--header--microsite--search--input--background_colour);
            color: var(--header--microsite--search--input--text_colour);
            font-family: var(--header--microsite--search--input--font_family);
            font-size: var(--header--microsite--search--input--font_size);
            font-weight: var(--header--microsite--search--input--font_weight);
            font-style: var(--header--microsite--search--input--font_style);
            line-height: var(--header--microsite--search--input--line_height);
            padding: var(--header--microsite--search--input--padding);
            border-width: var(--header--microsite--search--input--border_size);
            border-style: var(--header--microsite--search--input--border_style);
            border-color: var(--header--microsite--search--input--border_colour);
            &::placeholder {
              color: var(--header--microsite--search--input--placeholder--text_colour);
              font-family: var(--header--microsite--search--input--placeholder--font_family);
              font-size: var(--header--microsite--search--input--placeholder--font_size);
              font-weight: var(--header--microsite--search--input--placeholder--font_weight);
              font-style: var(--header--microsite--search--input--placeholder--font_style);
              line-height: var(--header--microsite--search--input--placeholder--line_height);
            }
          }
          .search-button {
            background-color: var(--header--microsite--search--button--background_colour);
            color: var(--header--microsite--search--button--text_colour);
            padding: var(--header--microsite--search--button--padding);
            font-family: var(--header--microsite--search--button--font_family);
            font-size: var(--header--microsite--search--button--font_size);
            font-weight: var(--header--microsite--search--button--font_weight);
            font-style: var(--header--microsite--search--button--font_style);
            line-height: var(--header--microsite--search--button--line_height);
            border-top-right-radius: var(--header--microsite--search--border_radius);
            border-bottom-right-radius: var(--header--microsite--search--border_radius);
            border: 1px solid var(--header--microsite--search--button--border_colour);
            width: 140px;
            span {
              position: relative;
              padding: 0;
              left: auto;
              top: auto;
              margin: 0;
              padding-right: 30px;
              max-width: none;
              clip: unset;
              width: auto;
              display: inline-block;
              height: auto;
              &::after {
                font-size: var(--header--microsite--search--button--icon--font_size);
                content: "\f002";
                font-family: "Font Awesome 6 Free";
                font-weight: 600;
                position: absolute;
                right: 0;
                top: 0;
              }
            }
            &::after {
              content: '';
              display: none;
            }
            &:hover, &:focus {
              background-color: var(--header--microsite--search--button--active--background_colour);
              color: var(--header--microsite--search--button--active--text_colour);
              border-color: var(--header--microsite--search--button--active--border_colour);
            }
          }
        }

        @media (prefers-reduced-motion) {
          -webkit-transition: none;
          -moz-transition: none;
          -o-transition: none;
          transition: none;
        }

        .search-overlay-text-wrapper-outer {
          display: flex;
          justify-content: center;
          height: 100%;
          text-align: center;
          margin-top: 70px;

          > div {
            flex: 1 1 auto;
            max-width: 433px;

            @media (width >= 768px) {
              max-width: 577px;
            }

            @media (width >= 1280px) {
              max-width: 794px;
            }

            @media (width >= 1920px) {
              max-width: 1184px;
            }
          }
          .search-overlay-intro {
            margin-bottom: 20px;
          }
        }
        &.search-overlay-visible {
          visibility: visible;
          opacity: 100%;
          z-index: 1000;
        }
      }
    }
    .width-limit-container {
      padding-right: var(--header--microsite--container--padding--sides);
      padding-left: var(--header--microsite--container--padding--sides);
    }
  }
}
/* Mercury-specific styling */
.is-mercury-edit-mode {
  .oxfcms-header-microsite {
    .header-logo {
      min-width: 50px;
    }
    .header-title {
      min-width: 75px;
    }
    .header-links {
      .lpb-btn--add.center {
        margin-left: -100px;
      }
    }
  }
  .header-breadcrumb {
    .lpb-btn--add.center {
      margin-left: -100px;
    }
  }
  .search-overlay {
    visibility: hidden;
  }
}
/* Breakpoint - Small Desktop */
@media (width < 1280px) {
  .node--type-header-footer {
    .oxfcms-layout-header-microsite {
      --header--microsite--top--quick-links--font_size: 1rem;
      --header--microsite--main--title--font_size: 2.125rem;
      --header--microsite--main--menu--font_size: 1.125rem;
      --header--microsite--breadcrumb--font_size: 1.125rem;
      --header--microsite--search--title--font_size: 2.25rem;
      --header--microsite--search--intro-text--font_size: 1.125rem;
      --header--microsite--search--input--font_size: 1.25rem;
      --header--microsite--search--input--placeholder--font_size: 1.25rem;
      --header--microsite--search--button--font_size: 1.25rem;
      --header--microsite--search--button--icon--font_size: 1.25rem;
      .oxfcms-header-microsite {
        .header-main {
          .header-crest {
            &.square {
              img {
                width: 80px;
                height: 80px;
              }
              + .header-logo {
                .oxfcms-image {
                  img {
                    max-width: 100%;
                    height: 80px;
                  }
                }
              }
            }
            &.crest-none {
              .header-logo {
                margin: 0;
              }
              .oxfcms-image img {
                max-width: 100%;
                height: 80px;
              }
            }
          }
          .header-title {
            max-width: 100%;
          }
        }
      }
    }
  }
}
/* Breakpoint - Tablet */
@media (width < 768px) {
  .node--type-header-footer {
    .oxfcms-layout-header-microsite {
      --header--microsite--container--padding--sides: 20px;
      --header--microsite--top--padding: 0 var(--header--microsite--container--padding--sides);
      --header--microsite--top--quick-links--padding: 8px 0 8px var(--header--microsite--container--padding--sides);
      --header--microsite--main--crest--margin: var(--header--microsite--container--padding--sides) 10px var(--header--microsite--container--padding--sides) 0;
      --header--microsite--main--logo--margin: var(--header--microsite--container--padding--sides) var(--header--microsite--container--padding--sides) 0 0;
      --header--microsite--main--title--margin: 12px 0 0 0;
      --header--microsite--main--title--padding: 0;
      --header--microsite--main--menu--padding: 12px 0;
      --header--microsite--main--menu--margin: 20px 0 0 0;
      --header--microsite--search--button--padding: 16px;
      --header--microsite--top--quick-links--font_size: 1rem;
      --header--microsite--main--title--font_size: 1.375rem;
      --header--microsite--main--menu--font_size: 1rem;
      --header--microsite--breadcrumb--font_size: 1rem;
      --header--microsite--search--title--font_size: 2.25rem;
      --header--microsite--search--intro-text--font_size: 1rem;
      --header--microsite--search--input--font_size: 1rem;
      --header--microsite--search--input--placeholder--font_size: 1rem;
      --header--microsite--search--button--font_size: 1rem;
      --header--microsite--search--button--icon--font_size: 1rem;
      --header--microsite--top--quick-links--line_height: 120%;
      --header--microsite--main--title--font_weight: 400;
      .oxfcms-header-microsite {
        .header-top {
          .header-action-area {
            display: none;
          }
        }
        .header-main {
          position: relative;
          .header-crest {
            display: flex;
            align-items: center;
            &.square img {
              width: 72px;
              height: 72px;
            }
            &.square {
              + .header-logo {
                .oxfcms-image {
                  img {
                    max-width: 100%;
                    height: 72px;
                  }
                }
              }
            }
            &.crest-none {
              .header-logo {
                margin: 0;
              }
              .oxfcms-image img {
                max-width: 100%;
                height: 72px;
              }
            }
          }
          .header-title {
            flex-basis: 100%;
          }
          .header-menu-area {
            position: static;
            .header-menu {
              display: flex;
              .menu-mode-header {
                display: flex;
                nav {
                  display: flex;
                  ul {
                    padding: 0;
                    li {
                      .menu-droptray {
                        .parent-link > a {
                          padding: 16px 0;
                        }
                        .close-link {
                          .back-button {
                            padding: 16px;
                          }
                        }
                      }
                    }
                    .header-links {
                      margin: 20px 0 0;
                      padding: 16px 0;
                      li {
                        a {
                          padding: 8px 0;
                        }
                      }
                    }
                    &.menu-top-level {
                      padding: 20px 0 0;
                      > li {
                        padding-left: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      #search-overlay {
        &.search-overlay {
          .search-overlay-search-form {
            .form--inline {
              display: flex;

              .form-type-textfield {
                max-width: calc(100% - 110px);
              }
              .search-button {
                width: 110px;
              }
            }
          }
        }
      }
      .width-limit-container {
        padding-right: 0;
        padding-left: 0;
        position: static;
      }
    }
    .header-breadcrumb .breadcrumb-wrapper {
      --header--breadcrumb--font_size: 1rem;
    }
  }
}