.spr-menu {
  --menu-item-size: 1rem;

  @media (min-width: 992px) {
    --menu-item-padding-block: 0.5rem;
    --menu-item-padding-inline: 0.5rem;
    --menu-item-line-height: 1.25rem;
    --menu-item-size: 1.125rem;
  }

  @media (max-width: 991px) {
    .spr-menu-item--level-1 > a {
      --menu-item-padding-inline: 1.65rem 1.5rem;
    }
  }
}

.spr-menu--is-secondary {
  @media (min-width: 992px) {
    --menu-item-icon-size: 2.75rem;
    --menu-item-padding-block: 0.25rem;

    .spr-menu-item--level-0 > a {
      --menu-item-size: 1rem;
    }

    .spr-menu-item--level-1 > a {
      --menu-item-padding-block: 0.5rem;
    }
  }
}

.spr-menu-main {
  @media (min-width: 992px) {
    display: flex;
    align-items: center;
  }
}

.spr-menu {
  margin: 0;
  padding: 0;
  list-style: none;

  a {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--menu-color-text);
    font-size: var(--menu-item-size);
    font-weight: var(--menu-item-weight);
    line-height: var(--menu-item-line-height);
    padding-block: var(--menu-item-padding-block);
    padding-inline: var(--menu-item-padding-inline);

    &.is-active {
      text-decoration: none;
      color: var(--menu-item-active-color);
      text-decoration-color: var(--menu-item-active-color);
      text-underline-offset: var(--base-underline-offset);

      &::after {
        background-image: var(--menu-item-active-icon-arrow);
      }
    }

    &.incidents {
      display: flex;
      gap: 0.25rem;

      &::after {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        content: "";
        background-image: var(--menuitem-incidents-icon);
        background-repeat: no-repeat;

        @media (max-width: 991px) {
          background-image: var(--menu-item-icon-arrow);
          background-position: center;
          background-size: 2rem;
          rotate: -90deg;
        }
      }

      &:hover {
        &::after {
          background-image: var(--menuitem-incidents-icon-hover);

          @media (max-width: 991px) {
            background-image: var(--menu-item-icon-arrow);
          }
        }
      }

      @media (max-width: 991px) {
        align-items: center;
        justify-content: space-between;
        border-radius: 1.5625rem;
        background-color: var(--color-secondary-light);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='36' fill='none'%3E%3Ccircle cx='18.5' cy='18' r='18' fill='url(%23a)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M15.944 8.318c1.042-1.757 3.568-1.757 4.612 0l8.057 13.572c1.075 1.809-.216 4.11-2.307 4.11H10.194c-2.09 0-3.381-2.301-2.307-4.11l8.057-13.572Zm2.306 4.107c.267 0 .524.107.713.298.19.191.295.45.295.72v4.073c0 .27-.106.529-.295.72a1.004 1.004 0 0 1-1.426 0c-.19-.191-.295-.45-.295-.72v-4.073c0-.27.106-.529.295-.72.19-.19.446-.298.713-.298Zm1.345 8.824c0 .36-.142.705-.394.96a1.338 1.338 0 0 1-1.902 0 1.364 1.364 0 0 1 0-1.92 1.338 1.338 0 0 1 1.902 0c.252.254.393.6.393.96Z' clip-rule='evenodd'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='8' x2='32.5' y1='4.5' y2='33.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23AF3D00'/%3E%3Cstop offset='1' stop-color='%23EE7C12'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0.5rem 50%;
        background-size: 2.3125rem;
        padding-inline: 3.5rem 0.5rem;
        margin-inline: 1rem;
      }
    }

    &.login {
      display: flex;
      gap: 0.25rem;

      &::after {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        content: "";
        background-image: var(--menuitem-login-icon);
        background-repeat: no-repeat;

        @media (max-width: 991px) {
          background-image: var(--menu-item-icon-arrow);
          background-position: center;
          background-size: 2rem;
          rotate: -90deg;
        }
      }

      &:hover {
        &::after {
          background-image: var(--menuitem-login-icon-hover);

          @media (max-width: 991px) {
            background-image: var(--menu-item-icon-arrow);
          }
        }
      }
    }

    @media (max-width: 991px) {
      font-weight: var(--font-weight-extra-bold);
    }

    @media (min-width: 992px) {
      &:hover {
        text-decoration: underline;
        color: var(--menu-item-hover-color);
        text-underline-offset: var(--base-underline-offset);
      }
    }
  }

  .spr-menu-item--level-1,
  .spr-menu-item--level-2 {
    a {
      display: flex;
      align-items: center;
      padding-block: 0;
      padding-inline: 0;
      min-height: 2.75rem;
    }

    &:not(:last-child) {
      padding-block-end: 0.5rem;
      border-block-end: 0.0625rem solid var(--color-gray-20);
    }

    &:not(:first-child) {
      padding-block-start: 0.5rem;
    }

    &[aria-expanded="true"],
    &.is-hovered[aria-expanded="true"] {
      a {
        color: var(--menu-item-sub-hover-color);
      }
    }
  }

  &.spr-menu--level-0 {
    @media screen and (max-width: 991px) {
      padding-block-start: 0.5rem;
    }

    @media screen and (min-width: 48rem) {
      a {
        font-size: 1rem;
      }
    }

    @media screen and (min-width: 108rem) {
      a {
        font-size: var(--menu-item-size);
      }
    }
  }

  &.spr-menu--level-1 {
    flex-direction: column;
    padding: 1rem;
    gap: 0;
  }

  &.spr-menu--level-2 {
    flex-direction: column;
    padding: 1rem;
    gap: 0;
  }

  @media (max-width: 991px) {
    li {
      padding-block: 0.5rem;
    }
  }

  @media (min-width: 62rem) {
    display: flex;
    justify-content: var(--menu-align, flex-start);
    gap: 0.25rem;
  }

  @media (min-width: 70rem) {
    gap: 1rem;
  }

  @media (min-width: 80rem) {
    gap: var(--menu-gap);
  }
}

.spr-menu-item--has-children {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  > button {
    position: relative;
    inline-size: 4rem;
    cursor: pointer;
    text-indent: -999rem;
    border: none;
    outline: none;
    background-color: white;
    appearance: none;

    &::after {
      position: absolute;
      display: block;
      align-self: center;
      height: var(--menu-item-icon-size-level-1);
      content: "";
      transform: rotate(-90deg);
      border: 0.0625rem solid var(--color-gray-40);
      background-color: var(--color--white);
      background-image: var(--menu-item-icon-arrow);
      background-repeat: no-repeat;
      background-position: center center;
      inline-size: var(--menu-item-icon-size-level-1);
      inset: 0;
    }

    &.is-active {
      &::after {
        transform: rotate(0deg);
        border-color: var(--menu-item-sub-hover-color);
      }
    }

    @media (min-width: 992px) {
      display: none;
    }
  }

  &.spr-menu-item--level-1 button {
    background-color: transparent;

    &::before {
      content: none;
    }

    &::after {
      background-color: var(--color-white);
    }
  }

  > a {
    inline-size: calc(100% - 4rem);

    &:hover::after {
      background-image: var(--menu-item-icon-arrow);
    }

    @media (min-width: 992px) {
      inline-size: auto;
      padding-inline: 0.25rem;
      padding-right: calc(0.625rem + var(--menu-item-icon-size-level-0));

      &::before {
        content: none;
      }

      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        display: block;
        height: var(--menu-item-icon-size-level-0);
        content: "";
        transition: transform 0.3s ease-in-out;
        transform: translateY(-50%);
        transform-origin: center;
        background-image: var(--menu-item-icon-arrow);
        background-repeat: no-repeat;
        background-size: var(--menu-item-icon-size-level-0);
        inline-size: var(--menu-item-icon-size-level-0);
      }
    }
  }

  &.spr-menu-item--level-1 {
    @media (min-width: 992px) {
      > a {
        padding-inline-end: calc(0.625rem + var(--menu-item-icon-size-level-1));

        &::before {
          position: absolute;
          display: block;
          content: "";
          inset: -0.5rem;
        }

        &::after {
          position: absolute;
          top: 0;
          right: 0;
          display: block;
          align-self: center;
          height: var(--menu-item-icon-size-level-1);
          content: "";
          transform: rotate(-90deg);
          border: 0.0625rem solid var(--color-gray-40);
          background-image: var(--menu-item-sub-icon-arrow);
          background-repeat: no-repeat;
          background-position: center;
          inline-size: var(--menu-item-icon-size-level-1);
        }
      }
    }
  }

  @media (min-width: 992px) {
    display: block;
  }
}

.spr-menu--is-secondary .spr-menu-item--has-children > a {
  padding-right: calc(0.375rem + var(--menu-item-icon-size));
}

.spr-menu-item--level-0 {
  position: relative;

  .spr-menu-main & a {
    @media (min-width: 992px) {
      font-weight: 700;
    }
  }

  &[aria-expanded="true"] {
    > a {
      color: var(--menu-item-hover-color);
      text-decoration-color: var(--menu-item-hover-color);

      &::after {
        background-image: var(--menu-item-hover-icon-arrow);
      }
    }
  }

  .spr-menu--level-1 {
    transition: var(--menu-dropdown-transition);
    border-radius: 0.5rem;
    background-color: var(--color-white);

    @media (max-width: 991px) {
      display: none;
      inline-size: 100%;

      &.is-opened {
        display: block;
        margin-block-start: 0.5rem;
        background-color: var(--color-gray-20);
        padding-block: 0 0.5rem;
        padding-inline: 1rem 0;

        li {
          border: none;

          &:last-child {
            padding-block-end: 0;
          }

          a {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            border: none;

            &::before {
              display: block;
              flex: none;
              height: var(--menu-item-icon-size-level-0);
              content: "";
              transform: rotate(-90deg);
              background-image: var(--menu-item-icon-arrow-mobile);
              background-repeat: no-repeat;
              background-position: center;
              inline-size: var(--menu-item-icon-size-level-0);
            }
          }
        }
      }
    }

    @media (min-width: 992px) {
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 50%;
      visibility: visible;
      transform: translateX(-50%);
      pointer-events: none;
      opacity: 0;
      box-shadow: var(--menu-dropdown-shadow);
      inline-size: var(--menu-dropdown-inline-size);
    }
  }

  &.is-hovered .spr-menu--level-1,
  &.is-hovered .spr-menu--level-2 {
    visibility: visible;
    inline-size: var(--menu-dropdown-inline-size);
    pointer-events: all;
    opacity: 1;

    a {
      color: var(--color-black);
      font-weight: var(--font-weight-bold);

      &:hover {
        color: var(--menu-item-sub-hover-color);
      }

      @media (min-width: 1280px) {
        font-size: 1rem;
      }
    }
  }

  .spr-menu-item--level-1 {
    &.spr-menu-item--has-children {
      position: relative;
    }

    .spr-menu--level-2 {
      transition: var(--menu-dropdown-transition);
      border-radius: 0.5rem;
      background-color: var(--color-white);

      @media screen and (max-width: 991px) {
        display: none;
        inline-size: 100%;

        &.is-opened {
          display: block;
          margin-block-start: 0.5rem;
          margin-block-end: -0.5rem;
          margin-inline-start: -1rem;
          padding-inline-start: 1.5rem;
          border-radius: 0;
          background-color: var(--color-gray-light);
          padding-block: 0 0.5rem;
          inline-size: calc(100% + 2rem);

          li {
            border: none;

            a {
              display: flex;
              align-items: center;
              gap: 0.625rem;
              padding-block: 0.375rem;

              &::before {
                display: block;
                height: var(--menu-item-icon-size-level-0);
                content: "";
                background-image: var(--menu-item-icon-arrow-mobile);
                background-repeat: no-repeat;
                background-position: center;
                inline-size: var(--menu-item-icon-size-level-0);
              }
            }
          }
        }
      }

      @media (min-width: 992px) {
        position: absolute;
        z-index: 1;
        top: -0.5rem;
        left: calc(100% + 0.5rem);
        visibility: visible;
        pointer-events: none;
        opacity: 0;
        box-shadow: var(--menu-dropdown-shadow);
      }
    }

    &.is-hovered .spr-menu--level-2 {
      z-index: 10;
      top: -0.5rem;
      left: calc(100% + 0.5rem);
      visibility: visible;
      pointer-events: all;
      opacity: 1;

      a {
        color: var(--color-black);
        font-weight: var(--font-weight-bold);

        &:hover {
          color: var(--menu-item-sub-hover-color);

          &::after {
            border-color: var(--menu-item-sub-hover-color);
            background-image: var(--menu-item-icon-arrow-orange-dark);
          }
        }

        &::after {
          right: 0.625rem;
          border: 0.0625rem solid var(--color-gray-40);
          background-image: var(--menu-item-sub-icon-arrow);
        }
      }
    }

    &:last-child a {
      border-block-end: none;
    }
  }
}

.spr-menu-item--level-2:last-child a {
  border-block-end: none !important;
}

.spr-menu-item--level-1.spr-menu-item--has-children.is-hovered a::after {
  border-color: var(--menu-item-sub-hover-color);
  background-color: var(--menu-item-arrow-square-hover-color);
}

.spr-menu-item--level-0.spr-menu-item--second-to-last .spr-menu-item--level-1 .spr-menu--level-2,
.spr-menu-item--level-0.spr-menu-item--last .spr-menu-item--level-1 .spr-menu--level-2 {
  top: -0.5rem;
  right: calc(100% + 0.5rem);
  left: auto;
}

.spr-menu-main .spr-menu-item--level-0:nth-last-child(3) .spr-menu-item--level-1 .spr-menu--level-2 {
  @media (max-width: 1279px) {
    top: -0.5rem;
    right: calc(100% + 0.5rem);
    left: auto;
  }
}

.spr-menu--dark {
  --menu-item-icon-arrow-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23af3d00' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41Z'/%3E%3C/svg%3E");
  --menu-item-active-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23ee9212' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41Z'/%3E%3C/svg%3E");

  a {
    &.incidents {
      @media (min-width: 992px) {
        &::after {
          background-image: var(--menuitem-incidents-icon-on-dark);
        }

        &:hover::after {
          background-image: var(--menuitem-incidents-icon-on-dark-hover);
        }
      }
    }

    &.login {
      &::after {
        background-image: var(--menuitem-login-icon-on-dark);
      }

      &:hover::after {
        background-image: var(--menuitem-login-icon-on-dark-hover);
      }
    }
  }

  @media (min-width: 992px) {
    --menu-color-background: #1a1a1a;
    --menu-color-text: white;
    --menu-item-link-color-background: rgba(255, 255, 255, 0.1);
    --menu-item-icon-arrow: var(--menu-item-icon-arrow-on-dark);
    --menu-item-icon-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41Z'/%3E%3C/svg%3E");
    --menu-item-sub-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23000000' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41Z'/%3E%3C/svg%3E");
    --menu-item-hover-icon-arrow: var(--menu-item-icon-arrow-hover-on-dark);
  }
}

html.theme--vrzl {
  .spr-menu-main .spr-menu-item--level-0:nth-last-child(3) .spr-menu-item--level-1 .spr-menu--level-2 {
    top: -0.5rem;
    right: calc(100% + 0.5rem);
    left: auto;
  }

  @media (max-width: 991px) {
    .spr-menu:has(.incidents) {
      display: flex;
      flex-direction: column;

      > li:has(a.incidents) {
        order: 2;
      }
    }
  }
}

html.theme--vrzl .path-frontpage .spr-menu {
  a.incidents {
    @media (min-width: 992px) {
      &::after {
        background-image: var(--menuitem-incidents-icon-on-dark);
      }

      &:hover {
        &::after {
          background-image: var(--menuitem-incidents-icon-on-dark-hover);
        }
      }
    }
  }
}