header {
  position: absolute;
  left: 0;
  top: 110px;
  right: 0;
  z-index: 1000;

  @media (max-width: 1680px) {
    top: 90px;
  }

  @media (max-width: 1600px) {
    top: 80px;
  }

  @media (max-width: 1440px) {
    top: 70px;
  }

  @media (max-width: 1366px) {
    top: 60px;
  }

  @media (max-width: 1024px) {
    top: 20px;
  }

  .container-wide {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
      a {
        display: block;

        img {
          @media (max-width: 1024px) {
            height: 40px;
          }
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;

      .additional-menu {
        margin-right: 34px;

        @media (max-width: 768px) {
          margin-right: 20px;
        }

        @media (max-width: 576px) {
          display: none;
        }

        ul {
          margin: 0;
          padding: 0;
          list-style: none;

          li {
            a {
              color: var(--color-white);
              font-size: var(--font-size-xs);
              font-weight: 600;
              text-transform: uppercase;
              font-feature-settings: 'case' on;
              transition: opacity 0.3s ease;

            }

            &:hover,
            &:focus {
              a {
                opacity: 0.6;
              }
            }
          }
        }
      }

      .hamburger-menu {
        position: relative;
        margin-right: 20px;

        @media (max-width: 768px) {
          margin-right: 14px;
        }

        .hamburger-trigger {
          display: flex;
          flex-direction: column;
          gap: 7px;
          width: 30px;
          cursor: pointer;

          div {
            height: 3px;
            border-radius: 2px;
            background-color: var(--color-white);
            transition: margin-left 0.3s ease-in-out;

            &:nth-of-type(1) {
              margin-left: 10px;
            }

            &:nth-of-type(3) {
              margin-left: 5px;
            }
          }

          &.toggled {
            div {
              &:nth-of-type(1) {
                margin-left: 0;
              }

              &:nth-of-type(3) {
                margin-left: 0;
              }
            }
          }
        }

        .navigation {
          position: absolute;
          width: 240px;
          left: 50%;
          top: calc(100% + 24px);
          padding: 20px 20px 28px;
          transform: translate(-50%, 10px);
          background-color: var(--color-white);
          transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
          visibility: hidden;
          opacity: 0;

          @media (max-width: 1024px) {
            width: 180px;
            padding: 16px 16px 22px;
          }

          &:before {
            display: block;
            position: absolute;
            content: '';
            width: 16px;
            height: 16px;
            left: 50%;
            top: 0;
            transform: translate(-50%, -50%) rotate(45deg);
            transform-origin: 50% 50%;
            background-color: var(--color-white);
          }

          ul {
            margin: 0;
            padding: 0;
            list-style: none;

            li {
              margin-bottom: 4px;
              border-bottom: 1px solid transparent;
              transition: border-color 0.3s ease;

              a {
                display: block;
                padding: 6px 0;
                color: var(--color-neutral-800);
                font-size: var(--font-size-xs);
                font-weight: 600;
                text-align: center;
                text-transform: uppercase;
                font-feature-settings: 'case' on;
              }

              &.current_page_item,
              &.current-menu-ancestor,
              &.current-menu-item,
              &:hover {
                border-color: var(--color-neutral-300);
              }
            }
          }

          &.toggled {
            transform: translate(-50%, 0);
            visibility: visible;
            opacity: 1;
          }
        }

      }

      .lang {
        display: flex;
        gap: 10px;
        align-items: center;

        img {
          width: 26px;
        }

        ul {
          flex: 1;
          margin: 0;
          padding: 0;
          list-style: none;

          li {
            a {
              color: var(--color-white);
              font-size: var(--font-size-xs);
              font-weight: 700;
              text-transform: uppercase;
              transition: opacity 0.3s ease;

              &:hover,
              &:focus {
                opacity: 0.6;
              }
            }
          }
        }
      }
    }
  }

  &.dark {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    padding-top: 110px;

    @media (max-width: 1680px) {
      padding-top: 90px;
    }

    @media (max-width: 1600px) {
      padding-top: 80px;
    }

    @media (max-width: 1440px) {
      padding-top: 70px;
    }

    @media (max-width: 1366px) {
      padding-top: 60px;
    }

    @media (max-width: 1024px) {
      padding-top: 20px;
    }

    .container-wide {
      .header-right {
        .additional-menu {
          ul {
            li {
              a {
                color: var(--color-neutral-800);
              }
            }
          }
        }

        .hamburger-menu {
          .hamburger-trigger {
            div {
              background-color: var(--color-neutral-800);
            }
          }

          .navigation {
            background-color: var(--color-neutral-25);

            &:before {
              background-color: var(--color-neutral-25);
            }
          }
        }

        .lang {
          ul {
            li {
              a {
                color: var(--color-neutral-800);
              }
            }
          }
        }
      }
    }
  }
}