.header {
  
  &.collapsed {
    .header-nav-mobile-close {
      display: none; 
    }
  }

  &:not(.collapsed) {
    .header-nav-mobile-open {
      display: none; 
    }

    .header-main-nav-links {
      display: flex;
    }
  }
}

.header-top {
  background-color: var(--color-tertiary);
  color: var(--color-primary);
  font-size: var(--font-size-small);

  a {
    display: none;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    padding: 10px;
    gap: 5px;
    align-items: center;

    @media (min-width: 576px) {
      display: flex;
    }

    &:hover {
      color: var(--color-black);

      svg {
        path {
          fill: var(--color-black);
        }
      }
    }
  }
}

.header-top-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.header-top-nav-language-switcher {
  select {
    border: none;
    font-size: var(--font-size-small);
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 201;
    background-color: transparent;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="%23004739" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right -2px center;

    
  }

  &:hover, &:focus {
    select {
      color: var(--color-black);
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right -2px center;
    }    
  }
}

.header-main-nav {
  display: flex;
  gap: 50px;
  justify-content: space-between;
  align-items: center;
}

.header-main-nav-brand {
  position: relative;
  z-index: 200;
  flex: 0 0 auto;
  font-size: 32px;
  padding: 20px 0;
  
  a {
    text-decoration: none;
  }
}

.header-main-nav-content {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header-main-nav-link-wrapper {
  position: relative;

  &:hover {
    .header-main-sub-nav {
      display: flex;
    }
  }
}

.header-main-nav-links {
  display: flex;

  @media (max-width: 768px) {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    justify-content: center;
    align-items: center;
  }
}

.header-main-nav-link {
  display: flex;
  align-items: flex-end;
  padding: 10px 0;
  text-decoration: none;
  font-size: var(--font-size-medium);
  line-height: var(--font-size-regular);
  position: relative;
  gap: 10px;

  @media (min-width: 768px) {
    font-size: var(--font-size-regular);
  }

  svg {
    display: none;

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

  &:focus, &:hover {
    color: var(--color-primary);

    svg {
      transform: rotate(180deg);
    }
  }

  &.active {
    color: var(--color-primary);
  }
}

.header-main-sub-nav {
  padding: 0 0 10px 0;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  @media (min-width: 768px) {
    position: absolute;
    top: 100%;
    left: 10px;
    display: none;
    border-radius: 5px;
    padding: 20px;
    min-width: 300px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    gap: 15px;
  }

  a {
    text-decoration: none;

    &:hover, &:focus {
      color: var(--color-primary);
    }
  }
}

.header-main-nav-mobile {
  display: block;
  position: relative;
  z-index: 100;
  cursor: pointer;

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